@workday/canvas-kit-docs 12.0.0-alpha.919-next.0 → 12.0.0-alpha.921-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.
@@ -1,6 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
-
4
1
  # Canvas Kit 10.0 Upgrade Guide
5
2
 
6
3
  This guide contains an overview of the changes in Canvas Kit v10. Please
@@ -161,8 +158,6 @@ updated on a 1:1 basis. None of the base values have changed, only the unit.
161
158
  The table below shows what each token value is, what it corresponds to, and what the new `rem` value
162
159
  is in `px`:
163
160
 
164
- <Markdown>
165
- {`
166
161
  | px Value | rem Value | space Token |
167
162
  | -------- | --------- | ----------- |
168
163
  | 0 | 0 | zero |
@@ -175,23 +170,17 @@ is in `px`:
175
170
  | 40px | 2.5rem | xl |
176
171
  | 64px | 4rem | xxl |
177
172
  | 80px | 5rem | xxxl |
178
- `}
179
- </Markdown>
180
173
 
181
174
  You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
182
175
  browser font size hasn't been updated, the value will be `16`).
183
176
 
184
177
  For example:
185
178
 
186
- <Markdown>
187
- {`
188
179
  | Equation | rem Value |
189
180
  | ----------- | --------- |
190
- | \`16px/16px\` | \`1rem\` |
191
- | \`32px/16px\` | \`2rem\` |
192
- | \`8px/16px\` | \`0.5rem\` |
193
- `}
194
- </Markdown>
181
+ | `16px/16px` | `1rem` |
182
+ | `32px/16px` | `2rem` |
183
+ | `8px/16px` | `0.5rem` |
195
184
 
196
185
  #### Why Did We Make This Change?
197
186
 
@@ -1,6 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
-
4
1
  # Canvas Kit 5.0 Upgrade Guide
5
2
 
6
3
  Below are the breaking changes made in Canvas Kit v5. Please
@@ -123,51 +120,43 @@ updated as you expect.
123
120
  tokens in `@workday/canvas-kit-labs-react-core`, but some are using the Legacy type in
124
121
  `@workday/canvas-kit-react-core`.
125
122
 
126
- <Markdown>{`
127
123
  | Legacy Type (px) | Responsive Type (rem) |
128
124
  | ----------------- | ---------------------------------------- |
129
- | \`dataViz1\` (56px) | \`levels.title.large\` (3.5rem \ 56px) |
130
- | \`dataViz2\` (34px) | \`levels.heading.large\` (2rem \ 32px) |
131
- | \`h1\` (28px) | \`levels.heading.medium\` (1.75rem \ 28px) |
132
- | \`h2\` (24px) | \`levels.heading.small\` (1.5rem \ 24px) |
133
- | \`h3\` (20px) | \`levels.body.large\` (1.25rem,) \ 20px |
134
- | \`h4\` (16px) | \`levels.body.small\` (1rem \ 16px) |
135
- | \`h5\` (16px) | \`levels.body.small\` (1rem \ 16px) |
136
- | \`body\` (14px) | \`levels.subtext.large\` (0.875rem \ 14px) |
137
- | \`body2\` (13px) | \`levels.subtext.medium\` (0.75rem \ 12px) |
138
- | \`small\` (12px) | \`levels.subtext.medium\` (0.75rem \ 12px) |
139
- `}</Markdown>
125
+ | `dataViz1` (56px) | `levels.title.large` (3.5rem \ 56px) |
126
+ | `dataViz2` (34px) | `levels.heading.large` (2rem \ 32px) |
127
+ | `h1` (28px) | `levels.heading.medium` (1.75rem \ 28px) |
128
+ | `h2` (24px) | `levels.heading.small` (1.5rem \ 24px) |
129
+ | `h3` (20px) | `levels.body.large` (1.25rem,) \ 20px |
130
+ | `h4` (16px) | `levels.body.small` (1rem \ 16px) |
131
+ | `h5` (16px) | `levels.body.small` (1rem \ 16px) |
132
+ | `body` (14px) | `levels.subtext.large` (0.875rem \ 14px) |
133
+ | `body2` (13px) | `levels.subtext.medium` (0.75rem \ 12px) |
134
+ | `small` (12px) | `levels.subtext.medium` (0.75rem \ 12px) |
140
135
 
141
136
  - 🤖 Property Updates
142
137
 
143
138
  All `fontFamily`, `fontSize`, and `fontWeight` property updates are handled by the codemod.
144
139
 
145
- <Markdown>
146
- {`| CSS Property | Corresponding Token | Notes |
140
+ | CSS Property | Corresponding Token | Notes |
147
141
  | ------------ | ------------------------------ | --------------------------------------------------------------- |
148
- | \`fontFamily\` | \`type.properties.fontFamilies\` | \`default\` (Roboto) and \`monospace\` (Roboto Mono) are available |
149
- | \`fontSize\` | \`type.properties.fontSizes\` | please consult the type hierarchies above to map values |
150
- | \`fontWeight\` | \`type.properties.fontWeights\` | \`regular\` (400), \`medium\` (500), and \`bold\` (700) are available |`}
151
- </Markdown>
142
+ | `fontFamily` | `type.properties.fontFamilies` | `default` (Roboto) and `monospace` (Roboto Mono) are available |
143
+ | `fontSize` | `type.properties.fontSizes` | please consult the type hierarchies above to map values |
144
+ | `fontWeight` | `type.properties.fontWeights` | `regular` (400), `medium` (500), and `bold` (700) are available |
152
145
 
153
146
  - 🤖 Variant Updates
154
147
 
155
148
  All `variant` updates _except `link`_ are handled by the codemod. Please see the
156
149
  [variants](#variants) section below for more information.
157
150
 
158
- <Markdown>
159
- {`
160
151
  | Variant | Transformation | Notes |
161
152
  | ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- |
162
- | \`type.variant.error\` | \`type.variants.error\` | name change only |
163
- | \`type.variant.hint\` | \`type.variants.hint\` | name change only |
164
- | \`type.variant.inverse\` | \`type.variants.inverse\` | name change only |
165
- | \`type.variant.button\` | \`{fontWeight: type.properties.fontWeights.bold}\` | variant deprecated, use type properties |
166
- | \`type.variant.caps\` | \`{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties |
167
- | \`type.variant.label\` | \`{fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties |
168
- | \`type.variant.mono\` | \`{fontFamily: type.properties.fontFamilies.monospace}\` | variant deprecated, use type properties |
169
- `}
170
- </Markdown>
153
+ | `type.variant.error` | `type.variants.error` | name change only |
154
+ | `type.variant.hint` | `type.variants.hint` | name change only |
155
+ | `type.variant.inverse` | `type.variants.inverse` | name change only |
156
+ | `type.variant.button` | `{fontWeight: type.properties.fontWeights.bold}` | variant deprecated, use type properties |
157
+ | `type.variant.caps` | `{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}` | variant deprecated, use type properties |
158
+ | `type.variant.label` | `{fontWeight: type.properties.fontWeights.medium}` | variant deprecated, use type properties |
159
+ | `type.variant.mono` | `{fontFamily: type.properties.fontFamilies.monospace}` | variant deprecated, use type properties |
171
160
 
172
161
  #### Manual Updates
173
162
 
@@ -635,20 +624,14 @@ types (which were too generic) and their JSDoc hints.
635
624
 
636
625
  The following table describes each update:
637
626
 
638
- <Markdown>
639
- {`
640
627
  | Before | After | Change Description |
641
628
  | --------------------- | ------------------------- | -------------------------------- |
642
- | \`spacing\` | \`space\` | name change only |
643
- | \`spacingNumbers\` | \`spaceNumbers\` | name change only |
644
- | \`CanvasSpacing\` | \`CanvasSpace\` | name change and improved types\* |
645
- | \`CanvasSpacingValue\` | \`CanvasSpaceValues\` | name change only |
646
- | \`CanvasSpacingNumber\` | \`CanvasSpaceNumbers\` | name change and improved types\* |
647
- | \`n/a\` | \`CanvasSpaceNumberValues\` | new type! |
648
-
649
- `}
650
-
651
- </Markdown>
629
+ | `spacing` | `space` | name change only |
630
+ | `spacingNumbers` | `spaceNumbers` | name change only |
631
+ | `CanvasSpacing` | `CanvasSpace` | name change and improved types\* |
632
+ | `CanvasSpacingValue` | `CanvasSpaceValues` | name change only |
633
+ | `CanvasSpacingNumber` | `CanvasSpaceNumbers` | name change and improved types\* |
634
+ | `n/a` | `CanvasSpaceNumberValues` | new type! |
652
635
 
653
636
  \* Before, the types were too generic and not very useful. They now better reflect the values they
654
637
  represent.
@@ -1201,18 +1184,14 @@ Pass a `css` prop or a styled button instead to have a custom styled button. You
1201
1184
 
1202
1185
  If you were using `usePopup` before, here's a list of equivalent APIs:
1203
1186
 
1204
- <Markdown>
1205
- {`
1206
1187
  | Before | After |
1207
1188
  | ----------------------------------------------------------------------- | ------------------------------------- |
1208
- | \`const { popperProps, targetProps, closePopup, stackRef } = usePopup()\` | \`const model = usePopupModel()\` |
1209
- | \`popperProps.open\` | \`model.state.visibility !== 'hidden'\` |
1210
- | \`closePopup()\` | \`model.events.hide()\` |
1211
- | \`stackRef\` or \`popperProps.ref\` | \`model.state.stackRef\` |
1212
- | \`popperProps.anchorElement\` | \`model.state.targetRef.current\` |
1213
- | \`targetProps.onClick\` | \`usePopupTarget(model).onClick\` |
1214
- `}
1215
- </Markdown>
1189
+ | `const { popperProps, targetProps, closePopup, stackRef } = usePopup()` | `const model = usePopupModel()` |
1190
+ | `popperProps.open` | `model.state.visibility !== 'hidden'` |
1191
+ | `closePopup()` | `model.events.hide()` |
1192
+ | `stackRef` or `popperProps.ref` | `model.state.stackRef` |
1193
+ | `popperProps.anchorElement` | `model.state.targetRef.current` |
1194
+ | `targetProps.onClick` | `usePopupTarget(model).onClick` |
1216
1195
 
1217
1196
  #### New Focus Management
1218
1197
 
@@ -1287,16 +1266,11 @@ model and behaviors, the following is equivalent:
1287
1266
 
1288
1267
  `Popup.Card` uses `Card`, which is now using `Box`. Consequently, the following props have changed:
1289
1268
 
1290
- <Markdown>
1291
- {`
1292
1269
  | Before | After |
1293
1270
  | ------------------------------ | ------------------------------------------ |
1294
- | \`padding={Popup.Padding.zero}\` | \`padding="zero"\` or \`padding={space.zero}\` |
1295
- | \`depth={depth[0]}\` | \`depth={0}\` |
1296
- | \`popupRef={ref}\` | \`ref={ref}\` |
1297
- `}
1298
-
1299
- </Markdown>
1271
+ | `padding={Popup.Padding.zero}` | `padding="zero"` or `padding={space.zero}` |
1272
+ | `depth={depth[0]}` | `depth={0}` |
1273
+ | `popupRef={ref}` | `ref={ref}` |
1300
1274
 
1301
1275
  #### Transitioning
1302
1276
 
@@ -1,6 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
-
4
1
  # Canvas Kit 6.0 Upgrade Guide
5
2
 
6
3
  Below are the breaking changes made in Canvas Kit v6. Please
@@ -368,17 +365,13 @@ layout. If you have questions about this testing, please reach out to our team.
368
365
 
369
366
  Below is a reference table for the V5 and V6 breakpoint values.
370
367
 
371
- <Markdown>
372
- {`
373
368
  | Breakpoint Name | V5 Value (px) | V6 Value (px) |
374
369
  | --------------- | ------------- | ------------- |
375
- | \`zero\` | 0 | 0 |
376
- | \`s\` | 600 | 320 |
377
- | \`m\` | 900 | 768 |
378
- | \`l\` | 1280 | 1024 |
379
- | \`xl\` | 1920 | 1440 |
380
- `}
381
- </Markdown>
370
+ | `zero` | 0 | 0 |
371
+ | `s` | 600 | 320 |
372
+ | `m` | 900 | 768 |
373
+ | `l` | 1280 | 1024 |
374
+ | `xl` | 1920 | 1440 |
382
375
 
383
376
  Also for reference, these are our viewport ranges:
384
377
 
@@ -1,6 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
-
4
1
  # Canvas Kit 7.0 Upgrade Guide
5
2
 
6
3
  This guide contains breaking changes in Canvas Kit v7. Please
@@ -562,19 +559,15 @@ To consolidate Button APIs, we've removed `IconButton` in favor of `SecondaryBut
562
559
  `TertiaryButton`. The following table shows how `IconButton` variants in v6 map to their
563
560
  corresponding buttons in v7.
564
561
 
565
- <Markdown>
566
- {`
567
- | v6 \`IconButton\` variant | v7 button (and variant, if necessary) |
562
+ | v6 `IconButton` variant | v7 button (and variant, if necessary) |
568
563
  | -------------------------- | ---------------------------------------- |
569
- | \`circle\` (default variant) | \`TertiaryButton\` |
570
- | \`circleFilled\` | \`SecondaryButton\` |
571
- | \`inverse\` | \`TertiaryButton\` with \`inverse\` variant |
572
- | \`inverseFilled\` | \`SecondaryButton\` with \`inverse\` variant |
573
- | \`plain\` | Unsupported |
574
- | \`square\` | Unsupported |
575
- | \`squareFilled\` | Unsupported |
576
- `}
577
- </Markdown>
564
+ | `circle` (default variant) | `TertiaryButton` |
565
+ | `circleFilled` | `SecondaryButton` |
566
+ | `inverse` | `TertiaryButton` with `inverse` variant |
567
+ | `inverseFilled` | `SecondaryButton` with `inverse` variant |
568
+ | `plain` | Unsupported |
569
+ | `square` | Unsupported |
570
+ | `squareFilled` | Unsupported |
578
571
 
579
572
  > Note: See below for more information about how to manually migrate from
580
573
  > [unsupported v6 variants](#unsupported-iconbutton-variants).
@@ -1,6 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
-
4
1
  # Maintaining Canvas Kit
5
2
 
6
3
  If you're a Canvas Kit core maintainer, this doc is for you! Consider this a field guide to help you
@@ -51,17 +48,13 @@ runs on `support`, `master`, and `prerelease/minor` branches. Forward merges for
51
48
  starts with `chore: Release`, and that's how the forward merge workflow identifies them. Forward
52
49
  merges will run on every merge to `prerelease/minor` regardless of the commit message.
53
50
 
54
- <Markdown>
55
- {`
56
51
  | Run Forward Merge? | Branch | Commit Message |
57
52
  | ------------------ | ------------------ | --------------------------------------- |
58
- | ✅ | \`support\` | \`chore: Release v6.8.14 [skip release]\` |
59
- | ⛔️ | \`support\` | \`fix: Remove unused props\` |
60
- | ✅ | \`master\` | \`chore: Release v7.3.0 [skip release]\` |
61
- | ⛔️ | \`master\` | \`fix: Update Popup types\` |
62
- | ✅ | \`prerelease/minor\` | \`feat: Add new Layout components\` |
63
- `}
64
- </Markdown>
53
+ | ✅ | `support` | `chore: Release v6.8.14 [skip release]` |
54
+ | ⛔️ | `support` | `fix: Remove unused props` |
55
+ | ✅ | `master` | `chore: Release v7.3.0 [skip release]` |
56
+ | ⛔️ | `master` | `fix: Update Popup types` |
57
+ | ✅ | `prerelease/minor` | `feat: Add new Layout components` |
65
58
 
66
59
  If the forward merge workflow fails and cannot automatically merge the update to the next branch, it
67
60
  will generate a PR with instructions on how to handle the forward merge manually. For a more
@@ -1,5 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
1
  import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
4
2
  import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
5
3
  import Basic from './examples/Basic';
@@ -50,19 +48,15 @@ closing the `DeprecatedMenu`.
50
48
  using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
51
49
  actions.
52
50
 
53
- <Markdown>
54
- {`
55
51
  | Key | Action |
56
52
  | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
57
- | \`Enter\` or \`Space\` | Activates the menu item and then closes the menu |
58
- | \`Escape\` | Closes the menu |
59
- | \`Up Arrow\` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
60
- | \`Down Arrow\` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item |
61
- | \`Home\` | Moves focus to the first menu item |
62
- | \`End\` | Moves focus to the last menu item |
63
- | \`A-Z / a-z\` | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
64
- `}
65
- </Markdown>
53
+ | `Enter` or `Space` | Activates the menu item and then closes the menu |
54
+ | `Escape` | Closes the menu |
55
+ | `Up Arrow` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
56
+ | `Down Arrow` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item |
57
+ | `Home` | Moves focus to the first menu item |
58
+ | `End` | Moves focus to the last menu item |
59
+ | `A-Z / a-z` | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
66
60
 
67
61
  Note that although `DeprecatedMenu` includes support for keyboard shortcuts for the menu itself,
68
62
  you'll need to add your own keyboard handling and aria attributes to the triggering button.
@@ -1,5 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
1
  import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
4
2
  import Basic from './examples/Basic';
5
3
  import ContextMenu from './examples/ContextMenu';
@@ -34,18 +32,14 @@ model which composes a list model and a popup model and sets up accessibility fe
34
32
  [Actions Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)
35
33
  using roving tabindex. Below is table of supported keyboard shortcuts and associated actions.
36
34
 
37
- <Markdown>
38
- {`
39
35
  | Key | Action |
40
36
  | ------------------ | ------------------------------------------------------------------------------------------------------------ |
41
- | \`Enter\` or \`Space\` | Activates the menu item and then closes the menu |
42
- | \`Escape\` | Closes the menu |
43
- | \`Up Arrow\` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
44
- | \`Down Arrow\` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item |
45
- | \`Home\` | Moves focus to the first menu item |
46
- | \`End\` | Moves focus to the last menu item |
47
- `}
48
- </Markdown>
37
+ | `Enter` or `Space` | Activates the menu item and then closes the menu |
38
+ | `Escape` | Closes the menu |
39
+ | `Up Arrow` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
40
+ | `Down Arrow` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item |
41
+ | `Home` | Moves focus to the first menu item |
42
+ | `End` | Moves focus to the last menu item |
49
43
 
50
44
  ### Context Menu
51
45
 
@@ -1,5 +1,3 @@
1
- import {Markdown} from '@storybook/blocks';
2
-
3
1
  import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
4
2
  import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
5
3
 
@@ -38,18 +36,14 @@ yarn add @workday/canvas-kit-react
38
36
  Note that the `type` prop is required (there is no default value). `type` accepts the following
39
37
  values:
40
38
 
41
- <Markdown>
42
- {`
43
39
  | Type | Suggested Purpose |
44
40
  | ---------------------------------- | ---------------------------------------------------------------------------------------------- |
45
- | \`StatusIndicator.Type.Gray\` | Basic, general status. No action required. |
46
- | \`StatusIndicator.Type.Orange\` | Signifies alerts, that a user must take action, or that something requires attention. |
47
- | \`StatusIndicator.Type.Blue\` | Signifies an item in progress, an update, or a current status. |
48
- | \`StatusIndicator.Type.Green\` | Signifies success, completion, or celebration. |
49
- | \`StatusIndicator.Type.Red\` | Signifies an error or issue, or removal or destruction. |
50
- | \`StatusIndicator.Type.Transparent\` | General status and related information intended for use on top of imagery, video, or graphics. |
51
- `}
52
- </Markdown>
41
+ | `StatusIndicator.Type.Gray` | Basic, general status. No action required. |
42
+ | `StatusIndicator.Type.Orange` | Signifies alerts, that a user must take action, or that something requires attention. |
43
+ | `StatusIndicator.Type.Blue` | Signifies an item in progress, an update, or a current status. |
44
+ | `StatusIndicator.Type.Green` | Signifies success, completion, or celebration. |
45
+ | `StatusIndicator.Type.Red` | Signifies an error or issue, or removal or destruction. |
46
+ | `StatusIndicator.Type.Transparent` | General status and related information intended for use on top of imagery, video, or graphics. |
53
47
 
54
48
  ### Emphasis
55
49
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "12.0.0-alpha.919-next.0",
3
+ "version": "12.0.0-alpha.921-next.0",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -44,10 +44,10 @@
44
44
  "dependencies": {
45
45
  "@emotion/styled": "^11.6.0",
46
46
  "@storybook/csf": "0.0.1",
47
- "@workday/canvas-kit-labs-react": "^12.0.0-alpha.919-next.0",
48
- "@workday/canvas-kit-preview-react": "^12.0.0-alpha.919-next.0",
49
- "@workday/canvas-kit-react": "^12.0.0-alpha.919-next.0",
50
- "@workday/canvas-kit-styling": "^12.0.0-alpha.919-next.0",
47
+ "@workday/canvas-kit-labs-react": "^12.0.0-alpha.921-next.0",
48
+ "@workday/canvas-kit-preview-react": "^12.0.0-alpha.921-next.0",
49
+ "@workday/canvas-kit-react": "^12.0.0-alpha.921-next.0",
50
+ "@workday/canvas-kit-styling": "^12.0.0-alpha.921-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^2.0.1",
53
53
  "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
60
60
  "mkdirp": "^1.0.3",
61
61
  "typescript": "5.0"
62
62
  },
63
- "gitHead": "4fa21d7c07d138e03daf228f4a6a17fcbf379a3f"
63
+ "gitHead": "55250dda338c8adc6587b7254c8a38201830f27c"
64
64
  }