feat(button): Replace feel="secondary" with color={colors.white}

[justinanastos]

@cheapsteak warned me about this weird API before; here we are putting it back.

This will allow us to take a single variant and easily generate a config for our buttons in engine.

Example:

import { Button as SpaceKitButton } from '@apollo/space-kit/Button';
import { colors } from '@apollo/space-kit/colors';

function getButtonColor(intention: Props['intention']) {
  switch (intention) {
    case 'danger':
      return colors.red.base;
    case 'cancel':
      return colors.white;
    default: {
      const _assertUnreachable: never = intention;
    }
  }
}

interface Props extends React.ComponentProps<typeof SpaceKitButton> {
  intention: 'danger' | 'cancel';
}

export const Button: React.FC<Props> = ({
  children,
  intention,
  ...otherProps
}) => (
  <SpaceKitButton color={getButtonColor(intention)} {...otherProps}>
    {children}
  </SpaceKitButton>
);

[cheapsteak]

neat

Never thought to intentionally use a never type before.
Any chance you have an article handy if I want to read more about it? Or was this self-discovered?

[justinanastos]

@cheapsteak

neat

Never thought to intentionally use a never type before.
Any chance you have an article handy if I want to read more about it? Or was this self-discovered?

I don't remember where I saw this, but this talks about it briefly. http://ideasintosoftware.com/exhaustive-switch-in-typescript/

We're using this in a few places in Engine right now. I love this pattern because it doesn't let you break things by accident.

If you can think of one, I'd much rather use this with a nested ternary versus a function with a switch, but I haven't thought about how.

[justinanastos]

🚀 PR was released in v1.3.0 🚀