diff --git a/docs/decisions/0004-use-realistic-example-content-in-stories.md b/docs/decisions/0004-use-realistic-example-content-in-stories.md new file mode 100644 index 000000000000..2d6884d88968 --- /dev/null +++ b/docs/decisions/0004-use-realistic-example-content-in-stories.md @@ -0,0 +1,35 @@ +# 4. Use realistic example content in stories + +Date: 2026-02-16 + +## Status + +Accepted + +## Context + +Many component stories use generic labels and placeholder prose such as "Section +1 title" and lorem ipsum text. This kind of meta content can accidentally carry +the meaning of the pattern itself instead of validating whether the design is +clear in realistic usage. + +For example, sequence-based interactions can appear clear only because labels +use words like "Step", instead of because the component's visual and interaction +design communicates sequence on its own. + +Using realistic, task-oriented labels in stories helps us identify when a +component is relying on placeholder wording to explain behavior. It also gives +consumers better examples of how components read in product-like contexts. + +## Decision + +We will prefer realistic example content in stories over generic meta content +and lorem ipsum placeholders. Story content should use plausible user-facing +labels and supporting text that reflect real tasks. + +## Consequences + +- Stories become a more effective quality check for whether component affordance + is communicated by design, not placeholder wording. +- Storybook docs become more useful to consumers by showing product-like usage + examples. diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js index f78466c8c949..d3e5a64d6b05 100644 --- a/packages/react/src/components/Accordion/Accordion.stories.js +++ b/packages/react/src/components/Accordion/Accordion.stories.js @@ -84,42 +84,36 @@ export const Default = (args) => { const { onHeadingClick, ...restArgs } = args; return ( - +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Compare plan features and select the option that best matches your + team's expected usage.

- +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Invite collaborators by email and assign their workspace roles before + launch.

- +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Add billing information and choose whether to receive invoices by + email.

- Section 4 title (the title can be a node) + Review and confirm (title can be a node) }>

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Check your setup summary, then confirm to create the workspace for + your team.

@@ -157,47 +151,39 @@ export const Controlled = (args) => {

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Compare plan features and select the option that best matches your + team's expected usage.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Invite collaborators by email and assign their workspace roles + before launch.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Add billing information and choose whether to receive invoices by + email.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Check your setup summary, then confirm to create the workspace for + your team.

@@ -215,36 +201,32 @@ export const _WithLayer = (args) => { return ( - +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Compare plan features and select the option that best matches your + team's expected usage.

- +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Invite collaborators by email and assign their workspace roles + before launch.

- +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Add billing information and choose whether to receive invoices by + email.

- +

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Check your setup summary, then confirm to create the workspace for + your team.

diff --git a/packages/web-components/src/components/accordion/accordion.stories.ts b/packages/web-components/src/components/accordion/accordion.stories.ts index f2c9bca4537b..d992122f601b 100644 --- a/packages/web-components/src/components/accordion/accordion.stories.ts +++ b/packages/web-components/src/components/accordion/accordion.stories.ts @@ -80,47 +80,39 @@ export const Default = { ?isFlush="${isFlush}" ?disabled="${disabled}">

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Compare plan features and select the option that best matches your + team's expected usage.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Invite collaborators by email and assign their workspace roles + before launch.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Add billing information and choose whether to receive invoices by + email.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Check your setup summary, then confirm to create the workspace for + your team.

@@ -176,50 +168,42 @@ export const Controlled = { ?disabled="${disabled}">

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Compare plan features and select the option that best matches your + team's expected usage.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Invite collaborators by email and assign their workspace roles + before launch.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Add billing information and choose whether to receive invoices by + email.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Check your setup summary, then confirm to create the workspace for + your team.

@@ -277,40 +261,32 @@ export const WithLayer = { ?isFlush="${isFlush}" ?disabled="${disabled}"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Compare plan features and select the option that best matches your + team's expected usage. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Invite collaborators by email and assign their workspace roles + before launch. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Add billing information and choose whether to receive invoices by + email. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + Check your setup summary, then confirm to create the workspace for + your team.