feat: Update Sana Canvas Buttons

modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md

@@ -0,0 +1,334 @@
+# Canvas Kit 16.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v16. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+## Why You Should Upgrade
+
+Soon to be...
+
+## Table of Contents
+
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [New Components](#new-components)
+  - [KBD](#kbd)
+- [Component Updates](#component-updates)
+  - [Buttons](#buttons)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
+  - [Card](#card)
+- [New Utilities](#new-utilities)
+  - [cornerShapeStencil](#cornershapestencil)
+- [Deprecations](#deprecations)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Codemod
+
+We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
+automatically update your code to work with most of the breaking changes in v16. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+AST, identifying patterns, and making prescribed changes. This greatly decreases opportunities for
+error and reduces the number of manual updates, which allows you to focus on changes that need your
+attention. **We highly recommend you use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v14 of Canvas Kit,
+  you'll need to run the v15 codemod before you run v16.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in v16. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.```sh
+npx @workday/canvas-kit-codemod v16 [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v16 [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note:** The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+## New Components
+
+### KBD
+
+**PR:** [#4001](https://github.com/Workday/canvas-kit/pull/4001)
+
+The new `KBD` component allows you to display keyboard inputs in your UI using accessible, visually
+consistent keyboard key representations. This is useful for documenting keyboard shortcuts,
+instructional prompts, or any UI patterns that reference specific keys.
+
+**Highlights:**
+
+- Provides a semantic (`kbd` element) way to visually present keyboard keys and shortcuts to users.
+- Supports various variants (`default` for prominence, `plain` for use on colored surfaces), as well
+  as size options (`small`, `medium`, `large`).
+- Easy to use nested `KBD.Item` components for sequences or combinations.
+- RTL support.
+
+**Example:**
+
+```tsx
+import {KBD} from '@workday/canvas-kit-labs-react';
+
+<KBD>
+  <KBD.Item aria-label="Command">⌘</KBD.Item>
+  <KBD.Item>C</KBD.Item>
+</KBD>;
+```
+
+For more details and advanced usage, including accessibility guidance for symbolic keys and
+functional shortcuts, refer to the storybook documentation and our example stories.
+
+## Component Updates
+
+> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme
+> unless specified otherwise.
+
+### Color Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+
+### Color Picker
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- **Sana Canvas:** swatch shape is now **6px** (previously **4px**).
+
+### Form Field
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As
+  in v15, this shape is primarily visible for error and caution states.
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Area
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Card
+
+**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014)
+
+#### Visual Updates
+
+- `Card.Heading` now defaults to `body.small` type level (previously `body.large`). If your design
+  requires a larger heading, you can override the `typeLevel` prop on `Card.Heading`.
+- The gap between `Card.Heading` and `Card.Body` has been reduced (previously `gap.lg`, now
+  `padding.sm`).
+- Card's border radius is now managed via the new `cornerShapeStencil` (see
+  [New Utilities](#new-utilities)).
+
+### Buttons
+
+**PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
+
+All buttons have had the following updates:
+
+- `fontWeight` has been updated from `system.fontWeight.bold` to `system.fontWeight.medium`.
+- `minWidth` has been updated to the following:
+
+| Default Size | minWidth v15 | minWidth v16 |
+| ------------ | ------------ | ------------ |
+| extraSmall   | unchanged    | unchanged    |
+| small        | `5rem`       | `4.5rem`     |
+| medium       | `6rem`       | `5.5rem`     |
+| large        | `7rem`       | `6.5rem`     |
+
+- `paddingInline` has been updated to the following:
+
+| Size       | paddingInline v15 | paddingInline v16 |
+| ---------- | ----------------- | ----------------- |
+| extraSmall | `0.75rem`         | `0.5rem`          |
+| small      | `1rem`            | `0.75rem`         |
+| medium     | `1.5rem`          | `1rem`            |
+| large      | `2rem`            | `1.25rem`         |
+
+#### Delete Button Outline Variant
+
+We've added an `outline` variant to the `DeleteButton` component. This variant will reverse the
+button's styling with a `border` and `transparent` background.
+
+```tsx
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+
+<DeleteButton variant="outline">Delete</DeleteButton>;
+```
+
+## New Utilities
+
+### cornerShapeStencil
+
+We've added a new stencil called `cornerShapeStencil` to `@workday/canvas-kit-react/common`. It
+applies the CSS [`corner-shape`](https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape)
+property as a progressive enhancement for components using border radius that aren't circular.
+Browsers that don't support `corner-shape` fall back to `border-radius` alone, as border-radius is
+declared first in the cascade.
+
+The stencil exposes a `shape` variable for setting the border radius. Extend it in your own stencils
+to get consistent rounded corners:
+
+```tsx
+import {cornerShapeStencil} from '@workday/canvas-kit-react/common';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const myStencil = createStencil({
+  extends: cornerShapeStencil,
+  base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.xxl,
+  },
+});
+```
+
+`Card` extends this stencil for its rounded corners.
+
+## Deprecations
+
+We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
+in a future major release. This signals consumers to migrate to a more stable alternative before the
+deprecated code is removed.
+
+## Glossary
+
+For an overview of the different packages we provide, please view our docs
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).
+
+### Main
+
+Components in the Main package are stable and ready for production use.
+
+### Preview
+
+Components in the Preview package are mostly stable but may still receive breaking changes before
+being promoted to Main.
+
+### Labs
+
+Components in the Labs package are experimental and may receive significant changes or be removed
+entirely.
+
+---
+
+## Codemod Reference
+
+# What is a Codemod?
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+[AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
+prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
+updates, which allows you to focus on changes that need your attention. **We highly recommend you
+use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v8 of Canvas Kit,
+  you'll need to run the v9 codemod before you run v10 and so on.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in this upgrade. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+## Running a Codemod
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.```sh
+npx @workday/canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+No codemod transformations available for v16.

modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx

@@ -19,6 +19,8 @@ Soon to be...
 - [New Components](#new-components)
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
+  - [Buttons](#buttons)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
@@ -185,6 +187,42 @@ functional shortcuts, refer to the storybook documentation and our example stori
 - Card's border radius is now managed via the new `cornerShapeStencil` (see
   [New Utilities](#new-utilities)).
 
+### Buttons
+
+**PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
+
+All buttons have had the following updates:
+
+- `fontWeight` has been updated from `system.fontWeight.bold` to `system.fontWeight.medium`.
+- `minWidth` has been updated to the following:
+
+| Default Size | minWidth v15 | minWidth v16 |
+| ------------ | ------------ | ------------ |
+| extraSmall   | unchanged    | unchanged    |
+| small        | `5rem`       | `4.5rem`     |
+| medium       | `6rem`       | `5.5rem`     |
+| large        | `7rem`       | `6.5rem`     |
+
+- `paddingInline` has been updated to the following:
+
+| Size       | paddingInline v15 | paddingInline v16 |
+| ---------- | ----------------- | ----------------- |
+| extraSmall | `0.75rem`         | `0.5rem`          |
+| small      | `1rem`            | `0.75rem`         |
+| medium     | `1.5rem`          | `1rem`            |
+| large      | `2rem`            | `1.25rem`         |
+
+#### Delete Button Outline Variant
+
+We've added an `outline` variant to the `DeleteButton` component. This variant will reverse the
+button's styling with a `border` and `transparent` background.
+
+```tsx
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+
+<DeleteButton variant="outline">Delete</DeleteButton>;
+```
+
 ## New Utilities
 
 ### cornerShapeStencil

modules/docs/package.json

@@ -52,7 +52,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"