chore!: Refactored Button styles to use createStyles utility (#2285)

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.

[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:
  ```tsx
  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 */)
    }}
  />;
  ```

.storybook/preview.js

@@ -5,6 +5,9 @@ import routes from './routes';
 import {CanvasProviderDecorator} from '../utils/storybook';
 import theme from './theme';
 import {defaultCanvasTheme} from '@workday/canvas-kit-react/common';
+import "@workday/canvas-tokens-web/dist/css/base/_variables.css";
+import "@workday/canvas-tokens-web/dist/css/brand/_variables.css";
+import "@workday/canvas-tokens-web/dist/css/system/_variables.css";
 
 // set routes on window for testing the validity of the routes
 window.__routes = routes;
@@ -34,7 +37,9 @@ function storySort(a, b) {
     prefix('basic', 'aa'),
     prefix('default', 'ab'),
     prefix('testing', 'zzz'),
-    prefix('examples', 'zz')
+    prefix('examples', 'zz'),
+    // Make sure upgrade guides follow chronological order by replacing `v9.0` with `v09.0`
+    value => value.replace(/v([1-9]\-0)/, '0$1')
   );
 
   const left = prefixFn(a[0]);

cypress/integration/ExpandableContainer.spec.ts

@@ -15,12 +15,7 @@ describe('ExpandableContainer', () => {
     });
 
     it('should have aria-expanded set to false', () => {
-      cy.findByRole('button')
-        .should(
-          'have.attr',
-          'aria-expanded',
-          'false'
-        );
+      cy.findByRole('button').should('have.attr', 'aria-expanded', 'false');
     });
 
     it('should not show expanded content', () => {
@@ -33,12 +28,7 @@ describe('ExpandableContainer', () => {
       });
 
       it('should set aria-expanded to true', () => {
-        cy.findByRole('button')
-          .should(
-            'have.attr',
-            'aria-expanded',
-            'true'
-          );
+        cy.findByRole('button').should('have.attr', 'aria-expanded', 'true');
       });
 
       it('should show expanded content', () => {
@@ -62,12 +52,7 @@ describe('ExpandableContainer', () => {
         });
 
         it('should have aria-expanded set to false', () => {
-          cy.findByRole('button')
-            .should(
-              'have.attr',
-              'aria-expanded',
-              'false'
-          );
+          cy.findByRole('button').should('have.attr', 'aria-expanded', 'false');
         });
       });
     });

modules/docs/mdx/10.0-UPGRADE_GUIDE.mdx

@@ -10,13 +10,14 @@ any questions.
 
 - [Codemod](#codemod)
 - [Removals](#removals)
-	- [useBanner](#useBanner)
+  - [useBanner](#useBanner)
 - [Deprecations](#deprecations)
   - [InputIconContainer](#input-icon-container)
   - [Table](#table)
 - [Token Updates](#token-updates)
   - [Space and Depth](#space-and-depth)
 - [Component Updates](#component-updates)
+  - [Buttons](#buttons)
 - [Glossary](#glossary)
   - [Main](#main)
   - [Preview](#preview)
@@ -61,19 +62,23 @@ promoted or replaced a component or utility.
 ## useBanner
 
 We have removed the `useBanner` hook, the only function of which was to add `aria-labelledby` and
-`aria-describedby` references to the text inside of the Banner. This was not required for accessibility,
-and browsers can compute the name of the Banner from the text given inside.
+`aria-describedby` references to the text inside of the Banner. This was not required for
+accessibility, and browsers can compute the name of the Banner from the text given inside.
 
 ## Deprecations
 
 ### Input Icon Container
 
-We've deprecated `InputIconContainer` from [Main](#main) because it doesn't handle
-bidirectionality or icons at the start of an input. Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/story/components-inputs-text-input--icons) instead.
+We've deprecated `InputIconContainer` from [Main](#main) because it doesn't handle bidirectionality
+or icons at the start of an input. Please consider using
+[`InputGroup`](https://workday.github.io/canvas-kit/?path=/story/components-inputs-text-input--icons)
+instead.
 
 ### Table
 
-We've deprecated `Table` and `TableRow` as well as all of their exported members. Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+We've deprecated `Table` and `TableRow` as well as all of their exported members. Please consider
+using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic)
+instead.
 
 ## Token Updates
 
@@ -123,6 +128,57 @@ these sizes should change along with it. Since `px` are a fixed unit and do not
 
 ## Component Updates
 
+### Buttons
+
+We re-factored 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.
+
+**PR:** [#2285](https://github.com/Workday/canvas-kit/pull/2285)
+
+#### Button Icon Fill
+
+Icons will no longer be "filled" on toggle. This decision was made to not have the exisitng icon
+look so different in the toggled state.
+
+#### Button Focus Ring Update
+
+We found that focus ring was not consistent across all Buttons. We have made some changes to create
+a consistent focus ring across all Buttons and variants. These will need to be taken note of due to
+some small changes visually with Buttons.
+
+- `PrimaryButton`: `inverse` variant now has the same focus ring as default variant and as
+  `SecondaryButton`.
+
+Also, `colors` will no longer support the `focusRing` option.
+
+```tsx
+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 */)
+  }}
+/>;
+```
+
 ## Glossary
 
 ### Main

modules/preview-react/pill/lib/Pill.tsx

@@ -36,27 +36,23 @@ const getButtonPillColors = () => {
       label: colors.blackPepper400,
       border: colors.licorice200,
     },
+    focus: {
+      icon: colors.licorice500,
+      background: colors.soap300,
+      border: colors.blueberry400,
+      label: colors.blackPepper400,
+    },
     hover: {
       icon: colors.licorice500,
       background: colors.soap400,
       border: colors.licorice400,
+      label: colors.blackPepper400,
     },
     active: {
       icon: colors.licorice500,
       background: colors.soap500,
       border: colors.licorice500,
-    },
-    focus: {
-      icon: colors.licorice500,
-      background: colors.soap300,
-      border: colors.blueberry400,
-      focusRing: focusRing({
-        width: 0,
-        inset: 'inner',
-        innerColor: colors.blueberry400,
-        outerColor: colors.blueberry400,
-        separation: 1,
-      }),
+      label: colors.blackPepper400,
     },
     disabled: {
       icon: colors.licorice100,
@@ -92,12 +88,7 @@ const getRemovablePillColors = (disabled?: boolean) => {
       icon: colors.licorice200,
       background: colors.soap300,
       label: colors.blackPepper400,
-
-      focusRing: focusRing({
-        width: 0,
-        innerColor: 'transparent',
-        outerColor: 'transparent',
-      }),
+      border: colors.licorice200,
     },
     disabled: {},
   };
@@ -147,8 +138,15 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
     }),
   },
   ({variant}) => ({
-    '&:focus': {
+    '&:focus, &:focus-visible': {
       borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+      ...focusRing({
+        width: 0,
+        inset: 'inner',
+        innerColor: colors.blueberry400,
+        outerColor: colors.blueberry400,
+        separation: 1,
+      }),
     },
   }),
   boxStyleFn
@@ -158,6 +156,13 @@ const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
   cursor: 'default',
   overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
   position: 'relative',
+  '&:focus-visibile, &.focus': {
+    ...focusRing({
+      width: 0,
+      innerColor: 'transparent',
+      outerColor: 'transparent',
+    }),
+  },
 });
 
 /**

modules/preview-react/pill/lib/PillIconButton.tsx

@@ -26,20 +26,19 @@ const getIconColors = () => {
   return {
     default: {
       icon: colors.licorice200,
+      border: 'initial',
     },
-
     hover: {
       icon: colors.licorice500,
+      border: 'initial',
     },
     active: {
       icon: colors.licorice500,
+      border: 'initial',
     },
     focus: {
       icon: colors.licorice500,
-
-      focusRing: focusRing({
-        innerColor: 'transparent',
-      }),
+      border: 'transparent',
     },
     disabled: {
       icon: colors.licorice100,
@@ -63,6 +62,11 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
     pointerEvents: 'all',
     cursor: 'pointer',
   },
+  '&.focus, &:focus-visible': {
+    ...focusRing({
+      innerColor: 'transparent',
+    }),
+  },
 });
 
 export const PillIconButton = createSubcomponent('button')({

modules/preview-react/segmented-control/lib/SegmentedControlItem.tsx

@@ -8,7 +8,6 @@ import {
   ButtonContainerProps,
   ButtonColors,
   ButtonSizes,
-  getMinWidthStyles,
 } from '@workday/canvas-kit-react/button';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
@@ -53,6 +52,21 @@ export interface ItemProps extends ButtonContainerProps {
   tooltipProps?: Omit<TooltipProps, 'children'>;
 }
 
+const getMinWidthStyles = (children: React.ReactNode, size: ButtonSizes) => {
+  switch (size) {
+    case 'large':
+      return children ? '112px' : '48px';
+    case 'medium':
+      return children ? '96px' : space.xl;
+    case 'small':
+      return children ? space.xxxl : space.l;
+    case 'extraSmall':
+      return children ? 'auto' : space.m;
+    default:
+      return children ? '96px' : space.xl;
+  }
+};
+
 const getButtonSize = (size: ButtonContainerProps['size']) => {
   switch (size) {
     case 'large':
@@ -76,18 +90,28 @@ const getIconButtonColors = (toggled?: boolean): ButtonColors => {
     },
     hover: {
       background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      border: toggled ? colors.licorice200 : 'transparent',
       icon: colors.licorice400,
       label: colors.licorice400,
     },
     active: {
       background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      border: toggled ? colors.licorice200 : 'transparent',
       icon: colors.licorice400,
       label: colors.licorice400,
     },
-    focus: {},
+    focus: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap200,
+      border: toggled ? colors.licorice200 : 'transparent',
+      icon: toggled ? colors.blackPepper400 : colors.licorice400,
+      label: toggled ? colors.blackPepper400 : colors.licorice400,
+    },
     disabled: {
       background: colors.soap200,
       opacity: '1',
+      icon: colors.licorice400,
+      border: toggled ? colors.licorice200 : 'transparent',
+      label: colors.blackPepper400,
     },
   };
 };

modules/react/action-bar/stories/visual-testing/stories_action-bar.tsx

@@ -76,7 +76,7 @@ export const ActionBarWithOverflowMenuStates = () => {
           },
           {
             label: 'Maximum Visible Items (as 5 buttons)',
-            props: {maximumVisible: items.length},
+            props: {maximumVisible: items.length, containerWidth: 830},
           },
           {
             label: 'Maximum Visible Items (400px width)',

modules/react/button/index.ts

@@ -1,20 +1,17 @@
-export {PrimaryButton, PrimaryButtonProps} from './lib/PrimaryButton';
-export {SecondaryButton, SecondaryButtonProps} from './lib/SecondaryButton';
-export {TertiaryButton, TertiaryButtonProps} from './lib/TertiaryButton';
-export {DeleteButton, DeleteButtonProps} from './lib/DeleteButton';
 export {
   DeprecatedButton as deprecated_Button,
   DeprecatedButtonProps,
 } from './lib/deprecated_Button';
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
-export {
-  BaseButton,
-  ButtonContainerProps,
-  BaseButtonProps,
-  getMinWidthStyles,
-  getPaddingStyles,
-} from './lib/BaseButton';
 export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';
+export * from './lib/PrimaryButton';
+export * from './lib/SecondaryButton';
+export * from './lib/TertiaryButton';
+export * from './lib/DeleteButton';
+export * from './lib/BaseButton';
+export * from './lib/ToolbarDropdownButton';
+export * from './lib/ToolbarIconButton';
+export * from './lib/types';