components.md

Colors, Icons, Component Libraries in Kui

Kui divides theming into three aspects:

• Components, such as breadcrumbs and tables.
• Icons, such as a trash can icon.
• Colors of the component UI.

Kui strives to make these three orthogonal choices.

Components

Kui employs a combination of home-grown React components and components from third-party open source component frameworks. A selection of the latter components are currently hosted by an SPI, with support for Carbon Components and (partially) PatternFly v4. The remaining third-party components in use are not yet SPI'd.

How to Choose a Component Provider

Kui uses a React Context to allow for a choice of component provider. Currently, Carbon Component Library is the default choice. To inspect or modify this default, consult DefaultKuiConfiguration.

To use Patternfly 4 Library in your client, either modify the default in your fork, or add components="patternfly" to your use of the <Kui/> client component. For example, the following code will set Kui default client to use Patternfly 4 Library.

import { Kui, KuiProps } from '@kui-shell/plugin-client-common'

export default function MyKui(props: KuiProps) {
  return (
    <Kui productName={productName} components="patternfly" {...props}>
      {children}
    </Kui>
  )
}

SPI for Third Party Components

In this table carbon stands for Carbon Components, and pf4 stands for PatternFly v4.

Component	Model	Implemenatations
Breadcrumb	spi	carbon | pf4
Navigation	spi	carbon | pf4

Work In Progress: Third Party Components Not Yet under an SPI

The following is a comprehensive list of the third party components that are currently hard-wired to use Carbon Components:

• Badge
• Code Snippet
• Confirm
• LeftNavSidecar Content
• Form
• Loading
• Search
• TabCompletion
• Table
• Terminal Accordian
• ToolbarButton's TooltipIcon
• TopNavSidecar Tabs
• TopTabStribe

Icons

Kui has an SPI for icons. You may add new icons or add support for a new icon library by extending either the interface or the implementations. The SPI definition is here. Under the impl subdirectory, you will find the current implementations. The SPI delegate currently ties the choice of icon provider to the choice of component provider.

Colors

Coming soon.