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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/es6/lib/ExampleCodeBlock.d.ts.map +1 -1
  2. package/dist/es6/lib/ExampleCodeBlock.js +3 -1
  3. package/dist/es6/lib/docs.js +20393 -11950
  4. package/dist/es6/lib/stackblitzFiles/.eslintrc.cjs.txt +15 -0
  5. package/dist/es6/lib/stackblitzFiles/App.tsx +34 -0
  6. package/dist/es6/lib/stackblitzFiles/Demo.tsx +3 -0
  7. package/dist/es6/lib/stackblitzFiles/index.html +13 -0
  8. package/dist/es6/lib/stackblitzFiles/main.tsx +28 -0
  9. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +6 -6
  10. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +42 -0
  11. package/dist/es6/lib/stackblitzFiles/tsconfig.json +26 -0
  12. package/dist/es6/lib/stackblitzFiles/tsconfig.node.json +12 -0
  13. package/dist/es6/lib/stackblitzFiles/vite-env.d.ts +1 -0
  14. package/dist/es6/lib/stackblitzFiles/vite.config.ts +10 -0
  15. package/dist/mdx/12.0-UPGRADE-GUIDE.mdx +1 -1
  16. package/dist/mdx/13.0-UPGRADE-GUIDE.mdx +21 -2
  17. package/dist/mdx/TESTING.mdx +34 -0
  18. package/dist/mdx/preview-react/pill/Pill.mdx +18 -9
  19. package/dist/mdx/preview-react/pill/examples/Basic.tsx +14 -8
  20. package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx +47 -0
  21. package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx +15 -9
  22. package/dist/mdx/preview-react/pill/examples/WithCount.tsx +12 -6
  23. package/dist/mdx/preview-react/pill/examples/WithList.tsx +15 -5
  24. package/dist/mdx/preview-react/pill/examples/WithReadOnly.tsx +8 -3
  25. package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx +22 -10
  26. package/lib/ExampleCodeBlock.tsx +3 -1
  27. package/package.json +7 -6
package/dist/es6/lib/stackblitzFiles/.eslintrc.cjs.txt ADDED
@@ -0,0 +1,15 @@
1
+ module.exports = {
2
+ root: true,
3
+ env: {browser: true, es2020: true},
4
+ extends: [
5
+ 'eslint:recommended',
6
+ 'plugin:@typescript-eslint/recommended',
7
+ 'plugin:react-hooks/recommended',
8
+ ],
9
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
10
+ parser: '@typescript-eslint/parser',
11
+ plugins: ['react-refresh'],
12
+ rules: {
13
+ 'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
14
+ },
15
+ };
package/dist/es6/lib/stackblitzFiles/App.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import * as React from 'react';
2
+ import {
3
+ CanvasProvider,
4
+ ContentDirection,
5
+ PartialEmotionCanvasTheme,
6
+ useTheme,
7
+ } from '@workday/canvas-kit-react/common';
8
+ import {createStyles} from '@workday/canvas-kit-styling';
9
+
10
+ import {Demo} from './Demo';
11
+ import {system} from '@workday/canvas-tokens-web';
12
+
13
+ const mainContentStyles = createStyles({
14
+ padding: system.space.x4,
15
+ });
16
+
17
+ export const App = () => {
18
+ // useTheme is filling in the Canvas theme object if any keys are missing
19
+ const canvasTheme: PartialEmotionCanvasTheme = useTheme({
20
+ canvas: {
21
+ direction: ContentDirection.LTR,
22
+ },
23
+ });
24
+
25
+ return (
26
+ <CanvasProvider theme={canvasTheme}>
27
+ <>
28
+ <main className={mainContentStyles}>
29
+ <Demo />
30
+ </main>
31
+ </>
32
+ </CanvasProvider>
33
+ );
34
+ };
package/dist/es6/lib/stackblitzFiles/Demo.tsx ADDED
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+
3
+ export const Demo = ({}) => <div></div>;
package/dist/es6/lib/stackblitzFiles/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + React + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/dist/es6/lib/stackblitzFiles/main.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import * as React from 'react';
2
+ import {createRoot} from 'react-dom/client';
3
+ import {fonts} from '@workday/canvas-kit-react-fonts';
4
+ import {system} from '@workday/canvas-tokens-web';
5
+ import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
6
+ import {App} from './App';
7
+
8
+ import '@workday/canvas-tokens-web/css/base/_variables.css';
9
+ import '@workday/canvas-tokens-web/css/brand/_variables.css';
10
+ import '@workday/canvas-tokens-web/css/system/_variables.css';
11
+
12
+ //@ts-ignore
13
+ injectGlobal({
14
+ ...fonts,
15
+ 'html, body': {
16
+ fontFamily: cssVar(system.fontFamily.default),
17
+ margin: 0,
18
+ minHeight: '100vh',
19
+ },
20
+ '#root, #root < div': {
21
+ minHeight: '100vh',
22
+ ...system.type.body.small,
23
+ },
24
+ });
25
+
26
+ const container = document.getElementById('root')!;
27
+ const root = createRoot(container);
28
+ root.render(<App />);
package/dist/es6/lib/stackblitzFiles/packageJSONFile.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // @ts-ignore: Cannot find module error
2
- import { version } from '../../../../lerna.json';
2
+
3
3
  export const packageJSONFile = `{
4
4
  "name": "vite-react-typescript-starter",
5
5
  "private": true,
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
18
18
  "@emotion/react": "11.11.4",
19
19
  "@types/react": "18.2.60",
20
20
  "@types/react-dom": "18.2.19",
21
- "@workday/canvas-kit-labs-react": "${version}",
22
- "@workday/canvas-kit-preview-react": "${version}",
23
- "@workday/canvas-kit-react": "${version}",
24
- "@workday/canvas-kit-react-fonts": "^${version}",
25
- "@workday/canvas-kit-styling": "${version}",
21
+ "@workday/canvas-kit-labs-react": "12.4.22",
22
+ "@workday/canvas-kit-preview-react": "12.4.22",
23
+ "@workday/canvas-kit-react": "12.4.22",
24
+ "@workday/canvas-kit-react-fonts": "^12.4.22",
25
+ "@workday/canvas-kit-styling": "12.4.22",
26
26
  "@workday/canvas-system-icons-web": "3.0.22",
27
27
  "@workday/canvas-tokens-web": "2.0.0"
28
28
  },
package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts ADDED
@@ -0,0 +1,42 @@
1
+ // @ts-ignore: Cannot find module error
2
+
3
+ export const packageJSONFile = `{
4
+ "name": "vite-react-typescript-starter",
5
+ "private": true,
6
+ "version": "0.0.0",
7
+ "type": "module",
8
+ "scripts": {
9
+ "dev": "vite",
10
+ "build": "tsc && vite build",
11
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
12
+ "preview": "vite preview"
13
+ },
14
+ "dependencies": {
15
+ "react": "^18.2.0",
16
+ "react-dom": "^18.2.0",
17
+ "@emotion/css": "11.11.2",
18
+ "@emotion/react": "11.11.4",
19
+ "@types/react": "18.2.60",
20
+ "@types/react-dom": "18.2.19",
21
+ "@workday/canvas-kit-labs-react": "12.4.22",
22
+ "@workday/canvas-kit-preview-react": "12.4.22",
23
+ "@workday/canvas-kit-react": "12.4.22",
24
+ "@workday/canvas-kit-react-fonts": "^12.4.22",
25
+ "@workday/canvas-kit-styling": "12.4.22",
26
+ "@workday/canvas-system-icons-web": "3.0.22",
27
+ "@workday/canvas-tokens-web": "2.0.0"
28
+ },
29
+ "devDependencies": {
30
+ "@types/react": "^18.2.59",
31
+ "@types/react-dom": "^18.2.19",
32
+ "@typescript-eslint/eslint-plugin": "^7.1.0",
33
+ "@typescript-eslint/parser": "^7.1.0",
34
+ "@vitejs/plugin-react": "^4.2.1",
35
+ "eslint": "^8.57.0",
36
+ "eslint-plugin-react-hooks": "^4.6.0",
37
+ "eslint-plugin-react-refresh": "^0.4.5",
38
+ "typescript": "^5.2.2",
39
+ "vite": "^5.1.4"
40
+ }
41
+ }
42
+ `;
package/dist/es6/lib/stackblitzFiles/tsconfig.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "useDefineForClassFields": true,
5
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
6
+ "module": "ESNext",
7
+ "skipLibCheck": true,
8
+
9
+ /* Bundler mode */
10
+ "moduleResolution": "bundler",
11
+ "allowImportingTsExtensions": true,
12
+ "resolveJsonModule": true,
13
+ "isolatedModules": true,
14
+ "noEmit": true,
15
+ "jsx": "react-jsx",
16
+ "types": ["vite-env"],
17
+
18
+ /* Linting */
19
+ "strict": true,
20
+ "noUnusedLocals": true,
21
+ "noUnusedParameters": true,
22
+ "noFallthroughCasesInSwitch": true
23
+ },
24
+ "include": ["src"],
25
+ "references": [{ "path": "./tsconfig.node.json" }]
26
+ }
package/dist/es6/lib/stackblitzFiles/tsconfig.node.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "skipLibCheck": true,
5
+ "module": "ESNext",
6
+ "moduleResolution": "bundler",
7
+ "allowSyntheticDefaultImports": true,
8
+ "strict": true
9
+ },
10
+ "include": ["vite.config.ts"]
11
+ }
12
+
package/dist/es6/lib/stackblitzFiles/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />`
package/dist/es6/lib/stackblitzFiles/vite.config.ts ADDED
@@ -0,0 +1,10 @@
1
+ /// <reference path="./types/custom-imports.d.ts" />
2
+
3
+ import {defineConfig} from 'vite';
4
+
5
+ import react from '@vitejs/plugin-react';
6
+
7
+ // https://vitejs.dev/config/
8
+ export default defineConfig({
9
+ plugins: [react()],
10
+ });
package/dist/mdx/12.0-UPGRADE-GUIDE.mdx CHANGED
@@ -324,7 +324,7 @@ const MyComboboxInput = createSubcomponent(TextInput)({
324
324
  **PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
325
325
  [#2881](https://github.com/Workday/canvas-kit/pull/2881),
326
326
  [#2934](https://github.com/Workday/canvas-kit/pull/2934),
327
- [2973](https://github.com/Workday/canvas-kit/pull/2973)
327
+ [#2973](https://github.com/Workday/canvas-kit/pull/2973)
328
328
 
329
329
  We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been
330
330
  made to provide more flexibility and better explicit components when using inputs.
package/dist/mdx/13.0-UPGRADE-GUIDE.mdx CHANGED
@@ -19,6 +19,7 @@ any questions.
19
19
  - [Component Updates](#component-updates)
20
20
  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
21
21
  - [External Hyperlink](#external-hyperlink)
22
+ - [Pill](#pill)
22
23
  - [Tabs](#tabs)
23
24
  - [Troubleshooting](#troubleshooting)
24
25
  - [Glossary](#glossary)
@@ -91,7 +92,7 @@ yarn remove @workday/canvas-kit-codemod
91
92
 
92
93
  ### Styling API and CSS Tokens
93
94
 
94
- **PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164)
95
+ **PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164), [#3128](https://github.com/Workday/canvas-kit/pull/3128)
95
96
 
96
97
  Several components have been refactored to use our
97
98
  [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -104,9 +105,11 @@ The React interface **has not changed**, but CSS variables are now used for dyna
104
105
 
105
106
  The following components are affected:
106
107
 
108
+ - `Expandable`
107
109
  - `ExternalHyperlink`
108
110
  - `LoadingSparkles`
109
111
  - `Menu`
112
+ - `Pill`
110
113
  - `Skeleton`
111
114
  - `Tabs`
112
115
  - `Tooltip`
@@ -129,11 +132,27 @@ The following components are affected:
129
132
  </ExternalHyperlink>
130
133
  ```
131
134
 
135
+ ## Pill
136
+
137
+ **PRs:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
138
+
139
+ A few changes have been made to `Pill` to ensure proper accessibility and styles.
140
+
141
+ - The border color on hover has been updated from `licorice400` to `licorice500` to match our design specs.
142
+ - We've removed extra elements and leverage [flex box}(https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When `maxWidth` is set, it is set on the parent `<Pill/>` element and the child elements will be styled accordingly. Before v13, `maxWidth` wasn't calculating the width of all its elements and wasn't a true pixel value.
143
+
144
+ ##### Breaking Changes
145
+
146
+ - `maxWidth` has been removed from the `usePillModel`. This config was used to style sub-components. With the refactor to use `data-part` and [stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--docs#create-stencil), it is no longer needed on the model. You can still apply `maxWidth` on the parent `<Pill>` element and the child elements will be styled accordingly.
147
+ - `<Pill.Icon/>` no longer has a default `aria-label="add"`. You *must* provide an `aria-label` for `<Pill.Icon/>` to ensure proper accessibility. Our examples have been updated to reflect this change.
148
+ - `<Pill.IconButton/>` no longer has a default `aria-label="remove"`. You *must* provide an `aria-label` for `<Pill.IconButton/>` to ensure proper accessibility. Our examples have been updated to reflect this change.
149
+ - `<Pill.Label/>` is a *required* element when using other sub-components like `<Pill.Icon/>` to ensure that the label truncates correctly.
150
+
132
151
  ## Tabs
133
152
 
134
153
  **PR:** [#3119](https://github.com/Workday/canvas-kit/pull/3119)
135
154
 
136
- - The `disabled` icon color has been updated to use `system.color.fg.disabled`. This has made the icon darker for better contrast.
155
+ - The `disabled` icon color has been updated to use `system.color.fg.disabled`. This has made the icon darker for better contrast.
137
156
 
138
157
  **Note:** There should be no developer impact and the visual changes are safe to accept.
139
158
 
package/dist/mdx/TESTING.mdx CHANGED
@@ -160,6 +160,40 @@ This will ensure snapshot tests have stable ids for each snapshot. It is still p
160
160
  changing if you add an additional component that uses id generation - subsequent ids will be
161
161
  different, but this will prevent snapshot tests that don't have any changes from showing diffs.
162
162
 
163
+ The Canvas Kit Styling package uses CSS Variables and multiple class names with unique hashes.
164
+ The following snapshot serializers handle styling. Setting unique seeds will not effect static style
165
+ hashes because the styles are created before any test code is run. These serializers ignore the
166
+ hashes instead.
167
+
168
+ ```ts
169
+ // Handle `css-{hash}` class names
170
+ const emotionClassnameRegex = /(css-[a-zA-Z0-9]{1,7})/g;
171
+ expect.addSnapshotSerializer({
172
+ test: (val) => typeof val === "string" && emotionClassnameRegex.test(val),
173
+ print: (val) => {
174
+ return `"${val.replaceAll(emotionClassnameRegex, "css-xxxxx")}"`;
175
+ },
176
+ });
177
+
178
+ // Handle `m{hash}` class names
179
+ const emotionModifierClassnameRegex = /^m[a-zA-Z0-9]{5,7}/g;
180
+ expect.addSnapshotSerializer({
181
+ test: (val) => typeof val === "string" && emotionModifierClassnameRegex.test(val),
182
+ print: (val) => {
183
+ return `"${val.replaceAll(emotionModifierClassnameRegex, "m-xxxxx")}"`;
184
+ },
185
+ });
186
+
187
+ // Handle `--myVariableName-{hash}` CSS variables used by Stencils
188
+ const cssVariableRegex = /(^--([a-zA-Z-]+)-[a-zA-Z0-9]{1,7})/g;
189
+ expect.addSnapshotSerializer({
190
+ test: (val) => typeof val === "string" && cssVariableRegex.test(val),
191
+ print: (val) => {
192
+ return `"${val.replaceAll(cssVariableRegex, "--$2-xxxxx")}"`;
193
+ },
194
+ });
195
+ ```
196
+
163
197
  ## Functional tests
164
198
 
165
199
  Canvas Kit uses [Cypress](https://cypress.io) for browser-based behavior testing (additional info:
package/dist/mdx/preview-react/pill/Pill.mdx CHANGED
@@ -6,6 +6,7 @@ import Basic from './examples/Basic';
6
6
  import WithCount from './examples/WithCount';
7
7
  import WithRemovable from './examples/WithRemovable';
8
8
  import WithList from './examples/WithList';
9
+ import CustomStyles from './examples/CustomStyles';
9
10
 
10
11
 
11
12
  # Canvas Kit Pill
@@ -27,7 +28,7 @@ information to help with scanning and organization.
27
28
 
28
29
  ### Basic Pills
29
30
 
30
- By default a Pill is considered interactive, therefore it's default variant is `default`.All leading
31
+ By default a Pill is considered interactive, therefore it's default variant is `default`. All leading
31
32
  elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
32
33
  on the leading element to indicate the interaction behavior.
33
34
 
@@ -35,7 +36,11 @@ on the leading element to indicate the interaction behavior.
35
36
 
36
37
  You can render an icon inside the `Pill` with `Pill.Icon`. It will render a `plusIcon` by default,
37
38
  but it can be customized by providing an icon to the `icon` prop. Because it uses `SystemIcon` under
38
- the hood, you also have to all `SystemIconProps`.
39
+ the hood, you also have access to all `SystemIconProps`.
40
+
41
+ #### Accessibility
42
+
43
+ You must provide an `aria-label` to the `Pill.Icon` for proper accessibility.
39
44
 
40
45
  <ExampleCodeBlock code={Basic} />
41
46
 
@@ -49,19 +54,15 @@ You can render an avatar image inside the `Pill` with `Pill.Avatar`. It should a
49
54
  #### Count
50
55
 
51
56
  The count appears after the label. It is usually associated with the label. If you have a category,
52
- the count will dirrectly correlate to that category.
57
+ the count will directly correlate to that category.
53
58
 
54
59
  <ExampleCodeBlock code={WithCount} />
55
60
 
56
61
  ### Read Only
57
62
 
58
- If the `Pill` has `variant='readOnly'`, it will look like a read-only `Pill`. This is a
59
- non-interactive element that is used to display information.
63
+ The `readOnly` variant is a non-interactive element that is used to display information.
60
64
 
61
- > **_NOTE:_** `maxWidth` measures the width of the `Pill.Label` (or text) and not the width of the
62
- > entire `Pill`. By default, this `maxWidth` is set to `200px` and the text will be truncated with
63
- > an ellipsis and render an OverflowTooltip on hover and focus. This max width can be changed by
64
- > providing a `maxWidth` prop on the Pill.
65
+ You can define a read only `Pill` by providing a `variant='readOnly'` prop.
65
66
 
66
67
  <ExampleCodeBlock code={WithReadOnly} />
67
68
 
@@ -97,6 +98,14 @@ accordingly.
97
98
 
98
99
  <ExampleCodeBlock code={WithList} />
99
100
 
101
+ ### Custom Styles
102
+
103
+ `Pill` supports custom styling via the `cs` prop. For more information, check our
104
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
105
+ or view the example below.
106
+
107
+ <ExampleCodeBlock code={CustomStyles} />
108
+
100
109
  ## Component API
101
110
 
102
111
  <SymbolDoc name="Pill" fileName="/preview-react/" />
package/dist/mdx/preview-react/pill/examples/Basic.tsx CHANGED
@@ -2,24 +2,30 @@ import React from 'react';
2
2
 
3
3
  import {Pill} from '@workday/canvas-kit-preview-react/pill';
4
4
 
5
- import {Box, Flex} from '@workday/canvas-kit-react/layout';
6
5
  import {BodyText} from '@workday/canvas-kit-react/text';
6
+ import {createStyles} from '@workday/canvas-kit-styling';
7
+ import {system} from '@workday/canvas-tokens-web';
8
+
9
+ const flexStyles = createStyles({
10
+ display: 'flex',
11
+ gap: system.space.x2,
12
+ });
7
13
 
8
14
  export default () => {
9
15
  const [text, setText] = React.useState('');
10
16
  return (
11
- <Box>
12
- <Flex gap="xxs">
17
+ <div>
18
+ <div className={flexStyles}>
13
19
  <Pill onClick={() => setText('The first pill is clicked!')}>
14
- <Pill.Icon />
20
+ <Pill.Icon aria-label="Add user" />
15
21
  <Pill.Label>Regina Skeltor</Pill.Label>
16
22
  </Pill>
17
- <Pill onClick={() => setText('The second pill is clicked!')} disabled>
18
- <Pill.Icon />
23
+ <Pill disabled>
24
+ <Pill.Icon aria-label="Add user" />
19
25
  <Pill.Label>Regina Skeltor</Pill.Label>
20
26
  </Pill>
21
- </Flex>
27
+ </div>
22
28
  <BodyText size="medium">{text}</BodyText>
23
- </Box>
29
+ </div>
24
30
  );
25
31
  };
package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+
3
+ import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';
4
+
5
+ import {createStencil} from '@workday/canvas-kit-styling';
6
+ import {base} from '@workday/canvas-tokens-web';
7
+ import {systemIconStencil} from '@workday/canvas-kit-react/icon';
8
+
9
+ const customPillStencil = createStencil({
10
+ base: {
11
+ [pillStencil.vars.background]: base.berrySmoothie300,
12
+ [pillStencil.vars.border]: base.berrySmoothie500,
13
+ [pillStencil.vars.label]: base.frenchVanilla100,
14
+ [systemIconStencil.vars.color]: base.frenchVanilla100,
15
+ [pillCountStencil.vars.backgroundColor]: base.berrySmoothie400,
16
+
17
+ '&:hover, &.hover': {
18
+ [pillStencil.vars.background]: base.berrySmoothie400,
19
+ [pillStencil.vars.label]: base.frenchVanilla100,
20
+ [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
21
+ [systemIconStencil.vars.color]: base.frenchVanilla100,
22
+ },
23
+ '&:active, &.active': {
24
+ [pillStencil.vars.background]: base.berrySmoothie400,
25
+ [pillStencil.vars.label]: base.frenchVanilla100,
26
+ [systemIconStencil.vars.color]: base.frenchVanilla100,
27
+ [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
28
+ },
29
+ '&:disabled, &.disabled': {
30
+ [pillStencil.vars.background]: base.berrySmoothie400,
31
+ [pillStencil.vars.label]: base.frenchVanilla100,
32
+ [systemIconStencil.vars.color]: base.frenchVanilla100,
33
+ },
34
+ },
35
+ });
36
+
37
+ export default () => {
38
+ return (
39
+ <div>
40
+ <Pill cs={customPillStencil()}>
41
+ <Pill.Icon aria-label="Add user" />
42
+ <Pill.Label>Custom Pill Color</Pill.Label>
43
+ <Pill.Count>10</Pill.Count>
44
+ </Pill>
45
+ </div>
46
+ );
47
+ };
package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx CHANGED
@@ -3,24 +3,30 @@ import React from 'react';
3
3
  import {Pill} from '@workday/canvas-kit-preview-react/pill';
4
4
  // @ts-ignore: Cannot find module error
5
5
  import testAvatar from './test-avatar.png';
6
- import {Flex, Box} from '@workday/canvas-kit-react/layout';
7
6
  import {BodyText} from '@workday/canvas-kit-react/text';
7
+ import {createStyles} from '@workday/canvas-kit-styling';
8
+ import {system} from '@workday/canvas-tokens-web';
9
+
10
+ const flexStyles = createStyles({
11
+ display: 'flex',
12
+ gap: system.space.x2,
13
+ });
8
14
 
9
15
  export default () => {
10
16
  const [text, setText] = React.useState('');
11
17
  return (
12
- <Box>
13
- <Flex gap="xxs">
18
+ <div>
19
+ <div className={flexStyles}>
14
20
  <Pill onClick={() => setText('The first pill is clicked!')}>
15
21
  <Pill.Avatar url={testAvatar} />
16
- Regina Skeltor
22
+ <Pill.Label>Regina Skeltor</Pill.Label>
17
23
  </Pill>
18
- <Pill onClick={() => setText('The second pill is clicked!')} disabled maxWidth={50}>
19
- <Pill.Avatar url={testAvatar} />
20
- Regina Skeltor
24
+ <Pill disabled>
25
+ <Pill.Avatar />
26
+ <Pill.Label>Regina Skeltor</Pill.Label>
21
27
  </Pill>
22
- </Flex>
28
+ </div>
23
29
  <BodyText size="medium">{text}</BodyText>
24
- </Box>
30
+ </div>
25
31
  );
26
32
  };
package/dist/mdx/preview-react/pill/examples/WithCount.tsx CHANGED
@@ -1,23 +1,29 @@
1
1
  import React from 'react';
2
2
  import {Pill} from '@workday/canvas-kit-preview-react/pill';
3
- import {Flex, Box} from '@workday/canvas-kit-react/layout';
4
3
  import {BodyText} from '@workday/canvas-kit-react/text';
4
+ import {createStyles} from '@workday/canvas-kit-styling';
5
+ import {system} from '@workday/canvas-tokens-web';
6
+
7
+ const flexStyles = createStyles({
8
+ display: 'flex',
9
+ gap: system.space.x2,
10
+ });
5
11
 
6
12
  export default () => {
7
13
  const [text, setText] = React.useState('');
8
14
  return (
9
- <Box>
10
- <Flex gap="xxs">
15
+ <div>
16
+ <div className={flexStyles}>
11
17
  <Pill onClick={() => setText('The first pill is clicked!')}>
12
18
  Shoes
13
19
  <Pill.Count>30</Pill.Count>
14
20
  </Pill>
15
- <Pill onClick={() => setText('The second pill is clicked!')} disabled>
21
+ <Pill disabled>
16
22
  Shoes
17
23
  <Pill.Count>30</Pill.Count>
18
24
  </Pill>
19
- </Flex>
25
+ </div>
20
26
  <BodyText size="medium">{text}</BodyText>
21
- </Box>
27
+ </div>
22
28
  );
23
29
  };
package/dist/mdx/preview-react/pill/examples/WithList.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {Pill} from '@workday/canvas-kit-preview-react/pill';
4
- import {Flex} from '@workday/canvas-kit-react/layout';
4
+ import {createStyles} from '@workday/canvas-kit-styling';
5
+ import {system} from '@workday/canvas-tokens-web';
5
6
 
6
7
  const data = [
7
8
  'Shoes',
@@ -17,19 +18,28 @@ const data = [
17
18
  'Jewelry',
18
19
  ];
19
20
 
21
+ const flexWrapStyles = createStyles({
22
+ display: 'flex',
23
+ flexWrap: 'wrap',
24
+ gap: system.space.x2,
25
+ });
26
+
20
27
  export default () => {
21
28
  const [items, setItems] = React.useState(data);
22
29
 
23
30
  return (
24
- <Flex flexWrap="wrap">
31
+ <div className={flexWrapStyles}>
25
32
  {items.map((cat, index) => {
26
33
  return (
27
- <Pill key={index} variant="removable" marginBottom="xxs" marginInlineEnd="xxs">
34
+ <Pill key={index} variant="removable">
28
35
  <Pill.Label>{cat}</Pill.Label>
29
- <Pill.IconButton onClick={() => setItems(items.filter(i => i !== cat))} />
36
+ <Pill.IconButton
37
+ aria-label="Remove"
38
+ onClick={() => setItems(items.filter(i => i !== cat))}
39
+ />
30
40
  </Pill>
31
41
  );
32
42
  })}
33
- </Flex>
43
+ </div>
34
44
  );
35
45
  };
package/dist/mdx/preview-react/pill/examples/WithReadOnly.tsx CHANGED
@@ -1,15 +1,20 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import {Pill} from '@workday/canvas-kit-preview-react/pill';
4
+ import {createStyles} from '@workday/canvas-kit-styling';
5
+ import {system} from '@workday/canvas-tokens-web';
4
6
 
5
- import {Flex} from '@workday/canvas-kit-react/layout';
7
+ const flexStyles = createStyles({
8
+ display: 'flex',
9
+ gap: system.space.x2,
10
+ });
6
11
 
7
12
  export default () => (
8
- <Flex gap="xxs" id="read-only-list">
13
+ <div className={flexStyles} id="read-only-list">
9
14
  <Pill variant="readOnly">Read-only</Pill>
10
15
  <Pill variant="readOnly" maxWidth={250}>
11
16
  Read-only but with super long text in case you want to read a paragraph in a Pill which we
12
17
  don't recommend
13
18
  </Pill>
14
- </Flex>
19
+ </div>
15
20
  );