@kaizen/components 0.0.0-canary-calendar-native-popover-api-20250212022145 → 0.0.0-canary-button-codemod-canary-20250212054517

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-calendar-native-popover-api-20250212022145",
+  "version": "0.0.0-canary-button-codemod-canary-20250212054517",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -17,10 +17,3 @@
     padding: $spacing-24;
   }
 }
-
-// Overrides for if the browser supports popovers
-.calendarPopover[popover]:popover-open {
-  z-index: unset;
-  margin: 0;
-  inset: unset;
-}

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, type HTMLAttributes } from 'react'
+import React, { useState, type HTMLAttributes } from 'react'
 import {
   autoPlacement,
   autoUpdate,
@@ -30,7 +30,7 @@ export const CalendarPopover = ({
 }: CalendarPopoverProps): JSX.Element => {
   const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
 
-  const { floatingStyles, update } = useFloating({
+  const { floatingStyles } = useFloating({
     placement: 'bottom-start',
     elements: {
       reference: referenceElement,
@@ -57,15 +57,6 @@ export const CalendarPopover = ({
     ...floatingOptions,
   })
 
-  useEffect(() => {
-    if (floatingElement && referenceElement) {
-      // @ts-expect-error this can be removed when we update to react 19
-      referenceElement.popoverTargetElement = floatingElement
-      floatingElement.showPopover?.()
-      update()
-    }
-  }, [referenceElement, floatingElement, update])
-
   return (
     <div
       ref={setFloatingElement}
@@ -73,8 +64,6 @@ export const CalendarPopover = ({
       className={classnames(styles.calendarPopover, classNameOverride)}
       role="dialog"
       aria-modal="true"
-      // @ts-expect-error this can be removed when we update to react 19
-      popover="manual"
       {...restProps}
     >
       {children}

package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { autoPlacement, offset, size } from '@floating-ui/react-dom'
 import { type Meta } from '@storybook/react'
+import { Text } from '~components/Text'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { CalendarRange } from '../../CalendarRange'
 import { CalendarSingle } from '../../CalendarSingle'
@@ -149,3 +150,56 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: 'rtl',
   },
 }
+
+export const StickerSheetResponsive: StickerSheetStory = {
+  name: 'Sticker Sheet (Responsive)',
+  render: () => (
+    <>
+      <Text variant="intro-lede" classNameOverride="mb-12 ">
+        CalendarSingle scaled to availableHeight
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarSingle selected={new Date('2022-02-19')} />
+        </CalendarPopoverExample>
+      </div>
+      <Text variant="intro-lede" classNameOverride="mb-12 ">
+        CalendarRange scaled to availableHeight
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarRange
+            selected={{
+              from: new Date('2022-02-19'),
+              to: new Date('2022-03-04'),
+            }}
+            hasDivider
+          />
+        </CalendarPopoverExample>
+      </div>
+      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
+        CalendarSingle scaled to availableWidth
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarSingle selected={new Date('2022-03-19')} />
+        </CalendarPopoverExample>
+      </div>
+      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
+        CalendarRanger scaled to availableWidth
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarRange
+            data-testid="sb-final-calendar"
+            selected={{
+              from: new Date('2022-02-19'),
+              to: new Date('2022-03-04'),
+            }}
+            hasDivider
+          />
+        </CalendarPopoverExample>
+      </div>
+    </>
+  ),
+}

package/src/Select/Select.tsx

@@ -57,7 +57,6 @@ export const Select = React.forwardRef<any, SelectProps>(
       description,
       fullWidth: propsFullWidth,
       className: propsClassName,
-      isDisabled,
       placeholder,
       ...props
     },
@@ -76,7 +75,7 @@ export const Select = React.forwardRef<any, SelectProps>(
       variant === 'secondary' && styles.secondary,
       variant === 'secondary-small' && styles.secondarySmall,
       !fullWidth && styles.notFullWidth,
-      isDisabled && styles.disabled,
+      props.isDisabled && styles.disabled,
       status === 'error' && styles.error,
     )
 

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

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+
+<Meta title="Components/Button/Button (v3)/Migration Guide" />
+
+# Button Migration Guide
+
+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` and does not have a specific prop.
+- Variants, such as `primary` and `secondary`, are now controlled as by the single `variant` prop.
+- `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.
+- `IconButton` has been superseded by icon props and the [icon-only pattern](/docs/components-button-button-v3-api-specification--docs#icon-only-button-and-hashiddenlabel).
+- `working` props has been updated to `pending` to better reflect the state of the button.
+- `badge` prop has been removed and should be handled within the `Children` where required.
+- `size` props have been adjusted to include `small`, `medium` and `large`.
+- Styles have been consolidate to align with modern designs and variants like `destructive` have been removed.
+  - The codemod will remap these to the relative variants.
+- Reversed styles should be handled by the `ReversedColors` Provider but for ease of migration can use the `isReversed` prop.
+
+## 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
+```
+
+### 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. Seem more about this [here](/docs/components-icon-icon-future-api-specification--docs#set-up).
+
+### Potential 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` render props and intentional 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).
+
+## More information
+
+For more information on the about each of the new API's, we recommend referring the [Button](/docs/components-button-button-v3-api-specification--docs) or [LinkButton](/docs/components-linkbutton-api-specification--docs) API specifications.