@influxdata/clockface

Clockface

A React + Typescript UI Kit for building Chronograf and other Time Series visualization applications.

Documentation: https://influxdata.github.io/clockface

Patterns

Component Families

Components with sub-components are sub-classed to improve readablity of code and ease of use. Family parent is the only component in the family to import a stylesheet and all styles are namespaced accordingly. Style namespacing is largely based on BEM.

Example:

import {Garden} from '@influxdata/clockface'

<Garden> // Family Parent
  <Garden.Fence />
  <Garden.PlanterBox />
</Garden>

You can tell these are all related because of the Garden family namespace

.garden {
  display: flex;
}

.garden--fence {
  color: white;
}

.garden--planter-box {
  flex: 1 0 50%;
}

Common Prop Types

Clockface offers a variety of Types to make customizing the UI kit simple. For example, any component that can be rendered in different colors takes the ComponentColor type. Use of these common prop types throughout the UI kit ensures consistency.

Changelog

0.0.13

• #118: Organize documentation by dividing each component's stories into "Family" and "Examples"
• #118: Remove child count validation in Radio
• #118: Extend FormDivider to optionally render a horizontal rule inside itself
• #118: Add size and active props to SlideToggleLabel to allow its appearance to match its associated SlideToggle
• #117: Port DraggableResizer component family from InfluxDB and refactor to conform to Clockface patterns
• #116: Write documentation for Page family of components
• #114: Port Label component family from InfluxDB and refactor to conform to Clockface patterns
• #112: Allow refs to be passed through in all Button components