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

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

@@ -0,0 +1,21 @@
+# 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
+
+## Table of contents
+
+- [Removals](#removals)
+  - [Select (Preview)](#select-preview)
+
+## 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).

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.834-next.0",
+  "version": "12.0.0-alpha.841-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.841-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.841-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.841-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.841-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": "066c4b170850949586bf9f89370f5302a6c8f9a4"
 }