Skip to content

Commit

Permalink
fix: Upgrade guide clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
manuel.carrera committed Sep 27, 2024
1 parent d914c22 commit 3bb2e84
Showing 1 changed file with 19 additions and 15 deletions.
34 changes: 19 additions & 15 deletions modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ provide semantic tokens that can translate to theming components.

A note to the reader:

- While we still support our old tokens from `@workday/canvas-kit-react/tokens`, you must install
our new tokens from `@workday/canvas-tokens-web`. You can find more info in our
- While we still support our old tokens from `@workday/canvas-kit-react/tokens`, **you must**
install our new tokens from `@workday/canvas-tokens-web`. You can find more info in our
[docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).

## Table of contents
Expand Down Expand Up @@ -59,9 +59,8 @@ A note to the reader:

In v12, all the components listed in this guide have started using our new
[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).

In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and
the variables are defined. For more information on installing and using, please reference our tokens
You must add `@workday/canvas-tokens-web` to ensure our components are properly styled and the
variables are defined. For more information on installing and using, please reference our tokens
[docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).

## Codemod
Expand Down Expand Up @@ -202,6 +201,10 @@ Several components have been refactored to use our new
[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
The React interface **has not changed**, but CSS variables are now used for dynamic properties.

> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
> with `cs` in our
> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
The following components are affected:

- `Avatar`
Expand All @@ -212,10 +215,6 @@ The following components are affected:
- `TextInput`
- `Toast`

> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
> with `cs` in our
> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
### Avatar

**PR** [#2793](https://github.com/Workday/canvas-kit/pull/2793)
Expand All @@ -229,7 +228,7 @@ The following changes have been made to the API:
`"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})`
- `Avatar.Variant` has been deprecated. The `variant` prop still accepts `Avatar.Variant` in
addition to the following values: `"dark" | "light"`
- The `as` prop now accepts any element, not just `div`.
- The `as` prop now accepts any element, not just a `div`.

> **Note:** Both `Avatar.Size` and `Avatar.Variant` have been deprecated in favor of the new string
> union types. You will see a console warn message while in development if you're still using this.
Expand All @@ -254,9 +253,9 @@ We've promoted FormField from [Preview](#preview) to [Main](#main). The followin
made to provide more flexibility and better explicit components when using inputs.

- The orientation prop on the `FormField` component will be updated to accept the following values:
`vertical`, `horizontalStart`, and `horizontalEnd`. `horizontal` will still be accepted as a value
in v12, but it will be deprecated and slated for removal in a future major release. These changes
are intended to provide more flexibility with label alignments on `FormField` elements.
`"vertical"`, `"horizontalStart"`, and `"horizontalEnd"`. `"horizontal"` will still be accepted as
a value in v12, but it will be deprecated and slated for removal in a future major release. These
changes are intended to provide more flexibility with label alignments on `FormField` elements.

> **Note**: The horizontal alignment of start and end are relative to its container, meaning start
> and end match the flex property of `flex-start` and `flex-end`. This is especially applicable for
Expand All @@ -271,9 +270,14 @@ made to provide more flexibility and better explicit components when using input
[style merging issues](https://github.com/Workday/canvas-kit/discussions/2893), having orientation
on the model allows for proper styling of sub components.

- Styles clean up. `FormField.Hint` and `FormField.Label` where using `margin` for spacing. We've
- Styles clean up: `FormField.Hint` and `FormField.Label` where using `margin` for spacing. We've
updated styles so that the containing element uses `gap` for proper spacing.

- We've added a new
[example](https://workday.github.io/canvas-kit/?path=/docs/examples-forms-density-and-alignment--docs)
to our docs to showcase how our inputs can be styled in different environments like density and
container alignment.

> **Note:** If spacing seems off between the input and hint text, ensure you're using
> `FormField.Field` wrapping your input and hint text.
Expand Down Expand Up @@ -387,7 +391,7 @@ As we transition to use our CSS tokens to provide better theming capabilities an
methods, we're moving away from components extending `Themeable`. `Themeable` has been removed from
`SelectProps.`

If you wish to theme `Select` we suggest using the CanvasProvider to do so.
If you wish to theme `Select` we suggest using the `CanvasProvider` to do so.

```tsx
const theme: PartialEmotionCanvasTheme = {
Expand Down

0 comments on commit 3bb2e84

Please sign in to comment.