feat(components): add ProgressIndicator

[seaerchin]

Problem

Design system has a progress indicator, which is not yet implemented (but is done so in forms). This PR ports and adapts the progress indicator over.

note: hover/progress states waiting for designer, will edit to use design tokens once done.

Solution

Port over ProgressIndicator from forms, edit to use design tokens, shift styling to themes file. Note that the current implementation of our ColorMode does not actually work with the useColorMode hook, as it hooks into a different Provider. the useColorMode hook uses a different provider (see here) than the ColorModeProvider (see here).

[netlify]

✅ Deploy Preview for objective-bell-0ffbfb canceled.

Name	Link
🔨 Latest commit	5d489d3
🔍 Latest deploy log	https://app.netlify.com/sites/objective-bell-0ffbfb/deploys/645e02c284fd6a0008b7a436

[karrui]

can use colorScheme instead of dark/light mode ba. that one more flexible? maybe can discuss more. also some theming declaration changes

[karrui]

Seems overkill for this. Could we just use the _dark property to denote the color in dark mode? Or could we just add a color prop since that is the only thing light or dark mode controls?

If we want dark/light mode differentiation:

activeIndicator: {
  ...
  bg: 'interaction.support.selected',
  _dark: {
    bg: 'base.content.inverse'
  }
}

else maybe just have a default color and allow users of the component to override it with the bg prop. (I'm leaning to this)

Also also prefer bg to backgroundColor prop for consistency.

[seaerchin]

done! preferred the dark/light as per hte suggestion (never knew about _dark lmao) cos i think the default dark mode colour will be good enough most of the time. it should still allow customisation iirc

[karrui]

prefer using _active css pseudo prop instead of a property. To do this, we could set data-active instead:

import { dataAttr } from '@chakra-ui/utils' // Required since any declaration of data-* is considered truthy, and this util removes the prop on any falsey value

...

<CircleIndicator
  ...
  data-active={dataAttr(idx === currActiveIdx)}
/>

[seaerchin]

thanks for this! i think i need to be more cognizant about using pseudo states

[karrui]

if data-active is used, then we can collapse the styling here into the theme:

// This file
<Box
      __css={styles.circleIndicator} // No more other props
      onClick={onClick}
/> 

// themes/ProgressIndicator
const baseStyle = {
  ...
  _hover: {
    bg: '...'
  },
  _active: {
    _focus: {
      bg: ...
      shadow: ...
    }
  }
}

[seaerchin]

TIL we can nest pseudo states!

[seaerchin]

build failed due to _dark ._. will double check using alpha 0.11 (builds fine on alpha 0.8); worst case will just remove the prop

[karrui]

Ill take over this PR