@workday/canvas-kit-docs 6.8.9 → 6.9.0-next.2

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-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="s">
-          <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 {
@@ -8,13 +6,19 @@ import {
   useSidePanel,
   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 {Flex} from '@workday/canvas-kit-react/layout';
+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,14 +1,19 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx} from '@emotion/core';
 import {
   SidePanel,
   useSidePanel,
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-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="s">
-            <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/HiddenName.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const {panelProps, labelProps, controlProps} = useSidePanel();

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 
 export default () => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   SidePanel,
   useSidePanel,

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,36 @@ 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 {Flex} from '@workday/canvas-kit-react/layout';
+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)({
+  marginLeft: 'auto',
+});
+
 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="s">
-          <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>
   );
 };
 
@@ -53,7 +45,6 @@ export default () => {
   return (
     <CanvasProvider theme={{canvas: {direction}}}>
       <Flex height={320}>
-        <RightPanel />
         <Flex
           as="main"
           alignItems="center"
@@ -67,6 +58,8 @@ export default () => {
             Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
           </SecondaryButton>
         </Flex>
+
+        <RightPanel />
       </Flex>
     </CanvasProvider>
   );

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 {
@@ -8,11 +6,17 @@ import {
   useSidePanel,
   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 {Flex} from '@workday/canvas-kit-react/layout';
+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="s">
-              <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,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import {jsx} from '@emotion/core';
+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-labs-react/common';

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-area/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {changeFocus} from '@workday/canvas-kit-react/common';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {VStack} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 

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

@@ -1,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import {jsx} from '@emotion/core';
+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-labs-react/common';

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/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {changeFocus} from '@workday/canvas-kit-react/common';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {VStack} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 

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

@@ -1,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import {jsx} from '@emotion/core';
+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-labs-react/common';

package/dist/mdx/react/_examples/SegmentedControlWithText.mdx

@@ -0,0 +1,12 @@
+import Basic from './examples/SegmentControlWithText';
+
+
+# Canvas Kit Examples
+
+## SegmentControl With Text
+
+As of `v7`, IconButton was removed, so SegmentControl was changed to support new buttons with
+icon only. This example shows how you use SegmentControl with text until CK
+starts supporting text in SegmentControl buttons. If you'd like to follow along, we have an [open issue](https://github.com/Workday/canvas-kit/issues/207) to enhance the SegmentedControl
+
+<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/examples/GlobalHeader.tsx

@@ -9,9 +9,10 @@ import {
   assistantIcon,
 } from '@workday/canvas-system-icons-web';
 
-import {IconButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, Hyperlink} from '@workday/canvas-kit-react/button';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {SearchForm, HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {SearchForm} from '@workday/canvas-kit-labs-react';
 
 interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
   spacing?: StackSpacing;
@@ -20,7 +21,7 @@ interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
 export default () => (
   <GlobalHeader>
     <GlobalHeader.Item>
-      <IconButton aria-label="menu" icon={justifyIcon} />
+      <TertiaryButton aria-label="menu" icon={justifyIcon} />
       <Hyperlink>
         <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
       </Hyperlink>
@@ -29,9 +30,9 @@ export default () => (
       <SearchForm onSubmit={() => 1} />
     </GlobalHeader.Item>
     <GlobalHeader.Item>
-      <IconButton aria-label="messages" icon={assistantIcon} />
-      <IconButton aria-label="notifications" icon={notificationsIcon} />
-      <IconButton aria-label="inbox" icon={inboxIcon} />
+      <TertiaryButton aria-label="messages" icon={assistantIcon} />
+      <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
+      <TertiaryButton aria-label="inbox" icon={inboxIcon} />
       <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
     </GlobalHeader.Item>
   </GlobalHeader>

package/dist/mdx/react/_examples/examples/PageHeader.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {styled, createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, styled} from '@workday/canvas-kit-react/common';
 
 import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
 
-import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
 
 interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
@@ -15,8 +15,8 @@ export default () => (
   <PageHeader>
     <PageHeader.Title>Page Header</PageHeader.Title>
     <PageHeader.Item>
-      <IconButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
-      <IconButton aria-label="menu" icon={justifyIcon} variant="inverse" />
+      <TertiaryButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
+      <TertiaryButton aria-label="menu" icon={justifyIcon} variant="inverse" />
     </PageHeader.Item>
   </PageHeader>
 );

package/dist/mdx/react/_examples/examples/SegmentControlWithText.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {
+  styled,
+  StyledType,
+  ExtractProps,
+  mouseFocusBehavior,
+} from '@workday/canvas-kit-react/common';
+import {colors, borderRadius, space} from '@workday/canvas-kit-react/tokens';
+import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
+import {CanvasIconTypes, CanvasSystemIcon} from '@workday/design-assets-types';
+const placeholderIcon: CanvasSystemIcon = {
+  name: '',
+  svg: '',
+  filename: '',
+  type: CanvasIconTypes.System,
+};
+
+const getIconButtonColors = (toggled?: boolean): ButtonColors => {
+  return {
+    default: {
+      background: toggled ? colors.blueberry400 : colors.soap200,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
+      label: toggled ? colors.frenchVanilla100 : colors.licorice200,
+    },
+    hover: {
+      background: toggled ? colors.blueberry400 : colors.soap300,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    active: {
+      background: toggled ? colors.blueberry400 : colors.soap500,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    focus: {
+      background: toggled ? colors.blueberry400 : undefined,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    disabled: {
+      background: toggled ? colors.soap100 : colors.soap100,
+      icon: colors.soap600,
+      label: colors.soap600,
+      opacity: '1',
+    },
+  };
+};
+
+const StyledBaseButton = styled(BaseButton)<
+  ExtractProps<typeof SegmentedControl.Button> & StyledType
+>({
+  borderRadius: borderRadius.zero,
+  border: `1px solid ${colors.soap500}`,
+  borderLeft: 'none',
+  minWidth: space.xxxl,
+  '&:first-of-type': {
+    borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+    borderLeft: `1px solid ${colors.soap500}`,
+  },
+  '&:last-of-type': {
+    borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+  },
+  '&[aria-pressed="true"]': {
+    borderColor: `${colors.blueberry400} !important`,
+    '&:hover, &:focus:hover': {
+      background: colors.blueberry400,
+    },
+  },
+  '&:focus': {
+    borderRadius: borderRadius.m,
+    zIndex: 1,
+    animation: 'none', // reset focusRing animation
+    transition: 'all 120ms, border-radius 1ms',
+    ...mouseFocusBehavior({
+      '&': {
+        borderRadius: borderRadius.zero,
+        '&:first-of-type': {
+          borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+        },
+        '&:last-of-type': {
+          borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+        },
+      },
+    }),
+  },
+});
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>('day');
+  const handleToggle = (selectedValue: string | number) => {
+    setValue(selectedValue);
+  };
+
+  const isDayToggled = value === 'day';
+  const isWeekToggled = value === 'week';
+
+  return (
+    <SegmentedControl value={value} onChange={handleToggle}>
+      <StyledBaseButton
+        icon={{...placeholderIcon}}
+        colors={getIconButtonColors(isDayToggled)}
+        value="day"
+        onClick={() => setValue('day')}
+      >
+        Day
+      </StyledBaseButton>
+      <StyledBaseButton
+        icon={placeholderIcon}
+        colors={getIconButtonColors(isWeekToggled)}
+        value="week"
+        onClick={() => setValue('week')}
+      >
+        Week
+      </StyledBaseButton>
+    </SegmentedControl>
+  );
+};