eui icon indicating copy to clipboard operation
eui copied to clipboard

Published 20 hours ago • verified publisher icon elastic

[Meta] Storybook

Open JasonStoltz opened this issue 2 years ago • 1 comments

As part of a larger effort to replace the existing EUI documentation and build up EUI into a more robust design system, we would like to build out a storybook for EUI.

Storybook spike: https://github.com/elastic/eui/issues/6583 Related https://github.com/elastic/eui/pull/6816, https://github.com/elastic/eui/issues/6652

Why add a storybook?

  • Better Developer Experience for our users -- we can better illustrate various use cases and states for components and create a space for them to explore the effect of various props and options.
  • Better testing for ourselves -- We will be able to visually diff our stories as we roll out updates, giving us more confidence that we are not breaking UX and causing regressions.
  • Better Developer Experience for EUI contributors -- Having an isolated space to develop components will be a huge improvement for our own development workflows.
  • Embeddable examples for our Design System website -- by creating a Storybook for EUI, authors documenting patterns and components in our upcoming Design System website will be able to embed functional examples hosted in Storybook.
  • Predictable discovery for Kibana developers - 30+ Storybooks are deployed across Kibana already, having our library in the same format and colocated will help developers find the components they need.

Some considerations

  • Our current docs system lets us dynamically switch library versions via a path parameter. We'd like to have a similar setup with the new storybook. This helps us compare visuals between versions and identify regressions.
  • Individual stories will be embedded into a larger documentation system. Most of the design guidance will live in that documentation site, so this storybook will primarily be a tool for our developers, not designers.

TODO: Task this out. Is the creation of individual stories a separate effort?

### Component stories
* [ ] EuiAccordion
* [ ] EuiAspectRatio
* [ ] EuiAutoSizer
* [ ] EuiAvatar
* [ ] EuiBadge
* [ ] EuiBadgeGroup
* [ ] EuiBasicTable
* [ ] EuiBeacon
* [ ] EuiBetaBadge
* [ ] EuiBottomBar
* [ ] EuiBreadcrumbs
* [ ] EuiButton
* [x] EuiButtonEmpty
* [x] EuiButtonGroup
* [x] EuiButtonIcon
* [ ] EuiCallOut
* [ ] EuiCard
* [ ] EuiCheckableCard
* [ ] EuiCheckbox
* [ ] EuiCheckboxGroup
* [ ] EuiCode
* [ ] EuiCodeBlock
* [x] EuiCollapsibleNav
* [x] EuiCollapsibleNavBeta
* [x] EuiCollapsibleNavGroup
* [ ] EuiCollapsibleNavItem
* [ ] EuiColorPaletteDisplay
* [ ] EuiColorPalettePicker
* [ ] EuiColorPicker
* [ ] EuiColorPickerSwatch
* [x] EuiComboBox
* [ ] EuiComboBoxInput
* [ ] EuiComboBoxOption
* [ ] EuiComboBoxOptionsList
* [ ] EuiComboBoxPill
* [ ] EuiComboBoxTitle
* [ ] EuiComment
* [x] EuiCommentEvent
* [ ] EuiCommentList
* [ ] EuiCommentTimeline
* [ ] EuiComponentDefaultsProvider
* [ ] EuiContext
* [ ] EuiContextMenu
* [ ] EuiContextMenuItem
* [ ] EuiContextMenuPanel
* [ ] EuiCopy
* [ ] EuiDataGrid
* [ ] EuiDatePicker
* [ ] EuiDatePickerRange
* [ ] EuiDelayHide
* [ ] EuiDelayRender
* [ ] EuiDescribedFormGroup
* [ ] EuiDescriptionList
* [ ] EuiDescriptionListDescription
* [ ] EuiDescriptionListTitle
* [ ] EuiDragDropContext
* [ ] EuiDraggable
* [ ] EuiDroppable
* [ ] EuiDualRange
* [x] EuiEmptyPrompt
* [x] EuiErrorBoundary
* [ ] EuiExpression
* [ ] EuiFacetButton
* [ ] EuiFacetGroup
* [x] EuiFieldNumber
* [ ] EuiFieldPassword
* [ ] EuiFieldSearch
* [ ] EuiFieldText
* [ ] EuiFilePicker
* [x] EuiFilterButton
* [ ] EuiFilterGroup
* [ ] EuiFlexGrid
* [ ] EuiFlexGroup
* [ ] EuiFlexItem
* [x] EuiFlyout
* [ ] EuiFlyoutBody
* [ ] EuiFlyoutFooter
* [ ] EuiFlyoutHeader
* [x] EuiFocusTrap
* [ ] EuiForm
* [ ] EuiFormControlLayout
* [ ] EuiFormControlLayoutDelimited
* [ ] EuiFormErrorText
* [ ] EuiFormFieldset
* [ ] EuiFormHelpText
* [ ] EuiFormLabel
* [ ] EuiFormLegend
* [ ] EuiFormRow
* [ ] EuiGlobalToastList
* [ ] EuiGlobalToastListItem
* [x] EuiHeader
* [x] EuiHeaderAlert
* [ ] EuiHeaderBreadcrumbs
* [ ] EuiHeaderLink
* [x] EuiHeaderLinks
* [x] EuiHeaderLogo
* [x] EuiHeaderSection
* [x] EuiHeaderSectionItem
* [x] EuiHeaderSectionItemButton
* [ ] EuiHealth
* [ ] EuiHideFor
* [ ] EuiHighlight
* [ ] EuiHorizontalRule
* [ ] EuiHue
* [ ] EuiI18n
* [ ] EuiI18nNumber
* [ ] EuiIcon
* [ ] EuiIconTip
* [ ] EuiImage
* [ ] EuiInlineEditText
* [ ] EuiInlineEditTitle
* [ ] EuiInMemoryTable
* [ ] EuiInnerText
* [ ] EuiInputPopover
* [ ] EuiKeyPadMenu
* [x] EuiKeyPadMenuItem
* [ ] EuiLink
* [ ] EuiListGroup
* [ ] EuiListGroupItem
* [ ] EuiLoadingChart
* [ ] EuiLoadingElastic
* [ ] EuiLoadingLogo
* [ ] EuiLoadingSpinner
* [ ] EuiMark
* [ ] EuiMarkdownEditor
* [ ] EuiMarkdownFormat
* [ ] EuiModal
* [ ] EuiModalBody
* [ ] EuiModalFooter
* [ ] EuiModalHeader
* [ ] EuiModalHeaderTitle
* [ ] EuiMutationObserver
* [ ] EuiNotificationBadge
* [ ] EuiOutsideClickDetector
* [ ] EuiOverlayMask
* [x] EuiPage
* [x] EuiPageBody
* [x] EuiPageHeader
* [ ] EuiPageHeaderContent
* [x] EuiPageHeaderSection
* [x] EuiPageSection
* [x] EuiPageSidebar
* [ ] EuiPageTemplate
* [ ] EuiPagination
* [ ] EuiPaginationButton
* [ ] EuiPanel
* [ ] EuiPinnableListGroup
* [ ] EuiPopover
* [ ] EuiPopoverFooter
* [ ] EuiPopoverTitle
* [ ] EuiPortal
* [ ] EuiProgress
* [x] EuiProvider
* [ ] EuiRadio
* [ ] EuiRadioGroup
* [ ] EuiRange
* [ ] EuiRefreshInterval
* [x] EuiResizableButton
* [x] EuiResizableCollapseButton
* [ ] EuiResizableContainer
* [ ] EuiResizeObserver
* [ ] EuiSaturation
* [ ] EuiScreenReaderLive
* [ ] EuiScreenReaderOnly
* [ ] EuiSearchBar
* [ ] EuiSearchBarFilters
* [ ] EuiSelect
* [ ] EuiSelectable
* [ ] EuiSelectableList
* [ ] EuiSelectableListItem
* [ ] EuiSelectableMessage
* [ ] EuiSelectableSearch
* [ ] EuiSelectableTemplateSitewide
* [ ] EuiShowFor
* [x] EuiSideNav
* [ ] EuiSkeletonCircle
* [ ] EuiSkeletonLoading
* [ ] EuiSkeletonRectangle
* [ ] EuiSkeletonText
* [ ] EuiSkeletonTitle
* [ ] EuiSkipLink
* [ ] EuiSpacer
* [x] EuiSplitPanel
* [ ] EuiStat
* [ ] EuiStep
* [ ] EuiStepHorizontal
* [ ] EuiStepNumber
* [ ] EuiSteps
* [ ] EuiStepsHorizontal
* [ ] EuiSubSteps
* [ ] EuiSuperDatePicker
* [ ] EuiSuperSelect
* [ ] EuiSuperUpdateButton
* [ ] EuiSwitch
* [ ] EuiTab
* [ ] EuiTable
* [ ] EuiTableBody
* [ ] EuiTableFooter
* [ ] EuiTableFooterCell
* [ ] EuiTableHeader
* [ ] EuiTableHeaderButton
* [ ] EuiTableHeaderCell
* [ ] EuiTableHeaderCellCheckbox
* [ ] EuiTableHeaderMobile
* [ ] EuiTablePagination
* [ ] EuiTableRow
* [ ] EuiTableRowCell
* [ ] EuiTableRowCellCheckbox
* [ ] EuiTableSortMobileItem
* [ ] EuiTabs
* [x] EuiThemeProvider
* [ ] EuiText
* [ ] EuiTextArea
* [x] EuiTextBlockTruncate
* [x] EuiTextTruncate
* [ ] EuiTimeline
* [ ] EuiTimelineItem
* [ ] EuiTimelineItemEvent
* [ ] EuiTimelineItemIcon
* [ ] EuiTitle
* [ ] EuiToast
* [ ] EuiToken
* [ ] EuiToolTip
* [ ] EuiTour
* [ ] EuiTourStep
* [ ] EuiTourStepIndicator
* [ ] EuiTreeView
* [ ] EuiValidatableControl
* [ ] EuiWrappingPopover

JasonStoltz avatar Apr 03 '23 20:04 JasonStoltz

Completed: Storybook set up and running locally with yarn storybook (https://github.com/elastic/eui/pull/6816)

Left to do:

  • Commit built Storybook app to source control so that EUI+ can embed them?... (not clear to me what the pattern should be for this)
  • Set up buildkite to start staging instances with Storybook
  • Discuss as a team what the stories for each component should look like and what patterns we want to adopt across the codebase
  • Discuss what we want to do in Storybook vs other frameworks (e.g. visual screenshot diffs, a11y tests)
  • Individual storybook creation (which is basically going down a massive list of each component)

cee-chen avatar Jun 20 '23 16:06 cee-chen

I'm going to close this issue as it seems to be superseded by https://github.com/elastic/eui/issues/7405

JasonStoltz avatar Mar 21 '24 17:03 JasonStoltz