docs: add EuiComboBox examples #7470
Conversation
|
You may notice that the story embeds are slow to interact with. This is because all of the iframes are loaded from the same origin, and storybook sends messages to itself times the number of loaded iframes, which causes a huge performance hit for event listeners. The simplest fix is to enable |
|
@tkajtoch I'm not seeing any way to get to the EuiComboBox docs anymore via the nav: 
This is on staging https://eui.elastic.co/pr_7470/new-docs/docs/components/navigation/combo_box/testing/ |
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
| }, []); | ||
| return ( | ||
| <EuiComboBox | ||
| singleSelection={ |
There was a problem hiding this comment.
I'd like to add an accessible label to the comboboxes so they pass axe scans. I think aria-label makes the most sense here where we've mentioned options in the advisory panel above.
| @@ -20,35 +20,49 @@ or passing a text node ID to the `aria-labelledby` prop. | |||
|
|
|||
| ::: | |||
|
|
|||
| <StoryEmbed storyId="components-euicombobox--default" view="docs" height={230} /> | |||
There was a problem hiding this comment.
I'd like to add an accessible label to these rendered <iframe> components. Since you're already spreading props with { ...rest }, you should be able to pass an aria-label here with a unique string for each one.
This will help us prevent axe errors on full page scans.
There was a problem hiding this comment.
Just curious - is there a way to pass Docusaurus's light/dark mode to the underlying Storybook embeds?
| let storybookBaseUrl = process.env.DOCS_STORYBOOK_BASE_URL; | ||
| if (!storybookBaseUrl) { | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| storybookBaseUrl = 'http://localhost:6006'; | ||
| } else { | ||
| storybookBaseUrl = 'https://eui.elastic.co/storybook'; | ||
| } | ||
| } |
There was a problem hiding this comment.
Random thought - instead of setting a new DOCS_STORYBOOK_BASE_URL env, could we not simply determine it based on the existing DOCS_BASE_URL env? e.g.
if (baseUrl.includes('localhost') {
storybookBaseUrl = 'http://localhost:6006';
} else if (baseUrl.includes('/pr_')) {
storybookBaseUrl = baseUrl.replace('/new-docs/', '') + '/storybook';
} else {
storybookBaseUrl = 'https://eui.elastic.co/storybook';
}
| @@ -27,6 +36,10 @@ const config: Config = { | |||
| locales: ['en'], | |||
| }, | |||
|
|
|||
| customFields: { | |||
| storybookBaseUrl: storybookBaseUrl, | |||
There was a problem hiding this comment.
me being annoying and nitty
| storybookBaseUrl: storybookBaseUrl, | |
| storybookBaseUrl, |
| // Storybook is skipping the Pick<> props from EuiComboBoxList for some annoying reason | ||
| onCreateOption: { control: 'boolean' }, // Set to a true/false for ease of testing | ||
| customOptionText: { control: 'text' }, | ||
| renderOption: { control: 'function' }, |
| }, | ||
| args: { |
There was a problem hiding this comment.
Same question as above - can we restore these args and replace the Default story with Playground? And I'd love for the playground to render with the control pane showing
| @@ -206,7 +206,7 @@ export class EuiComboBox<T> extends Component< | |||
| _EuiComboBoxProps<T>, | |||
| EuiComboBoxState<T> | |||
| > { | |||
| static defaultProps = { | |||
| static defaultProps: Partial<_EuiComboBoxProps<object>> = { | |||
There was a problem hiding this comment.
Just curious, why was this change necessary?
There was a problem hiding this comment.
I know this may be out of scope for this PR, but I really think it's worth considering streamlining our examples/documentation instead of adding stories we don't necessarily need. For example, I definitely want to see the isDisabled section be removed in favor of just the props/controls table. Honestly there's just so much organization that could be improved while we're here and I don't know if it makes sense to copy and paste what's existing rather than making conscious choices to only port what's actually useful.
|
Moving this back to a draft as it's still in progress / no longer in the review pipeline |
Summary
This PR adds EuiComboBox docs examples to storybook and embeds them in the new docusaurus docs.
EuiComboBox.defaultPropsto help storybook resolve component arg typesStoryEmbedcomponent to docusaurus that renders storybook previews inside iframesQA