@workday/canvas-kit-docs 14.0.0-alpha.1223-next.0 → 14.0.0-alpha.1225-next.0

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

@@ -29,8 +29,9 @@ any questions.
   - [Side Panel (Main)](#side-panel-main)
   - [Tokens](#tokens)
 - [Removals](#removals)
-  - [Menu (preview)](#menu-preview)
   - [Deprecated Buttons](#deprecated-buttons)
+  - [Menu (preview)](#menu-preview)
+  - [readyOnlyPillStencil and removeablePillStencil][readyOnlyPillStencil-and-removeablePillStencil]
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -152,6 +153,7 @@ The following components have been updated:
 - `InformationHighlight` [#3443](https://github.com/Workday/canvas-kit/pull/3443)
 - `LoadingDots` (Main) [#3393](https://github.com/Workday/canvas-kit/pull/3393)
 - `Pagination` (Preview) [#3300](https://github.com/Workday/canvas-kit/pull/3300)
+- `Pill` [#3446](https://github.com/Workday/canvas-kit/pull/3446)
 - `SearchForm` (Labs) [#3303](https://github.com/Workday/canvas-kit/pull/3303)
 - `SegmentedControl` (Main) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
 - `SegmentedControl` (Preview) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
@@ -330,13 +332,37 @@ These changes are only **visual** and should not affect the functionality of the
 
 ### Pill
 
-**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
+**PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430), [#3446](https://github.com/Workday/canvas-kit/pull/3446)
 
 - `Pill` has been updated to use the `Avatar` component from Preview. This change requires that you
   provide a value for the `name` prop.
 
 > 🤖 The codemod will handle the change of `altText` to `name` on `Pill.Avatar`.
 
+- The `Pill` component no longer supports `'default'` as a value for the `variant` prop. If the
+  `variant` prop is not provided, the component will use its default styling.
+
+- `readyOnlyPillStencil` and `removeablePillStencil` have been removed due to some styling clean up. Please use `pillStencil` instead.
+
+**Before in v13**
+
+```tsx
+<Pill variant="default">
+  <Pill.Avatar altText="John Doe" />
+  <Pill.Label>John Doe</Pill.Label>
+</Pill>
+```
+
+**After in v14**
+
+```tsx
+<Pill>
+  <Pill.Avatar name="John Doe" />
+  <Pill.Label>John Doe</Pill.Label>
+</Pill>
+```
+
+
 ### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
@@ -519,6 +545,11 @@ We've removed `Menu` from `@workday/canvas-kit-preview-react` package. Please us
 [Menu](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs) from
 `@workday/canvas-kit-react` instead.
 
+### readyOnlyPillStencil and removeablePillStencil
+
+The `readyOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
+package. Please use `pillStencil` instead.
+
 ---
 
 ## Troubleshooting

package/dist/mdx/preview-react/pill/Pill.mdx

@@ -28,7 +28,7 @@ information to help with scanning and organization.
 
 ### Basic Pills
 
-By default a Pill is considered interactive, therefore it's default variant is `default`. All leading
+By default a Pill is considered interactive. All leading
 elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
 on the leading element to indicate the interaction behavior.
 
@@ -60,7 +60,7 @@ the count will directly correlate to that category.
 
 ### Read Only
 
-The `readOnly` variant is a non-interactive element that is used to display information. 
+The `readOnly` variant is a non-interactive element that is used to display information.
 
 You can define a read only `Pill` by providing a `variant='readOnly'` prop.
 

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

@@ -10,7 +10,7 @@ const flexStyles = createStyles({
 export default () => (
   <div className={flexStyles} id="read-only-list">
     <Pill variant="readOnly">Read-only</Pill>
-    <Pill variant="readOnly" maxWidth={250}>
+    <Pill variant="readOnly" maxWidth={150}>
       Read-only but with super long text in case you want to read a paragraph in a Pill which we
       don't recommend
     </Pill>

package/lib/ExampleCodeBlock.tsx

@@ -18,6 +18,7 @@ import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
 import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
 import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
 import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
+import {CanvasProvider, defaultCanvasTheme} from '@workday/canvas-kit-react/common';
 
 const cardStencil = createStencil({
   base: {
@@ -123,48 +124,55 @@ export const ExampleCodeBlock = ({code}: any) => {
     <div {...cardStencil({opened: isCodeDisplayed})}>
       <Card data-part="example-block" className="sb-unstyled">
         <Card.Body>
-          {React.createElement(code)}
-          {code && (
-            <div data-part="code-toggle-stackblitz-btn-container">
-              <TertiaryButton size="extraSmall" onClick={() => openProjectInStackblitz()}>
-                ⚡️ Edit in Stackblitz
-              </TertiaryButton>
-              <TertiaryButton size="extraSmall" onClick={() => setCodeDisplayed(!isCodeDisplayed)}>
-                {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
-              </TertiaryButton>
-            </div>
-          )}
+          <CanvasProvider theme={{canvas: defaultCanvasTheme}}>
+            {React.createElement(code)}
+            {code && (
+              <div data-part="code-toggle-stackblitz-btn-container">
+                <TertiaryButton size="extraSmall" onClick={() => openProjectInStackblitz()}>
+                  ⚡️ Edit in Stackblitz
+                </TertiaryButton>
+                <TertiaryButton
+                  size="extraSmall"
+                  onClick={() => setCodeDisplayed(!isCodeDisplayed)}
+                >
+                  {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
+                </TertiaryButton>
+              </div>
+            )}
+          </CanvasProvider>
         </Card.Body>
       </Card>
       <Card data-part="code-block" padding={0}>
         <Card.Body cs={{position: 'relative'}}>
-          {code && (
-            <div ref={textInput}>
-              <SyntaxHighlighter
-                className="sb-unstyled"
-                language="jsx"
-                style={vscDarkPlus}
-                customStyle={{
-                  fontSize: cssVar(system.fontSize.subtext.large),
-                  lineHeight: cssVar(system.lineHeight.subtext.large),
-                  margin: '0',
-                  padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
-                }}
-                children={code.__RAW__}
+          <CanvasProvider theme={{canvas: defaultCanvasTheme}}>
+            {code && (
+              <div ref={textInput}>
+                <SyntaxHighlighter
+                  className="sb-unstyled"
+                  language="jsx"
+                  style={vscDarkPlus}
+                  customStyle={{
+                    fontSize: cssVar(system.fontSize.subtext.large),
+                    lineHeight: cssVar(system.lineHeight.subtext.large),
+                    margin: '0',
+                    padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                  }}
+                  children={code.__RAW__}
+                />
+              </div>
+            )}
+            <Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
+              <TertiaryButton
+                aria-label="Copy Code"
+                size="large"
+                data-part="copy-btn"
+                variant="inverse"
+                iconPosition="end"
+                icon={copied ? checkCircleIcon : copyIcon}
+                onClick={onCopy}
               />
-            </div>
-          )}
-          <Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
-            <TertiaryButton
-              aria-label="Copy Code"
-              size="large"
-              data-part="copy-btn"
-              variant="inverse"
-              iconPosition="end"
-              icon={copied ? checkCircleIcon : copyIcon}
-              onClick={onCopy}
-            />
-          </Tooltip>
+            </Tooltip>
+          </CanvasProvider>
         </Card.Body>
       </Card>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1223-next.0",
+  "version": "14.0.0-alpha.1225-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1223-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1223-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1223-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1223-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1225-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1225-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1225-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1225-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "ca28ec0a632d90afcacdfcda090da1c8dc7d0dc6"
+  "gitHead": "521a212f0bb4fa645b980f065086277464445490"
 }