@workday/canvas-kit-docs 9.0.0-alpha.301-next.2 → 9.0.0-alpha.305-next.1

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

@@ -0,0 +1,76 @@
+# Canvas Kit 9.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v9. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+- [Codemod](#codemod)
+- [Component Deprecations](#component-deprecations)
+  - [Drawer](#drawer)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with most of the breaking changes in v9.
+
+```sh
+> npx @workday/canvas-kit-codemod v9 [path]
+```
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+> yarn add @workday/canvas-kit-codemod --dev
+> yarn canvas-kit-codemod v9 [path]
+> yarn remove @workday/canvas-kit-codemod
+```
+
+> The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to manually edit
+> other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter after executing
+> the codemod, as its resulting formatting (spacing, quotes, etc.) may not match your project
+> conventions.
+
+The codemod will handle _most_ but _not all_ of the breaking changes in v9. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+**Please verify all changes made by the codemod.** As a safety precaution, we recommend committing
+the changes from the codemod as a single isolated commit (separate from other changes) so you can
+roll back more easily if necessary.
+
+## Component Deprecations
+
+### Deprecation Types
+
+#### Soft Deprecation
+
+A soft-deprecated component is still available with its full functionality, but it will have been
+renamed with a prefix to indicate its soft-deprecated status. It will also include a console warning
+announcing its deprecation. This warning will only be triggered on the component's initial render.
+
+Soft-deprecated types and utilities will also have been renamed but generally will not trigger a
+console warning.
+
+#### Hard Deprecation
+
+A hard-deprecated component or package is no longer available. You will need to follow the method
+prescribed in our Upgrade Guide to update your application. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) to our team
+directly if you need additional help.
+
+---
+
+### Drawer
+
+<!---
+TODO: Please review this section with documenting SidePanel deprication
+-->
+
+We've [hard-deprecated](#hard-deprecation) `Drawer` and this component has been fully removed from Canvas
+Kit. Consider using the
+[Side Panel](https://workday.github.io/canvas-kit/?path=/story/preview-side-panel--basic). Be Aware
+that `SidePanel` from the Main package is planned to be replaced by the one from Preview.
+We suggest you use the Preview version of `SidePanel` until the one in Main is replaced with it.
+
+---

package/dist/mdx/react/layout/Stack.mdx

@@ -9,6 +9,15 @@ import HStackCards from './examples/Stack/HStackCards';
 import VStackCards from './examples/Stack/VStackCards';
 
 
+### ⚠️ Stack has been soft-deprecated in v8 and will be removed in v9 ⚠️
+
+- If you would like resolve this now, run this codemod:
+  `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+- You can learn more about the codemod package
+  [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+- There is more context [here](https://github.com/Workday/canvas-kit/issues/1830) as to why this
+  decision was made
+
 # Canvas Kit Stack
 
 `Stack`, `HStack`, and `VStack` are higher-level layout components that provide an ergonomic API for

package/dist/mdx/react/radio/examples/Alert.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -17,7 +18,7 @@ export default () => {
       label="Choose Your Pizza Crust"
       useFieldset={true}
     >
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />

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

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {space} from '@workday/canvas-kit-react/tokens';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -17,7 +18,7 @@ export default () => {
 
   return (
     <StyledFormField label="Choose Your Pizza Crust" useFieldset={true}>
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />

package/dist/mdx/react/radio/examples/Disabled.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -11,7 +12,7 @@ export default () => {
 
   return (
     <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio disabled={true} label="Gluten free (sold out)" value="gluten-free" />

package/dist/mdx/react/radio/examples/Error.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -17,7 +18,7 @@ export default () => {
       label="Choose Your Pizza Crust"
       useFieldset={true}
     >
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />

package/dist/mdx/react/radio/examples/Inverse.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -12,7 +12,7 @@ export default () => {
 
   return (
     <Box backgroundColor="blueberry400" padding="s">
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio variant="inverse" label="Deep dish" value="deep-dish" />
         <Radio variant="inverse" label="Thin" value="thin" />
         <Radio variant="inverse" label="Gluten free" value="gluten-free" />

package/dist/mdx/react/radio/examples/LabelPosition.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -15,7 +16,7 @@ export default () => {
       labelPosition={FormField.LabelPosition.Left}
       useFieldset={true}
     >
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />

package/dist/mdx/react/radio/examples/NoValue.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {Subtext} from '@workday/canvas-kit-react/text';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>(0);
@@ -13,7 +14,7 @@ export default () => {
   return (
     <>
       <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="crust" onChange={handleChange} value={value}>
+        <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
           <Radio label="Deep dish" />
           <Radio label="Thin" />
           <Radio label="Gluten free" />

package/dist/mdx/react/radio/examples/RefForwarding.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -18,7 +19,7 @@ export default () => {
   return (
     <>
       <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="crust" onChange={handleChange} value={value}>
+        <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
           <Radio label="Deep dish" value="deep-dish" />
           <Radio label="Thin" value="thin" />
           <Radio label="Gluten free" ref={glutenFreeRef} value="gluten-free" />

package/dist/mdx/react/radio/examples/Required.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState<string | number>();
 
   const handleChange = (value: string | number) => {
     setValue(value);
@@ -11,7 +12,7 @@ export default () => {
 
   return (
     <FormField label="Choose Your Pizza Crust" required={true} useFieldset={true}>
-      <RadioGroup name="crust" onChange={handleChange} value={value}>
+      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.301-next.2+7e1d9559",
+  "version": "9.0.0-alpha.305-next.1+a4c0b8fe",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.301-next.2+7e1d9559",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.305-next.1+a4c0b8fe",
     "@workday/canvas-system-icons-web": "^3.0.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "7e1d955981a61462e437ad3e68f916b133facf37"
+  "gitHead": "a4c0b8fe72bab89c5fd5be3cd5faf067b6a7b94c"
 }