Skip to content

feat: introduce minWidth and maxWidth properties #4239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mxschll wants to merge 34 commits into
base: main
Choose a base branch
from
Open

feat: introduce minWidth and maxWidth properties #4239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
bdc3ad1
feat: add dropdown minWidth and maxWidth props
mxschll Feb 8, 2026
ade09c1
refactor: change default value for minWidth to undefined
mxschll Feb 8, 2026
b19322c
fix: dont stretch content when width provided
mxschll Feb 9, 2026
e647223
refactor: replace stretchWidth prop with minWidth and maxWidth
mxschll Feb 9, 2026
959351e
fix: dont set width when dropdown is nested
mxschll Feb 10, 2026
eae1787
feat: introduce max-content type
mxschll Feb 10, 2026
7837a7b
fix: hide block border on flexible width
mxschll Feb 10, 2026
16e8f6c
fix: replicate hide block border behaviour
mxschll Feb 10, 2026
93b7edc
fix: autosuggest sizing
mxschll Feb 10, 2026
ee95459
fix: adapt content on resize
mxschll Feb 10, 2026
0624fe1
refactor: simplify logic for hiding border
mxschll Feb 10, 2026
5bfb8f8
fix: dont remove class if minWidth provided
mxschll Feb 10, 2026
8c2b8fa
fix: restrict max width when expandToViewport=true
mxschll Feb 11, 2026
180dfca
fix: remove width constraints in button dropdown
mxschll Feb 11, 2026
9f47d67
chore: update dropdown tests
mxschll Feb 11, 2026
df86788
retrigger checks
mxschll Feb 11, 2026
ab1e09d
feat: allow any string value as width param
mxschll Feb 11, 2026
f0f88f2
fix: run stretch with
mxschll Feb 11, 2026
1caeaa6
chore: add unit test for minWidth and maxWidth
mxschll Feb 11, 2026
01ad9b6
fix: use rendered with for dimensions
mxschll Feb 11, 2026
966431d
chore: remove unused constraint
mxschll Feb 11, 2026
f324d2a
refactor: simplify interface
mxschll Feb 11, 2026
b22709c
fix: remove condition
mxschll Feb 12, 2026
8871fee
fix: remove border offset
mxschll Feb 12, 2026
62efd7c
chore: adapt integration test for changes
mxschll Feb 12, 2026
3925897
feat: introduce prop to hide block border
mxschll Feb 12, 2026
a886170
chore: remove unused props
mxschll Feb 12, 2026
06bdc08
fix: hide button dropdown block border
mxschll Feb 12, 2026
adc3437
fix: add block border to button dropdown
mxschll Feb 12, 2026
5987cd0
retrigger checks
mxschll Feb 12, 2026
195bac5
Merge remote-tracking branch 'origin/main' into dev-v3-schomax-dropdo…
mxschll Feb 12, 2026
0c8d124
fix: hide border in internal button dropdown
mxschll Feb 12, 2026
3891099
chore: formatting
mxschll Feb 12, 2026
3b7b749
refactor: remove redundant variable
mxschll Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions build-tools/utils/custom-css-properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const customCssPropertiesList = [
'stackedNotificationsDefaultBottomMargin',
// Dropdown Custom Properties
'dropdownDefaultMaxWidth',
'dropdownDefaultMinWidth',
// Spinner Custom Properties
'spinnerRotatorFrom',
'spinnerRotatorTo',
Expand Down
3 changes: 2 additions & 1 deletion pages/calendar/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export default function CalendarPage() {
<article>
<h1>Calendar page for a11y tests</h1>
<Dropdown
stretchWidth={true}
minWidth="trigger"
maxWidth="trigger"
stretchHeight={true}
open={true}
onDropdownClose={() => {}}
Expand Down
2 changes: 0 additions & 2 deletions pages/date-range-picker/month-calendar-permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,7 @@ export default function DateRangePickerCalendarPage() {
return (
<div style={{ insetBlockStart: `${i * 400}px`, position: 'relative' }}>
<Dropdown
stretchWidth={true}
stretchHeight={true}
stretchToTriggerWidth={false}
open={true}
onDropdownClose={() => {}}
onMouseDown={() => {}}
Expand Down
2 changes: 0 additions & 2 deletions pages/date-range-picker/year-calendar-permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,7 @@ export default function DateRangePickerCalendarPage() {
return (
<div style={{ insetBlockStart: `${i * 300}px`, position: 'relative' }}>
<Dropdown
stretchWidth={true}
stretchHeight={true}
stretchToTriggerWidth={false}
open={true}
onDropdownClose={() => {}}
onMouseDown={() => {}}
Expand Down
1 change: 1 addition & 0 deletions pages/dropdown/fixed-container.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default function () {
open={open}
onDropdownClose={() => setOpen(false)}
content={<ListContent n={5} />}
minWidth={'trigger'}
/>
</div>
<div className={styles.placeholder}>An extra element to enable page scroll</div>
Expand Down
16 changes: 8 additions & 8 deletions pages/dropdown/interior-fitting.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function DropdownScenario() {
<div className={clsx(styles.container, styles['container-wide'])}>
<div id="parentDropdown1" className={styles['dropdown-container']}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpenParent1(!openParent1)}>
Scenario 1
Expand All @@ -46,7 +46,7 @@ export default function DropdownScenario() {
<li id="childDropdown1">
<Dropdown
interior={true}
stretchWidth={false}
minWidth="trigger"
trigger={
<div className="trigger" onClick={() => setOpenChild1(!openChild1)}>
Expandable trigger
Expand All @@ -65,7 +65,7 @@ export default function DropdownScenario() {
<div className={clsx(styles.container, styles['container-wide'])}>
<div id="parentDropdown2" className={styles['dropdown-container']} style={{ insetInlineStart: '270px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpenParent2(!openParent2)}>
Scenario 2
Expand All @@ -78,7 +78,7 @@ export default function DropdownScenario() {
<li id="childDropdown2">
<Dropdown
interior={true}
stretchWidth={false}
minWidth="trigger"
trigger={
<div className="trigger" onClick={() => setOpenChild2(!openChild2)}>
Expandable trigger
Expand All @@ -97,7 +97,7 @@ export default function DropdownScenario() {
<div className={clsx(styles.container, styles['container-wide'])}>
<div id="parentDropdown3" className={styles['dropdown-container']} style={{ top: '170px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpenParent3(!openParent3)}>
Scenario 3
Expand All @@ -110,7 +110,7 @@ export default function DropdownScenario() {
<li id="childDropdown3">
<Dropdown
interior={true}
stretchWidth={false}
minWidth="trigger"
trigger={
<div className="trigger" onClick={() => setOpenChild3(!openChild3)}>
Expandable trigger
Expand All @@ -133,7 +133,7 @@ export default function DropdownScenario() {
style={{ insetInlineStart: '270px', insetBlockStart: '170px' }}
>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpenParent4(!openParent4)}>
Scenario 4
Expand All @@ -146,7 +146,7 @@ export default function DropdownScenario() {
<li id="childDropdown4">
<Dropdown
interior={true}
stretchWidth={false}
minWidth="trigger"
trigger={
<div className="trigger" onClick={() => setOpenChild4(!openChild4)}>
Expandable trigger
Expand Down
7 changes: 4 additions & 3 deletions pages/dropdown/interior-stretch-height.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function DropdownScenario() {
style={{ insetInlineStart: '100px', blockSize: '800px' }}
>
<Dropdown
stretchWidth={false}
minWidth="trigger"
stretchHeight={true}
trigger={
<Button className="trigger" onClick={() => setOpenParent1(!openParent1)}>
Expand All @@ -52,7 +52,7 @@ export default function DropdownScenario() {
>
<div id="dropdown2" className={styles['dropdown-container']} style={{ insetInlineStart: '100px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
stretchHeight={false}
trigger={
<Button className="trigger" onClick={() => setOpenParent2(!openParent2)}>
Expand All @@ -71,7 +71,8 @@ export default function DropdownScenario() {
>
<div id="dropdown3" className={styles['dropdown-container']} style={{ insetInlineStart: '100px' }}>
<Dropdown
stretchWidth={true}
minWidth="trigger"
maxWidth="trigger"
stretchHeight={true}
trigger={
<Button className="trigger" onClick={() => setOpenParent3(!openParent3)}>
Expand Down
8 changes: 4 additions & 4 deletions pages/dropdown/interior-with-wrapping.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function DropdownScenario() {
style={{ insetInlineStart: '100px' }}
>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpenParent5(!openParent5)}>
Scenario 5
Expand All @@ -43,7 +43,7 @@ export default function DropdownScenario() {
<li id="childDropdown5">
<Dropdown
interior={true}
stretchWidth={false}
minWidth="trigger"
trigger={
<div className="trigger" onClick={() => setOpenChild5(!openChild5)}>
Expandable trigger
Expand All @@ -66,7 +66,7 @@ export default function DropdownScenario() {
style={{ insetBlockStart: '170px', insetInlineStart: '190px' }}
>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpenParent6(!openParent6)}>
Scenario 6
Expand All @@ -79,7 +79,7 @@ export default function DropdownScenario() {
<li id="childDropdown6">
<Dropdown
interior={true}
stretchWidth={false}
minWidth="trigger"
trigger={
<div className="trigger" onClick={() => setOpenChild6(!openChild6)}>
Expandable trigger
Expand Down
4 changes: 1 addition & 3 deletions pages/dropdown/min-width.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ export default function DropdownScenario() {
Dropdown should have the width equal to the trigger width, if it is is larger than the <code>minWidth</code>
</li>
<li>
<code>stretchWidth</code> property takes precedence over <code>minWidth</code>. The dropdown grows greedily,
if <code>stretchWidth</code> is set to <code>true</code> (the default value)
Use <code>minWidth=trigger</code> and <code>maxWidth=trigger</code> to match trigger width exactly.
</li>
</ul>
<div id="minWidthDropdown">
Expand All @@ -38,7 +37,6 @@ export default function DropdownScenario() {
open={open}
onDropdownClose={() => setOpen(false)}
minWidth={800}
stretchWidth={false}
content={<ListContent n={10} />}
/>
</div>
Expand Down
10 changes: 5 additions & 5 deletions pages/dropdown/positioning.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function DropdownScenario() {
<div className={styles.container}>
<div id="topLeftDropDown" className={styles['dropdown-container']}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpen1(!open1)}>
Scenario 1
Expand All @@ -51,7 +51,7 @@ export default function DropdownScenario() {
<div className={styles.container}>
<div id="topRightDropDown" className={styles['dropdown-container']} style={{ insetInlineStart: '80px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpen2(!open2)}>
Scenario 2
Expand All @@ -66,7 +66,7 @@ export default function DropdownScenario() {
<div className={styles.container}>
<div id="bottomLeftDropDown" className={styles['dropdown-container']} style={{ top: '170px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpen3(!open3)}>
Scenario 3
Expand All @@ -81,7 +81,7 @@ export default function DropdownScenario() {
<div className={styles.container}>
<div id="topMiddleDropDown" className={styles['dropdown-container']} style={{ insetInlineStart: '20px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpen4(!open4)}>
Scenario 4
Expand All @@ -100,7 +100,7 @@ export default function DropdownScenario() {
style={{ insetInlineStart: '80px', insetBlockStart: '170px' }}
>
<Dropdown
stretchWidth={false}
minWidth="trigger"
trigger={
<Button className="trigger" onClick={() => setOpen5(!open5)}>
Scenario 5
Expand Down
6 changes: 3 additions & 3 deletions pages/dropdown/prefer-center.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function DropdownScenario() {
<div className={clsx(styles.container, styles['container-wide'])}>
<div id="leftDropdown" className={styles['dropdown-container']}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
preferCenter={true}
trigger={
<Button className="trigger" onClick={() => setOpen1(!open1)}>
Expand All @@ -43,7 +43,7 @@ export default function DropdownScenario() {
<div className={clsx(styles.container, styles['container-wide'])}>
<div id="centerDropdown" className={styles['dropdown-container']} style={{ insetInlineStart: '100px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
preferCenter={true}
trigger={
<Button className="trigger" onClick={() => setOpen2(!open2)}>
Expand All @@ -59,7 +59,7 @@ export default function DropdownScenario() {
<div className={clsx(styles.container, styles['container-wide'])}>
<div id="rightDropdown" className={styles['dropdown-container']} style={{ insetInlineStart: '250px' }}>
<Dropdown
stretchWidth={false}
minWidth="trigger"
preferCenter={true}
trigger={
<Button className="trigger" onClick={() => setOpen3(!open3)}>
Expand Down
2 changes: 1 addition & 1 deletion src/button-dropdown/category-elements/expandable-category-element.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,8 @@ const ExpandableCategoryElement = ({
content = (
<Dropdown
open={expanded}
stretchWidth={false}
interior={true}
hideBlockBorder={false}
expandToViewport={expandToViewport}
trigger={trigger}
content={
Expand Down
3 changes: 2 additions & 1 deletion src/button-dropdown/internal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,8 +359,9 @@ const InternalButtonDropdown = React.forwardRef(
>
<Dropdown
open={canBeOpened && isOpen}
stretchWidth={false}
stretchTriggerHeight={variant === 'navigation'}
minWidth={expandToViewport ? undefined : 'trigger'}
Copy link
Member Author

@mxschll mxschll Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

hideBlockBorder={false}
expandToViewport={expandToViewport}
preferCenter={preferCenter}
onDropdownClose={() => toggleDropdown()}
Expand Down
3 changes: 2 additions & 1 deletion src/date-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@ const DatePicker = React.forwardRef(
trigger
) : (
<Dropdown
stretchWidth={true}
minWidth="trigger"
maxWidth="trigger"
stretchHeight={true}
open={isDropDownOpen}
onDropdownClose={onDropdownCloseHandler}
Expand Down
2 changes: 0 additions & 2 deletions src/date-range-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,12 +312,10 @@ const DateRangePicker = React.forwardRef(
onKeyDown={onWrapperKeyDownHandler}
>
<Dropdown
stretchWidth={true}
stretchHeight={true}
open={isDropDownOpen}
onDropdownClose={() => closeDropdown()}
trigger={trigger}
stretchToTriggerWidth={false}
expandToViewport={expandToViewport}
dropdownId={dropdownId}
content={
Expand Down
Loading
Loading