Skip to content

Commit

Permalink
docs(ButtonV2): add variants migration
Browse files Browse the repository at this point in the history
  • Loading branch information
ajkl2533 committed Aug 27, 2024
1 parent 37500a4 commit 3fe19ab
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions docs/guides/buttonV2Migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import ex5after from './images/button-ex-05-after.png';

The Button component in our design system has been updated to version 2.0, introducing a few breaking changes that you'll need to be aware of when migrating your existing implementations.

Any of the following steps expect change of the imported component from `Button` to `ButtonV2`.

## Button element is no longer inferred from props

In the previous version of the Button component, the underlying HTML element was inferred based on the provided props (e.g. using an `href` prop would render an `<a>` tag).
Expand All @@ -43,6 +45,22 @@ For buttons that contain only an icon without any label, we've introduced a new

Please let me know if you have any other questions or need further assistance with the migration to Button v2.

## Button variants naming has changed

You were used to use variants like `solid` or `outline`. These names had larger coupling with the visual style than with actual button hierarchy. The `ButtonV2` changes this and implements new naming to better communicate how buttons should be used.

### Migration steps:

- Update any `variant` property on Button according to following rules:
- `variant=solid` -> `variant` property can be omitted (default value) or `variant=base`
- `variant=outline` -> `variant=subtle` variant
- `variant=text` -> `variant=ghost` variant
- Remove any `color` property and update `variant` according to following rules:
- `variant=solid + color=danger` -> `variant=danger`
- `variant=outline + color=danger` -> `variant=danger-ghost`
- `variant=text + color=danger` -> `variant=danger-ghost`
- `variant=ghost + color=danger` -> `variant=danger-ghost`

## Common migration examples

### External link without explicit `as` property
Expand Down

0 comments on commit 3fe19ab

Please sign in to comment.