@workday/canvas-kit-docs 12.0.0-alpha.834-next.0 → 12.0.0-alpha.846-next.0

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

@@ -0,0 +1,172 @@
+import {Table} from '@workday/canvas-kit-react/table';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+
+# Canvas Kit 12.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v12. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+## Why You Should Upgrade
+
+Canvas Kit v12 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
+[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
+provide semantic tokens that can translate to theming components.
+
+A note to the reader:
+
+- While we still support our old tokens from `@workday/canvas-kit-react/tokens` in v12, you must
+  install our new tokens from `@workday/canvas-tokens-web`. You can find more info in our
+  [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+- In this release, we've introduced a
+  [new styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil).
+  This shouldn't effect the way you currently style your components. Because we're moving away from
+  Emotion, support for style props will eventually be removed, however, this API provide backwards
+  compatability. If you want to slowly move off of Emotion as well, you can start styling components
+  via the `cs` prop or our new styling utilities.
+
+## Table of contents
+
+- [Canvas Tokens](#canvas-tokens)
+- [Codemod](#codemod)
+- [Deprecations](#deprecations)
+- [Removals](#removals)
+  - [Select (Preview)](#select-preview)
+- [Component Updates](#component-updates)
+  - [Popup, Dialog and Modal](#popup-dialog-and-modal)
+  - [Toast](#toast)
+- [Style Utility Updates](#style-utility-updates)
+  - [createStencil](#createstencil)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Canvas Tokens
+
+In v12, all the components listed in this guide have started using our new
+[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+
+In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and the
+variables are defined. For more information on installing and using, please reference our tokens
+[docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+
+## Deprecations
+
+We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
+in a future major release. This signals consumers to migrate to a more stable alternative before the
+deprecated code is removed.
+
+## Removals
+Removals are deletions from our codebase and you can no longer consume this component. We've either promoted or replaced a component or utility.
+
+### Select (Preview)
+
+**PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
+
+We've removed the `Select` component that was in Preview. Please use the compound [`Select` component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+
+---
+
+## Component Updates
+
+### Styling API and CSS Tokens
+
+Several components have been refactored to use our new
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The React interface **has not changed**, but CSS variables are now used for dynamic properties.
+
+The following components are affected:
+
+- `Popup`
+- `Dialog`
+- `Modal`
+- `Toast`
+
+> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
+> with `cs` in our
+> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
+
+### Popup, Dialog and Modal
+
+**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+
+### Toast
+
+**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+
+## Style Utility Updates
+
+## Troubleshooting
+
+### My Styles Seem Broken?
+
+Our components are reliant on our new Canvas Tokens Web package. Be sure you install
+`@workday/canvas-tokens-web`. For more information, reference our
+[Getting Started docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
+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:
+
+- `@workday/canvas-kit-react`
+- `@workday/canvas-kit-preview-react`
+- `@workday/canvas-kit-labs-react`
+- `@workday/canvas-kit-styling`
+- `@workday/canvas-kit-react-fonts`
+- `@workday/canvas-kit-docs`
+
+## Glossary
+
+### Main
+
+Our Main package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-react` has
+undergone a full design and a11y review and is approved for use in product.
+
+Breaking changes to code in Main will only occur during major version updates and will always be
+communicated in advance and accompanied by migration strategies.
+
+---
+
+### Preview
+
+Our Preview package of Canvas Kit tokens, components, and utilities at
+`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
+use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
+Preview is analagous to code in beta.
+
+Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
+triggering a major version update, though such changes will be communicated in advance and
+accompanied by migration strategies.
+
+Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
+Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
+example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
+[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+In these cases, Preview serves as a staging ground for an improved version of the component with a
+different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
+
+---
+
+### Labs
+
+Our Labs package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-labs-react`
+has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+experimental code and is analagous to code in alpha.
+
+Breaking changes can be deployed to Labs at any time without triggering a major version update and
+may not be subject to the same rigor in communcation and migration strategies reserved for breaking
+changes in [Preview](#preview) and [Main](#main). import { opacity } from
+"@workday/canvas-tokens-web/dist/es6/system"

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

@@ -41,9 +41,24 @@ const myCustomStyles = createStyles({
   textTransform: 'uppercase',
 });
 
+const customColors = {
+  default: {
+    background: system.color.static.green.soft,
+    icon: system.color.static.green.strong,
+    label: system.color.static.green.strong,
+  },
+  hover: {
+    background: system.color.static.green.default,
+    icon: system.color.static.green.strong,
+  },
+};
+
 export default () => (
   <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>
+    <PrimaryButton icon={plusIcon} colors={customColors}>
+      Styling Override Via Colors Prop
+    </PrimaryButton>
   </Grid>
 );

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -3,10 +3,10 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {Select} from '@workday/canvas-kit-preview-react/select';
+import {Select} from '@workday/canvas-kit-react/select';
 
 export default () => {
-  const ref = React.useRef<HTMLInputElement>(null);
+  const ref = React.useRef(null);
   const [value, setValue] = React.useState('');
   const model = useModalModel({
     returnFocusRef: ref,
@@ -18,24 +18,29 @@ export default () => {
 
   return (
     <Modal model={model}>
-      <FormField>
-        <FormField.Label>Choose an option</FormField.Label>
-        <FormField.Input
-          as={Select}
-          ref={ref}
-          options={['', 'Delete', 'Two']}
-          value={value}
-          onChange={e => {
-            const option = e.currentTarget.value;
-            if (option === 'Delete') {
-              model.events.show();
-              setValue('');
-            } else {
-              setValue(e.currentTarget.value);
-            }
-          }}
-        />
-      </FormField>
+      <Select items={['', 'Delete', 'Two']}>
+        <FormField>
+          <FormField.Label>Choose an option</FormField.Label>
+          <FormField.Input
+            as={Select.Input}
+            ref={ref}
+            onChange={e => {
+              const option = e.currentTarget.value;
+              if (option === 'Delete') {
+                model.events.show();
+                setValue('');
+              } else {
+                setValue(e.currentTarget.value);
+              }
+            }}
+          />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
       <Modal.Overlay>
         <Modal.Card>
           <Modal.CloseIcon aria-label="Close" />

package/dist/mdx/react/popup/examples/Basic.tsx

@@ -26,7 +26,7 @@ export default () => {
   return (
     <Popup model={model}>
       <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
-      <Popup.Popper placement="bottom">
+      <Popup.Popper placement="top">
         <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Delete Item</Popup.Heading>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.834-next.0",
+  "version": "12.0.0-alpha.846-next.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": "^12.0.0-alpha.834-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.834-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.834-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.834-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.846-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.846-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.846-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.846-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "d810cce07772db36ba395b874bd25d90e6072b09"
+  "gitHead": "92573a5cb42a250072618c814c0bc78edaf0480a"
 }