feat: introduce minWidth and maxWidth properties#4239
Conversation
Also moves maxWidth behavior if expandToViewport=true to the respective components, as this is a "feature" we want to keep for backward compatibility but it's not intended to be a part of the dropdown component.
mxschll
force-pushed
the
dev-v3-schomax-dropdown-sizing
branch
from
480dd67 to
f0f88f2
Compare
| open={canBeOpened && isOpen} | ||
| stretchWidth={false} | ||
| stretchTriggerHeight={variant === 'navigation'} | ||
| minWidth={expandToViewport ? undefined : 'trigger'} |
There was a problem hiding this comment.
When expandToViewport is enabled, the dropdown adjusts its size based on its content. This preserves the current behavior. The functionality has simply been moved from the dropdown component to this specific line of code.
| stretchWidth={!dropdownWidth} | ||
| stretchBeyondTriggerWidth={true} | ||
| minWidth={dropdownWidth ? dropdownWidth : expandToViewport ? undefined : 'trigger'} | ||
| maxWidth={getBreakpointValue('xxs')} // AWSUI-19898 |
There was a problem hiding this comment.
Sizing logic has been moved from the dropdown component to these props. The current behavior remains unchanged: when minimum width exceeds maximum width, the minimum width value takes precedence (default css behavior).
| } | ||
| open={multiselectProps.isOpen} | ||
| minWidth={expandToViewport ? undefined : 'trigger'} | ||
| maxWidth={getBreakpointValue('xxs')} // AWSUI-19898 |
There was a problem hiding this comment.
Sizing logic has been moved from the dropdown component to these props. The current behavior remains unchanged: when minimum width exceeds maximum width, the minimum width value takes precedence (default css behavior).
| stretchTriggerHeight={!!__inFilteringToken} | ||
| stretchBeyondTriggerWidth={true} | ||
| minWidth={expandToViewport ? undefined : 'trigger'} | ||
| maxWidth={getBreakpointValue('xxs')} // AWSUI-19898 |
There was a problem hiding this comment.
Sizing logic has been moved from the dropdown component to these props. The current behavior remains unchanged: when minimum width exceeds maximum width, the minimum width value takes precedence (default css behavior).
| }); | ||
|
|
||
| test('cannot expand beyond the XXS breakpoint', () => { | ||
| test('can expand to content width', () => { |
There was a problem hiding this comment.
The default behavior changed, so this test had to be adapted accordingly.
1 participant
Description
This PR introduces
minWidthandmaxWidthsizing props for the Dropdown component, replacing the previous boolean-based approach.Changes Made
minWidthandmaxWidthprops to the Dropdown component, allowing to define explicit width constraints instead of relying on boolean flagsminWidthandmaxWidthpropsexpandToViewport=trueout of the Dropdown component and into the respective consuming components. This ensures that width expansion does not exceed defined constraints ofxxsContext:
AWSUI-19898, feat: Allow dropdowns of autosuggest, select, and multiselect to expand beyond their trigger width #1423hideBlockBorder)Context:
AWSUI-21049,AWSUI-32517, fix: Prevent button dropdown divider from being shown for the last item #1961Related
[Quip proposal: RGJgABPXohP8]
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.