@workday/canvas-kit-docs 6.3.6 → 7.0.0-alpha.0-next.4

package/dist/commonjs/lib/specs.js

@@ -41,6 +41,62 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Banner.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Banner",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Breadcrumbs.spec.ts",

package/dist/es6/lib/specs.js

@@ -41,6 +41,62 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Banner.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Banner",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Breadcrumbs.spec.ts",

package/dist/mdx/7.0-MIGRATION-GUIDE.mdx

@@ -0,0 +1,110 @@
+# Canvas Kit 7.0 Migration Guide
+
+Below are the breaking changes made in Canvas Kit v7. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions about the update.
+
+- [Codemod](#codemod)
+- [ActionBar Component Updates](#actionbar-component-updates)
+- [Status Indicator Width](#status-indicator-width)
+- [Popup Cards](popup-cards)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with a majority of the breaking changes in the migration
+from Canvas Kit v6 to v7:
+
+```sh
+> npx @workday/canvas-kit-codemod v7 [path]
+```
+
+> Note: This codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` extensions. You may need to make
+> some manual changes in other file types (`.json`, `.mdx`, `.md`, etc.).
+
+> Note: You may need to run your linter after executing the codemod, as it's resulting formatting
+> (spacing, quotes, etc.) may not match your project's styling.
+
+**Breaking changes accounted for by this codemod will be marked with a 🤖.**
+
+**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
+rollback more easily if necessary.**
+
+[Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
+encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
+help us maintain additional codemod transforms to make future migrations easier.
+
+## ActionBar Component Updates
+
+We've refactored our ActionBar components to simplify logic.
+
+PR: https://github.com/Workday/canvas-kit/pull/1396
+
+**Changes:**
+
+- Component has been converted to compound component.
+- `fixed` prop has been removed from component.
+- Now ActionBar uses `position` prop to set container position instead `fixed` prop.
+- Fixed position has been set as default if there is not passed `position` prop.
+
+## Status Indicator Width
+
+Status Indicators currently truncate when they reach their max width of `150px`. After receiving
+requests to increase this, we have upped it by 25% to `200px`.
+
+We've also added a prop (`maxWidth`) to configure this if you need to. While this increases
+flexibility, please keep in mind that status text should be short, direct, and preferably a single
+word.
+
+```tsx
+<StatusIndicator label="Slightly Longer Status" type={StatusIndicator.Type.Gray} maxWidth={250} />
+```
+
+## Popup Cards
+
+`Popup.Card` (this includes `Modal.Card` and `Dialog.Card`) components are now a flexbox container.
+This was done to support overflowing content (by default, the `Popup.Body` component). The idea is
+the card is a vertical flexbox container and the `Popup.Heading`, `Popup.Body`, and any other
+children are flex items. The `Popup.Body` now has an `overflow-y: auto` on it to naturally allow the
+body content to overflow in a scroll container. This is a breaking change if your `Popup`, `Modal`,
+or `Dialog` doesn't work with a flexbox with `flex-direction: column`. In most cases, this shouldn't
+matter. If this change does cause your popup to display correctly, you may need to play around with
+flex item containers.
+
+An example where this might break:
+
+A common Modal has a heading, body, and footer (Cancel/Submit buttons). If the Cancel and Submit
+buttons are direct children of the `Modal.Card` like the following:
+
+```tsx
+<Modal.Card>
+  <Modal.Heading>Some Heading</Modal.Heading>
+  <Modal.Body>Some Body</Modal.Body>
+  <SecondaryButton>Cancel</SecondaryButton>
+  <PrimaryButton>Submit</PrimaryButton>
+</Modal.Card>
+```
+
+The buttons will become vertical flex items instead of the default which is displaying inline-block.
+Before, the buttons would layout next to each other horizontally. After, the buttons will stack
+vertically. To fix this, you'll have to add another element to be a flex item from the `Modal.Card`.
+Our examples use `HStack` to align the buttons. The following will render correctly after this
+change:
+
+```tsx
+<Modal.Card>
+  <Modal.Heading>Some Heading</Modal.Heading>
+  <Modal.Body>Some Body</Modal.Body>
+  <HStack spacing="s">
+    <SecondaryButton>Cancel</SecondaryButton>
+    <PrimaryButton>Submit</PrimaryButton>
+  </HStack>
+</Modal.Card>
+```
+
+If your code contains any hacks to make a `Modal` overflow, these hacks should now be removed.
+[This example shows how body content overflows](https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal-react--body-overflow)
+(you may have to limit your browser height to see the overflow). Before you had to manually set the
+`max-height` of the `Modal.Body` element using calculations. These should be removed. The
+`Popup.Card` now has a max height and the `Popup.Body` height is automatically calculated.

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

@@ -3,7 +3,6 @@ import {Specifications} from '@workday/canvas-kit-docs';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 import Custom from './examples/Custom';
-import WithSelect from './examples/Select';
 
 
 # Canvas Kit Form Field
@@ -21,19 +20,8 @@ yarn add @workday/canvas-kit-preview-react
 
 ### Customizing With Behavior Hooks Example
 
-If you need full customization you can use the `FormField` behavior hooks to build your own
-solution. It is also easy it work with custom components or third party libraries and get the CKR
+If you need full customization you can use the form field behavior hooks to build your own solution.
+It is also easy it work with custom components or third party libraries and get the CKR
 accessibility guarantees by using the `as` prop.
 
-<ExampleCodeBlock code={Custom} />
-
-### Use with Select
-
-For some custom inputs, such as Canvas Kit's `Select`, you won't be able to reliably cast the
-`FormField.Input` with the `as` prop. Instead you'll want to use `FormField`'s hooks for the
-implementation. In the example below, we're using the `useFormFieldModel` hook to hoist the model
-and providing it to the `useFormFieldInput` behavior hook. Then we pass the model to the `FormField`
-component and the input props to `Select`. This connects `Select` to the `FormField` components and
-provides it with all the accessible attributes it needs.
-
-<ExampleCodeBlock code={WithSelect} />
+<ExampleCodeBlock code={Custom} />

package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx

@@ -1,38 +1,32 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, space, type} from '@workday/canvas-kit-react/tokens';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {Flex, HStack} from '@workday/canvas-kit-labs-react/layout';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+const StyledAccentIcon = styled(AccentIcon)({
+  marginRight: space.s,
+});
 
 export default () => {
   const {panelProps, labelProps} = useSidePanel();
 
-  const {themeRTL} = useThemeRTL();
-  const iconStyles = themeRTL({
-    marginRight: space.s,
-  });
-
   return (
-    <Flex height={320}>
+    <HStack spacing="s" height={320}>
       <SidePanel {...panelProps}>
         <Flex alignItems="center" paddingY="s" paddingX="xs">
-          <AccentIcon css={iconStyles} icon={rocketIcon} />
-          <h3
-            css={{
-              ...type.levels.body.large,
-              color: colors.licorice500,
-              fontWeight: type.properties.fontWeights.bold,
-            }}
-            {...labelProps}
-          >
-            Tasks Panel
-          </h3>
+          <StyledAccentIcon icon={rocketIcon} />
+          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
         </Flex>
       </SidePanel>
-    </Flex>
+    </HStack>
   );
 };

package/dist/mdx/preview-react/side-panel/examples/Basic.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -9,12 +7,18 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -32,16 +36,7 @@ export default () => {
               <Flex marginInlineEnd="s">
                 <AccentIcon icon={rocketIcon} />
               </Flex>
-              <h3
-                css={{
-                  ...type.levels.body.large,
-                  color: colors.licorice500,
-                  fontWeight: type.properties.fontWeights.bold,
-                }}
-                {...labelProps}
-              >
-                Tasks Panel
-              </h3>
+              <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
             </Flex>
           )}
         </SidePanel>

package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {
   SidePanel,
   useSidePanel,
@@ -9,6 +7,13 @@ import {
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
 
 export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel({initialExpanded: false});
@@ -28,16 +33,7 @@ export default () => {
       >
         {panelState === 'expanded' && (
           <Flex alignItems="center" paddingY="s" paddingX="xs">
-            <h3
-              css={{
-                ...type.levels.body.large,
-                color: colors.licorice500,
-                fontWeight: type.properties.fontWeights.bold,
-              }}
-              {...labelProps}
-            >
-              Tasks Panel
-            </h3>
+            <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
           </Flex>
         )}
       </SidePanel>

package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -8,42 +6,37 @@ import {
   useSidePanel,
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+const StyledSidePanel = styled(SidePanel)({
+  position: 'absolute',
+  right: 0,
+});
+
 const RightPanel = () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
   const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
     expanded ? 'expanded' : 'collapsed'
   );
 
-  const {themeRTL} = useThemeRTL();
-  const panelStyles = themeRTL({
-    position: 'absolute',
-    right: 0,
-  });
-
   return (
-    <SidePanel {...panelProps} onStateTransition={setPanelState} origin="right" css={panelStyles}>
+    <StyledSidePanel {...panelProps} onStateTransition={setPanelState} origin="right">
       <SidePanel.ToggleButton {...controlProps} />
       {panelState === 'expanded' && (
         <Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="xs">
-          <h3
-            css={{
-              ...type.levels.body.large,
-              color: colors.licorice500,
-              fontWeight: type.properties.fontWeights.bold,
-            }}
-            {...labelProps}
-          >
-            Tasks Panel
-          </h3>
+          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
         </Flex>
       )}
-    </SidePanel>
+    </StyledSidePanel>
   );
 };
 

package/dist/mdx/preview-react/side-panel/examples/Variant.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
@@ -9,10 +7,16 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const StyledHeader = styled('h3')({
+  ...type.levels.body.large,
+  color: colors.licorice500,
+  fontWeight: type.properties.fontWeights.bold,
+});
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -27,16 +31,7 @@ export default () => {
           <SidePanel.ToggleButton {...controlProps} />
           {panelState === 'expanded' && (
             <Flex alignItems="center" paddingY="s" paddingX="xs">
-              <h3
-                css={{
-                  ...type.levels.body.large,
-                  color: colors.licorice500,
-                  fontWeight: type.properties.fontWeights.bold,
-                }}
-                {...labelProps}
-              >
-                Alternate Panel
-              </h3>
+              <StyledHeader {...labelProps}>Alternate Panel</StyledHeader>
             </Flex>
           )}
         </SidePanel>

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import React from 'react';

package/dist/mdx/preview-react/text-area/examples/HiddenLabel.tsx

@@ -1,8 +1,10 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
+
+const StyledTextAreaLabel = styled(TextArea.Label)({
+  ...accessibleHide,
+});
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -13,7 +15,7 @@ export default () => {
 
   return (
     <TextArea orientation="vertical" spacing="zero">
-      <TextArea.Label css={{...accessibleHide}}>Email</TextArea.Label>
+      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>
   );

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -16,6 +16,7 @@ import ThemedAlert from './examples/ThemedAlert';
 import ThemedError from './examples/ThemedError';
 import Error from './examples/Error';
 import Alert from './examples/Alert';
+import LoginForm from './examples/LoginForm';
 
 
 # Canvas Kit Text Input
@@ -127,6 +128,12 @@ used in an outer ring.
 
 <ExampleCodeBlock code={ThemedAlert} />
 
+#### Full example
+
+Login Form using Formik
+
+<ExampleCodeBlock code={LoginForm} />
+
 ## Props
 
 Undocumented props are spread to the underlying `<input>` element.

package/dist/mdx/preview-react/text-input/examples/Alert.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import React from 'react';

package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx

@@ -1,8 +1,10 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
+
+const StyledTextAreaLabel = styled(TextInput.Label)({
+  ...accessibleHide,
+});
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -13,7 +15,7 @@ export default () => {
 
   return (
     <TextInput orientation="vertical" spacing="zero">
-      <TextInput.Label css={{...accessibleHide}}>Email</TextInput.Label>
+      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>
   );

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 import React from 'react';

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -6,7 +6,7 @@ import Basic from './examples/Basic';
 
 # Canvas Kit Action Bar
 
-Full width button toolbar fixed to bottom of screen.
+Action Bar contains primary and secondary actions related to a page or task.
 
 ## Installation
 
@@ -19,38 +19,20 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 Here is a basic example of an `ActionBar` with two buttons. Although not required,
-[buttons](../../button) are often used in in action bars. The primary action button should be left
-aligned followed by secondary buttons. The primary button is on the right only in "progression-based
-UIs" and on mobile devices.
+[buttons](../../button) are often used in in action bars. The primary action button should be used
+only once and left aligned followed by secondary buttons.
 
 <ExampleCodeBlock code={Basic} />
 
-### Fixed
-
-The Action Bar generally lives at the bottom of the viewport. If you would like this behavior
-automatically (using `position: fixed`), you can use the `fixed` prop.
-
-```tsx
-<ActionBar fixed={true}>
-  <PrimaryButton>Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>
-```
-
 ## Responsive Behavior
 
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
+At 768px, responsive styles will take effect:
 
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+- All primary and secondary buttons will become the same width (`flex: 1`).
+- Container Bar padding will be decreased to small (`16px`) for all sides.
 
 ## Props
 
-Undocumented props are spread to the underlying container `<div>` element.
+Undocumented props are spread to the underlying `HStack` component.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/action-bar/examples/Basic.tsx

@@ -4,8 +4,8 @@ import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ActionBar>
-    <PrimaryButton>Button</PrimaryButton>
-    <SecondaryButton>Button</SecondaryButton>
+  <ActionBar position="relative">
+    <PrimaryButton>First Action</PrimaryButton>
+    <SecondaryButton>Second Action</SecondaryButton>
   </ActionBar>
 );