@workday/canvas-kit-docs 13.0.0-alpha.998-next.0 → 13.0.0

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

@@ -1,35 +1,54 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {space} 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-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {base, system} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
-const StyledAccentIcon = styled(AccentIcon)({
-  marginRight: space.s,
-});
+const stylesOverride = {
+  accentIcon: createStyles({
+    marginRight: system.space.x4,
+  }),
+  pageContainer: createStyles({
+    gap: system.space.x4,
+    height: px2rem(320),
+  }),
+  panelContainer: createStyles({
+    alignItems: 'center',
+    paddingY: system.space.x4,
+    paddingX: system.space.x4,
+  }),
+  panelHeading: createStyles({
+    color: base.licorice500,
+  }),
+  mainContent: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexBasis: 'auto',
+    flex: 1,
+  }),
+};
 
 export default () => {
   const {panelProps, labelProps} = useSidePanel();
 
   return (
-    <Flex gap="s" height={320}>
+    <Flex cs={stylesOverride.pageContainer}>
       <SidePanel {...panelProps}>
-        <Flex alignItems="center" paddingY="s" paddingX="s">
-          <StyledAccentIcon icon={rocketIcon} />
-          <Text
-            as="h3"
-            typeLevel="body.large"
-            color="licorice500"
-            fontWeight="bold"
-            {...labelProps}
-          >
+        <Flex cs={stylesOverride.panelContainer}>
+          <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />
+          <Heading size="small" cs={stylesOverride.panelHeading} {...labelProps}>
             Tasks Panel
-          </Text>
+          </Heading>
         </Flex>
       </SidePanel>
+      <Flex as="main" cs={stylesOverride.mainContent}>
+        <Text as="p" typeLevel="body.large">
+          This is the main content section.
+        </Text>
+      </Flex>
     </Flex>
   );
 };

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

@@ -6,54 +6,60 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider} 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';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system, base} from '@workday/canvas-tokens-web';
+
+const stylesOverride = {
+  viewPortContainer: createStyles({
+    height: px2rem(320),
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    paddingY: system.space.x4,
+    paddingX: system.space.x4,
+  }),
+  accentIcon: createStyles({
+    marginInlineEnd: system.space.x4,
+  }),
+  mainContent: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
 
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
-  const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
-    expanded ? 'expanded' : 'collapsed'
-  );
-
-  const expandedContent = (
-    <Flex alignItems="center" paddingY="s" paddingX="s">
-      <Flex marginInlineEnd="s">
-        <AccentIcon icon={rocketIcon} />
-      </Flex>
-      <Text as="h3" typeLevel="body.large" color="licorice500" fontWeight="bold" {...labelProps}>
-        Tasks Panel
-      </Text>
-    </Flex>
-  );
 
   return (
     <CanvasProvider theme={{canvas: {direction}}}>
-      <Flex height={320}>
-        <SidePanel {...panelProps} onStateTransition={setPanelState}>
+      <Flex cs={stylesOverride.viewPortContainer}>
+        <SidePanel {...panelProps}>
           <SidePanel.ToggleButton {...controlProps} />
-          {panelState === 'expanded' ? (
-            expandedContent
-          ) : (
-            <Text hidden {...labelProps}>
+          <Flex cs={stylesOverride.panel}>
+            {expanded && (
+              <Flex cs={stylesOverride.accentIcon}>
+                <AccentIcon icon={rocketIcon} />
+              </Flex>
+            )}
+            <Heading size="small" {...labelProps} hidden={!expanded ? true : undefined}>
               Tasks Panel
-            </Text>
-          )}
+            </Heading>
+          </Flex>
         </SidePanel>
-        <Flex
-          as="main"
-          alignItems="center"
-          justifyContent="center"
-          flexDirection="column"
-          flex={1}
-          flexBasis="auto"
-        >
-          <p>Toggle the content direction</p>
-          <SecondaryButton onClick={toggleDirection} role="button">
+        <Flex as="main" cs={stylesOverride.mainContent}>
+          <Text as="p" typeLevel="body.large">
+            Toggle the content direction
+          </Text>
+          <SecondaryButton onClick={toggleDirection}>
             Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
           </SecondaryButton>
         </Flex>

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

@@ -5,9 +5,45 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    paddingY: system.space.x4,
+    paddingX: system.space.x4,
+  }),
+  panelHeading: createStyles({
+    color: base.licorice500,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+/*
+ * NOTE TO DEV:
+ * Spreading the `controlProps` onto an external control creates serious accessibility issues.
+ * - `aria-labelledby` id reference is invalid when the SidePanel is collapsed
+ * - `aria-labelledby` will change the name of "Toggle Side Panel" button to "Tasks Panel"
+ * - `aria-expanded` won't make sense to screen reader users when the expanded SidePanel content isn't following the control
+ * - `aria-controls` is unsupported by screen readers and will not allow users to navigate to the controlled content
+ *
+ * SOLUTION:
+ * - Pass the `controlProps` click handler function down to the external control component.
+ * - Add a toggle state to Button components with `aria-pressed` for screen readers,
+ * - OR use a similar toggle input like Checkbox or Switch.
+ */
 export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel({initialExpanded: false});
   const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
@@ -15,9 +51,8 @@ export default () => {
   );
 
   return (
-    <Flex height={320}>
+    <Flex cs={stylesOverride.viewport}>
       <SidePanel
-        as="aside"
         {...panelProps}
         onExpandedChange={expanded => {
           console.log(`expanded prop is: ${expanded ? 'true' : 'false'}`);
@@ -25,30 +60,19 @@ export default () => {
         onStateTransition={setPanelState}
       >
         {panelState === 'expanded' && (
-          <Flex alignItems="center" paddingY="s" paddingX="s">
-            <Text
-              as="h3"
-              typeLevel="body.large"
-              color="licorice500"
-              fontWeight="bold"
-              {...labelProps}
-            >
+          <Flex cs={stylesOverride.panel}>
+            <Heading size="small" cs={stylesOverride.panelHeading} {...labelProps}>
               Tasks Panel
-            </Text>
+            </Heading>
           </Flex>
         )}
       </SidePanel>
-      <Flex
-        as="main"
-        alignItems="center"
-        justifyContent="center"
-        flexDirection="column"
-        flex={1}
-        flexBasis="auto"
-      >
-        <p>Control the panel externally</p>
-        <SecondaryButton {...controlProps} role="button">
-          Toggle Side Panel
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Control the panel externally
+        </Text>
+        <SecondaryButton onClick={controlProps.onClick} aria-pressed={expanded}>
+          Show Side Panel
         </SecondaryButton>
       </Flex>
     </Flex>

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

@@ -1,13 +1,29 @@
 import * as React from 'react';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
 
 export default () => {
   const {panelProps, labelProps, controlProps} = useSidePanel();
+
   return (
-    <Flex height={320}>
+    <Flex cs={stylesOverride.viewport}>
       <SidePanel
-        as="aside"
         {...panelProps}
         onExpandedChange={expanded => {
           console.log(`expanded prop is: ${expanded ? 'true' : 'false'}`);
@@ -17,10 +33,13 @@ export default () => {
         }}
       >
         <SidePanel.ToggleButton {...controlProps} />
-        <span hidden {...labelProps}>
-          Side Panel with a hidden label
-        </span>
+        <AccessibleHide {...labelProps}>Hidden Title</AccessibleHide>
       </SidePanel>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Side Panel with a hidden title text.
+        </Text>
+      </Flex>
     </Flex>
   );
 };

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

@@ -1,6 +1,22 @@
 import * as React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+import {Text} from '@workday/canvas-kit-react/text';
+import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
 
 export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -10,15 +26,15 @@ export default () => {
   };
 
   return (
-    <Flex height={320}>
+    <Flex cs={stylesOverride.viewport}>
       <SidePanel {...panelProps} onExpandedChange={handleExpandedChange}>
         <SidePanel.ToggleButton {...controlProps} />
-        <span hidden {...labelProps}>
-          custom side panel
-        </span>
+        <AccessibleHide {...labelProps}>Hidden Title</AccessibleHide>
       </SidePanel>
-      <Flex as="main" alignItems="center" justifyContent="center" flex={1} flexBasis="auto">
-        <p>Side panel is {expanded ? 'expanded' : 'collapsed'}.</p>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Side panel is {expanded ? 'expanded' : 'collapsed'}.
+        </Text>
       </Flex>
     </Flex>
   );

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

@@ -5,27 +5,42 @@ import {
   useSidePanel,
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
+import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
 
 export default () => {
   const {panelProps, labelProps, controlProps} = useSidePanel();
-  const [transitionState, setTransitionState] = React.useState<SidePanelTransitionStates>(
-    'expanded'
-  );
+  const [transitionState, setTransitionState] =
+    React.useState<SidePanelTransitionStates>('expanded');
 
   const handleStateTransition = (transition: SidePanelTransitionStates) => {
     setTransitionState(transition);
   };
 
   return (
-    <Flex height={320}>
+    <Flex cs={stylesOverride.viewport}>
       <SidePanel {...panelProps} onStateTransition={handleStateTransition}>
         <SidePanel.ToggleButton {...controlProps} />
-        <span hidden {...labelProps}>
-          custom side panel
-        </span>
+        <AccessibleHide {...labelProps}>Hidden Title</AccessibleHide>
       </SidePanel>
-      <Flex as="main" alignItems="center" justifyContent="center" flex={1} flexBasis="auto">
-        <p>Side panel is {transitionState}.</p>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Side panel is {transitionState}.
+        </Text>
       </Flex>
     </Flex>
   );

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

@@ -1,45 +1,49 @@
 import * as React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {
-  SidePanel,
-  useSidePanel,
-  SidePanelTransitionStates,
-} from '@workday/canvas-kit-preview-react/side-panel';
+import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
-const StyledSidePanel = styled(SidePanel)({
-  marginLeft: 'auto',
-});
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  panelContainer: createStyles({
+    marginLeft: 'auto',
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingY: system.space.x4,
+    paddingX: system.space.x4,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
 
 const RightPanel = () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
-  const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
-    expanded ? 'expanded' : 'collapsed'
-  );
-
-  const expandedContent = (
-    <Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="s">
-      <Text as="h3" typeLevel="body.large" color="licorice500" fontWeight="bold" {...labelProps}>
-        Tasks Panel
-      </Text>
-    </Flex>
-  );
 
   return (
-    <StyledSidePanel {...panelProps} onStateTransition={setPanelState} origin="right">
+    <SidePanel {...panelProps} origin="right" className={stylesOverride.panelContainer}>
       <SidePanel.ToggleButton {...controlProps} />
-      {panelState === 'expanded' ? (
-        expandedContent
-      ) : (
-        <Text hidden {...labelProps}>
+      <Flex cs={stylesOverride.panel}>
+        <Heading size="small" hidden={!expanded ? true : undefined} {...labelProps}>
           Tasks Panel
-        </Text>
-      )}
-    </StyledSidePanel>
+        </Heading>
+      </Flex>
+    </SidePanel>
   );
 };
 
@@ -48,17 +52,12 @@ export default () => {
 
   return (
     <CanvasProvider theme={{canvas: {direction}}}>
-      <Flex height={320}>
-        <Flex
-          as="main"
-          alignItems="center"
-          justifyContent="center"
-          flexDirection="column"
-          flex={1}
-          flexBasis="auto"
-        >
-          <p>Toggle the content direction</p>
-          <SecondaryButton onClick={toggleDirection} role="button">
+      <Flex cs={stylesOverride.viewport}>
+        <Flex as="main" cs={stylesOverride.main}>
+          <Text as="p" typeLevel="body.large">
+            Toggle the content direction
+          </Text>
+          <SecondaryButton onClick={toggleDirection}>
             Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
           </SecondaryButton>
         </Flex>

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

@@ -1,54 +1,54 @@
 import * as React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {
-  SidePanel,
-  useSidePanel,
-  SidePanelTransitionStates,
-} from '@workday/canvas-kit-preview-react/side-panel';
+import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+    backgroundColor: base.soap100,
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    paddingY: system.space.x4,
+    paddingX: system.space.x4,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
-  const [panelState, setPanelState] = React.useState<SidePanelTransitionStates>(
-    expanded ? 'expanded' : 'collapsed'
-  );
-
-  const expandedContent = (
-    <Flex alignItems="center" paddingY="s" paddingX="s">
-      <Text as="h3" typeLevel="body.large" color="licorice500" fontWeight="bold" {...labelProps}>
-        Alternate Panel
-      </Text>
-    </Flex>
-  );
 
   return (
     <CanvasProvider theme={{canvas: {direction}}}>
-      <Flex height={320} backgroundColor="soap100">
-        <SidePanel {...panelProps} onStateTransition={setPanelState} variant="alternate">
+      <Flex cs={stylesOverride.viewport}>
+        <SidePanel {...panelProps} variant="alternate">
           <SidePanel.ToggleButton {...controlProps} />
-          {panelState === 'expanded' ? (
-            expandedContent
-          ) : (
-            <Text hidden {...labelProps}>
-              Tasks Panel
-            </Text>
-          )}
+          <Flex cs={stylesOverride.panel}>
+            <Heading size="small" hidden={!expanded ? true : undefined} {...labelProps}>
+              Alternate Panel
+            </Heading>
+          </Flex>
         </SidePanel>
-        <Flex
-          as="main"
-          alignItems="center"
-          justifyContent="center"
-          flexDirection="column"
-          flex={1}
-          flexBasis="auto"
-        >
-          <p>Toggle the content direction</p>
-          <SecondaryButton onClick={toggleDirection} role="button">
+        <Flex as="main" cs={stylesOverride.main}>
+          <Text as="p" typeLevel="body.large">
+            Toggle the content direction
+          </Text>
+          <SecondaryButton onClick={toggleDirection}>
             Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
           </SecondaryButton>
         </Flex>

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

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 import {useThemedRing} from '@workday/canvas-kit-react/common';
@@ -28,7 +25,7 @@ export default () => {
   return (
     <TextArea orientation="vertical">
       <TextArea.Label>Add a comment</TextArea.Label>
-      <TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextArea.Field cs={alertStyles} onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>
         <strong>Character Limit: </strong>
         <Text color={hintColor}>{10 - value.length} Left</Text>

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

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {useThemedRing} from '@workday/canvas-kit-react/common';
@@ -20,7 +17,7 @@ export default () => {
   return (
     <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} type="password" />
+      <TextInput.Field cs={alertStyles} onChange={handleChange} value={value} type="password" />
       <TextInput.Hint paddingTop={space.xxs}>
         <strong>Password Strength: </strong>
         {value.length < 3 ? (

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

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {
@@ -43,7 +40,7 @@ const AlertInput = () => {
   return (
     <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextInput.Field cs={alertStyles} onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
     </TextInput>
   );