Giters

ClickHouse / click-ui

The home of the ClickHouse design system and component library.

Home Page:https://click-ui.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vertical Stepper component

gjones opened this issue · comments

commented

Summary

We need a vertical stepper component to indicate progress throughout the multi-step process. Note for devs, I'm namespacing the tokens stepperVertical and it wouldn't surprise me if we added a stepperHorizontal at some point in the future.

Figma

CleanShot 2023-06-23 at 14 28 20@2x

Tokens

  --click-stepper-vertical-connector-size-width: 0.188rem;
  --click-stepper-vertical-icon-space-y: 0.375rem;
  --click-stepper-vertical-icon-space-x: 0.375rem;
  --click-stepper-vertical-typography-label-default: var(--typography-font-weights-3) var(--typography-font-sizes-1)/var(--typography-font-line-height-3) "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;;
  --click-stepper-vertical-icon-radii: var(--border-radii-full);
  --click-stepper-vertical-icon-size-width: var(--click-image-medium-size-width);
  --click-stepper-vertical-icon-size-height: var(--click-image-medium-size-height);
  --click-stepper-vertical-icon-foreground-incomplete: var(--click-stepper-vertical-connector-background-default);
  --click-stepper-vertical-icon-stroke-default: var(--click-stepper-vertical-icon-foreground-default);
  --click-stepper-vertical-icon-stroke-default: var(--click-stepper-vertical-icon-foreground-default);
  --click-stepper-vertical-icon-stroke-complete: var(--palette-utility-transparent);
  --click-stepper-vertical-icon-stroke-incomplete: var(--palette-utility-transparent);
  --click-stepper-vertical-icon-foreground-default: var(--palette-neutral-0);
  --click-stepper-vertical-icon-foreground-complete: var(--click-stepper-vertical-icon-foreground-default);
  --click-stepper-vertical-icon-foreground-incomplete: var(--click-stepper-vertical-connector-background-default);
  --click-stepper-vertical-icon-background-complete: var(--click-stepper-vertical-connector-background-default);
  --click-stepper-vertical-icon-background-incomplete: lch(93.7 0.83 266);
  --click-stepper-vertical-icon-background-default: var(--palette-slate-900);
  --click-stepper-vertical-icon-background-complete: var(--click-stepper-vertical-connector-background-default);
  --click-stepper-vertical-connector-background-default: var(--click-stepper-vertical-icon-background-default);
  --click-stepper-vertical-connector-background-complete: var(--click-stepper-vertical-icon-background-default);
  --click-stepper-vertical-connector-background-incomplete: var(--click-stepper-vertical-icon-background-incomplete);
commented

@vineethasok implemented this. closing.