K7 KUI

[cjcenizal]

End goal

We're going to implement a full set of K7 CSS components, which will later be used to implement the new K7 redesign.

NOTE: As we implement the K7 components, we will retain as many existing components as possible, to make migrating easier.

Steps

Setup

• Create new K7 branch and target this branch with subsequent PRs. https://github.com/elastic/kibana/tree/k7-ui-framework
• Remove all existing examples and components. [K7] Remove all UI Framework K6 CSS and examples. #12808
• Reorganize documentation styles so they all live in doc_site/components directory. Remove any non-component documentation styles. [K7] Reorganize UI Framework documentation styles so they all live in doc_site/components. #12809
• Establish directory structure for global styles. [K7] Create global_styles dir with sub-directories. #12833
• Create SCSS style guide. [K7] Add SCSS style guide. #12850
• Reorganize folder structure [k7] Reorganize kui folder structure  #12841
• reset.scss file. [K7] Add SCSS reset. #12837
• Mixin system for namespacing [k7] Mixin for naming sass naming schema #12842
• Create Yeoman generator for quickly creating new components and documentation. [K7] Add KUI Yeoman generator. Support creation of components and documentation. #12951
• Update documentation site with examples of components in the dark theme, perhaps with a global "dark theme" toggle. [UI Framework] [K7] Update uiFramework build task and webpack config to support themed CSS files. #13487 (review)

Architecture exploration

• Go through componentization exercise. Dissect a design and see how far we can break it down into components, to identify patterns in generalizable styles and app-specific styles.
• Attempt a scaled-down migration. Build components for the navigation or an app and implement them in Kibana. Assess the process for challenges and use this experience to estimate the scope of a Kibana-wide migration.
• Explore support for theming. How will these themes be compiled? How will our build process need to change? How do users create their own themes? [UI Framework] [K7] Update uiFramework build task and webpack config to support themed CSS files. #13487 (review)

Core components

• Variable system. KUI Sass Variables Refactor #11032
• Icon component. [K7] Add Icon component #12920
• Reactify Icon component. [K7] Create React Icon component. #13062
• Header components (dropdowns, menus, breadcrumbs). [K7]: Header / global nav sass #12935
• Reactify Header components. [K7] Add KeyPadMenu, Popover, and Header components. #13087
• Typography components. [K7] Add Typography components #13048
• Button components. [UI Framework] [K7]: Buttons and loader components #13269
• Link component.
• Tabs component. [UI Framework] [K7] KuiTabs component #13280
• Callout (InfoPanel) components. [UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306
• Typographic vertical rhythm support. [UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306
• Table components. [UI Framework] [K7] Add KuiTable component. #13249
• Modal components. [K7] Animate and stylize modals #13276
• SideNav components. [UI Framework][K7]: Side nav component #13304
• Accordion component.
• Toast notification components. [UI Framework] [K7] Add KuiToast and KuiGlobalToastList components. #13441
• Fatal error state component.
• Temporary error state component.
• Form components (TextInput, SearchInput, CheckBox, Select, TextArea, Label). [UI Framework][K7]: Form components #13435
• Implement test layouts (table view, text content view, form view).
• Advanced table components: column sort arrows, pagination, row limit customization
• Typographic "vertical" rhythm?

TODO cleanup

• Account for bottom bar padding [k7][UI Framework]: Figure out bottom bar padding issues. #14180

More specific components

• ComboBox component. [UI Framework] [K7] ComboBox component #14561
• Menu components.
• Expression components.
• Query bar components.
• Datepicker components.
• Tree navigation components.
• Left side table headers.
• Dasbhoard card
• Avatars
• Tooltips
• Inline edit form
• Table search pattern
• Global search patterns
• Alert list
• Description list