diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index d6d3b79cc47025..6e5b19f5616362 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -4,12 +4,12 @@ ### Breaking Changes -- `Autocomplete.Popup`, `Combobox.Popup`, `Select.Popup`, `SearchableChipSelect`, and `SearchableChipSelectControl`: The popup now defaults to a fixed anchor width. Use `popupWidth="content"` to restore content-sized width between the anchor and available viewport bounds ([#82087](https://github.com/WordPress/gutenberg/pull/82087)). +- `Autocomplete.Popup`, `Combobox.Popup`, `Select.Popup`, `SearchableChipSelect`, and `SearchableChipSelectControl`: The popup now defaults to a fixed anchor width. Use `width="content"` on Popups, or `popupWidth="content"` on composites, to restore content-sized width between the anchor and available viewport bounds ([#82087](https://github.com/WordPress/gutenberg/pull/82087), [#82193](https://github.com/WordPress/gutenberg/pull/82193)). - Portaled overlays (`AlertDialog`, `Autocomplete`, `Combobox`, `Dialog`, `Drawer`, `Menu`, `Popover`, and `Select`) now inherit the theme from their portal destination instead of re-emitting the trigger's nearest contextual theme. Default portals use the document root theme; custom portal containers use their DOM ancestry ([#82038](https://github.com/WordPress/gutenberg/pull/82038)). ### Enhancements -- `Autocomplete.Popup`, `Combobox.Popup`, `SearchableChipSelect`, `SearchableChipSelectControl`, `Select.Popup`, and `SelectControl`: Add `popupWidth` prop with preset width constraints (`anchor`, `content`, `sm`, `md`, `lg`, and `available`) for the item popup. `SelectControl` defaults to `content` to preserve prior popup sizing ([#82087](https://github.com/WordPress/gutenberg/pull/82087)). +- `Autocomplete.Popup`, `Combobox.Popup`, `SearchableChipSelect`, `SearchableChipSelectControl`, `Select.Popup`, and `SelectControl`: Add `width` on Popups and `popupWidth` on composites, with preset width constraints (`anchor`, `content`, `sm`, `md`, `lg`, and `available`) for the item popup. `SelectControl` defaults to `content` to preserve prior popup sizing ([#82087](https://github.com/WordPress/gutenberg/pull/82087), [#82193](https://github.com/WordPress/gutenberg/pull/82193)). - `Menu`: Use `Text` for item labels and descriptions to share typography and apply `text-wrap: pretty`. ([#82237](https://github.com/WordPress/gutenberg/pull/82237)) - `Text`: Apply `text-wrap: pretty` by default to improve line wrapping. ([#82133](https://github.com/WordPress/gutenberg/pull/82133)) diff --git a/packages/ui/src/form/primitives/autocomplete/popup.tsx b/packages/ui/src/form/primitives/autocomplete/popup.tsx index 5b06d5bd58ebda..28bcb49b626267 100644 --- a/packages/ui/src/form/primitives/autocomplete/popup.tsx +++ b/packages/ui/src/form/primitives/autocomplete/popup.tsx @@ -10,7 +10,7 @@ import type { AutocompletePopupProps } from './types'; export const Popup = forwardRef< HTMLDivElement, AutocompletePopupProps >( function Popup( - { className, portal, positioner, popupWidth, ...restProps }, + { className, portal, positioner, width, ...restProps }, ref ) { const popupContent = ( @@ -18,7 +18,7 @@ export const Popup = forwardRef< HTMLDivElement, AutocompletePopupProps >( ref={ ref } className={ clsx( itemPopupStyles.popup, - getItemPopupWidthClassName( popupWidth ), + getItemPopupWidthClassName( width ), className ) } { ...restProps } diff --git a/packages/ui/src/form/primitives/combobox/popup.tsx b/packages/ui/src/form/primitives/combobox/popup.tsx index 04ecb9c657d086..7b5adb3ee4b51a 100644 --- a/packages/ui/src/form/primitives/combobox/popup.tsx +++ b/packages/ui/src/form/primitives/combobox/popup.tsx @@ -10,7 +10,7 @@ import type { ComboboxPopupProps } from './types'; export const Popup = forwardRef< HTMLDivElement, ComboboxPopupProps >( function Popup( - { className, portal, positioner, popupWidth, ...restProps }, + { className, portal, positioner, width, ...restProps }, ref ) { const popupContent = ( @@ -18,7 +18,7 @@ export const Popup = forwardRef< HTMLDivElement, ComboboxPopupProps >( ref={ ref } className={ clsx( itemPopupStyles.popup, - getItemPopupWidthClassName( popupWidth ), + getItemPopupWidthClassName( width ), className ) } { ...restProps } diff --git a/packages/ui/src/form/primitives/searchable-chip-select/searchable-chip-select.tsx b/packages/ui/src/form/primitives/searchable-chip-select/searchable-chip-select.tsx index 745f6fbfe7af39..84b1dcc0da5a3b 100644 --- a/packages/ui/src/form/primitives/searchable-chip-select/searchable-chip-select.tsx +++ b/packages/ui/src/form/primitives/searchable-chip-select/searchable-chip-select.tsx @@ -121,7 +121,7 @@ export const SearchableChipSelect = forwardRef< - + { emptyContent } diff --git a/packages/ui/src/form/primitives/searchable-chip-select/types.ts b/packages/ui/src/form/primitives/searchable-chip-select/types.ts index 901d2fbad66908..0c9285405002a2 100644 --- a/packages/ui/src/form/primitives/searchable-chip-select/types.ts +++ b/packages/ui/src/form/primitives/searchable-chip-select/types.ts @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import type { ItemPopupWidthProps } from '../../../utils/css/item-popup'; +import type { ItemPopupWidth } from '../../../utils/css/item-popup'; import type { ComboboxCollectionProps, ComboboxEmptyProps, @@ -149,13 +149,28 @@ export type SearchableChipSelectProps = Omit< ComboboxRootProps< Item, true >, 'children' | 'items' | 'multiple' > & - ItemPopupWidthProps & Partial< Pick< ComboboxInputProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' > > & { + /** + * Controls how the popup width is constrained relative to its anchor. + * + * For all presets, the popup is never narrower than its anchor. + * + * - `'anchor'`: Fixed width matching the anchor width. + * - `'content'`: Width grows with item labels between the anchor and available + * viewport bounds. + * - `'sm'`: Fixed width at the small surface width token (`--wpds-dimension-surface-width-sm`). + * - `'md'`: Fixed width at the medium surface width token (`--wpds-dimension-surface-width-md`). + * - `'lg'`: Fixed width at the large surface width token (`--wpds-dimension-surface-width-lg`). + * - `'available'`: Fixed width at the available viewport width (`--available-width`). + * + * @default 'anchor' + */ + popupWidth?: ItemPopupWidth; /** * The array of option items. * diff --git a/packages/ui/src/form/primitives/select/popup.tsx b/packages/ui/src/form/primitives/select/popup.tsx index 2c7bf1f819cfe5..97d92bd65e041e 100644 --- a/packages/ui/src/form/primitives/select/popup.tsx +++ b/packages/ui/src/form/primitives/select/popup.tsx @@ -10,7 +10,7 @@ import type { SelectPopupProps } from './types'; export const Popup = forwardRef< HTMLDivElement, SelectPopupProps >( function Popup( - { className, portal, positioner, popupWidth, children, ...restProps }, + { className, portal, positioner, width, children, ...restProps }, ref ) { const popupContent = ( @@ -18,7 +18,7 @@ export const Popup = forwardRef< HTMLDivElement, SelectPopupProps >( ref={ ref } className={ clsx( itemPopupStyles.popup, - getItemPopupWidthClassName( popupWidth ), + getItemPopupWidthClassName( width ), className ) } { ...restProps } diff --git a/packages/ui/src/form/select-control/select-control.tsx b/packages/ui/src/form/select-control/select-control.tsx index 1688372609bc90..b269f8da662beb 100644 --- a/packages/ui/src/form/select-control/select-control.tsx +++ b/packages/ui/src/form/select-control/select-control.tsx @@ -39,7 +39,7 @@ export const SelectControl = forwardRef< > { triggerContent } - + { children !== undefined ? children : items?.map( ( item ) => ( diff --git a/packages/ui/src/utils/css/item-popup.ts b/packages/ui/src/utils/css/item-popup.ts index 16287fe7bbaadb..cb80b48315be0b 100644 --- a/packages/ui/src/utils/css/item-popup.ts +++ b/packages/ui/src/utils/css/item-popup.ts @@ -27,13 +27,13 @@ export type ItemPopupWidthProps = { * * @default 'anchor' */ - popupWidth?: ItemPopupWidth; + width?: ItemPopupWidth; }; export function getItemPopupWidthClassName( - popupWidth: ItemPopupWidth | undefined = 'anchor' + width: ItemPopupWidth | undefined = 'anchor' ): string | false { - switch ( popupWidth ) { + switch ( width ) { case 'available': return itemPopupStyles[ 'is-width-available' ]; case 'content': diff --git a/storybook/components-manifest.yml b/storybook/components-manifest.yml index 437383b03602a8..bd5efa10f79d1e 100644 --- a/storybook/components-manifest.yml +++ b/storybook/components-manifest.yml @@ -110,11 +110,11 @@ - className - finalFocus - initialFocus - - popupWidth - portal - positioner - render - style + - width - name: Autocomplete.Portal props: - className