eui
eui copied to clipboard
[Meta] [New docs] Convert components docs text content to MDX
Summary
We need to convert component docs content to MDX to be able to load it in docusaurus easily. This meta issue covers components text documentation only, excluding component previews and examples, prop tables, and playgrounds. These code-related elements must be converted to storybook stories first (#6674), then embedded into the MDX files created as deliverables of this meta issue.
Acceptance Criteria
- All existing component documentation pages available on the current docs site should be converted to MDX and saved to
/website/docs/components/<SNAKE CASE COMPONENT NAME>/overview.mdx - All text content should be converted to MDX, including but not limited to:
- headings
- paragraphs and text formatting (e.g., emphasis)
- links
- callouts
- inline code
- MDX files should be formatted using built-in Markdown features only. Please don't use EUI components, HTML tags, or CSS to achieve custom text formatting
- All MDX component docs should have frontmatter defined on top of the file following the format:
--- title: '<HUMAN-READABLE COMPONENT NAME, e.g., Combo box>' slug: '<SLUGIFIED, HUMAN-READABLE COMPONENT NAME, e.g., combo-box>' export_name: '<COMPONENT EXPORT NAME, e.g., EuiComboBox>' --- - All MDX component docs directories should have the
_category_.ymlfile created and including these properties:link: type: doc id: components/<SNAKE CASE COMPONENT NAME>/overview
Example directory structure
/website/docs/
components/
combo_box/
_category_.yml
overview.mdx
Content conversion script 👈🏻
You may use a script like this to automatically convert EUI page contents to Markdown.
### Converted components
* [x] EuiAccordion
* [x] EuiAspectRatio
* [ ] EuiAutoSizer
* [x] EuiAvatar
* [x] EuiBadge
* [x] EuiBadgeGroup
* [ ] EuiBasicTable
* [ ] EuiBeacon
* [ ] EuiBetaBadge
* [x] EuiBottomBar
* [x] EuiBreadcrumbs
* [x] EuiButton
* [x] EuiButtonEmpty
* [x] EuiButtonGroup
* [x] EuiButtonIcon
* [x] EuiCallOut
* [x] EuiCard
* [x] EuiCheckableCard
* [ ] EuiCheckbox
* [ ] EuiCheckboxGroup
* [ ] EuiCode
* [ ] EuiCodeBlock
* [x] EuiCollapsibleNav
* [x] EuiCollapsibleNavBeta
* [x] EuiCollapsibleNavGroup
* [x] EuiCollapsibleNavItem
* [ ] EuiColorPaletteDisplay
* [ ] EuiColorPalettePicker
* [ ] EuiColorPicker
* [ ] EuiColorPickerSwatch
* [x] EuiComboBox
* [x] EuiComboBoxInput
* [x] EuiComboBoxOption
* [x] EuiComboBoxOptionsList
* [x] EuiComboBoxPill
* [x] EuiComboBoxTitle
* [x] EuiComment
* [x] EuiCommentEvent
* [x] EuiCommentList
* [x] EuiCommentTimeline
* [ ] EuiComponentDefaultsProvider
* [ ] EuiContext
* [x] EuiContextMenu
* [x] EuiContextMenuItem
* [x] EuiContextMenuPanel
* [ ] EuiCopy
* [ ] EuiDataGrid
* [ ] EuiDatePicker
* [ ] EuiDatePickerRange
* [ ] EuiDelayHide
* [ ] EuiDelayRender
* [ ] EuiDescribedFormGroup
* [x] EuiDescriptionList
* [x] EuiDescriptionListDescription
* [x] EuiDescriptionListTitle
* [x] EuiDragDropContext
* [x] EuiDraggable
* [x] EuiDroppable
* [ ] EuiDualRange
* [x] EuiEmptyPrompt
* [ ] EuiErrorBoundary
* [ ] EuiExpression
* [x] EuiFacetButton
* [x] EuiFacetGroup
* [ ] EuiFieldNumber
* [ ] EuiFieldPassword
* [ ] EuiFieldSearch
* [ ] EuiFieldText
* [ ] EuiFilePicker
* [ ] EuiFilterButton
* [ ] EuiFilterGroup
* [x] EuiFlexGrid
* [x] EuiFlexGroup
* [x] EuiFlexItem
* [x] EuiFlyout
* [x] EuiFlyoutBody
* [x] EuiFlyoutFooter
* [x] EuiFlyoutHeader
* [ ] EuiFocusTrap
* [ ] EuiForm
* [ ] EuiFormControlLayout
* [ ] EuiFormControlLayoutDelimited
* [ ] EuiFormErrorText
* [ ] EuiFormFieldset
* [ ] EuiFormHelpText
* [ ] EuiFormLabel
* [ ] EuiFormLegend
* [ ] EuiFormRow
* [ ] EuiGlobalToastList
* [ ] EuiGlobalToastListItem
* [x] EuiHeader
* [x] EuiHeaderAlert
* [x] EuiHeaderBreadcrumbs
* [x] EuiHeaderLink
* [x] EuiHeaderLinks
* [x] EuiHeaderLogo
* [x] EuiHeaderSection
* [x] EuiHeaderSectionItem
* [x] EuiHeaderSectionItemButton
* [x] EuiHealth
* [ ] EuiHideFor
* [ ] EuiHighlight
* [x] EuiHorizontalRule
* [ ] EuiHue
* [ ] EuiI18n
* [ ] EuiI18nNumber
* [x] EuiIcon
* [x] EuiIconTip
* [x] EuiImage
* [ ] EuiInlineEditText
* [ ] EuiInlineEditTitle
* [ ] EuiInMemoryTable
* [ ] EuiInnerText
* [ ] EuiInputPopover
* [x] EuiKeyPadMenu
* [x] EuiKeyPadMenuItem
* [x] EuiLink
* [x] EuiListGroup
* [x] EuiListGroupItem
* [x] EuiLoadingChart
* [x] EuiLoadingElastic
* [x] EuiLoadingLogo
* [x] EuiLoadingSpinner
* [ ] EuiMark
* [ ] EuiMarkdownEditor
* [ ] EuiMarkdownFormat
* [x] EuiModal
* [x] EuiModalBody
* [x] EuiModalFooter
* [x] EuiModalHeader
* [x] EuiModalHeaderTitle
* [ ] EuiMutationObserver
* [ ] EuiNotificationBadge
* [ ] EuiOutsideClickDetector
* [ ] EuiOverlayMask
* [ ] EuiPage
* [ ] EuiPageBody
* [x] EuiPageHeader
* [x] EuiPageHeaderContent
* [x] EuiPageHeaderSection
* [ ] EuiPageSection
* [ ] EuiPageSidebar
* [ ] EuiPageTemplate
* [x] EuiPagination
* [x] EuiPaginationButton
* [x] EuiPanel
* [ ] EuiPinnableListGroup
* [x] EuiPopover
* [x] EuiPopoverFooter
* [x] EuiPopoverTitle
* [ ] EuiPortal
* [x] EuiProgress
* [ ] EuiProvider
* [ ] EuiRadio
* [ ] EuiRadioGroup
* [ ] EuiRange
* [ ] EuiRefreshInterval
* [ ] EuiResizableButton
* [ ] EuiResizableCollapseButton
* [x] EuiResizableContainer
* [ ] EuiResizeObserver
* [ ] EuiSaturation
* [ ] EuiScreenReaderLive
* [ ] EuiScreenReaderOnly
* [ ] EuiSearchBar
* [ ] EuiSearchBarFilters
* [ ] EuiSelect
* [ ] EuiSelectable
* [ ] EuiSelectableList
* [ ] EuiSelectableListItem
* [ ] EuiSelectableMessage
* [ ] EuiSelectableSearch
* [ ] EuiSelectableTemplateSitewide
* [ ] EuiShowFor
* [x] EuiSideNav
* [x] EuiSkeletonCircle
* [x] EuiSkeletonLoading
* [x] EuiSkeletonRectangle
* [x] EuiSkeletonText
* [x] EuiSkeletonTitle
* [ ] EuiSkipLink
* [x] EuiSpacer
* [ ] EuiSplitPanel
* [x] EuiStat
* [ ] EuiStep
* [ ] EuiStepHorizontal
* [ ] EuiStepNumber
* [x] EuiSteps
* [x] EuiStepsHorizontal
* [ ] EuiSubSteps
* [ ] EuiSuperDatePicker
* [ ] EuiSuperSelect
* [ ] EuiSuperUpdateButton
* [ ] EuiSwitch
* [x] EuiTab
* [ ] EuiTable
* [ ] EuiTableBody
* [ ] EuiTableFooter
* [ ] EuiTableFooterCell
* [ ] EuiTableHeader
* [ ] EuiTableHeaderButton
* [ ] EuiTableHeaderCell
* [ ] EuiTableHeaderCellCheckbox
* [ ] EuiTableHeaderMobile
* [ ] EuiTablePagination
* [ ] EuiTableRow
* [ ] EuiTableRowCell
* [ ] EuiTableRowCellCheckbox
* [ ] EuiTableSortMobileItem
* [x] EuiTabs
* [ ] EuiThemeProvider
* [x] EuiText
* [ ] EuiTextArea
* [ ] EuiTextBlockTruncate
* [ ] EuiTextTruncate
* [x] EuiTimeline
* [x] EuiTimelineItem
* [x] EuiTimelineItemEvent
* [x] EuiTimelineItemIcon
* [x] EuiTitle
* [x] EuiToast
* [ ] EuiToken
* [x] EuiToolTip
* [x] EuiTour
* [x] EuiTourStep
* [x] EuiTourStepIndicator
* [x] EuiTreeView
* [ ] EuiValidatableControl
* [ ] EuiWrappingPopover