@workday/canvas-kit-docs 12.0.0-alpha.908-next.0 → 12.0.0-alpha.918-next.0

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

@@ -1,3 +1,6 @@
+import {Markdown} from '@storybook/blocks';
+
+
 # Canvas Kit 10.0 Upgrade Guide
 
 This guide contains an overview of the changes in Canvas Kit v10. Please
@@ -158,6 +161,8 @@ updated on a 1:1 basis. None of the base values have changed, only the unit.
 The table below shows what each token value is, what it corresponds to, and what the new `rem` value
 is in `px`:
 
+<Markdown>
+  {`
 | px Value | rem Value | space Token |
 | -------- | --------- | ----------- |
 | 0        | 0         | zero        |
@@ -170,17 +175,23 @@ is in `px`:
 | 40px     | 2.5rem    | xl          |
 | 64px     | 4rem      | xxl         |
 | 80px     | 5rem      | xxxl        |
+`}
+</Markdown>
 
 You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
 browser font size hasn't been updated, the value will be `16`).
 
 For example:
 
+<Markdown>
+  {`
 | Equation    | rem Value |
 | ----------- | --------- |
-| `16px/16px` | `1rem`    |
-| `32px/16px` | `2rem`    |
-| `8px/16px`  | `0.5rem`  |
+| \`16px/16px\` | \`1rem\`    |
+| \`32px/16px\` | \`2rem\`    |
+| \`8px/16px\`  | \`0.5rem\`  |
+`}
+</Markdown>
 
 #### Why Did We Make This Change?
 
@@ -269,7 +280,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
     <SelectOption label="Medium" value="medium" />
     <SelectOption label="Large" value="large" />
   </Select>
-</FormField>
+</FormField>;
 ```
 
 ```tsx
@@ -290,7 +301,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
       </Select.Card>
     </Select.Popper>
   </FormField>
-</Select>
+</Select>;
 ```
 
 Notice that `Select` is now outside the `FormField`. This is due to the update in `Select` and how

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

@@ -38,9 +38,12 @@ A note to the reader:
   - [Form Field Container](#form-field-container)
 - [Removals](#removals)
   - [Input Icon Container](#input-icon-container)
+- [Infrastructure](#infrastructure)
+  - [TypeScript](#typescript)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
   - [Avatar](#avatar)
+  - [Combobox](#combmbox)
   - [Form Field](#form-field)
     - [Form Field Group](#form-field-group)
     - [Form Field Field](#form-field-field)
@@ -48,6 +51,9 @@ A note to the reader:
   - [Search Form](#search-form)
   - [Select](#select)
   - [Text Area](#text-area)
+  - [Text Input](#text-input)
+  - [Collections](#collections)
+- [Utility Updates](#utility-updates)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -69,7 +75,7 @@ automatically update your code to work with most of the breaking changes in v12.
 handled by the codemod are marked with 🤖 in the Upgrade Guide.**
 
 > **Note: In v12, we have done some infrastructure updates with moving to Storybook 7, Webpack 5,
-> Typescript 4.9 and Cypress 13 . With these updates has come some formatting issues after running
+> TypeScript 5.0 and Cypress 13 . With these updates has come some formatting issues after running
 > our codemods. We recommend running a formatter to address the format issues that have been
 > introduced in v12.**
 
@@ -185,6 +191,18 @@ from Main instead.
 
 ---
 
+## Infrastructure
+
+### TypeScript
+
+**PR:** [#2908](https://github.com/Workday/canvas-kit/pull/2908)
+
+We've upgraded to TypeScript 5.0 to make use of
+[const Type Parameters](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#const-type-parameters).
+You will need to upgrade to TypeScript 5.0+ to avoid any TypeScript syntax errors. TypeScript does
+not follow semver, so 5.0 doesn't mean a large breaking change from 4.9. TypeScript doesn't have a
+`x.10` release, they bump the `x.9` to `{x+1}.0`.
+
 ## Component Updates
 
 ### Styling API and CSS Tokens
@@ -233,6 +251,64 @@ The following changes have been made to the API:
 > union types. You will see a console warn message while in development if you're still using this.
 > Please update your types and usage before v13.
 
+### Combobox
+
+**PR** [#2983](https://github.com/Workday/canvas-kit/pull/2983)
+
+The `useComboboxInput` hook, and the `Combobox.Input` component used to automatically update the
+input when an option was selected. This functionality has been split between
+`useComboboxInputArbitrary` and `useComboboxInputConstrained` depending on the combobox's value
+type. The `useComboboxInput` had the arbitrary functionality built in. This has been separated out.
+The `<Select>` component has been updated to use `useComboboxInputConstrained` hook and the
+`Autocomplete` example uses the `useComboboxInputArbitrary` hook. This is a breaking change if you
+use the `Combobox.Input` component directly. You'll have to either pass the
+`useComboboxInputArbitrary` elemProps hook directly to the `<Combbox.Input>` or create a new
+component composing them.
+
+```tsx
+// v11
+<Combobox>
+  <Combobox.Input />
+  // ...
+</Combobox>
+
+// v12
+<Combobox>
+  <Combobox.Input elemPropsHook={useComboboxInputArbitrary} />
+  // ...
+</Combobox>
+
+// Better - create a specialized component
+const useMyComboboxInput = composeHooks(
+  // or your own model that extends `useComboboxModel`
+  createElemPropsHook(useComboboxModel)(model => {
+    return {
+      // anything you need your input to do
+    }
+  }),
+  useComboboxInputArbitrary,
+  useComboboxInput
+)
+
+const MyComboboxInput = createSubcomponent(TextInput)({
+  // or your own model that extends `useComboboxModel`
+  modelHook: useComboboxModel,
+  elemPropsHook: useMyComboboxInput,
+})((elemProps, Element) => {
+  // return a TextInput
+  return <Element {...elemProps} />
+
+  // return an InputGroupgs
+  return (
+    <InputGroup>
+      <InputGroup.InnerStart>{/* Icon or something */}</InputGroup.InnerStart>
+      <InputGroup.Input as={Element} {...elemProps} />
+      <InputGroup.InnerEnd><InputGroup.ClearButton /></InputGroup.InnerEnd>
+    </InputGroup>
+  )
+})
+```
+
 ### Form Field
 
 <div style={{display: 'inline-flex', gap: '.5rem'}}>
@@ -246,7 +322,8 @@ The following changes have been made to the API:
 
 **PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
 [#2881](https://github.com/Workday/canvas-kit/pull/2881),
-[#2934](https://github.com/Workday/canvas-kit/pull/2934)
+[#2934](https://github.com/Workday/canvas-kit/pull/2934),
+[2973](https://github.com/Workday/canvas-kit/pull/2973)
 
 We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been
 made to provide more flexibility and better explicit components when using inputs.
@@ -294,6 +371,7 @@ an example of how to **update** your code to match the new compound component AP
   labelPosition={FormField.LabelPosition.Left}
   useFieldSet={true}
   required={true}
+	inputId='input-id'
   hintId="hint-alert"
   hintText="Please enter a valid email."
   label="Email"
@@ -304,9 +382,10 @@ an example of how to **update** your code to match the new compound component AP
 
 // v12 Newly promoted FormField from Preview to Main
 <FormField
-  error="error"
+  error="alert"
   orientation="horizontalStart"
   isRequired={true}
+	id='input-id'
 >
 	<FormField.Label>Email</FormField.Label>
 	<FormField.Field>
@@ -316,6 +395,34 @@ an example of how to **update** your code to match the new compound component AP
 </FormField>
 ```
 
+- `FormField.LabelPosition.Hidden` is no longer valid. If you still want to hide the label, use the
+  prop `isHidden`.
+
+```tsx
+// v11 FormField in Main
+<FormField
+  error={FormField.ErrorType.Alert}
+  labelPosition={FormField.LabelPosition.Hidden}
+  useFieldSet={true}
+  required={true}
+  inputId="input-id"
+  label="Search"
+>
+  <TextInput onChange={handleChange} value={value} />
+</FormField>;
+
+// v12 Newly promoted FormField from Preview to Main
+
+//...
+
+<FormField error="alert" orientation="horizontalStart" isRequired={true} id="input-id">
+  <FormField.Label isHidden>Search</FormField.Label>
+  <FormField.Field>
+    <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+  </FormField.Field>
+</FormField>;
+```
+
 **Noticeable changes:**
 
 - `error` prop takes in the following values: `"error" | "alert"`.
@@ -332,6 +439,10 @@ an example of how to **update** your code to match the new compound component AP
 - `label` is no longer a valid prop. Use `FormField.Label` sub component to render your label text.
 - Instead of rendering an input, ensure you use `FormField.Input` with the `as` prop. This ensures
   proper error handling and aria attributes for accessibility.
+- `inputId` is no longer a valid prop. Use `id` if you want a custom `id`, otherwise, the component
+  will handle generating a unique id to associate each element for accessibility.
+- `isHidden` has been added as a prop to `FormField.Label` in cases where you want to hide the label
+  while still meeting accessibility standards.
 
 🤖 The codemod will handle the change of `orientation="horizontal"` to
 `orientation="horizontalStart"` if you're using the string literal values. It will also handle
@@ -399,12 +510,12 @@ pass the interface that the `as` prop is pointing to.
 **PRs:** [#2934](https://github.com/Workday/canvas-kit/pull/2934),
 
 `SearchForm` is now using the newly promoted `FormField` component. `SearchForm` now uses `labelId`
-to set the appropiate aria attributes and `id` on the underlying input element. There should be no
-visual breaking changes and the API remains the same.
+to set the appropiate aria attributes and `id` on the underlying input element.
 
 ### Select
 
-**PR:** [#2865](https://github.com/Workday/canvas-kit/pull/2865)
+**PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
+[#2983](https://github.com/Workday/canvas-kit/pull/2983)
 
 As we transition to use our CSS tokens to provide better theming capabilities and our new styling
 methods, we're moving away from components extending `Themeable`. `Themeable` has been removed from
@@ -451,6 +562,9 @@ const theme: PartialEmotionCanvasTheme = {
 </CanvasProvider>;
 ```
 
+`Select` has been refactored to use `useComboboxInputConstrained` to sync the model and the `input`
+element regardless of the source. This makes the `Select` a controllable component.
+
 ### Text Area
 
 **PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
@@ -472,6 +586,110 @@ interface MyProps {
 }
 ```
 
+`Themeable` has been removed from `TextAreaProps`. If you wish to theme `TextArea`, use our
+`CanvasProvider` with the `theme` object.
+
+```tsx
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    palette: {
+      common: {
+        focusOutline: 'pink',
+      },
+      primary: {
+        main: 'green',
+        light: 'lightgreen',
+      },
+    },
+  },
+};
+
+//...
+
+<CanvasProvider theme={theme}>
+  <FormField>
+    <FormField.Label>Contact</FormField.Label>
+    <FormField.Input as={TextArea} onChange={handleChange} />
+  </FormField>
+</CanvasProvider>;
+```
+
+### Text Input
+
+**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
+
+`Themeable` has been removed from `TextInputProps`. If you wish to theme `TextInput`, use our
+`CanvasProvider` with the `theme` object.
+
+```tsx
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    palette: {
+      common: {
+        focusOutline: 'pink',
+      },
+      primary: {
+        main: 'green',
+        light: 'lightgreen',
+      },
+    },
+  },
+};
+
+//...
+
+<CanvasProvider theme={theme}>
+  <FormField>
+    <FormField.Label>Contact</FormField.Label>
+    <FormField.Input as={TextInput} onChange={handleChange} />
+  </FormField>
+</CanvasProvider>;
+```
+
+### Collections
+
+**PR:** [#2982](https://github.com/Workday/canvas-kit/pull/2982)
+
+The `navigation.getItem()` function can now return `undefined` instead of throwing an error when an
+item is not found. Throwing an error caused lots of problems when it came to dynamic data. This is a
+breaking change if your application uses `getItem`. It will now have to deal with the possibility of
+an `undefined`.
+
+## Utility Updates
+
+**PR:** [#2908](https://github.com/Workday/canvas-kit/pull/2908)
+
+### `mergeProps`
+
+`mergeProps` had a bug where sometimes the returned props would be `never`. Also `mergeProps` would
+not narrow types which would require you to add `as const`. We fixed the type signature to more
+accurately reflect how `mergeProps` works. This may catch new type errors not caught before. There
+is no way to codemod this. Let us know if you need help fixing new type errors introduced by this
+change.
+
+More information: https://github.com/Workday/canvas-kit/discussions/2979
+
+### `createElemPropsHook`
+
+`createElemPropsHook` now uses
+[const Type Parameters](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#const-type-parameters)
+to narrow types in the object. This prevents requiring `as const` in some situations. This alone
+should fix bugs instead of introduce them.
+
+More information: https://github.com/Workday/canvas-kit/discussions/2979
+
+### `composeHooks`
+
+`composeHooks` uses `mergeProps` and suffered the same bugs. If any hook in the `composeHooks` chain
+used a `null` prop, the entire prop object returned was typed as `never`. This caused a bug where if
+the Component required a prop, it wasn't being provided by the composed hook. Some of our components
+manually added to the component's prop interface so the component's render function wouldn't
+complain. This has been fixed. This may be a breaking change where before the spread `elemProps` was
+`never`, so no type conflicts could exist with component props. Now all props are properly
+represented which may mean TypeScript is now catching bugs it didn't before.
+
+More information: https://github.com/Workday/canvas-kit/discussions/2979
+
 ## Troubleshooting
 
 ### My Styles Seem Broken?

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

@@ -1,3 +1,6 @@
+import {Markdown} from '@storybook/blocks';
+
+
 # Canvas Kit 5.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v5. Please
@@ -120,56 +123,51 @@ updated as you expect.
   tokens in `@workday/canvas-kit-labs-react-core`, but some are using the Legacy type in
   `@workday/canvas-kit-react-core`.
 
-  | Beta Type (px)  | Responsive Type (rem)                     |
-  | --------------- | ----------------------------------------- |
-  | `brand1` (56px) | `levels.title.large` ( 3.5rem \ 56px)     |
-  | `brand2` (48px) | `levels.title.medium` ( 3rem \ 48px)      |
-  | `h1` (40px)     | `levels.title.small` ( 2.5rem \ 40px)     |
-  | `h2` (32px)     | `levels.heading.large` ( 2rem \ 32px)     |
-  | `h3` (24px)     | `levels.heading.small` ( 1.5rem \ 24px)   |
-  | `h4` (20px)     | `levels.body.large` ( 1.25rem \ 20px)     |
-  | `h5` (20px)     | `levels.body.large` ( 1.25rem \ 20px)     |
-  | `body` (16px)   | `levels.body.small` ( 1rem \ 16px)        |
-  | `body2` (14px)  | `levels.subtext.large` ( 0.875rem \ 14px) |
-  | `small` (13px)  | `levels.subtext.medium` ( 0.75rem \ 12px) |
-
-  | Legacy Type (px)  | Responsive Type (rem)                    |
-  | ----------------- | ---------------------------------------- |
-  | `dataViz1` (56px) | `levels.title.large` (3.5rem \ 56px)     |
-  | `dataViz2` (34px) | `levels.heading.large` (2rem \ 32px)     |
-  | `h1` (28px)       | `levels.heading.medium` (1.75rem \ 28px) |
-  | `h2` (24px)       | `levels.heading.small` (1.5rem \ 24px)   |
-  | `h3` (20px)       | `levels.body.large` (1.25rem,) \ 20px    |
-  | `h4` (16px)       | `levels.body.small` (1rem \ 16px)        |
-  | `h5` (16px)       | `levels.body.small` (1rem \ 16px)        |
-  | `body` (14px)     | `levels.subtext.large` (0.875rem \ 14px) |
-  | `body2` (13px)    | `levels.subtext.medium` (0.75rem \ 12px) |
-  | `small` (12px)    | `levels.subtext.medium` (0.75rem \ 12px) |
+<Markdown>{`
+| Legacy Type (px)  | Responsive Type (rem)                    |
+| ----------------- | ---------------------------------------- |
+| \`dataViz1\` (56px) | \`levels.title.large\` (3.5rem \ 56px)     |
+| \`dataViz2\` (34px) | \`levels.heading.large\` (2rem \ 32px)     |
+| \`h1\` (28px)       | \`levels.heading.medium\` (1.75rem \ 28px) |
+| \`h2\` (24px)       | \`levels.heading.small\` (1.5rem \ 24px)   |
+| \`h3\` (20px)       | \`levels.body.large\` (1.25rem,) \ 20px    |
+| \`h4\` (16px)       | \`levels.body.small\` (1rem \ 16px)        |
+| \`h5\` (16px)       | \`levels.body.small\` (1rem \ 16px)        |
+| \`body\` (14px)     | \`levels.subtext.large\` (0.875rem \ 14px) |
+| \`body2\` (13px)    | \`levels.subtext.medium\` (0.75rem \ 12px) |
+| \`small\` (12px)    | \`levels.subtext.medium\` (0.75rem \ 12px) |
+`}</Markdown>
 
 - 🤖 Property Updates
 
   All `fontFamily`, `fontSize`, and `fontWeight` property updates are handled by the codemod.
 
-  | CSS Property | Corresponding Token            | Notes                                                           |
+<Markdown>
+  {`| CSS Property | Corresponding Token            | Notes                                                           |
   | ------------ | ------------------------------ | --------------------------------------------------------------- |
-  | `fontFamily` | `type.properties.fontFamilies` | `default` (Roboto) and `monospace` (Roboto Mono) are available  |
-  | `fontSize`   | `type.properties.fontSizes`    | please consult the type hierarchies above to map values         |
-  | `fontWeight` | `type.properties.fontWeights`  | `regular` (400), `medium` (500), and `bold` (700) are available |
+  | \`fontFamily\` | \`type.properties.fontFamilies\` | \`default\` (Roboto) and \`monospace\` (Roboto Mono) are available  |
+  | \`fontSize\`   | \`type.properties.fontSizes\`    | please consult the type hierarchies above to map values         |
+  | \`fontWeight\` | \`type.properties.fontWeights\`  | \`regular\` (400), \`medium\` (500), and \`bold\` (700) are available |`}
+</Markdown>
 
 - 🤖 Variant Updates
 
   All `variant` updates _except `link`_ are handled by the codemod. Please see the
   [variants](#variants) section below for more information.
 
-  | Variant                | Transformation                                                                 | Notes                                   |
-  | ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- |
-  | `type.variant.error`   | `type.variants.error`                                                          | name change only                        |
-  | `type.variant.hint`    | `type.variants.hint`                                                           | name change only                        |
-  | `type.variant.inverse` | `type.variants.inverse`                                                        | name change only                        |
-  | `type.variant.button`  | `{fontWeight: type.properties.fontWeights.bold}`                               | variant deprecated, use type properties |
-  | `type.variant.caps`    | `{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}` | variant deprecated, use type properties |
-  | `type.variant.label`   | `{fontWeight: type.properties.fontWeights.medium}`                             | variant deprecated, use type properties |
-  | `type.variant.mono`    | `{fontFamily: type.properties.fontFamilies.monospace}`                         | variant deprecated, use type properties |
+<Markdown>
+  {`
+| Variant                | Transformation                                                                 | Notes                                   |
+| ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- |
+| \`type.variant.error\`   | \`type.variants.error\`                                                          | name change only                        |
+| \`type.variant.hint\`    | \`type.variants.hint\`                                                           | name change only                        |
+| \`type.variant.inverse\` | \`type.variants.inverse\`                                                        | name change only                        |
+| \`type.variant.button\`  | \`{fontWeight: type.properties.fontWeights.bold}\`                               | variant deprecated, use type properties |
+| \`type.variant.caps\`    | \`{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties |
+| \`type.variant.label\`   | \`{fontWeight: type.properties.fontWeights.medium}\`                             | variant deprecated, use type properties |
+| \`type.variant.mono\`    | \`{fontFamily: type.properties.fontFamilies.monospace}\`                         | variant deprecated, use type properties |
+`}
+</Markdown>
 
 #### Manual Updates
 
@@ -637,14 +635,20 @@ types (which were too generic) and their JSDoc hints.
 
 The following table describes each update:
 
+<Markdown>
+{`
 | Before                | After                     | Change Description               |
 | --------------------- | ------------------------- | -------------------------------- |
-| `spacing`             | `space`                   | name change only                 |
-| `spacingNumbers`      | `spaceNumbers`            | name change only                 |
-| `CanvasSpacing`       | `CanvasSpace`             | name change and improved types\* |
-| `CanvasSpacingValue`  | `CanvasSpaceValues`       | name change only                 |
-| `CanvasSpacingNumber` | `CanvasSpaceNumbers`      | name change and improved types\* |
-| `n/a`                 | `CanvasSpaceNumberValues` | new type!                        |
+| \`spacing\`             | \`space\`                   | name change only                 |
+| \`spacingNumbers\`      | \`spaceNumbers\`            | name change only                 |
+| \`CanvasSpacing\`       | \`CanvasSpace\`             | name change and improved types\* |
+| \`CanvasSpacingValue\`  | \`CanvasSpaceValues\`       | name change only                 |
+| \`CanvasSpacingNumber\` | \`CanvasSpaceNumbers\`      | name change and improved types\* |
+| \`n/a\`                 | \`CanvasSpaceNumberValues\` | new type!                        |
+
+`}
+
+</Markdown>
 
 \* Before, the types were too generic and not very useful. They now better reflect the values they
 represent.
@@ -1197,14 +1201,18 @@ Pass a `css` prop or a styled button instead to have a custom styled button. You
 
 If you were using `usePopup` before, here's a list of equivalent APIs:
 
+<Markdown>
+  {`
 | Before                                                                  | After                                 |
 | ----------------------------------------------------------------------- | ------------------------------------- |
-| `const { popperProps, targetProps, closePopup, stackRef } = usePopup()` | `const model = usePopupModel()`       |
-| `popperProps.open`                                                      | `model.state.visibility !== 'hidden'` |
-| `closePopup()`                                                          | `model.events.hide()`                 |
-| `stackRef` or `popperProps.ref`                                         | `model.state.stackRef`                |
-| `popperProps.anchorElement`                                             | `model.state.targetRef.current`       |
-| `targetProps.onClick`                                                   | `usePopupTarget(model).onClick`       |
+| \`const { popperProps, targetProps, closePopup, stackRef } = usePopup()\` | \`const model = usePopupModel()\`       |
+| \`popperProps.open\`                                                      | \`model.state.visibility !== 'hidden'\` |
+| \`closePopup()\`                                                          | \`model.events.hide()\`                 |
+| \`stackRef\` or \`popperProps.ref\`                                         | \`model.state.stackRef\`                |
+| \`popperProps.anchorElement\`                                             | \`model.state.targetRef.current\`       |
+| \`targetProps.onClick\`                                                   | \`usePopupTarget(model).onClick\`       |
+`}
+</Markdown>
 
 #### New Focus Management
 
@@ -1279,11 +1287,16 @@ model and behaviors, the following is equivalent:
 
 `Popup.Card` uses `Card`, which is now using `Box`. Consequently, the following props have changed:
 
+<Markdown>
+{`
 | Before                         | After                                      |
 | ------------------------------ | ------------------------------------------ |
-| `padding={Popup.Padding.zero}` | `padding="zero"` or `padding={space.zero}` |
-| `depth={depth[0]}`             | `depth={0}`                                |
-| `popupRef={ref}`               | `ref={ref}`                                |
+| \`padding={Popup.Padding.zero}\` | \`padding="zero"\` or \`padding={space.zero}\` |
+| \`depth={depth[0]}\`             | \`depth={0}\`                                |
+| \`popupRef={ref}\`               | \`ref={ref}\`                                |
+`}
+
+</Markdown>
 
 #### Transitioning
 

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

@@ -1,3 +1,6 @@
+import {Markdown} from '@storybook/blocks';
+
+
 # Canvas Kit 6.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v6. Please
@@ -365,13 +368,17 @@ layout. If you have questions about this testing, please reach out to our team.
 
 Below is a reference table for the V5 and V6 breakpoint values.
 
+<Markdown>
+  {`
 | Breakpoint Name | V5 Value (px) | V6 Value (px) |
 | --------------- | ------------- | ------------- |
-| `zero`          | 0             | 0             |
-| `s`             | 600           | 320           |
-| `m`             | 900           | 768           |
-| `l`             | 1280          | 1024          |
-| `xl`            | 1920          | 1440          |
+| \`zero\`          | 0             | 0             |
+| \`s\`             | 600           | 320           |
+| \`m\`             | 900           | 768           |
+| \`l\`             | 1280          | 1024          |
+| \`xl\`            | 1920          | 1440          |
+`}
+</Markdown>
 
 Also for reference, these are our viewport ranges:
 

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

@@ -1,3 +1,6 @@
+import {Markdown} from '@storybook/blocks';
+
+
 # Canvas Kit 7.0 Upgrade Guide
 
 This guide contains breaking changes in Canvas Kit v7. Please
@@ -559,15 +562,19 @@ To consolidate Button APIs, we've removed `IconButton` in favor of `SecondaryBut
 `TertiaryButton`. The following table shows how `IconButton` variants in v6 map to their
 corresponding buttons in v7.
 
-| v6 `IconButton` variant    | v7 button (and variant, if necessary)    |
+<Markdown>
+  {`
+| v6 \`IconButton\` variant    | v7 button (and variant, if necessary)    |
 | -------------------------- | ---------------------------------------- |
-| `circle` (default variant) | `TertiaryButton`                         |
-| `circleFilled`             | `SecondaryButton`                        |
-| `inverse`                  | `TertiaryButton` with `inverse` variant  |
-| `inverseFilled`            | `SecondaryButton` with `inverse` variant |
-| `plain`                    | Unsupported                              |
-| `square`                   | Unsupported                              |
-| `squareFilled`             | Unsupported                              |
+| \`circle\` (default variant) | \`TertiaryButton\`                         |
+| \`circleFilled\`             | \`SecondaryButton\`                        |
+| \`inverse\`                  | \`TertiaryButton\` with \`inverse\` variant  |
+| \`inverseFilled\`            | \`SecondaryButton\` with \`inverse\` variant |
+| \`plain\`                    | Unsupported                              |
+| \`square\`                   | Unsupported                              |
+| \`squareFilled\`             | Unsupported                              |
+`}
+</Markdown>
 
 > Note: See below for more information about how to manually migrate from
 > [unsupported v6 variants](#unsupported-iconbutton-variants).