@workday/canvas-kit-docs 13.0.0-alpha.1051-next.0 → 13.0.0-alpha.1061-next.0

package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx

@@ -3,29 +3,41 @@ import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const flexStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+});
 
 export default () => {
   const [text, setText] = React.useState('');
   return (
-    <Box>
-      <Flex gap="xxs">
+    <div>
+      <div className={flexStyles}>
         <Pill variant="removable">
-          Pink Shirts
-          <Pill.IconButton onClick={() => setText('The first pill is clicked!')} />
+          <Pill.Label>Pink Shirts</Pill.Label>
+          <Pill.IconButton
+            aria-label="Remove"
+            onClick={() => setText('The first pill is clicked!')}
+          />
         </Pill>
         <Pill variant="removable">
           <Pill.Avatar url={testAvatar} />
-          Carolyn Grimaldi
-          <Pill.IconButton onClick={() => setText('The second pill is clicked!')} />
+          <Pill.Label>Carolyn Grimaldi</Pill.Label>
+          <Pill.IconButton
+            aria-label="Remove"
+            onClick={() => setText('The second pill is clicked!')}
+          />
         </Pill>
         <Pill variant="removable" disabled>
           <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>
-          <Pill.IconButton />
+          <Pill.IconButton aria-label="Remove" />
         </Pill>
-      </Flex>
+      </div>
       <BodyText size="medium">{text}</BodyText>
-    </Box>
+    </div>
   );
 };

package/lib/ExampleCodeBlock.tsx

@@ -86,7 +86,9 @@ export const ExampleCodeBlock = ({code}: any) => {
    * `code` returns our examples. We need to rewrite them so that they export `Demo`.
    */
   const handleExampleRewrite = (code: any) => {
-    return code.replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`);
+    return code
+      .replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`)
+      .replace(/export default/, 'export const Demo =');
   };
 
   const openProjectInStackblitz = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.1051-next.0",
+  "version": "13.0.0-alpha.1061-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -43,11 +43,12 @@
   ],
   "dependencies": {
     "@emotion/styled": "^11.6.0",
+    "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1051-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1051-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1051-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1051-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1061-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1061-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1061-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1061-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "1d31c5bee6dbae914e2af4f9f73da5493a0c5b44"
+  "gitHead": "dcac6a3ea9994aac312ac7e7b6a616899f250d36"
 }