Skip to content

Commit b34a106

Browse files
mirkaadamsilverstein
mirka
authored and
adamsilverstein
committed
UI: Add Select primitive (#74661)
* UI: Add `Select` primitive * Use gap tokens * Remove unnecessary stories * Fix disabled styles * Update animation * Fix tsconfig * Add changelog * Update package.json * Fix link to composition docs * Remove unused class name * Default Item to `default` size * Fix InputBase to InputLayout
1 parent aba917d commit b34a106

23 files changed

Lines changed: 802 additions & 4 deletions

‎.stylelintrc.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,15 @@ module.exports = {
8383
],
8484
},
8585
],
86+
'property-no-unknown': [
87+
true,
88+
{
89+
ignoreProperties: [
90+
// https://github.com/css-modules/css-modules/blob/master/docs/composition.md
91+
'composes',
92+
],
93+
},
94+
],
8695
},
8796
},
8897
],

‎package-lock.json‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/components/src/utils/dropdown-motion.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// Motion configuration for dropdown-like popovers.
2+
// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css
23

34
export const DROPDOWN_MOTION = Object.freeze( {
45
SLIDE_DISTANCE: 4,

‎packages/private-apis/src/implementation.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
4242
'@wordpress/media-utils',
4343
'@wordpress/upload-media',
4444
'@wordpress/global-styles-ui',
45+
'@wordpress/ui',
4546
];
4647

4748
/*

‎packages/ui/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
- Add `Button` component ([#74415](https://github.com/WordPress/gutenberg/pull/74415), [#74416](https://github.com/WordPress/gutenberg/pull/74416), [#74470](https://github.com/WordPress/gutenberg/pull/74470)).
1919
- Add `InputLayout` primitive ([#74313](https://github.com/WordPress/gutenberg/pull/74313)).
2020
- Add `Input` primitive ([#74615](https://github.com/WordPress/gutenberg/pull/74615)).
21+
- Add `Select` primitive ([#74661](https://github.com/WordPress/gutenberg/pull/74661)).

‎packages/ui/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@
4949
"@wordpress/i18n": "file:../i18n",
5050
"@wordpress/icons": "file:../icons",
5151
"@wordpress/primitives": "file:../primitives",
52+
"@wordpress/private-apis": "file:../private-apis",
53+
"@wordpress/theme": "file:../theme",
5254
"clsx": "^2.1.1"
5355
},
5456
"devDependencies": {
@@ -57,7 +59,6 @@
5759
"@testing-library/jest-dom": "^6.6.3",
5860
"@types/jest": "^29.5.14",
5961
"@types/node": "^20.17.10",
60-
"@wordpress/theme": "file:../theme",
6162
"storybook": "^10.1.11"
6263
},
6364
"peerDependencies": {

‎packages/ui/src/form/primitives/constants.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Select as _Select } from '@base-ui/react/select';
2+
3+
/**
4+
* Shared positioning props for item popups (Select, Combobox, etc.).
5+
*/
6+
export const ITEM_POPUP_POSITIONER_PROPS = {
7+
align: 'start',
8+
sideOffset: 8,
9+
collisionPadding: 12,
10+
} satisfies Partial< _Select.Positioner.Props >;

‎packages/ui/src/form/primitives/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * as Field from './field';
22
export * as Fieldset from './fieldset';
33
export { Input } from './input';
44
export { InputLayout } from './input-layout';
5+
export * as Select from './select';

‎packages/ui/src/form/primitives/input-layout/style.module.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
height: 24px;
3434
}
3535

36-
&.is-disabled {
36+
&.is-disabled,
37+
&:has([data-can-disable-input-layout][data-disabled]) {
3738
background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
3839
border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
3940
color: var(--wpds-color-fg-interactive-neutral-disabled);
@@ -53,7 +54,7 @@
5354
outline: none;
5455
}
5556

56-
&:hover:not(.is-disabled, .is-borderless) {
57+
&:hover:not(.is-disabled, :has([data-can-disable-input-layout][data-disabled]), .is-borderless) {
5758
border-color: var(--wpds-color-stroke-interactive-neutral-active);
5859
}
5960
}

‎packages/ui/src/form/primitives/select/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { Item } from './item';
2+
export { Popup } from './popup';
3+
export { Root } from './root';
4+
export { Trigger } from './trigger';

0 commit comments

Comments
 (0)