@kaizen/components 1.73.0 → 1.73.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.73.0",
+  "version": "1.73.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Icon/_docs/Icon.mdx

@@ -6,7 +6,7 @@ import * as IconStories from './Icon.docs.stories'
 
 # Icon (deprecated)
 
-<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons" />
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icon" />
 
 <ReplacementNotice />
 

package/src/__next__/Button/_docs/Button--migration-guide.mdx

@@ -0,0 +1,81 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+
+<Meta title="Components/Button/Migration Guide" />
+
+# Button Migration Guide (next)
+
+This is a short guide to assist in migration from the old to new `Button` and `LinkButton` component.
+
+## Key API differences
+
+Below is a list of notable changes when migrating to the new `Button` and `LinkButton` component:
+
+- `label` is now handled as `Children` .
+- Variants, such as `primary` and `secondary`, are now controlled as by the single `variant` prop and some values will be remapped in the codemod.
+  - `primary` `boolean` becomes `variant="primary"`.
+  - `secondary` `boolean` becomes `variant="tertiary"`.
+  - `destructive` `boolean` is removed and will default to the `primary` variant.
+- `size` props have been adjusted to include `small`, `medium` and `large` and some values will be remapped in the codemod.
+  - `small` becomes `medium`
+  - `regular` becomes `large`
+- `onClick` and other event handlers now reflect the RAC event ecosystems, ie: `onPress`.
+  - You can see more about the RAC event ecosystem [here](https://react-spectrum.adobe.com/react-aria/Button.html#events).
+- `Button` and `LinkButton` now exist as separate components.
+  - The intent is to more closely align to the semantic roles of an anchor or button and should be used accordingly.
+- `LinkButton` handles native navigation via `href` out of the box but additional config can be used to allow for client side routing - [see here](/docs/components-linkbutton-api-specification--docs#client-side-routing).
+  - `onPress` can still be used in place of `onClick` for pushing to routers and tracking events.
+- `IconButton` has been superseded by icon props and the [icon-only pattern](/docs/components-button-button-next-api-specification--docs#icon-only-button-and-hashiddenlabel).
+- `working`, `workingLabel` and `workingLabelHidden` has been updated to `isPending`, `pendingLabel` and `hasHiddenPendingLabel` to better reflect the state of the button.
+  - This is not available in the `LinkButton` component
+- `badge` prop has been removed and should be handled within the `Children` where required.
+- Reversed styles should be handled by the `ReversedColors` Provider but for ease of migration, the `isReversed` prop `boolean` exists.
+
+## Codemod
+
+To assist in migration we have created the `upgradeV1Buttons` codemod.
+
+This will loop through the given directory and update all instances of Button to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#kaizen-codemods) on how to run kaizen codemods using the CLI within your repository, ie:
+
+```bash
+pnpm kaizen-codemod src upgradeV1Buttons
+```
+
+Note that there are cases where an props that no longer exist will be left in the codebase to throw type error and provide feedback to the engineer. This is intentional and identifies area's where manual updates are required.
+
+### Pre-requisites
+
+It is also recommended that the `upgradeIconV1` codemod is run before `upgradeV1Buttons` to ensure that all icons are updated to the new `Icon` component that uses the Material icons CDN. There is likely to be a number of visual diffs in this migration so it is recommended to do this separately if viable. Seem more about this [here](/docs/components-icon-icon-future-api-specification--docs#set-up).
+
+### Codemod gotchas
+
+If you're facing any issues not captured below, reach out to the [#help_design_system](https://cultureamp.slack.com/archives/C0189KBPM4Y) channel on Slack.
+
+#### `icon` props and sizing
+
+While the `icon` prop supports any `JSX` element, only the latest [Icon component](/docs/components-icon-icon-future-api-specification--docs) will be able to handle relative sizing and spacing automatically within the Button. We recommend running the `upgradeIconV1` codemod before this to convert all icons to the latest implementation. See the guidance here on using the [Material Icons CDN](/docs/guides-app-starter--docs#5-link-to-google-material-symbols-cdn).
+
+#### `component` props type errors
+
+Based off Metabase queries, `component` render props is used in consuming repositories to wrap Button content with a routing solution, such as NextJS's `Link` component. To ensure a safe migration, the codemod will update any usages to a `LinkButton` with the `component` prop still passed in. This will cause an intentional type error to provide feedback and make it easier to find in the codebase for a manual update. This should be able to be converted to use client side routing by following the [LinkButton API docs](https://cultureamp.design/?path=/docs/components-linkbutton-api-specification--docs).
+
+#### `badge` props type errors
+
+The codemod will continue to passed `badge` props into the new implementation so it will throw a type error and provide feedback to engineers. This will need to be manually composed within the `Children` if required, ie:
+
+```
+import { Badge } from "@kaizen/components"
+import { Button } from "@kaizen/components/next"
+
+<Button>Label<Badge classNameOverride="ms-8" variant="success">New</Badge></Button>
+```
+
+#### Link related props type errors
+
+If no `href` or `component` props are passed to the component you may get type errors for having anchor related props passed into a Button, ie: `target`, `rel`.
+
+This will cause a type error that can be corrected by either using the `LinkButton` (if intended) or removing all anchor related props as they should exist on semantic buttons.
+
+## More information
+
+For more information on the about each of the new API's, we recommend referring the [Button](/docs/components-button-button-next-api-specification--docs) or [LinkButton](/docs/components-linkbutton-api-specification--docs) API specifications.

package/src/__next__/Icon/_docs/Icon--api-specification.mdx

@@ -9,7 +9,7 @@ import * as IconStories from './Icon.docs.stories'
 Updated September 4, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__v2__/Icon"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Icon"
   designGuidelines="/?path=/docs/illustrations-icon-v2-usage-guidelines--docs"
 />
 

package/src/__next__/Icon/_docs/Icon--usage-guidelines.mdx

@@ -9,7 +9,7 @@ import * as IconStories from './Icon.docs.stories'
 Updated September 13, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__illustrations__/Icon/next"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Icon"
   apiSpecification="/?path=/docs/illustrations-icon-v3-api-specification--docs"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-3974"
 />

package/src/__next__/Menu/_docs/Menu--api-specification.mdx

@@ -10,7 +10,7 @@ import * as exampleStories from './Menu.stories'
 Updated December 16, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Menu"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
   designGuidelines="/?path=/docs/components-menu-menu-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"

package/src/__next__/Menu/_docs/Menu--usage-guidelines.mdx

@@ -10,7 +10,7 @@ import * as MenuStories from './Menu.stories'
 Updated July 6, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Menu"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"

package/src/__next__/Select/_docs/Select.mdx

@@ -4,10 +4,10 @@ import * as SelectStories from './Select.stories'
 
 <Meta of={SelectStories} />
 
-# Select (future)
+# Select (next)
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Select"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Select"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"
 

package/src/__next__/Select/_docs/Select.stickersheet.stories.tsx

@@ -14,7 +14,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Select/Select (future)',
+  title: 'Components/Select/Select (next)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/__next__/Select/_docs/Select.stories.tsx

@@ -7,7 +7,7 @@ import { type SelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
 const meta = {
-  title: 'Components/Select/Select (future)',
+  title: 'Components/Select/Select (next)',
   component: Select,
   argTypes: {
     items: {

package/src/__next__/Tabs/_docs/Tabs--api-specification.mdx

@@ -7,7 +7,7 @@ import * as TabsStories from './Tabs.stories'
 # Tabs (next)
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tabs"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A28886&mode=design&t=AGMmnoJia9RscurE-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs"
 

package/src/__next__/Tag/RemovableTag/_docs/RemovableTag.mdx

@@ -6,7 +6,7 @@ import * as RemovableTagStories from './RemovableTag.stories'
 
 # RemovableTag (next)
 
-<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tag/RemovableTag.tsx" />
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tag/RemovableTag" />
 
 <KAIOInstallation exportNames="RemovableTag" isNext />
 

package/src/__next__/Tooltip/_docs/ApiSpecification.mdx

@@ -10,7 +10,7 @@ import * as exampleStories from './Tooltip.stories'
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
   designGuidelines="/?path=/docs/overlays-tooltip-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"

package/src/__next__/Tooltip/_docs/Tooltip.mdx

@@ -13,7 +13,7 @@ import WhenToUsePng from './assets/tooltip_variant.png'
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
   designGuidelines="/?path=/docs/overlays-tooltip-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"