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

package/dist/es6/mdx/versionsTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,YAAY,mBAgCxB,CAAC"}
+{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AAkEA,eAAO,MAAM,YAAY,mBAgCxB,CAAC"}

package/dist/es6/mdx/versionsTable.js

@@ -9,6 +9,10 @@ const allVersions = [
         versionNumber: version,
         documentation: 'https://github.com/Workday/canvas-kit',
     },
+    {
+        versionNumber: 10,
+        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v10/?path=/docs/welcome--page',
+    },
     {
         versionNumber: 9,
         documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v9/?path=/docs/welcome--page',

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/Button.mdx

@@ -7,6 +7,7 @@ import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
 import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
+import Grow from './examples/Grow';
 import CustomStyles from './examples/CustomStyles';
 
 
@@ -70,6 +71,12 @@ on a dark or colorful background such as `blueberry400`.
 
 <ExampleCodeBlock code={Delete} />
 
+### Grow Prop
+
+The example below shows the use of the `grow` prop on different variants of buttons. This will set the width of the button to the width of its container.
+
+<ExampleCodeBlock code={Grow} />
+
 ### Custom Styles
 
 All of our buttons support custom styling via the `cs` prop. For more information, check our

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/button/button/examples/Grow.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  DeleteButton,
+  PrimaryButton,
+  SecondaryButton,
+  TertiaryButton,
+} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Flex gap="s" padding="s" flexDirection="column" maxWidth={300}>
+    <PrimaryButton size="small" grow={true}>
+      Primary
+    </PrimaryButton>
+    <SecondaryButton size="small" grow={true}>
+      Secondary
+    </SecondaryButton>
+    <TertiaryButton size="small" grow={true}>
+      Tertiary
+    </TertiaryButton>
+    <DeleteButton size="small" grow={true}>
+      Delete
+    </DeleteButton>
+  </Flex>
+);

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.822-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.822-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.822-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.822-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.822-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": "60128be5a045e4fb245a9f8a9f3ee0ddab8fe257"
+  "gitHead": "066c4b170850949586bf9f89370f5302a6c8f9a4"
 }