Skip to content

fix: properly apply minwidth set by Tableview column menu#9838

Merged
LFDanLu merged 1 commit intomainfrom
fix_min_width
Mar 27, 2026
Merged

fix: properly apply minwidth set by Tableview column menu#9838
LFDanLu merged 1 commit intomainfrom
fix_min_width

Conversation

@LFDanLu
Copy link
Copy Markdown
Member

@LFDanLu LFDanLu commented Mar 25, 2026

No issue, from slack via quarry

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Inspect the wrapping div around the S2 TableView column resizing menu. It should have a min width applied to it now

🧢 Your Project:

RSP

@github-actions github-actions bot added the S2 label Mar 25, 2026
<div
style={UNSAFE_style}
className={(UNSAFE_className || '') + wrappingDiv}>
className={(UNSAFE_className || '') + mergeStyles(wrappingDiv, styles)}>
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

<Menu onAction={onMenuSelect} styles={style({minWidth: 128})}>

The above min-width wasn't making it through, resulting in cases like:

Image

Still trying to get the exact reproduction details, but it felt like said min width (and other user provided menu styles) should make it through to the Popover since they don't get added to the Menu in this case

Copy link
Copy Markdown
Member

@snowystinger snowystinger Mar 25, 2026

Choose a reason for hiding this comment

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

This would mean that styles are duplicated on AriaMenu and on wrapper div

But I think we actually want the minWidth (and other styles) on the Popover? And only applied isPopover is true?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

we skip applying the styles on the menu if isPopover is true, hence why on prod the minWidth wasn't making it through already:

className={menu({size, isPopover}, isPopover ? null : styles)}>

the above change is also within a isPopover branch (hard to see from just the diff) so there shouldn't be a duplication I believe:

if (isPopover) {
return (
<Popover
ref={ref}
padding="none"
hideArrow>
<div
style={UNSAFE_style}
className={(UNSAFE_className || '') + wrappingDiv}>
{content}
</div>
</Popover>
);
}

Copy link
Copy Markdown
Member

@snowystinger snowystinger Mar 25, 2026

Choose a reason for hiding this comment

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

gah i thought i'd checked that but my brain missed line 404 somehow

still a bit weird it goes on the div inside the popover and isn't applied to the Popover itself, with our changes to Popover, maybe that extra div is unnecessary now?

Copy link
Copy Markdown
Member Author

@LFDanLu LFDanLu Mar 25, 2026

Choose a reason for hiding this comment

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

I don't quite remember all the details but this was attempted prior to f9fc374#diff-0c586b0d4f573495a7818f614c64cb7293dd6d34ebdbce6f92f3dcd72009a073, but then we decided return to clamping down on allowed Popover style overrides hence bringing back the inner div.

The approach used in Menu falls in line with "as per discussion with team, if someone wants to modify their popover internals, they are expected to add a inner wrapping div themselves and turn off padding like custom dialog"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks for the history again

@LFDanLu LFDanLu added the small review Easy to review PR label Mar 25, 2026
@rspbot
Copy link
Copy Markdown

rspbot commented Mar 25, 2026

@LFDanLu LFDanLu added this pull request to the merge queue Mar 27, 2026
Merged via the queue into main with commit 93df536 Mar 27, 2026
29 checks passed
@LFDanLu LFDanLu deleted the fix_min_width branch March 27, 2026 20:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

S2 small review Easy to review PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants