KUI -> EUI conversion guide

[cjcenizal]

Codemods

@bmcconaghy suggested using codemods to perform as many of these migrations as possible. He'll own the initiative for learning how to use this and similar tools effectively.

base.less classes

This conversion is complicated by the presence of kui prefixed classes in base.less. I'll add notes for these classes in a separate section below.

Kibana UI Framework

KuiActionItem

Use EuiFlexGroup.

KuiBadge

Use EuiBadge.

KuiBar

Use EuiFlexGroup.

KuiButton

Use EuiButton.

KuiButtonGroup

@snide Will create a EuiButtonGroup component.

KuiCard

Use EuiCard (in progress).

KuiCardGroup

Use EuiFlexGroup. Create a pattern for this.

KuiCodeEditor

Use EuiCodeEditor.

KuiCollapseButton

Use EuiButtonIcon.

KuiColorPicker

Use EuiColorPicker. Needs to be migrated to EUI.

KuiColumn

Use EuiFlexGroup and EuiFlexGrid.

KuiContextMenu

Use EuiContextMenu.

KuiEmptyTablePrompt

Use EuiFlexGroup. Create a pattern for this.

KuiEvent

No longer in use

KuiEventMenu

No longer in use

KuiExpression

Use EuiExpression.

KuiFlex

Use EuiFlexGroup, etc.

KuiForm

Use EuiFormRow wherever possible for groups of labels, inputs, and validation/explanatory text.

• KuiLabel -> EuiFormLabel
• KuiTextInput -> EuiFieldText
• KuiAssistedInput -> Check with @snide
• KuiSearchInput -> EuiFieldSearch
• KuiStaticInput -> EuiText
• KuiTextArea -> EuiTextArea
• KuiCheckBox -> EuiCheckbox
• KuiSelect -> EuiSelect

KuiFieldGroup

Use EuiFlexGroup.

KuiGallery

Use EuiPanel. Create a pattern for this. Needs a Eui component for the individual item from @snide.

KuiHeaderBar

Use EuiFlexGroup.

KuiIcon

Use EuiIcon.

KuiInfoButton

Use EuiButtonIcon.

KuiInfoPanel

Use EuiCallOut.

KuiKeyboardAccessible

Use EuiKeyboardAccessible.

KuiLink

Use EuiLink.

KuiLocalNav

KuiLocalNav is actually comprised of a number of components.

• KuiLocalNav
• KuiLocalNavRow
• KuiLocalNavRowSection
• KuiLocalTab
• KuiLocalTabs
• KuiLocalTitle

We'll have to retain these components until we can migrate our global navigation to EuiHeader. We'll keep these inside of the ui_framework directory until we find a better place for them (e.g. inside of kibana/src).

KuiMenu

Try using EuiTable, but make sure that the lack of a header doesn't create accessibility problems for screen readers.

KuiMenuButton

Use small EuiButton.

KuiMicroButton, KuiMicroButtonGroup

Use EuiButtonIcon and EuiFlexGroup.

KuiModal

Use EuiModal.

KuiPager

Use EuiPagination.

KuiPanel

Use EuiPanel. Needs some elaboration regarding titling and other content.

KuiPanelSimple

Use EuiPanel.

KuiPopover

Use EuiPopover.

KuiScreenReaderOnly

Use EuiScreenReaderOnly.

KuiStatusText

Use EuiFlexGroup.

KuiTable

Use EuiTable.

KuiListingTable and kuiControlledTable are essentially just a KuiTable plus KuiToolBar. So the KuiTable can be converted to EuiTable and KuiToolBar into EuiFieldSearch, EuiContextMenu, and EuiPagination.

KuiTabs

Use EuiTabs.

KuiToggleButton

Use EuiAccordion.

KuiToolBar

Remove entirely. Use EuiFieldSearch, EuiContextMenu, and EuiPagination instead. Create demo.

KuiTypography

• KuiTitle -> EuiTitle (large)
• KuiSubTitle -> EuiTitle (default)
• KuiTextTItle -> EuiTitle (small)
• KuiText -> EuiText
• KuiSubText -> EuiText (extra small)
• KuiSubduedType -> EuiText and <EuiTextColor color="secondary">

KuiVerticalRhythm

Use EiuSpacer to create gaps. How do the sizes correlate?

base.less kui classes

kuiFormSection

kuiFormSubSection

kuiFormLabel

Replace this class with euiFormLabel.

Use EuiFormRow wherever possible for groups of labels, inputs, and validation/explanatory text.

kuiFormSubLabel

kuiOptionLabel

kuiFormPanel

kuiFormSubLabel

kuiInputNote

kuiList, kuiListItem

kuiSideBar

kuiSideBarSelect

kuiSideBarInput

kuiSideBarSection

kuiSideBarSectionTitle

kuiSideBarCollapsibleTitle

kuiSideBarFormSectionTitle

kuiSideBarFormRow

kuiSideBarOptionsLink

[cjcenizal]

Pretty sure we don't need this any more. :)