@workday/canvas-kit-docs 11.0.0-alpha.805-next.0 → 11.0.0

package/dist/es6/lib/docs.js

@@ -129231,8 +129231,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "width of graphic",
-            "deprecated": "Use `cs` to set width, `cs={{\"& svg\": {width: '1rem'}}}`"
+            "default": "width of graphic"
           }
         },
         {
@@ -129260,8 +129259,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "height of graphic",
-            "deprecated": "Use `cs` to set height, `cs={{\"& svg\": {height: '1rem'}}}`"
+            "default": "height of graphic"
           }
         },
         {
@@ -129968,8 +129966,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "width of graphic",
-            "deprecated": "Use `cs` to set width, `cs={{\"& svg\": {width: '1rem'}}}`"
+            "default": "width of graphic"
           },
           "defaultValue": {
             "kind": "symbol",
@@ -130002,8 +129999,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {
-            "default": "height of graphic",
-            "deprecated": "Use `cs` to set height, `cs={{\"& svg\": {height: '1rem'}}}`"
+            "default": "height of graphic"
           },
           "defaultValue": {
             "kind": "symbol",

package/dist/mdx/11.0-UPGRADE-GUIDE.mdx

@@ -14,8 +14,8 @@ any questions.
 ## Why You Should Upgrade
 
 Canvas Kit v11 is transitioning into a
-[new way of styling](https://github.com/Workday/canvas-kit/discussions/2265). Theming and building an in
-sync Canvas Kit CSS has been at the top of our minds. We've started using our new
+[new way of styling](https://github.com/Workday/canvas-kit/discussions/2265). Theming and building
+an in sync Canvas Kit CSS has been at the top of our minds. We've started using our new
 [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
 package to take advantage of
 [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and
@@ -164,8 +164,8 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 </FormField>;
 ```
 
-If you still want to use a `label` element outside of the context of a form, you can use our `Text` component
-instead.
+If you still want to use a `label` element outside of the context of a form, you can use our `Text`
+component instead.
 
 ---
 
@@ -645,11 +645,11 @@ prop.
 
 ```tsx
 // This will no longer be supported in a future major version
-<SystemIcon color="blueberry400" />
+<SystemIcon color="blueberry400" />;
 
 // Use new tokens instead.
-import {base} from '@workday/canvas-tokens-web'
-<SystemIcon color={base.blueberry400} />
+import {base} from '@workday/canvas-tokens-web';
+<SystemIcon color={base.blueberry400} />;
 ```
 
 🤖 The codemod will handle the change of renaming `styles` to `cs` for you automatically.
@@ -718,27 +718,18 @@ const MyComponent = StyledRadioButton('div')({
 - `graphicStyles` has been deprecated and will be removed in a future version as a part of
   implementation of stencils and new tokens. Consider using `graphicStencil` to get styles or class
   name.
-- `width` and `height` props have been deprecated and will be removed in a future version. Consider
-  using `cs` props instead to set `svg` sizes.
-
-```tsx
-// before
-<Graphic icon={myGraphic} width={160} />
-
-// after
-<Graphic icon={myGraphic} cs={{"& svg": {width: '10rem'}}} />
-```
 
 #### Icon
 
-This change only impacts internal Canvas Kit code. `Icon` component has been removed and is no longer
-used to build our icons. It has been replaced by our `Svg` component. Most of our icons now extend styles from `svgStencil`.
+This change only impacts internal Canvas Kit code. `Icon` component has been removed and is no
+longer used to build our icons. It has been replaced by our `Svg` component. Most of our icons now
+extend styles from `svgStencil`.
 
 #### SystemIcon
 
 - `SystemIconStyles` has been deprecated and will be removed in a future version as a part of
-  implementation of stencils and new tokens. Consider using `systemIconStencil` to get styles or class
-  name.
+  implementation of stencils and new tokens. Consider using `systemIconStencil` to get styles or
+  class name.
 
 - `accentHover` is deprecated and will be removed in a future version. Please use the following when
   overriding styles:
@@ -940,8 +931,8 @@ for this package.
 
 ### Did You Upgrade All Canvas Kit Related Packages?
 
-In order for all the packages to work in harmony, you must upgrade all Canvas Kit packages to the same version that
-you're using, including:
+In order for all the packages to work in harmony, you must upgrade all Canvas Kit packages to the
+same version that you're using, including:
 
 - `@workday/canvas-kit-react`
 - `@workday/canvas-kit-preview-react`

package/dist/mdx/preview-react/form-field/FormField.mdx

@@ -138,6 +138,12 @@ You can theme your error rings by wrapping an input in a `CanvasProvider` and de
 
 <ExampleCodeBlock code={ThemedError} />
 
+### Custom Styles
+
+Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
+check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="FormField" fileName="/preview-react/" />

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -137,6 +137,12 @@ Using a form library like [React Hook Form](https://www.react-hook-form.com/) is
 Reference this [CodeSandbox](https://codesandbox.io/s/radio-preview-with-react-hook-form-stn5vr) on
 how to use `RadioGroup` with React Hook Form.
 
+### Custom Styles
+
+Radio and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="RadioGroup" fileName="/preview-react/" />

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -72,6 +72,12 @@ The background color dictated by the `variant` will be dark or light based on th
 
 <ExampleCodeBlock code={Variants} />
 
+### Custom Styles
+
+Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
+information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="StatusIndicator" fileName="/preview-react/" />

package/dist/mdx/react/badge/CountBadge.mdx

@@ -49,6 +49,11 @@ the Accessibility guidance below this example for aditional information.
 
 <ExampleCodeBlock code={NotificationBadge} />
 
+### Custom Styles
+
+Count Badge supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Accessibility
 
 A common use case for `CountBadge` is displaying notifications, but there are other situations where

package/dist/mdx/react/button/button/Button.mdx

@@ -72,10 +72,9 @@ on a dark or colorful background such as `blueberry400`.
 
 ### Custom Styles
 
-We understand that there are instances in which consumers might need to adjust styles for specific
-use cases. All of our buttons extend our lower level base button props which extends style
-properties that come from `Box`. Below are some examples in which you can overwrite styles for all
-of our buttons. Please use this sparingly and try to adhere to the design system.
+All of our buttons support custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page)
+or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 

package/dist/mdx/react/button/button/examples/CustomStyles.tsx

@@ -1,85 +1,49 @@
 import React from 'react';
 
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 import {Grid} from '@workday/canvas-kit-react/layout';
-import {plusIcon, caretDownIcon} from '@workday/canvas-system-icons-web';
-import {space, colors} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-import styled from '@emotion/styled';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const getDropdownColors = () => {
-  return {
-    default: {
-      background: colors.berrySmoothie400,
-      icon: colors.frenchVanilla100,
-      label: colors.frenchVanilla100,
+const myButtonStencil = createStencil({
+  base: {
+    [buttonStencil.vars.background]: system.color.static.green.soft,
+    [buttonStencil.vars.label]: system.color.static.green.strong,
+    [systemIconStencil.vars.color]: system.color.static.green.strong,
+    [buttonStencil.vars.borderRadius]: system.shape.half,
+    border: `${px2rem(3)} solid transparent`,
+    '&:hover': {
+      [buttonStencil.vars.background]: system.color.static.green.default,
+      border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
+      [systemIconStencil.vars.color]: system.color.static.green.strong,
+    },
+    '&:active': {
+      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.label]: system.color.fg.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
     },
-    hover: {
-      background: colors.berrySmoothie500,
-      label: colors.frenchVanilla100,
-    },
-    active: {},
-    focus: {},
-    disabled: {},
-  };
-};
-
-const StyledPrimaryButton = styled(PrimaryButton)({
-  height: space.l,
-  fontStyle: 'italic',
+  },
 });
 
-const customStyles = createStyles({
-  height: space.l,
-  fontStyle: 'italic',
+const MyCustomButton = createComponent('button')({
+  Component: ({children, size, ...elemProps}: PrimaryButtonProps, ref, Element) => (
+    <PrimaryButton ref={ref} {...handleCsProp(elemProps, myButtonStencil({size}))}>
+      {children}
+    </PrimaryButton>
+  ),
 });
 
-const customColorTheme = {
-  palette: {
-    primary: {
-      main: 'purple',
-      contrast: 'turquoise',
-    },
-    alert: {
-      main: 'coral',
-    },
-    error: {
-      main: 'crimson',
-    },
-    success: {
-      main: 'aquamarine',
-    },
-    neutral: {
-      main: 'gray',
-    },
-    common: {
-      focusOutline: 'turquoise',
-    },
-  },
-};
+const myCustomStyles = createStyles({
+  padding: system.space.x4,
+  textTransform: 'uppercase',
+});
 
 export default () => (
-  <Grid gridGap="s" padding="s" gridTemplateColumns="repeat(auto-fit, minmax(240px, 1fr))">
-    <PrimaryButton
-      padding={space.l}
-      border="3px dotted red"
-      backgroundColor="cyan"
-      color={colors.blackPepper400}
-    >
-      Styled with style properties
-    </PrimaryButton>
-    <PrimaryButton colors={getDropdownColors()} icon={plusIcon} iconPosition="start">
-      Styled with colors prop
-    </PrimaryButton>
-    <StyledPrimaryButton icon={caretDownIcon} iconPosition="end">
-      Overwrite styles with emotion
-    </StyledPrimaryButton>
-    <PrimaryButton cs={customStyles} icon={caretDownIcon} iconPosition="end">
-      Overwrite styles with createStyles
-    </PrimaryButton>
-    <CanvasProvider theme={{canvas: customColorTheme}}>
-      <PrimaryButton>Custom Theme</PrimaryButton>
-    </CanvasProvider>
+  <Grid cs={{gap: px2rem(4), gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
+    <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>
+    <PrimaryButton cs={myCustomStyles}>Style Override Via Create Styles</PrimaryButton>
   </Grid>
 );

package/dist/mdx/react/card/card.mdx

@@ -30,16 +30,18 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
-## Custom Styles
+### Custom Styles
 
-You can customize `Card` styles by using the `cs` prop.
+Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
 
 <ExampleCodeBlock code={WithCustomStyles} />
 
 ## Stencils
 
 You can also use `Card` stencils to extend styles for your own custom components. This allows you to
-compose styles without using components directly. In the example below, we're extending `Card` stencils to create a custom `MenuCard` component.
+compose styles without using components directly. In the example below, we're extending `Card`
+stencils to create a custom `MenuCard` component.
 
 <ExampleCodeBlock code={WithStencils} />
 

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -112,6 +112,11 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
 
 <ExampleCodeBlock code={Error} />
 
+### Custom Styles
+
+Checkbox supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Checkbox" fileName="/react/" />

package/dist/mdx/react/combobox/Combobox.mdx

@@ -38,6 +38,12 @@ communicating with a server.
 
 <ExampleCodeBlock code={Autocomplete} />
 
+### Custom Styles
+
+Combobox and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Combobox" fileName="/react/" hideDescription />

package/dist/mdx/react/loading-dots/LoadingDots.mdx

@@ -28,6 +28,11 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={RTL} />
 
+### Custom Styles
+
+Loading Dots supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ### Adding screen reader support to loading animations
 
 Sometimes, letting users know when content has finished loading is just as important as asking users

package/dist/mdx/react/select/Select.mdx

@@ -233,9 +233,9 @@ properties of `id` or `text`. Using these helper functions sets the `serverId` t
 
 ### Complex
 
-When registering items in an array of objects, it's common to have the text that is displayed to the user be
-different than an id. In this example, `serverId` and `label` properties need to be remapped to
-`id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
+When registering items in an array of objects, it's common to have the text that is displayed to the
+user be different than an id. In this example, `serverId` and `label` properties need to be remapped
+to `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
 `text` and `id`, there would be no need for this.
 
 <ExampleCodeBlock code={Complex} />
@@ -261,10 +261,10 @@ const items = [
 
 - `getId`: This is an optional function to return the id of an item. If not provided, the default
   function will return the `id` property from the object of each item. If you did not provide
-  `items`, do not override this function. Instead provide static
-  items via JSX. the list will create an internal array of items where `id` is the only property and
-  the default `getId` will return the desired result. **Note: If your array of objects has a
-  different property for `id`, like `serverId`, use this function to set the id.**
+  `items`, do not override this function. Instead provide static items via JSX. the list will create
+  an internal array of items where `id` is the only property and the default `getId` will return the
+  desired result. **Note: If your array of objects has a different property for `id`, like
+  `serverId`, use this function to set the id.**
 
   ```tsx
   const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]
@@ -300,6 +300,12 @@ const items = [
   </Select>
   ```
 
+### Custom Styles
+
+Select and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Select" fileName="/react/" />

package/dist/mdx/react/switch/Switch.mdx

@@ -81,6 +81,11 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
 
 <ExampleCodeBlock code={Error} />
 
+### Custom Styles
+
+Switch supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Switch" fileName="/react/" />

package/dist/mdx/react/table/Table.mdx

@@ -61,6 +61,12 @@ You can also find several advanced Table examples in our Storybook Examples sect
 - [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
 - [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
 
+### Custom Styles
+
+Table and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Table" fileName="/react/" />

package/dist/mdx/react/text/BodyText.mdx

@@ -28,6 +28,11 @@ You may override the rendered element using the `as` prop.
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Body Text supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="BodyText" fileName="/react/" />

package/dist/mdx/react/text/Heading.mdx

@@ -28,6 +28,11 @@ according to the [Canvas type hierarchy](/tokens/type/#type-styles).
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Heading supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Heading" fileName="/react/text/" />

package/dist/mdx/react/text/Subtext.mdx

@@ -28,6 +28,11 @@ You may override the rendered element using the `as` prop.
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Subtext supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Subtext" fileName="/react/text/" />

package/dist/mdx/react/text/Text.mdx

@@ -43,6 +43,11 @@ understanding of the text being rendered.
 
 <ExampleCodeBlock code={Variant} />
 
+### Custom Styles
+
+Text supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Text" fileName="/react/" />

package/dist/mdx/react/text/Title.mdx

@@ -28,6 +28,11 @@ You may override the rendered element using the `as` prop.
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Title supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Title" filePath="/react/text/" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.805-next.0",
+  "version": "11.0.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.805-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.805-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.805-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.805-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0",
+    "@workday/canvas-kit-react": "^11.0.0",
+    "@workday/canvas-kit-styling": "^11.0.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "48f9234cb2c6eaa82b57201ea15bd852b12c7d4c"
+  "gitHead": "60ab75c33942c15bb1fd116ca19bdebeb005a99d"
 }