chore: Refactored Button styles to use createStyles utility

[josh-bagwell]

Summary

Style refactor for buttons to work with new theming, branding, tokens, createStyles utility and cs prop.

Fixes: #2274

We want to more easily apply theming to Buttons and the styles need to be refactored to more easily apply those themed styles with new tokens.

Release Category

Components

BREAKING CHANGES

• We refactored how we styled Buttons to use our createStyles utility function. We don't anticipate
  this as a breaking change but, there may be slight changes to visual test.
• Icons will no longer be "filled" on toggle. This decision was made to not have the existing icon
  look different in the toggled state from default state.
• PrimaryButton: On the inverse variant, the focus ring is now consistent with the default variant of PrimaryButton. This will visually change the inverse variant to have a larger appearance when focused.
• colors will no longer support the focusRing option:

  import {focusRing} from '@workday/canvas-kit-react/common';
  
  // before
  <PrimaryButton
    colors={{
      // other colors
      focus: {
        // other colors
      focusRing: focusRing(/* options */)
      }
    }}
  />
  
  // after
  <PrimaryButton
    colors={{
      // other colors
      focus: {
        // other colors
      }
    }}
    css={{
      ':focus-visible': focusRing(/* options */)
    }}
  />;

---

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

/modules/react/button

[josh-bagwell]

looks like icons action bar needs to be updated

Should we consider making this a test as well in the future? I wouldn't have noticed this without you mentioning it to me.

I had to reset a default iconPosition.

[josh-bagwell]

In the PR toolbar icon button isn't filled: What's in master is filled:

This was a change we talked with design on. We decided that the icon shouldn't changed when toggled. This came up with segmented control on the tablet icon. It looks completely different so we decided to change it and not have it fill.

[mannycarrera4]

In the PR toolbar icon button isn't filled: What's in master is filled:

This was a change we talked with design on. We decided that the icon shouldn't changed when toggled. This came up with segmented control on the tablet icon. It looks completely different so we decided to change it and not have it fill.

We should probably add this as change to the upgrade guide

[mannycarrera4]

Focus seems to stay visible even after clicking the button.
Repo:

1. Go to primary button storybook example
2. Hit tab to focus the first button
3. Click down on the first button
4. Notice that the focus ring stays visible even after clicking with the mouse

Link

[mannycarrera4]

I think we should update the CustomStyles storybook example to use Button and maybe an example or two using the cs prop and createStyles to show people how to override things assuming Button is exported

[NicholasBoll]

Focus seems to stay visible even after clicking the button. Repo:

1. Go to primary button storybook example
2. Hit tab to focus the first button
3. Click down on the first button
4. Notice that the focus ring stays visible even after clicking with the mouse

Link

@mannycarrera4 We're no longer using the InputProvider to determine if the focus ring should be visible. That was our own heuristics. We're now using :focus-visible:

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)

[mannycarrera4]

EMOTIONAL DAMAGE