Merge main into renovate/rollup

.buildkite/scripts/build-storybook.sh

@@ -6,5 +6,5 @@ set -e
 
 corepack enable
 pnpm install --frozen-lockfile
-pnpm turbo @docs/storybook#build:docs
+pnpm turbo build:docs --filter=@docs/storybook
 tar -czf ./storybook.tar.gz ./docs/storybook-static

.eslintrc.js

@@ -320,7 +320,7 @@ module.exports = {
       },
     },
     {
-      files: ["**/bin/**", "vitest.setup.ts"],
+      files: ["**/bin/**", "**/codemods/**", "vitest.setup.ts"],
       rules: {
         "no-console": "off",
       },

.github/workflows/chromatic-main.yaml

@@ -18,7 +18,7 @@ jobs:
           fetch-depth: 0
       - uses: ./.github/actions/setup
       - name: Build Storybook
-        run: pnpm turbo @docs/storybook#build:chromatic
+        run: pnpm turbo build:chromatic --filter=@docs/storybook
       - name: Publish to Chromatic
         uses: chromaui/action@v11
         with:

.github/workflows/chromatic-pr.yaml

@@ -43,7 +43,7 @@ jobs:
       - uses: ./.github/actions/setup
       - name: Build Storybook for Chromatic
         # We want both stories and docs for the branch preview
-        run: pnpm turbo @docs/storybook#build:chromatic
+        run: pnpm turbo build:chromatic --filter=@docs/storybook
       - id: publishChromatic
         name: Publish to Chromatic
         uses: chromaui/action@v11

.github/workflows/clear-cache.yml

@@ -0,0 +1,31 @@
+# From https://stackoverflow.com/a/73556714
+name: Clear cache
+
+on:
+  workflow_dispatch:
+
+permissions:
+  actions: write
+
+jobs:
+  clear-cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clear cache
+        uses: actions/github-script@v7
+        with:
+          script: |
+            console.log("About to clear")
+            const caches = await github.rest.actions.getActionsCacheList({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            })
+            for (const cache of caches.data.actions_caches) {
+              console.log(cache)
+              github.rest.actions.deleteActionsCacheById({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                cache_id: cache.id,
+              })
+            }
+            console.log("Clear completed")

.github/workflows/test-stories.yaml

@@ -31,7 +31,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm turbo @docs/storybook#build:test
+      - run: pnpm turbo build:test --filter=@docs/storybook
       - name: Upload Storybook build as artifact
         uses: actions/upload-artifact@v4
         with:
@@ -53,7 +53,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (1/3)
-        run: pnpm turbo @docs/storybook#test:storybook -- --shard 1/3
+        run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 1/3
 
   storybook-tests-2:
     name: "test-storybook"
@@ -69,7 +69,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (2/3)
-        run: pnpm turbo @docs/storybook#test:storybook -- --shard 2/3
+        run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 2/3
 
   storybook-tests-3:
     name: "test-storybook"
@@ -85,4 +85,4 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (3/3)
-        run: pnpm turbo @docs/storybook#test:storybook -- --shard 3/3
+        run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 3/3

.stylelintrc-css.mjs

@@ -11,5 +11,11 @@ export default {
         ignoreFontFamilies: ["Material Symbols Outlined"],
       },
     ],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global"],
+      },
+    ],
   },
 }

docs/.storybook/main.ts

@@ -15,7 +15,6 @@ const config: StorybookConfig = {
     "../../packages/**/*.mdx",
     "../../packages/**/*.stories.tsx",
     "../pages/**/*.mdx",
-    "../pages/**/*.stories.tsx",
   ],
   addons: [
     getAbsolutePath("@storybook/addon-a11y"),

docs/turbo.json

@@ -0,0 +1,37 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build:tailwind": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+      "outputs": ["docs/.storybook/preview.css"],
+      "cache": false
+    },
+    "build:docs": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    },
+    "build:test": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    },
+    "build:chromatic": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    },
+    "dev": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "cache": false
+    },
+    "test:storybook": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    }
+  }
+}

packages/components/CHANGELOG.md

@@ -1,5 +1,66 @@
 # Change Log
 
+## 1.67.18
+
+### Patch Changes
+
+- [#5277](https://github.com/cultureamp/kaizen-design-system/pull/5277) [`0b641cfc39be9eaf9d77cb8aef32e845f02ecbd0`](https://github.com/cultureamp/kaizen-design-system/commit/0b641cfc39be9eaf9d77cb8aef32e845f02ecbd0) - Fix EmptyState horizontal overflow
+
+## 1.67.17
+
+### Patch Changes
+
+- [#5279](https://github.com/cultureamp/kaizen-design-system/pull/5279) [`718cbdd2dd00ddd688a9272cd0c271adf085fc42`](https://github.com/cultureamp/kaizen-design-system/commit/718cbdd2dd00ddd688a9272cd0c271adf085fc42) - Actually release @kaizen/package-bundler (2.0.0 already exists from an accidental prior release)
+
+## 1.67.16
+
+### Patch Changes
+
+- [#5270](https://github.com/cultureamp/kaizen-design-system/pull/5270) [`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc) - Update @kaizen/package-bundler
+
+## 1.67.15
+
+### Patch Changes
+
+- [#5275](https://github.com/cultureamp/kaizen-design-system/pull/5275) [`3b1ceb02c2865d42cba6b13a5f4e4aa932e6897b`](https://github.com/cultureamp/kaizen-design-system/commit/3b1ceb02c2865d42cba6b13a5f4e4aa932e6897b) - fix(FilterBar): Remove container property from FilterBar wrapper
+
+## 1.67.14
+
+### Patch Changes
+
+- [#5273](https://github.com/cultureamp/kaizen-design-system/pull/5273) [`6fcc6088f8b6107694ce6ab22c4c2a78560332e9`](https://github.com/cultureamp/kaizen-design-system/commit/6fcc6088f8b6107694ce6ab22c4c2a78560332e9) - Pagination responsive adjustments
+
+  - Margins partially restored to have 8px between buttons
+  - Boundary pages will now only show on large viewports and up
+  - Sibling pages will continue to show on medium viewports and up
+
+## 1.67.13
+
+### Patch Changes
+
+- [#5269](https://github.com/cultureamp/kaizen-design-system/pull/5269) [`e4358c8289c789b7140affb4207d3e72cdd94f86`](https://github.com/cultureamp/kaizen-design-system/commit/e4358c8289c789b7140affb4207d3e72cdd94f86) - Pagination responsiveness
+
+  - Margins and padding tightened up
+  - Sibling pages shown drops from 1 to 0 on small viewports
+
+## 1.67.12
+
+### Patch Changes
+
+- [#5266](https://github.com/cultureamp/kaizen-design-system/pull/5266) [`94ac62d79ce431adc1ad2b4dc76e39d72fb56373`](https://github.com/cultureamp/kaizen-design-system/commit/94ac62d79ce431adc1ad2b4dc76e39d72fb56373) - Re-release with @kaizen/package-bundler update.
+
+- [#5265](https://github.com/cultureamp/kaizen-design-system/pull/5265) [`034fbf2e829564999d4795c123304c17fe87c054`](https://github.com/cultureamp/kaizen-design-system/commit/034fbf2e829564999d4795c123304c17fe87c054) - Update codemods to retain empty lines.
+
+## 1.67.11
+
+### Patch Changes
+
+- [#5263](https://github.com/cultureamp/kaizen-design-system/pull/5263) [`f4a00f663c09baae9d5f5ed02d0f04e2ecf4e5d0`](https://github.com/cultureamp/kaizen-design-system/commit/f4a00f663c09baae9d5f5ed02d0f04e2ecf4e5d0) - Menu v3 fixes and documentation for typeahead functionality
+
+  - Insert `textValue` into RAC's MenuItem when typeof children === string
+  - Add documentation for how to get typeahead working when passing ReactNode
+  - Adjust MenuItem to only add flex when children is string and there's an icon
+
 ## 1.67.10
 
 ### Patch Changes

packages/components/codemods/migrateBrandMomentMoodToVariant/index.ts

@@ -2,9 +2,8 @@ import { transformComponentsInDir } from "../utils"
 import { transformBrandMomentMoodToVariant } from "./transformBrandMomentMoodToVariant"
 
 const migrateBrandMomentMoodToVariant = (): void => {
-  // eslint-disable-next-line no-console
   console.log(
-    " ~(-_- ~) Running BrandMoment mood to variant transformer (~ -_-)~"
+    "~(-_- ~) Running BrandMoment mood to variant transformer (~ -_-)~"
   )
   const targetDir = process.argv[2]
   if (!targetDir) {

packages/components/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.spec.ts

@@ -1,11 +1,15 @@
 import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+  printAst,
+  transformSourceForTagName,
+  type TransformSourceForTagNameArgs,
+} from "../utils"
 import { transformBrandMomentMoodToVariant } from "./transformBrandMomentMoodToVariant"
 
 const transformBrandMoment = (
-  sourceFile: TransformConfig["sourceFile"]
+  sourceFile: TransformSourceForTagNameArgs["sourceFile"]
 ): string =>
-  transformSource({
+  transformSourceForTagName({
     sourceFile,
     astTransformer: transformBrandMomentMoodToVariant,
     tagName: "BrandMoment",

packages/components/codemods/migrateCardVariantToColor/index.ts

@@ -2,8 +2,7 @@ import { transformComponentsInDir } from "../utils"
 import { transformCardVariantToColor } from "./transformCardVariantToColor"
 
 const migrateCardVariantToColor = (): void => {
-  // eslint-disable-next-line no-console
-  console.log(" ~(-_- ~) Running Card variant to color transformer (~ -_-)~")
+  console.log("~(-_- ~) Running Card variant to color transformer (~ -_-)~")
   const targetDir = process.argv[2]
   if (!targetDir) {
     process.exit(1)

packages/components/codemods/migrateCardVariantToColor/transformCardVariantToColor.spec.ts

@@ -1,9 +1,15 @@
 import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+  printAst,
+  transformSourceForTagName,
+  type TransformSourceForTagNameArgs,
+} from "../utils"
 import { transformCardVariantToColor } from "./transformCardVariantToColor"
 
-const transformCard = (sourceFile: TransformConfig["sourceFile"]): string =>
-  transformSource({
+const transformCard = (
+  sourceFile: TransformSourceForTagNameArgs["sourceFile"]
+): string =>
+  transformSourceForTagName({
     sourceFile,
     astTransformer: transformCardVariantToColor,
     tagName: "Card",

packages/components/codemods/migrateConfirmationModalMoodsToVariant/index.ts

@@ -2,8 +2,7 @@ import { transformComponentsInDir } from "../utils"
 import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
 
 const run = (): void => {
-  // eslint-disable-next-line no-console
-  console.log(" ~(-_- ~) Running ConfirmationModal transformer (~ -_-)~")
+  console.log("~(-_- ~) Running ConfirmationModal transformer (~ -_-)~")
   const targetDir = process.argv[2]
   if (!targetDir) {
     process.exit(1)

packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts

@@ -1,5 +1,5 @@
 import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
 import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
 
 describe("transformConfirmationModalMoodsToVariant", () => {
@@ -10,7 +10,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <ConfirmationModal variant="success"/>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",
@@ -25,7 +25,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <ConfirmationModal variant="warning"/>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",
@@ -40,7 +40,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <ConfirmationModal variant="warning" id="123"/>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",
@@ -55,7 +55,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <div><ConfirmationModal variant="success"/><ConfirmationModal variant="warning"/></div>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",
@@ -70,7 +70,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <div><ConfirmationModal variant="success"/><ConfirmationModal variant="cautionary"/><ConfirmationModal variant="success"/></div>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",
@@ -85,7 +85,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <div><ConfirmationModal variant="success"/></div>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",
@@ -100,7 +100,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
     const outputAst = parseJsx(`
       export const TestComponent = () => <div><ConfirmationModal variant={confirmationModalVariable}/></div>
     `)
-    const transformed = transformSource({
+    const transformed = transformSourceForTagName({
       sourceFile: inputAst,
       astTransformer: transformConfirmationModalMoodsToVariant,
       tagName: "ConfirmationModal",

packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/index.ts

@@ -2,9 +2,8 @@ import { transformComponentsInDir } from "../utils"
 import { transformEmptyStateIllustrationTypeToVariant } from "./transformEmptyStateIllustrationTypeToVariant"
 
 const migrateEmptyStateIllustrationTypeToVariant = (): void => {
-  // eslint-disable-next-line no-console
   console.log(
-    " ~(-_- ~) Running EmptyState illustrationType to variant transformer (~ -_-)~"
+    "~(-_- ~) Running EmptyState illustrationType to variant transformer (~ -_-)~"
   )
   const targetDir = process.argv[2]
   if (!targetDir) {

packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.spec.ts

@@ -1,11 +1,15 @@
 import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+  printAst,
+  transformSourceForTagName,
+  type TransformSourceForTagNameArgs,
+} from "../utils"
 import { transformEmptyStateIllustrationTypeToVariant } from "./transformEmptyStateIllustrationTypeToVariant"
 
 const transformEmptyState = (
-  sourceFile: TransformConfig["sourceFile"]
+  sourceFile: TransformSourceForTagNameArgs["sourceFile"]
 ): string =>
-  transformSource({
+  transformSourceForTagName({
     sourceFile,
     astTransformer: transformEmptyStateIllustrationTypeToVariant,
     tagName: "EmptyState",