@workday/canvas-kit-docs 15.0.4 → 15.0.5

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

@@ -3,6 +3,8 @@ import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 type MyTabItem = {
   id: string;
@@ -26,20 +28,22 @@ export default () => {
   const [containerWidth, setContainerWidth] = React.useState('100%');
   return (
     <div>
-      <Box width={containerWidth} marginBottom="xl">
+      <Box cs={{width: containerWidth, marginBlockEnd: system.gap.xl}}>
         <Tabs model={model}>
           <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
             {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}
           </Tabs.List>
           <Tabs.Menu.Popper>
-            <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+            <Tabs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
               <Tabs.Menu.List>
                 {(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">{item.contents}</Tabs.Panel>}
+            {(item: MyTabItem) => (
+              <Tabs.Panel cs={{marginBlockStart: system.gap.lg}}>{item.contents}</Tabs.Panel>
+            )}
           </Tabs.Panels>
         </Tabs>
       </Box>

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

@@ -14,7 +14,7 @@ export default () => {
           <Tabs.Item>רביעי</Tabs.Item>
           <Tabs.Item>חמישי</Tabs.Item>
         </Tabs.List>
-        <div style={{marginTop: cssVar(system.gap.lg)}}>
+        <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
           <Tabs.Panel>תוכן הראשון</Tabs.Panel>
           <Tabs.Panel>תוכן השני</Tabs.Panel>
           <Tabs.Panel>תוכן השלישי</Tabs.Panel>

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

@@ -31,7 +31,7 @@ export default () => {
           Third Tab
         </Tabs.Item>
       </Tabs.List>
-      <Tabs.Panel cs={{marginTop: system.gap.lg}} hidden={undefined} id="mytab-panel">
+      <Tabs.Panel cs={{marginBlockStart: system.gap.lg}} hidden={undefined} id="mytab-panel">
         {contents[model.state.selectedIds[0]]}
       </Tabs.Panel>
     </Tabs>

package/dist/mdx/react/text/examples/LabelText/Disabled.tsx

@@ -5,7 +5,7 @@ import {system} from '@workday/canvas-tokens-web';
 const inverseBackground = createStyles({
   backgroundColor: system.color.brand.accent.primary,
   padding: system.padding.md,
-  marginTop: system.gap.md,
+  marginBlockStart: system.gap.md,
 });
 
 export default () => {

package/dist/mdx/react/tokens/examples/Overview.tsx

@@ -1,19 +1,17 @@
-import styled from '@emotion/styled';
-import * as React from 'react';
-
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {borderRadius, colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StyledCard = styled('div')({
-  ...depth[3],
-  padding: space.m,
-  borderRadius: borderRadius.m,
-  backgroundColor: colors.cinnamon300,
-  ...type.levels.body.medium,
+const cardStyles = createStyles({
+  ...system.type.body.md,
+  boxShadow: system.depth[3],
+  padding: system.padding.lg,
+  borderRadius: system.shape.md,
+  backgroundColor: system.color.accent.danger,
 });
 
 export default () => (
   <Flex>
-    <StyledCard>Using Tokens To Style</StyledCard>
+    <div className={cardStyles}>Using Tokens To Style</div>
   </Flex>
 );

package/dist/mdx/react/tokens/examples/Tokens.tsx

@@ -46,6 +46,7 @@ export default () => (
   </Flex>
 );
 
+// Ignore all `styled` as tokens are deprecated and will be removed in the future major version.
 const StyledLargeTitle = styled('h3')({
   ...type.levels.title.large,
 });
@@ -244,8 +245,8 @@ const Swatch = styled('li')<{bg: string; primary?: boolean}>(
       ...type.levels.body.large,
       fontWeight: type.properties.fontWeights.bold,
       height: space.xxxl,
-      paddingTop: space.s,
-      paddingBottom: space.s,
+      paddingBlockStart: space.s,
+      paddingBlockEnd: space.s,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-around',

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

@@ -2,10 +2,11 @@ import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {configureIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
-    <Flex gap="s">
+    <Flex cs={{gap: system.gap.sm}}>
       <Tooltip type="description" title="Search using additional criteria">
         <TertiaryButton icon={configureIcon}>Advanced Search</TertiaryButton>
       </Tooltip>

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

@@ -8,7 +8,7 @@ import {resetIcon} from '@workday/canvas-system-icons-web';
 const CustomContent = ({...elemProps}) => (
   <button
     style={{
-      marginTop: px2rem(12),
+      marginBlockStart: px2rem(12),
       maxWidth: px2rem(200),
       overflow: 'hidden',
       textOverflow: 'ellipsis',
@@ -39,7 +39,7 @@ export default () => {
       <OverflowTooltip>
         <button
           style={{
-            marginTop: px2rem(12),
+            marginBlockStart: px2rem(12),
             maxWidth: px2rem(200),
             overflow: 'hidden',
             textOverflow: 'ellipsis',

package/dist/mdx/styling/mdx/MergingStyles.mdx

@@ -81,6 +81,7 @@ const Component2 = props => {
   return <Component1 cs={styles2} />;
 };
 
+// Not recommended approach
 const Component3 = styled(Component1)({
   padding: 8,
 });

package/dist/mdx/styling/mdx/examples/EmotionButton.tsx

@@ -8,6 +8,7 @@ interface ButtonProps {
   children?: React.ReactNode;
 }
 
+// Showcase of old Emotion approach
 const StyledButton = styled('button')<ButtonProps>(
   {
     // base styles

package/dist/mdx/styling/mdx/examples/StylingOverrides.tsx

@@ -1,11 +1,10 @@
 import {jsx} from '@emotion/react';
 import styled from '@emotion/styled';
-import * as React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, cssVar} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const backgroundColors = {
   cssProp: cssVar(base.orange500),
@@ -14,6 +13,7 @@ const backgroundColors = {
   createStyles: cssVar(base.purple500),
 };
 
+// Showcase of old Emotion approach
 const StyledPrimaryButton = styled(PrimaryButton)({
   backgroundColor: backgroundColors.styledComponent,
 });
@@ -82,10 +82,10 @@ const cssProp = {css: {backgroundColor: backgroundColors.cssProp}} as {};
 
 export default () => {
   return (
-    <Flex flexDirection="column" minHeight="100vh" gap="s">
-      <Flex flexDirection="column" gap="s">
+    <Flex cs={{flexDirection: 'column', minHeight: '100vh', gap: system.gap.md}}>
+      <Flex cs={{flexDirection: 'column', gap: system.gap.md}}>
         <h2>Buttons</h2>
-        <Flex flexDirection="row" gap="s">
+        <Flex cs={{flexDirection: 'row', gap: system.gap.md}}>
           <PrimaryButton cs={styles}>createStyles</PrimaryButton>
           {jsx(PrimaryButton, {...cssProp}, 'CSS Prop')}
           <StyledPrimaryButton>Styled Component</StyledPrimaryButton>

package/dist/mdx/tokens/TokenMigrationFinal.mdx

@@ -83,7 +83,7 @@ const cardStyles = createStyles({
 
 const headerStyles = createStyles({
   color: system.color.fg.default,
-  marginBottom: system.gap.md,
+  marginBlockEnd: system.gap.md,
   ...system.type.heading.sm,
 });
 

package/lib/ExampleCodeBlock.tsx

@@ -155,7 +155,7 @@ export const ExampleCodeBlock = ({code}: any) => {
           </CanvasProvider>
         </Card.Body>
       </Card>
-      <Card data-part="code-block" padding={0}>
+      <Card data-part="code-block" cs={{padding: 0}}>
         <Card.Body cs={{position: 'relative'}}>
           <CanvasProvider className={defaultBranding}>
             {code && (

package/lib/Table.tsx

@@ -18,7 +18,7 @@ const TableBody = createComponent('tbody')({
 
 const tableRowStencil = createStencil({
   base: {
-    borderBottom: `${px2rem(1)} solid ${system.color.border.strong}`,
+    borderBlockEnd: `${px2rem(1)} solid ${system.color.border.strong}`,
   },
 });
 
@@ -65,7 +65,7 @@ const TableData = createComponent('td')({
 const tableCaptionStencil = createStencil({
   base: {
     borderCollapse: 'collapse',
-    marginBottom: system.gap.md,
+    marginBlockEnd: system.gap.md,
     width: '100%',
   },
 });

package/lib/widgetUtils.tsx

@@ -225,7 +225,7 @@ export const SymbolDialog = ({value}: SymbolDialogProps) => {
 
 const symbolDocStencil = createStencil({
   base: {
-    marginBottom: system.gap.lg,
+    marginBlockEnd: system.gap.lg,
     'button[data-symbol]': {
       border: 'none',
       background: 'transparent',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.4",
+  "version": "15.0.5",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,12 +46,12 @@
     "@mdx-js/react": "^3.1.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.4",
-    "@workday/canvas-kit-preview-react": "^15.0.4",
-    "@workday/canvas-kit-react": "^15.0.4",
-    "@workday/canvas-kit-styling": "^15.0.4",
-    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-expressive-icons-web": "1.0.2",
+    "@workday/canvas-kit-labs-react": "^15.0.5",
+    "@workday/canvas-kit-preview-react": "^15.0.5",
+    "@workday/canvas-kit-react": "^15.0.5",
+    "@workday/canvas-kit-styling": "^15.0.5",
+    "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.3.0",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "f942653d6e32c211030ea73fddebf3af11856056"
+  "gitHead": "7f80a853021fa7151423761ec2cedc5f310b99a4"
 }