@workday/canvas-kit-docs 7.1.0-next.0 → 7.1.1

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

@@ -712,12 +712,12 @@ export type BasicButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 export const BasicButton = ({children, ...elemProps}: BasicButtonProps) => {
   return (
     <BaseButton
-      colors={getPaginationButtonColors(toggled)}
+      colors={getPaginationButtonColors()}
       {...elemProps}
     >
       <BaseButton.Label>{children}</BaseButton.Label>
       <BaseButton.Icon icon={plusIcon}>
-    </StyledToggleButton>
+    </BaseButton>
   );
 };
 ```

package/dist/mdx/labs-react/search-form/examples/Basic.tsx

@@ -39,7 +39,9 @@ export default () => {
     if (!formattedValue.length) {
       setWineList(initialWineList);
     } else {
-      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      const filteredItems = initialWineList.filter(wine =>
+        wine.toLowerCase().includes(formattedValue)
+      );
       setWineList(filteredItems);
     }
   };

package/dist/mdx/labs-react/search-form/examples/CustomTheme.tsx

@@ -40,7 +40,9 @@ export default () => {
     if (!formattedValue.length) {
       setWineList(initialWineList);
     } else {
-      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      const filteredItems = initialWineList.filter(wine =>
+        wine.toLowerCase().includes(formattedValue)
+      );
       setWineList(filteredItems);
     }
   };

package/dist/mdx/labs-react/search-form/examples/Grow.tsx

@@ -39,7 +39,9 @@ export default () => {
     if (!formattedValue.length) {
       setWineList(initialWineList);
     } else {
-      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      const filteredItems = initialWineList.filter(wine =>
+        wine.toLowerCase().includes(formattedValue)
+      );
       setWineList(filteredItems);
     }
   };

package/dist/mdx/labs-react/search-form/examples/RTL.tsx

@@ -40,7 +40,9 @@ export default () => {
     if (!formattedValue.length) {
       setWineList(initialWineList);
     } else {
-      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      const filteredItems = initialWineList.filter(wine =>
+        wine.toLowerCase().includes(formattedValue)
+      );
       setWineList(filteredItems);
     }
   };

package/dist/mdx/labs-react/search-form/examples/Theming.tsx

@@ -39,7 +39,9 @@ export default () => {
     if (!formattedValue.length) {
       setWineList(initialWineList);
     } else {
-      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      const filteredItems = initialWineList.filter(wine =>
+        wine.toLowerCase().includes(formattedValue)
+      );
       setWineList(filteredItems);
     }
   };

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

@@ -18,8 +18,7 @@ const StyledHeader = styled('h3')({
 });
 
 const StyledSidePanel = styled(SidePanel)({
-  position: 'absolute',
-  right: 0,
+  marginLeft: 'auto',
 });
 
 const RightPanel = () => {
@@ -46,7 +45,6 @@ export default () => {
   return (
     <CanvasProvider theme={{canvas: {direction}}}>
       <Flex height={320}>
-        <RightPanel />
         <Flex
           as="main"
           alignItems="center"
@@ -60,6 +58,8 @@ export default () => {
             Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
           </SecondaryButton>
         </Flex>
+
+        <RightPanel />
       </Flex>
     </CanvasProvider>
   );

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/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>
+  );
+};

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

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Icons from './examples/Icons';
+import DeleteAction from './examples/DeleteAction';
 import OverflowActionBar from './examples/OverflowActionBar';
 
 
@@ -34,11 +35,18 @@ buttons should not be used in the Action Bar.
 
 ### Icons Example
 
-`ActionBar.Item` renders a `PrimaryButton` or `SecondaryButton`, so it's possible to use other
-Button props with `ActionBar.Item` such as `icon` or `size`.
+`ActionBar.Item` renders a `SecondaryButton` as default, so it's possible to use other Button props
+with `ActionBar.Item` such as `icon` or `size`.
 
 <ExampleCodeBlock code={Icons} />
 
+### Delete Action Example
+
+`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,
+such as `DeleteButton`, by using `as` prop.
+
+<ExampleCodeBlock code={DeleteAction} />
+
 ### Overflow Example
 
 `ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {ActionBar} from '@workday/canvas-kit-react/action-bar';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  return (
+    <ActionBar>
+      <ActionBar.List position="relative">
+        <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>
+        <ActionBar.Item>Second Action</ActionBar.Item>
+      </ActionBar.List>
+    </ActionBar>
+  );
+};

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {Box} from '@workday/canvas-kit-react/layout';
-import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {
   CanvasProvider,
   ContentDirection,
@@ -18,11 +17,10 @@ const theme: PartialEmotionCanvasTheme = {
 
 const StyledStickyBanner = styled(Banner)({
   position: 'absolute',
-  left: 0,
+  right: 0,
 });
 
 export default () => {
-  const {themeRTL} = useThemeRTL();
   return (
     <CanvasProvider theme={theme}>
       <Box height={64}>

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -4,6 +4,7 @@ import Checkbox from '@workday/canvas-kit-react/checkbox/lib/Checkbox.tsx';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
+import Inverse from './examples/Inverse';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
 import Indeterminate from './examples/Indeterminate';
@@ -35,6 +36,12 @@ element.
 
 <ExampleCodeBlock code={Basic} />
 
+### Inverse
+
+Checkbox with inverse variation
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Disabled
 
 Set the `disabled` prop of the Checkbox to prevent users from interacting with it.

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {HStack} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+      <Checkbox
+        variant="inverse"
+        checked={checked}
+        label="I agree to the terms"
+        onChange={handleChange}
+      />
+    </HStack>
+  );
+};

package/dist/mdx/react/radio/Radio.mdx

@@ -5,6 +5,7 @@ import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
+import Inverse from './examples/Inverse';
 import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import NoValue from './examples/NoValue';
@@ -41,6 +42,12 @@ Set the `disabled` prop of the Radio Button to prevent users from interacting wi
 
 <ExampleCodeBlock code={Disabled} />
 
+### Inverse
+
+Radio with inverse variant
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Radio Buttons with No Values
 
 The `value` prop may be omitted from Radio Buttons, in which case the `value` prop of the Radio

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

@@ -0,0 +1,23 @@
+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';
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>('deep-dish');
+
+  const handleChange = (value: string | number) => {
+    setValue(value);
+  };
+
+  return (
+    <Box backgroundColor="blueberry400" padding="s">
+      <RadioGroup name="crust" 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" />
+        <Radio variant="inverse" label="Cauliflower" value="cauliflower" />
+      </RadioGroup>
+    </Box>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.1.0-next.0+2f9c1930",
+  "version": "7.1.1",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/specifications"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/docs"
   },
   "files": [
     "dist/",
@@ -41,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.1.0-next.0+2f9c1930"
+    "@workday/canvas-kit-react": "^7.1.1"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "2f9c193032b814210ceff5a30bbcc5dc2dd1a37c"
+  "gitHead": "c360203e713ac3719fb4dd5d85edcb37200520ec"
 }