@workday/canvas-kit-docs 6.8.10 → 6.9.0-next.3

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
-import {SelectionModel} from '../../lib/selection';
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type Tab = {
   tab: string;
@@ -19,7 +17,7 @@ export default () => {
   const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
     items: tabs,
-    shouldSelect: ({data}) => data.id !== 'add',
+    shouldSelect: data => data.id !== 'add',
   });
 
   // A ref of the model for the render functions to work around the caching done to lists
@@ -33,9 +31,8 @@ export default () => {
    * * **Item is selected**: Selection will be moved to the next item in the list
    * @param id The id of the item that will be removed
    */
-  const removeItem = <T extends unknown>(id: string, model: SelectionModel<T>) => {
+  const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
     const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
-    console.log('index', index, id, model.state.cursorId, model.state.items);
     const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
     const nextId = model.getId(model.state.items[nextIndex]);
     if (model.state.selectedIds[0] === id) {
@@ -80,7 +77,7 @@ export default () => {
     <Tabs model={model}>
       <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
         {(item: Tab) => (
-          <Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
+          <Tabs.Item onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
             {item.tab}
           </Tabs.Item>
         )}
@@ -88,16 +85,12 @@ export default () => {
       <Tabs.Menu.Popper>
         <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
           <Tabs.Menu.List>
-            {(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
+            {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}
           </Tabs.Menu.List>
         </Tabs.Menu.Card>
       </Tabs.Menu.Popper>
       <Tabs.Panels>
-        {(item: Tab) => (
-          <Tabs.Panel marginTop="m" name={item.id}>
-            Contents of {item.tab}
-          </Tabs.Panel>
-        )}
+        {(item: Tab) => <Tabs.Panel marginTop="m">Contents of {item.tab}</Tabs.Panel>}
       </Tabs.Panels>
     </Tabs>
   );

package/dist/mdx/react/tabs/examples/HoistedModel.tsx

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onSelect({data, prevState}) {
-      console.log('Selected Tab', data, prevState);
+    onSelect(data, prevState) {
+      console.log('Selected Tab', data.id, prevState);
     },
   });
 
@@ -15,14 +15,14 @@ export default () => {
     <>
       <Tabs model={model}>
         <Tabs.List>
-          <Tabs.Item name="first">First Tab</Tabs.Item>
-          <Tabs.Item name="second">Second Tab</Tabs.Item>
-          <Tabs.Item name="third">Third Tab</Tabs.Item>
+          <Tabs.Item data-id="first">First Tab</Tabs.Item>
+          <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+          <Tabs.Item data-id="third">Third Tab</Tabs.Item>
         </Tabs.List>
         <div style={{marginTop: space.m}}>
-          <Tabs.Panel name="first">Contents of First Tab</Tabs.Panel>
-          <Tabs.Panel name="second">Contents of Second Tab</Tabs.Panel>
-          <Tabs.Panel name="third">Contents of Third Tab</Tabs.Panel>
+          <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+          <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+          <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
         </div>
       </Tabs>
       <SecondaryButton

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -8,19 +8,19 @@ export default () => {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={starIcon} />
           <Tabs.Item.Text>First Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={searchIcon} />
           <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={selectIcon} />
           <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={shareIcon} />
           <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
         </Tabs.Item>

package/dist/mdx/react/tabs/examples/NamedTabs.tsx

@@ -7,18 +7,18 @@ export default () => {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Item name="first">First Tab</Tabs.Item>
-        <Tabs.Item name="second">Second Tab</Tabs.Item>
-        <Tabs.Item name="third">Third Tab</Tabs.Item>
-        <Tabs.Item name="fourth">Fourth Tab</Tabs.Item>
-        <Tabs.Item name="fifth">Fifth Tab</Tabs.Item>
+        <Tabs.Item data-id="first">First Tab</Tabs.Item>
+        <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+        <Tabs.Item data-id="third">Third Tab</Tabs.Item>
+        <Tabs.Item data-id="fourth">Fourth Tab</Tabs.Item>
+        <Tabs.Item data-id="fifth">Fifth Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>
-        <Tabs.Panel name="first">Contents of First Tab</Tabs.Panel>
-        <Tabs.Panel name="second">Contents of Second Tab</Tabs.Panel>
-        <Tabs.Panel name="third">Contents of Third Tab</Tabs.Panel>
-        <Tabs.Panel name="fourth">Contents of Fourth Tab</Tabs.Panel>
-        <Tabs.Panel name="fifth">Contents of Fifth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fourth">Contents of Fourth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fifth">Contents of Fifth Tab</Tabs.Panel>
       </div>
     </Tabs>
   );

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 
 type MyTabItem = {
@@ -28,21 +28,17 @@ export default () => {
     <div style={{width: containerWidth}}>
       <Tabs model={model}>
         <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
-          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+          {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}
         </Tabs.List>
         <Tabs.Menu.Popper>
           <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
             <Tabs.Menu.List>
-              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+              {(item: MyTabItem) => <Tabs.Menu.Item>{item.text}</Tabs.Menu.Item>}
             </Tabs.Menu.List>
           </Tabs.Menu.Card>
         </Tabs.Menu.Popper>
         <Tabs.Panels>
-          {(item: MyTabItem) => (
-            <Tabs.Panel marginTop="m" name={item.id}>
-              {item.contents}
-            </Tabs.Panel>
-          )}
+          {(item: MyTabItem) => <Tabs.Panel marginTop="m">{item.contents}</Tabs.Panel>}
         </Tabs.Panels>
       </Tabs>
       <hr />

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -23,13 +23,13 @@ export default () => {
   return (
     <Tabs model={model}>
       <Tabs.List>
-        <Tabs.Item name="first" aria-controls="mytab-panel">
+        <Tabs.Item data-id="first" aria-controls="mytab-panel">
           First Tab
         </Tabs.Item>
-        <Tabs.Item name="second" aria-controls="mytab-panel">
+        <Tabs.Item data-id="second" aria-controls="mytab-panel">
           Second Tab
         </Tabs.Item>
-        <Tabs.Item name="third" aria-controls="mytab-panel">
+        <Tabs.Item data-id="third" aria-controls="mytab-panel">
           Third Tab
         </Tabs.Item>
       </Tabs.List>

package/dist/mdx/react/text-input/examples/Basic.tsx

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import {css, jsx} from '@emotion/react';
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -16,7 +16,7 @@ import UseTooltip from './examples/UseTooltip';
 
 A Tooltip component that renders information/text when the user hovers over an element. A tooltip is
 used to label or describe an element. By default, a tooltip will label an element. This is useful
-for IconButtons. A tooltip can also be used to describe additional information about an element
+for icon button. A tooltip can also be used to describe additional information about an element
 
 [> Workday Design Reference](https://design.workday.com/components/popups/tooltips)
 
@@ -55,7 +55,7 @@ tooltip being visible
 
 ### Basic Example
 
-Here is a basic example of an `IconButton` using a tooltip to label the icon. This is labeling the
+Here is a basic example of an `TertiaryButton` that renders an icon using a tooltip to label the icon. This is labeling the
 button for both sighted users and for screen readers. A tooltip will provide an `aria-label` to
 child elements for the accessibility tree and a visual tooltip during mouse hover and focus events.
 Mouse over or focus on the x icon below. Click "Show code" to see the source code.

package/dist/mdx/react/tooltip/examples/Default.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {xIcon} from '@workday/canvas-system-icons-web';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 export default () => {
   return (
     <Tooltip title="Close">
-      <IconButton variant="circle" icon={xIcon} aria-label="Close" />
+      <TertiaryButton icon={xIcon} aria-label="Close" />
     </Tooltip>
   );
 };

package/dist/mdx/react/tooltip/examples/UseTooltip.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Popper} from '@workday/canvas-kit-react/popup';
 import {xIcon} from '@workday/canvas-system-icons-web';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';
 
 export default () => {
@@ -10,7 +10,7 @@ export default () => {
 
   return (
     <>
-      <IconButton variant="circle" icon={xIcon} {...targetProps} aria-label="Close" />
+      <TertiaryButton icon={xIcon} {...targetProps} aria-label="Close" />
       <Popper placement="top" {...popperProps}>
         <TooltipContainer {...tooltipProps}>Close</TooltipContainer>
       </Popper>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.8.10",
+  "version": "6.9.0-next.3+33247e91",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,31 +10,23 @@
   "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/",
     "lib/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:mdx": "node ./utils/build-mdx.js mdx/",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
     "build:specs": "node ./utils/build-specifications.js",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
     "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
@@ -50,13 +42,13 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.8.10"
+    "@workday/canvas-kit-react": "^6.9.0-next.3+33247e91"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
     "glob": "^7.1.6",
     "mkdirp": "^1.0.3",
-    "typescript": "^3.8.3"
+    "typescript": "4.1"
   },
-  "gitHead": "89d05b86db640e12993c444b61ffad91b9eacc63"
+  "gitHead": "33247e91cbfeabea3ea344808b5fd241250f9a56"
 }

package/dist/mdx/labs-react/common/examples/PropTables.splitprops.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import {
-  BoxProps,
-  BorderStyleProps,
-  ColorStyleProps,
-  DepthStyleProps,
-  FlexItemStyleProps,
-  LayoutStyleProps,
-  PositionStyleProps,
-  SpaceStyleProps,
-} from '@workday/canvas-kit-labs-react/common';
-// border props
-export const BoxBorder = (props: BorderStyleProps) => <div />;
-export const BoxBorderShorthand = (
-  props: Pick<
-    BorderStyleProps,
-    'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft'
-  >
-) => <div />;
-export const BoxBorderColor = (
-  props: Pick<
-    BorderStyleProps,
-    'borderColor' | 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'
-  >
-) => <div />;
-export const BoxBorderRadius = (
-  props: Pick<
-    BorderStyleProps,
-    | 'borderRadius'
-    | 'borderTopLeftRadius'
-    | 'borderTopRightRadius'
-    | 'borderBottomLeftRadius'
-    | 'borderBottomRightRadius'
-  >
-) => <div />;
-export const BoxBorderStyle = (
-  props: Pick<
-    BorderStyleProps,
-    'borderStyle' | 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'
-  >
-) => <div />;
-export const BoxBorderWidth = (
-  props: Pick<
-    BorderStyleProps,
-    'borderWidth' | 'borderTopWidth' | 'borderRightWidth' | 'borderBottomWidth' | 'borderLeftWidth'
-  >
-) => <div />;
-export const BoxBorderLogical = (
-  props: Pick<
-    BorderStyleProps,
-    | 'borderInlineStart'
-    | 'borderInlineStartColor'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStartWidth'
-    | 'borderInlineEnd'
-    | 'borderInlineEndColor'
-    | 'borderInlineEndStyle'
-    | 'borderInlineEndWidth'
-  >
-) => <div />;
-// color props
-export const BoxColor = (props: ColorStyleProps) => <div />;
-// depth props
-export const BoxDepth = (props: DepthStyleProps) => <div />;
-// flex item props
-export const BoxFlexItem = (props: FlexItemStyleProps) => <div />;
-// layout props
-export const BoxLayout = (props: LayoutStyleProps) => <div />;
-// position props
-export const BoxPosition = (props: PositionStyleProps) => <div />;
-export const BoxPositionLogical = (
-  props: Pick<PositionStyleProps, 'insetInlineStart' | 'insetInlineEnd'>
-) => <div />;
-export const BoxPositionStandard = (
-  props: Omit<PositionStyleProps, 'insetInlineStart' | 'insetInlineEnd'>
-) => <div />;
-// space props
-export const BoxSpace = (props: SpaceStyleProps) => <div />;
-export const BoxSpaceLogical = (
-  props: Pick<
-    SpaceStyleProps,
-    'marginInlineStart' | 'marginInlineEnd' | 'paddingInlineStart' | 'paddingInlineEnd'
-  >
-) => <div />;
-export const BoxSpaceStandard = (
-  props: Omit<
-    SpaceStyleProps,
-    'marginInlineStart' | 'marginInlineEnd' | 'paddingInlineStart' | 'paddingInlineEnd'
-  >
-) => <div />;

package/dist/mdx/labs-react/layout/examples/Stack/ShouldWrapChildren.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import {Stack} from '@workday/canvas-kit-labs-react/layout';
-import {Box} from '@workday/canvas-kit-labs-react/common';
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {
-  arrowLeftIcon,
-  arrowRightIcon,
-  exportIcon,
-  homeIcon,
-  relatedActionsIcon,
-  resetIcon,
-  starIcon,
-} from '@workday/canvas-system-icons-web';
-
-export default () => {
-  return (
-    <Stack border="solid 2px" shouldWrapChildren spacing="xxxs" padding="xxxs">
-      <IconButton aria-label="go to previous page" icon={arrowLeftIcon} variant="squareFilled" />
-      <IconButton aria-label="go to next page" icon={arrowRightIcon} variant="squareFilled" />
-      <IconButton aria-label="reload current page" icon={resetIcon} variant="squareFilled" />
-      <IconButton aria-label="go to home page" icon={homeIcon} variant="squareFilled" />
-      <Box marginInlineStart="m">
-        <IconButton aria-label="share current page" icon={exportIcon} variant="squareFilled" />
-      </Box>
-      <IconButton aria-label="bookmark current page" icon={starIcon} variant="squareFilled" />
-      <IconButton
-        aria-label="view related actions"
-        icon={relatedActionsIcon}
-        variant="squareFilled"
-      />
-    </Stack>
-  );
-};

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -1,103 +0,0 @@
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {Specifications} from '@workday/canvas-kit-docs';
-
-import Circle from './examples/Circle';
-import CircleFilled from './examples/CircleFilled';
-import Inverse from './examples/Inverse';
-import InverseFilled from './examples/InverseFilled';
-import MirroredIcon from './examples/MirroredIcon';
-import Plain from './examples/Plain';
-import Square from './examples/Square';
-import SquareFilled from './examples/SquareFilled';
-import Toggleable from './examples/Toggleable';
-
-
-# Canvas Kit Icon Button
-
-Clickable icon button elements that extend the native `<button>` element with Canvas styling.
-
-[> Workday Design Reference](https://design.workday.com/components/buttons/icon-buttons)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-Here is a basic example of an Icon Button. Buttons can be customized with several props to change
-the size, variant, etc.
-
-<ExampleCodeBlock code={Circle} />
-
-### Variants
-
-`circle` is the default variant. Circle Icon Buttons have a hover state and should be used for
-actions that require more emphasis than Plain Buttons.
-
-Below are the other available variants:
-
-#### CircleFilled
-
-Filled Icon Buttons have a gray background and a hover state. Use these buttons for high-emphasis
-actions.
-
-<ExampleCodeBlock code={CircleFilled} />
-
-#### Plain
-
-Plain Icon Buttons don’t have a hover state and should be used for low-emphasis actions.
-
-<ExampleCodeBlock code={Plain} />
-
-#### Square
-
-Square Icon Buttons are the equivalent to Default Icon Buttons and are typically used in Toolbars.
-
-<ExampleCodeBlock code={Square} />
-
-#### SquareFilled
-
-Square Filled Icon Buttons are the equivalent to Filled Icon Buttons and are used in Icon Button
-Toggle Groups.
-
-<ExampleCodeBlock code={SquareFilled} />
-
-#### Inverse
-
-Inverse Icon Buttons should be used on dark backgrounds.
-
-<ExampleCodeBlock code={Inverse} />
-
-#### InverseFilled
-
-InverseFilled Icon Buttons are a higher emphasis version of Inverse, and should be used on dark
-backgrounds.
-
-<ExampleCodeBlock code={InverseFilled} />
-
-### Mirroring Icons
-
-Sometimes icons should be mirrored for bidirectional support. Setting the `shouldMirrorIcon` prop to
-`true` will transform the icon's x-axis to mirror the graphic. This is often useful when there is no
-equivalent mirrored icon available. Below is an example of the `unorderedListIcon` being rendered in
-its default state with an icon showing a left-to-right bulleted list. Beside it is the same icon
-that has been mirrored to show a right-to-left bulleted list.
-
-Note that while the `aria-label` text in this example did not need to be updated, if the label
-contains directional descriptors such as "right" and "left," the text should also be updated.
-
-<ExampleCodeBlock code={MirroredIcon} />
-
-### Toggleability
-
-The `toggle` prop can be used to make icon buttons toggleable.
-
-<ExampleCodeBlock code={Toggleable} />
-
-## Props
-
-Undocumented props are spread to the underlying `<button>` element.
-
-<ArgsTable of={IconButton} />

package/dist/mdx/react/button/icon-button/examples/Circle.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-export default () => <IconButton icon={activityStreamIcon} aria-label="Activity Stream" />;

package/dist/mdx/react/button/icon-button/examples/CircleFilled.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="circleFilled" />
-);

package/dist/mdx/react/button/icon-button/examples/Inverse.tsx

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
-import React from 'react';
-
-import {space, colors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-const blueBackground = {
-  backgroundColor: colors.blueberry400,
-  borderRadius: borderRadius.m,
-  padding: space.xxs,
-  display: 'inline-block',
-};
-
-export default () => (
-  <div css={blueBackground}>
-    <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="inverse" />
-  </div>
-);

package/dist/mdx/react/button/icon-button/examples/InverseFilled.tsx

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
-import React from 'react';
-
-import {space, colors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-const blueBackground = {
-  backgroundColor: colors.blueberry400,
-  borderRadius: borderRadius.m,
-  padding: space.xxs,
-  display: 'inline-block',
-};
-
-export default () => (
-  <div css={blueBackground}>
-    <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="inverseFilled" />
-  </div>
-);

package/dist/mdx/react/button/icon-button/examples/MirroredIcon.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {unorderedListIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <>
-    <IconButton icon={unorderedListIcon} aria-label="create a bulleted list" />
-    <IconButton icon={unorderedListIcon} aria-label="create a bulleted list" shouldMirrorIcon />
-  </>
-);

package/dist/mdx/react/button/icon-button/examples/Plain.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="plain" />
-);

package/dist/mdx/react/button/icon-button/examples/Square.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="square" />
-);

package/dist/mdx/react/button/icon-button/examples/SquareFilled.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-import {IconButton} from '@workday/canvas-kit-react/button';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <IconButton icon={activityStreamIcon} aria-label="Activity Stream" variant="squareFilled" />
-);