An <Accordion> hides content behind a header. Typically found in forms, they hide complex content until the user interacts with the header.

An <Accordion> requires a title and content to show:

By default, <Accordion> components control their open state themselves, but can be controlled externally:

You can also render an uncontrolled accordion as open by default:

By default, the content of an <Accordion> isn't mounted until opened, after which, the content stays mounted:

This can be changed to either mount the content along with the rest of the <Accordion> or to mount the content each time the component is opened:

<Accordion> components can be grouped together:

When grouped, the <Accordion.Group> component is responsible for keeping track of which component is open. As before, by default, the component keeps its own internal state, but can be controlled externally, as well as with a default initial state.

Controlled/uncontrolled <Accordion.Group> components can have multiple components open at the same time by default as well:

You can configure an uncontrolled <Accordion.Group>component to only be able to have one child open at a time

An avatar (<Avatar>) is a compact information display. The information is abbreviated with an option to hover for an unabbreviated view.

<Badge> is a short piece of information or status descriptor for UI elements.

<Breadcrumb>s should be used as a navigational aid in your app or site. They indicate the current page's location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.

Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

• By default, Breadcrumb uses arrow keys to cycle through each item.
• Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.

<Button>s give people a way to trigger an action. They're typically found in forms, dialog panels, and dialogs. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

• For dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the container.
• For single-page forms and focused tasks, left-align buttons with the container.
• Always place the primary button on the left, the secondary button just to the right of it.
• Show only one primary button that inherits theme color at rest state. If there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
• Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
• Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (such as "Save") or cancels the action (such as "Cancel").

• Use sentence-style capitalization—only capitalize the first word.
• Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb is best. Include a noun if there is any room for interpretation about what the verb means. For example, "Delete folder" or "Create account".

• Always enable the user to navigate to focus on buttons using their keyboard.
• Buttons need to have accessible naming.
• Aria- and roles need to have consistent (non-generic) attributes.

A Card (<Card>) contains additional metadata or actions. This offers people a richer view into a file than the typical grid view.

• Incorporate metadata that is relevant and useful in this particular view.
• Don't use a document card in views where someone is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you're showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata.
• Don't use a document card if space is at a premium or you can't show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like “Share” buttons or view counts.

A card group (<Card.Group>) can be used to display a list or grid of cards.

• Ensure links are tab-able.
• Ensure data is relevant and if not, remove it.
• We need to revisit the density of each of the cards and content.
• Implement quick actions inside of the card as to prevent the user from providing additional clicks.

Small cards (default)

Medium cards

Wrapping group (default)

Non-wrapping group

Line Charts (<LineChart>) are a universal component to create charts for learning curve, metrics, cluster history, etc. We currently use the uPlot library.

A chart with multiple metrics, a title, a legend, an x-axis label, a y-axis label.

Highlight a specific metric in the chart.

When all points have x=0, the x-axis bounds should go from 0 to 1.

The component accepts an xRange prop to set a minimum and maximum x value for each XAxisDomain.

The component accepts yTickValues prop for y-axis tick values. The default setting uses scientific notation for very small or very large numbers:

The component accepts an xRange for the time axis, and can show a legend.

A Chart Grid (<ChartGrid>) can be used to place multiple charts in a responsive grid. There is a sync for the plot window, cursor, and selection/zoom of an x-axis range. There will be a linear/log scale switch, and if multiple X-axis options are provided, an X-axis switch.

Checkboxes (<Checkbox>) give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).

• Use a single check box when there's only one selection to make or choice to confirm. Selecting a blank check box selects it. Selecting it again clears the check box.
• Use multiple check boxes when one or more options can be selected from a group. Unlike radio buttons, selecting one check box will not clear another check box.

• Separate two groups of check boxes with headings rather than positioning them one after the other.
• Use sentence-style capitalization—only capitalize the first word.
• Don't use end punctuation (unless the check box label absolutely requires multiple sentences).
• Use a sentence fragment for the label, rather than a full sentence.
• Make it easy for people to understand what will happen if they select or clear a check box.

Mandatory checkbox - not implemented.

Mandatory checkbox with info sign - not implemented.

ClipboardButton (<ClipboardButton> provides a special button for the purpose of copying some text into the browser clipboard.
Note: This capability is only available on `https` and `localhost` hosts. `http` protocol is purposefully blocked for security reasons.

The Code Editor (<CodeEditor>) shows Python and YAML files with syntax highlighting. If multiple files are sent, the component shows a file tree browser.

• Use the readonly attribute to make code viewable but not editable.

The CodeSample component contains a block of code (bash, Python, or other) which is displayed for the user to view or copy with a ClipboardButton. Multi-line text is allowed, but single-line text is not wrapped.

The code is passed in the text prop and is not editable by the user.

A Collection (<Collection>) is a two-dimensional grid system that can be used to lay out major page areas or small user interface elements. The gap between items in a collection can be small, medium, or large.

We have a variety of colors that are available for use with the components in the UI Kit.

A <Column> wraps child components to be displayed in a vertical column.

The content within a Column can be aligned according to an align value.

A Column can have a vertical gap.

Column with gap set to 0:

Column with gap set to 8 (default):

Column with gap set to 16:

A Column can have a width, which is only applied when wrapped in a Row.

Row with 3 Fill Width (default) columns:

Row with 3 Hug Width columns:

Row with 3 Fixed pixel width columns:

Row with 3 columns of each width type:

A column can be hidden at mobile resolution

A <Row> wraps child components to be displayed in a horizontal row.

A Row can have a horizontal gap.

Row with gap set to 0:

Row with gap set to 8 (default):

Row with gap set to 16:

A Row can have its child components wrap.

A Row can have a fixed-pixel height.

Row with fixed-pixel height of 100px:

Rows can have its content alignment set with an align value

Top-aligned

Center-aligned (default)

Bottom-aligned

Rows can have its content justification set with a justifyContent value. Any valid value for the CSS property justify-content will be applied.

Space-between

Start

End

Rows can have a width value

Fill width

Fixed width

<Column>s and <Row>s can nest arbitrarily

DataGrid is used to display tabular data in a grid, and is implemented with the Glide Data Grid library.

• Infinite scroll is enabled by default. To use a paged view instead, use the isPaginated prop.
• Context Menus are optionally supported by passing a render function to the renderContextMenuComponent prop.
  • The onContextMenuComplete prop is used to handle context menu actions.
  • DataGrid optionally accepts generic types for the actions (strings) that can be done in a context menu (ContextAction) and the data passed to onContextMenuComplete when an action is completed (ContextActionData).
• Header Menus are optionally supported by passing an array of MenuItems to the getHeaderMenuItems prop.
  • These menus use hew Dropdowns, which is where the MenuItem type comes from.
• Columns are defined as an array of ColumnDefs. See also "Default column helpers" below. The columns prop should include widths for each column, and the order of this array determines the column order.
  • Updating column order and width is handled via the onColumnResize and onColumnsOrderChangeprops.
  • Pinned columns can be handled with the pinnedColumnsCount and onPinnedColumnsCountChange props.
  • staticColumns is for columns that will *always* be static, such as a checkbox column for row selection.
• The imperativeRef prop provides an imperative handle, including a scrollToTop helper and access to the current grid ref.
• Sorting and filtering should be handled outside this component, by changing the data value.
  • The sorts prop is only used to make sure the header displays the correct sort direction arrow.
• Selection requires some elements to be handled outside of the component:
  • A checkbox column should be included in the columns array. A defaultSelectionColumn helper is provided. See also "Default column helpers" below.
  • The selection column id should be included in the staticColumns prop's array value.
  • selection and onSelectionChange props are used to manage selection state in the parent component.

This component requires a "portal" div added to the app html (<div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" />) -- also see Glide Data Grid documentation.

DataGrid uses "custom renderers" for displaying content within cells. These custom renderers have methods for drawing custom HTML Canvas graphics, so that cell content need not be limited to the default renderers/cell types offered by Glide Data Grid.

These are the available renderers:

• checkboxCell
• linkCell
• loadingCell
• progressCell
• sparklineCell
• stateCell
• tagsCell
• textCell
• userAvatarCell

To use one of these renderers for a column's cells, the rendererfunction in the column definition should return a GridCell with the appropriate properties/values:

• kind should be GridCellKind.Custom
• data should include a kind property with the name of the renderer in kebab case:{kind: 'text-cell'} (DataGrid/custom-renderers exports string constants for this purpose). This kind values matches the cell with the correct custom renderer.
• Each custom renderer may also use additional properties on the dataproperty to receive arguments. The specific properties each custom renderer expects can be reviewed by looking at the type passed to `CustomRenderer` in each custom renderer in`DataGrid/custom-renderers/cells/`.

The column definitions provided in DataGrid/columns.ts use custom renderers and can serve as an example. See "Default column helpers" section below for more information.

DataGrid/columns.ts includes helpers for commonly used columns:

• Useful for creating dynamic/generic columns based on a dataPath:
  • defaultTextColumn
  • defaultDateColumn
  • defaultNumberColumn
    • also supports heatmap feature with HeatmapProps
• defaultSelectionColumn to support checkbox selection functionality
  • string for the id of the Selection column (MULTISELECT)
  • also uses headerIcons defined in DataGrid/icons.tsx

as well as the following useful exports:

• ColumnDef type
• DEFAULT_COLUMN_WIDTH
• MIN_COLUMN_WIDTH

Example DataGrid showing infinite scroll, column reordering, column resizing, and row selection:

DatePicker is a form element for the user to select a specific time, date, or month from a calendar UI. When using onChange, the returned value is a Dayjs object. The component accepts a subset of the props for the Antd.DatePicker, with the style prop replaced by our usage (width).

The picker prop can be set to select a month. Alternatively the showTime prop adds precision to the second.

An <Drawer> is a full-height overlaid sidebar which moves into the viewport from the left or right side.

Drawer appears from the left side in an animation. Similar to a Modal, it can be closed only by clicking a Close button (at top right) or Escape key.

If the drawer body has extra content, it is scrollable without hiding the header.

Drawer appears from the right side.

When a drawer has stateful content, that state is persisted when closed and re-opened.

A (<Dropdown>) is used to display a component when triggered by a child element (usually a button). This component can be a menu (a list of actions/options defined via the menu prop), or can be any arbitrary component, defined via the content prop, with default styling applied.

<Form> and <Form.Item> components are used for submitting user input. When these components wrap a user input field (such as <Input> or <Select>), they can show a standard label, indicate that the field is required, apply input validation, or display an input validation error.

A Glossary <Glossary> component displays a series of terms alongside their definitions or values.

Key

Value

Multiple values

Value 1

Value 2

Value 3

Component value

Arbitrary component

Value shouldn't overflow

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.

Key

Value

Multiple values

Value 1

Value 2

Value 3

Component value

Arbitrary component

Don't align text inside component value

Arbitrary component

Value shouldn't overflow

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.

An <Icon> component displays an icon from a custom font along with an optional tooltip.

Icon with tooltip

Icon sizes

Icon colors

All icons

The <InlineForm> allows people to have a simple form with just one input to interact with.

If using the Input.Password component, is important to pass the isPassword prop.

Controlled

Uncontrolled

Text fields (<Input>) give people a way to enter and edit text. They're used in forms, modal dialogs, tables, and other surfaces where text input is required.

• Use a multiline text field when long entries are expected.
• Don't place a text field in the middle of a sentence, because the sentence structure might not make sense in all languages. For example, "Remind me in [textfield] weeks" should instead read, "Remind me in this many weeks: [textfield]".
• Format the text field for the expected entry.

A spin button (<InputNumber>) allows someone to incrementally adjust a value in small steps. It's mainly used for numeric values, but other values are supported too.

• Place labels to the left of the spin button control. For example, "Length of ruler (cm)".
• Spin button width should adjust to fit the number values.

• Use a spin button when you need to incrementally change a value.
• Use a spin button when values are tied to a unit of measure.
• Don't use a spin button for binary settings.
• Don't use a spin button for a range of three values or less.

A search box (<InputSearch>) provides an input field for searching content within a site or app to find specific items.

• Don't build a custom search control based on the default text box or any other control.
• Use a search box without a parent container when it's not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.

• Use placeholder text in the search box to describe what people can search for. For example, "Search", "Search files", or "Search contacts list".
• Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can ensure that people's expectations are met by the capabilities of the search you're performing, which will reduce the possibility of frustration. The search entry point should be placed near the content being searched.

Not implemented

Not implemented

An input box (<InputShortcut>) for keyboard shortcuts.

<Link> lets the user navigate to another page by clicking or tapping on it.

Items in a list must have a title and icon, and can optionally have a subtitle, additional columns, or actions (displayed on hover).

List columns are evenly spaced, left-aligned, and have dynamic width. Customizing alignment and width should be handled by styling the components that are passed to the columns prop as column content.

Lists can be compact, with no subtitle or additional columns. Vertical spacing is reduced accordingly.

Lists will respect elevation and use the appropriate color values.

A Logview (<LogViewer>) prints events that have been configured to be triggered and return them to the user in a running stream.

• Prioritize accessibility and readability of the log entry as details can always be generated afterwards.
• Prioritize IntelliSense type of readability improvements as it helps scannability of the text.
• Provide the user with ways of searching & filtering down logs.

A <LogViewerSelect> adds a row of filters (Input and Dropdowns) above the logs. The example here is for layout / style purposes, and does not functionally filter the logs.

• Ensure that we don't overload the users with information --> we need to know what events we're listening to.
• Ensure the capability of searching/filtering log entries.

A <Message> displays persistent information related to the application state. Requires at least one of description or title. Optionally displays an action button and/or an icon.

A (<Nameplate>) displays an icon, a name, and an optional alias. The icon is displayed on the left, and the text fields are displayed on the right. If an alias is provided, it is displayed above the name in larger font. A 'compact' option reduces the size of the name for use in a smaller form or modal.

<Pagination> is the process of splitting the contents of a website, or section of contents from a website, into discrete pages. This user interface design pattern is used so users are not overwhelmed by a mass of data on one page. Page breaks are automatically set.

• Use ordinal numerals or letters of the alphabet.
• Indentify the current page in addition to the pages in immediate context/surrounding.

• 1
• 2
• 3
• 4
• 5
• •••
• 500
• 1 / page

• Always give the user the option to navigate to the first & last page -- this helps with sorts.
• Provide the user with 2 pages before/after when navigating 'island' page-counts.
• Provide the user with the first 4 or last 4 pages of the page-range.
• Ensure the FocusTrap is set to the whole pagination component so that user doesn't tabs in/out accidentally.

The Pivot control (<Tabs>) and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.

Tapping on a pivot item header navigates to that header's section content.

Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.

• Be concise on the navigation labels, ideally one or two words rather than a phrase.
• Use on content-heavy pages that require a significant amount of scrolling to access the various sections.

The active tab and body have elevation applied.

The Progress control (<Progress>) displays multiple colorful areas adding up to 100% progress.

Each progress bar part has a required CSS color and a percent value (from 0.0 to 1.0).

Adding the flat prop displays the progress bar with square corners and no drop shadow.

A title prop is displayed centered above the progress bar:

Shareholder Votes

Each progress bar part can have an optional label value. With the prop showTooltips, each bar part will have an individual tooltip.

With the showLegend prop, labels are displayed in a legend below the progress bar. Labels are exactly as sent (i.e. the percentages below are set in the label field).

The (<RadioGroup>) serves as a collection of options to choose from.

It can be represented as radio buttons or simple buttons.

Without a default value

Button style

Radio style

Row style

With a default value

Button style

Radio style

Row style

A responsive group (<ResponsiveGroup>) is a container that can responsively show and hide children as its size changes. The user can set the maximum number of visible children. The gap between items can be small, medium, or large.

Total number of elements: 2

Number of hidden elements: 0

Number of hidden elements: 0

A <RichTextEditor> is used for creating rich text documents. It can be single page documents or multi pages documents. Each page of document consists of a title and a sheet of document.

A Section component serves the purpose to encapsulate any type of content.

Section without title

Section with title

Section with title divider

Multiple sections

A Select (<Select>) combines a text field and a dropdown giving people a way to select an option from a list or enter their own choice.

• Use a select when there are multiple choices that can be collapsed under one title, when the list of items is long, or when space is constrained.

• Use single words or shortened statements as options.
• Don't use punctuation at the end of options.

• Select dropdowns render in their own layer by default to ensure they are not clipped by containers with overflow: hidden or overflow: scroll. This causes extra difficulty for people who use screen readers, so we recommend rendering the ComboBox options dropdown inline unless they are in overflow containers.

• By default, the Select truncates option text instead of wrapping to a new line. Because this can lose meaningful information, it is recommended to adjust styles to wrap the option text.

The spacing scale used in Hew has a base value of 2px and is used for paddings, margins, and gaps.

A <Spinner> indicates a loading state of a page or section.

This text has been loaded!

The SplitPane displays two resiszable sections of content. Additionally, it provides the ability to hide either pane.

A surface (<Surface>) is a container with an elevation and an optional hover state. By default a surface will be one elevation level higher than the surface it sits on, though this can be overridden.

The editable tags list (<Tags>) supports "add", "edit" and "remove" actions on individual tags.

• Don't use tags of the same content within one list.
• Tags are ordered alphabetically.
• Individual tags cannot be empty.

A <UIProvider> is also included in the UI kit, it is responsible for providing styling to children components. It requires a theme prop that is a Themeconfiguration with the custom theme options shown below. Additionally, it takes an optional themeIsDark prop to switch the supplied theme between light and dark mode.

There is also a useTheme hook that can be used from within the UI kit. Additionally, default themes are provided.

Several default themes are provided within the UI Kit via DefaultTheme the options are:

Returns properties related to the current Theme

themeSettings

Includes the css className used to provide the styling for the theme, and the current values for themeIsDark and current theme

getThemeVar

The UIProvider takes a Theme prop with the following properties:

• brand
• backgroundOnStrong
• statusSuccess
• stageBorder

A <Toast> component is used to display a notification message at the viewport. Typically it's a notification providing a feedback based on the user interaction.

A <Toggle> component represents switching between two states. This component is controlled by its parent and may optionally include a label.

Checked

With label

Disabled

A (<Tooltip>) is used to display a string value, and is triggered by interaction (either by click or hover) with a child element (usually a Button).

Without arrow

Tooltip on badge

Placement

Default Tree

Media queries are provided via Sass mixins, for styling that should only apply to mobile or desktop view. They can be imported into an scss file with @use 'hew/src/kit/scss/media-queries.scss'. Then, use @include media-queries.mobile { } or @include media-queries.desktop { } as the media query.

The `useMobile` hook is used when React components need to behave differently in mobile view.

The following text changes based on window width, using the `useMobile` hook: Window has desktop width