From ba5f4e81dab51904ae4e0f4f97878e94c93fcec2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 24 Sep 2026 20:02:09 +0900 Subject: [PATCH 1/6] UI: Add e2e Storybook popup item layout fixtures --- .../stories/e2e/item-popup.story.tsx | 182 ++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx diff --git a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx new file mode 100644 index 00000000000000..99044e0ed1c7ed --- /dev/null +++ b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx @@ -0,0 +1,182 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import type { CSSProperties } from 'react'; +import * as Autocomplete from '../../autocomplete'; +import * as Combobox from '../../combobox'; +import * as Select from '../../select'; + +const matrixStyle: CSSProperties = { + display: 'grid', + gridTemplateColumns: 'repeat(2, minmax(0, 320px))', + gap: 24, + padding: 24, +}; + +const headingStyle: CSSProperties = { + fontSize: 16, + marginBlock: '0 12px', +}; + +const detailStyle: CSSProperties = { + color: 'var(--wpds-color-foreground-content-neutral-weak)', + whiteSpace: 'nowrap', +}; + +const avatarStyle: CSSProperties = { + background: 'var(--wpds-color-background-interactive-brand-strong)', + borderRadius: '50%', + flexShrink: 0, + height: 16, + width: 16, +}; + +const comboboxItems = [ + 'Apple', + 'Banana', + 'Blackberry', + 'Blueberry', + 'Pineapple', + 'Create fruit', +]; + +const autocompleteItems = [ + 'Apple', + 'Apricot', + 'Avocado', + 'Blackberry', + 'Pineapple', +]; + +function RichItemLayouts() { + return ( +
+
+

Combobox items

+ + + + + Apple + Banana + + Blackberry + 99 in stock + + + + + + Pineapple with a long label that wraps onto + a second line in a narrow popup + + + + Create fruit + + + + +
+
+

Autocomplete items

+ + + + + + Apple + + + Apricot + 12 in stock + + + + + Black + berry + + + Pineapple with a long label that wraps onto a + second line in a narrow popup + + + + +
+
+ ); +} + +function SelectItemLayouts() { + return ( +
+

Select items

+ + + + + Apple + + Sweet and crisp. + + + + Banana + + + + Pineapple with a long label that wraps onto a second + line + + + Tropical fruit with a sweet taste. + + + + +
+ ); +} + +const meta: Meta = { + title: 'Design System/Components/Popup item layouts', + id: 'design-system-components-popup-item-layouts', +}; +export default meta; + +type Story = StoryObj; + +export const RichItems: Story = { + render: () => , +}; + +export const SelectItems: Story = { + render: () => , +}; From fb0ae942ea6dcc617e129cfb9a0e79f3eab31c1a Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 30 Sep 2026 13:25:22 +0900 Subject: [PATCH 2/6] Update popup item fixtures for label and description composition --- .../stories/e2e/item-popup.story.tsx | 81 ++++++++++++------- 1 file changed, 51 insertions(+), 30 deletions(-) diff --git a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx index 99044e0ed1c7ed..7264aa88c0fdef 100644 --- a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx +++ b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx @@ -16,16 +16,13 @@ const headingStyle: CSSProperties = { marginBlock: '0 12px', }; -const detailStyle: CSSProperties = { - color: 'var(--wpds-color-foreground-content-neutral-weak)', - whiteSpace: 'nowrap', -}; - const avatarStyle: CSSProperties = { background: 'var(--wpds-color-background-interactive-brand-strong)', borderRadius: '50%', - flexShrink: 0, + display: 'inline-block', height: 16, + marginInlineEnd: 8, + verticalAlign: 'middle', width: 16, }; @@ -60,30 +57,42 @@ function RichItemLayouts() { - Apple - Banana + + Apple + + + Banana + - Blackberry - 99 in stock + + Blackberry + + + 99 in stock + - - + Pineapple with a long label that wraps onto a second line in a narrow popup - + - Create fruit + + Create fruit + @@ -96,26 +105,38 @@ function RichItemLayouts() { - Apple + + Apple + - Apricot - 12 in stock + + Apricot + + + 12 in stock + - - Black - berry + + Black + berry + - Pineapple with a long label that wraps onto a - second line in a narrow popup + + Pineapple with a long label that wraps onto + a second line in a narrow popup + From a2876091c0f1613e11bb54340d9601ed91a5e37f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 30 Sep 2026 14:51:05 +0900 Subject: [PATCH 3/6] Cover wrapping popup item descriptions in e2e fixtures --- .../primitives/stories/e2e/item-popup.story.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx index 7264aa88c0fdef..361a9ab5c9e8d3 100644 --- a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx +++ b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx @@ -85,6 +85,11 @@ function RichItemLayouts() { Pineapple with a long label that wraps onto a second line in a narrow popup + + Sweet, tangy fruit with a firm texture that + works well in salads, smoothies, and + desserts. + + + Sweet, tangy fruit with a firm texture that + works well in salads, smoothies, and + desserts. + @@ -177,7 +187,8 @@ function SelectItemLayouts() { line - Tropical fruit with a sweet taste. + Sweet, tangy fruit with a firm texture that works + well in salads, smoothies, and desserts. From 7e95ab5730623c1340bbe05322b8d2a8457a6874 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 30 Sep 2026 15:35:43 +0900 Subject: [PATCH 4/6] Center avatars in popup item layout fixtures --- .../primitives/stories/e2e/item-popup.story.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx index 361a9ab5c9e8d3..8e998cc931bb23 100644 --- a/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx +++ b/packages/ui/src/form/primitives/stories/e2e/item-popup.story.tsx @@ -16,13 +16,17 @@ const headingStyle: CSSProperties = { marginBlock: '0 12px', }; +const avatarLabelStyle: CSSProperties = { + alignItems: 'center', + display: 'flex', + gap: 8, +}; + const avatarStyle: CSSProperties = { background: 'var(--wpds-color-background-interactive-brand-strong)', borderRadius: '50%', - display: 'inline-block', + flexShrink: 0, height: 16, - marginInlineEnd: 8, - verticalAlign: 'middle', width: 16, }; @@ -72,7 +76,7 @@ function RichItemLayouts() { - + - +