@workday/canvas-kit-docs 7.1.0-next.1 → 7.1.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.1.0-next.1+c8ebaf14",
+  "version": "7.1.2",
   "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.1+c8ebaf14"
+    "@workday/canvas-kit-react": "^7.1.2"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "c8ebaf147f3f9a9145910c27022b3f5024c4cae9"
+  "gitHead": "3af79a1d78abc4335e0b94fcedfbd13c5d6b34bb"
 }