From dd54433892bfe55f909056903db37951ba41c9fa Mon Sep 17 00:00:00 2001 From: Geoffrey Chong Date: Fri, 11 Aug 2023 16:05:05 +1000 Subject: [PATCH 1/3] migration complete --- .changeset/curvy-kiwis-count.md | 2 - .github/actions/playwright/action.yml | 21 - .github/actions/run-storybook/action.yml | 3 +- .github/workflows/canary-release.yml | 19 +- .github/workflows/changeset.yaml | 28 +- .github/workflows/test-stories.yaml | 14 +- .prettierignore | 2 +- docker-compose.yml | 31 - draft-packages/avatar/package.json | 4 +- draft-packages/badge/package.json | 4 +- draft-packages/card/package.json | 4 +- draft-packages/collapsible/CHANGELOG.md | 6 + .../KaizenDraft/Collapsible/Collapsible.tsx | 11 +- .../docs/CollapsibleGroup.stories.tsx | 37 +- .../docs/ExpertAdviceCollapsible.stories.tsx | 2 +- .../docs/SingleCollapsible.stories.tsx | 13 +- draft-packages/collapsible/package.json | 9 +- draft-packages/divider/package.json | 4 +- draft-packages/empty-state/package.json | 4 +- .../filter-menu-button/package.json | 4 +- draft-packages/form/CHANGELOG.md | 6 + .../Form/CheckboxField/CheckboxField.tsx | 70 +- .../Form/Primitives/Radio/Radio.tsx | 2 - .../Form/RadioField/RadioField.tsx | 68 +- .../Form/SearchField/SearchField.tsx | 10 +- .../form/KaizenDraft/Form/Slider/Slider.tsx | 10 +- .../KaizenDraft/Form/TextField/TextField.tsx | 7 +- .../ToggleSwitchField/ToggleSwitchField.tsx | 73 +- .../form/docs/CheckboxField.stories.tsx | 9 - .../form/docs/CheckboxGroup.stories.tsx | 41 +- .../form/docs/RadioField.stories.tsx | 5 - .../form/docs/RadioGroup.stories.tsx | 31 +- .../form/docs/SearchField.stories.tsx | 24 +- draft-packages/form/docs/Slider.stories.tsx | 5 - .../form/docs/TextAreaField.stories.tsx | 20 +- .../form/docs/TextField.stories.tsx | 34 +- .../form/docs/ToggleSwitchField.stories.tsx | 3 - draft-packages/form/package.json | 6 +- draft-packages/guidance-block/package.json | 4 +- draft-packages/hero-card/package.json | 4 +- draft-packages/illustration/package.json | 4 +- .../likert-scale-legacy/package.json | 4 +- draft-packages/menu/package.json | 4 +- draft-packages/modal/package.json | 4 +- draft-packages/page-layout/package.json | 4 +- draft-packages/popover/package.json | 4 +- draft-packages/select/package.json | 4 +- draft-packages/table/CHANGELOG.md | 11 + .../table/KaizenDraft/Table/Table.spec.tsx | 21 - .../table/KaizenDraft/Table/Table.tsx | 8 +- draft-packages/table/package.json | 8 +- draft-packages/tabs/package.json | 4 +- draft-packages/tag/package.json | 4 +- draft-packages/tile/package.json | 4 +- draft-packages/title-block-zen/package.json | 4 +- draft-packages/tooltip/package.json | 4 +- draft-packages/well/package.json | 4 +- package.json | 67 +- packages/a11y/package.json | 4 +- packages/brand-moment/package.json | 4 +- packages/brand/package.json | 4 +- packages/button/package.json | 4 +- packages/component-base/package.json | 4 +- packages/component-library/package.json | 4 +- packages/date-picker/CHANGELOG.md | 17 + .../date-picker/docs/DatePicker.stories.tsx | 9 - .../docs/DateRangePicker.stories.tsx | 2 - .../date-picker/docs/TimeField.stories.tsx | 9 - packages/date-picker/package.json | 19 +- .../date-picker/src/DatePicker/DatePicker.tsx | 7 +- .../src/DateRangePicker/DateRangePicker.tsx | 7 +- .../src/TimeField/TimeField.spec.tsx | 16 +- .../date-picker/src/TimeField/TimeField.tsx | 9 +- .../Calendar/LegacyCalendarRange.tsx | 4 +- packages/loading-skeleton/package.json | 4 +- packages/loading-spinner/package.json | 4 +- packages/notification/CHANGELOG.md | 6 + packages/notification/package.json | 6 +- .../src/InlineNotification.spec.tsx | 22 - .../src/ToastNotificationManager.tsx | 1 + .../InlineNotification.spec.tsx.snap | 91 - packages/notification/src/_styles.scss | 4 + .../GenericNotification.module.scss | 4 + .../src/components/GenericNotification.tsx | 3 +- packages/pagination/package.json | 4 +- packages/progress-bar/package.json | 4 +- packages/responsive/package.json | 4 +- packages/rich-text-editor/package.json | 4 +- packages/select/CHANGELOG.md | 15 + .../select/docs/Select/Select.stories.tsx | 8 +- packages/select/package.json | 34 +- packages/select/src/Select/Select.spec.tsx | 28 +- packages/select/src/Select/Select.tsx | 5 +- packages/split-button/package.json | 4 +- packages/tabs/package.json | 4 +- packages/typography/package.json | 4 +- playwright.config.ts | 34 - yarn.lock | 5476 ++++++++--------- 98 files changed, 2970 insertions(+), 3747 deletions(-) delete mode 100644 .changeset/curvy-kiwis-count.md delete mode 100644 .github/actions/playwright/action.yml delete mode 100644 docker-compose.yml delete mode 100644 packages/notification/src/__snapshots__/InlineNotification.spec.tsx.snap delete mode 100644 playwright.config.ts diff --git a/.changeset/curvy-kiwis-count.md b/.changeset/curvy-kiwis-count.md deleted file mode 100644 index a845151..0000000 --- a/.changeset/curvy-kiwis-count.md +++ /dev/null @@ -1,2 +0,0 @@ ---- ---- diff --git a/.github/actions/playwright/action.yml b/.github/actions/playwright/action.yml deleted file mode 100644 index b5ffff5..0000000 --- a/.github/actions/playwright/action.yml +++ /dev/null @@ -1,21 +0,0 @@ -# this is composite workflow that gets the repo ready for actions -# for docs how composite workflows work see https://wallis.dev/blog/composite-github-actions - -name: Install Playwright -description: Dependency for storybook/test-runner - -runs: - using: composite - steps: - - name: Cache Playwright - id: playwright-cache - uses: actions/cache@v3 - with: - path: ~/.cache/ms-playwright - key: kaizen-${{ runner.os }}-playwright-${{ hashFiles('./yarn.lock') }} - - if: steps.playwright-cache.outputs.cache-hit != 'true' - run: npx playwright install --with-deps - shell: bash - - if: steps.playwright-cache.outputs.cache-hit == 'true' - run: npx playwright install-deps - shell: bash diff --git a/.github/actions/run-storybook/action.yml b/.github/actions/run-storybook/action.yml index cc2679e..80c92a4 100644 --- a/.github/actions/run-storybook/action.yml +++ b/.github/actions/run-storybook/action.yml @@ -16,8 +16,9 @@ runs: uses: actions/download-artifact@v3 with: name: ${{ inputs.artifactName }} + path: "./storybook/public" - name: Run storybook uses: Eun/http-server-action@v1 with: - directory: ${{ steps.download.outputs.download-path }} + directory: "./storybook/public" port: 6006 diff --git a/.github/workflows/canary-release.yml b/.github/workflows/canary-release.yml index 95db8a2..74b5032 100644 --- a/.github/workflows/canary-release.yml +++ b/.github/workflows/canary-release.yml @@ -4,7 +4,7 @@ on: workflow_dispatch: inputs: label: - description: 'Pick a label for the release, to be included in the version number — e.g. "fix-button-focus" will released as "@kaizen/button@1.0.0-fix-button-focus-20230719002814"' + description: 'Pick a label for the release, to be included in the version number — e.g. "fix-button-focus" will released as "@kaizen/button@0.0.0-canary-fix-button-focus-20230719002814"' required: true type: string @@ -18,12 +18,17 @@ jobs: steps: - uses: actions/checkout@v3 - uses: ./.github/actions/setup - - name: Create Release Pull Request or Publish to npm - id: changesets + - name: Set npm token run: | npm config set "//registry.npmjs.org/:_authToken" "$NPM_TOKEN" - - run: | - echo "Releasing canary for $LABEL" + - name: Create canary release and publish to npm + id: changesets + run: | + echo "🥚 Building canary-$LABEL" yarn build - yarn changeset version --snapshot "$LABEL" - yarn changeset publish --tag "$LABEL" + echo "🐣 Releasing canary-$LABEL" + yarn changeset version --snapshot "canary-$LABEL" + yarn changeset publish --tag "canary-$LABEL" + - name: Push tags + run: | + git push --follow-tags diff --git a/.github/workflows/changeset.yaml b/.github/workflows/changeset.yaml index 7ce72f8..71e9da2 100644 --- a/.github/workflows/changeset.yaml +++ b/.github/workflows/changeset.yaml @@ -26,4 +26,30 @@ jobs: commit: "version packages" version: yarn ci:version publish: yarn ci:publish - - run: git push --follow-tags + - name: Push git tags + if: steps.changesets.outputs.published == 'true' + run: git push --follow-tags + slack-notify: + runs-on: ubuntu-latest + needs: version + steps: + - name: Notify Slack (success) + if: needs.version.outputs.published == 'true' + # https://github.com/marketplace/actions/post-to-slack + uses: pcolby/post-to-slack@v1 + with: + url: ${{ secrets.SLACK_WEBHOOK_URL }} + channel: "#wol_kaizen" + username: "Release" + text: Complete + iconEmoji: ":squid:" + - name: Notify Slack (failure) + if: needs.version.outputs.published == 'false' + # https://github.com/marketplace/actions/post-to-slack + uses: pcolby/post-to-slack@v1 + with: + url: ${{ secrets.SLACK_WEBHOOK_URL }} + channel: "#wol_kaizen" + username: "Release" + text: Something went wrong + iconEmoji: ":squid:" diff --git a/.github/workflows/test-stories.yaml b/.github/workflows/test-stories.yaml index 414fc75..c41850a 100644 --- a/.github/workflows/test-stories.yaml +++ b/.github/workflows/test-stories.yaml @@ -27,6 +27,7 @@ env: jobs: build-storybook: + if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false runs-on: ubuntu-latest steps: - name: Checkout repository @@ -48,7 +49,8 @@ jobs: steps: - uses: actions/checkout@v3 - uses: ./.github/actions/setup - - uses: ./.github/actions/playwright + - name: Install Playwright + run: npx playwright install --with-deps - uses: ./.github/actions/run-storybook with: artifactName: ${{ env.ARTIFACT_NAME }} @@ -63,7 +65,8 @@ jobs: steps: - uses: actions/checkout@v3 - uses: ./.github/actions/setup - - uses: ./.github/actions/playwright + - name: Install Playwright + run: npx playwright install --with-deps - uses: ./.github/actions/run-storybook with: artifactName: ${{ env.ARTIFACT_NAME }} @@ -78,7 +81,8 @@ jobs: steps: - uses: actions/checkout@v3 - uses: ./.github/actions/setup - - uses: ./.github/actions/playwright + - name: Install Playwright + run: npx playwright install --with-deps - uses: ./.github/actions/run-storybook with: artifactName: ${{ env.ARTIFACT_NAME }} @@ -87,7 +91,6 @@ jobs: chromatic: needs: build-storybook - if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false runs-on: ubuntu-latest outputs: storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }} @@ -101,13 +104,14 @@ jobs: uses: actions/download-artifact@v3 with: name: ${{ env.ARTIFACT_NAME }} + path: "./storybook/public" - id: publishChromatic name: Publish to Chromatic uses: chromaui/action@v1 with: token: ${{ github.token }} projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - storybookBuildDir: ${{ steps.download.outputs.download-path }} + storybookBuildDir: "./storybook/public" onlyChanged: "!(main)" externals: | [ diff --git a/.prettierignore b/.prettierignore index 49154ad..54273f3 100644 --- a/.prettierignore +++ b/.prettierignore @@ -16,4 +16,4 @@ **/node_modules/ /storybook/public/ /packages/**/dist -/packages/components/locales +/packages/component-library/styles/animations/vendor diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index 5e8febf..0000000 --- a/docker-compose.yml +++ /dev/null @@ -1,31 +0,0 @@ -version: "3.4" - -x-defaults: &defaults - volumes: - - .:/workspace - working_dir: /workspace - command: /bin/sh -c "while sleep 1000; do :; done" - environment: - - AWS_ACCESS_KEY_ID - - AWS_SECRET_ACCESS_KEY - - AWS_SESSION_TOKEN - - AWS_DEFAULT_REGION - - KAIZEN_DOMAIN_NAME - - KAIZEN_DISTRIBUTION_ID - - KAIZEN_BASE_PATH - - GITHUB_STATUS_TOKEN - - BUILDKITE_BRANCH - - GITHUB_REGISTRY_TOKEN - -services: - changeset: - <<: *defaults - build: - context: . - dockerfile: .buildkite/dockerfiles/release.Dockerfile - - release: - <<: *defaults - build: - context: . - dockerfile: .buildkite/dockerfiles/release.Dockerfile diff --git a/draft-packages/avatar/package.json b/draft-packages/avatar/package.json index fdbb0e2..60af964 100644 --- a/draft-packages/avatar/package.json +++ b/draft-packages/avatar/package.json @@ -3,8 +3,8 @@ "version": "2.8.40", "description": "The draft avatar component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/badge/package.json b/draft-packages/badge/package.json index ac25761..7030192 100644 --- a/draft-packages/badge/package.json +++ b/draft-packages/badge/package.json @@ -3,8 +3,8 @@ "version": "1.13.12", "description": "The draft badge component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/card/package.json b/draft-packages/card/package.json index 7aa1c7f..9290269 100644 --- a/draft-packages/card/package.json +++ b/draft-packages/card/package.json @@ -3,8 +3,8 @@ "version": "3.2.11", "description": "The draft card component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/collapsible/CHANGELOG.md b/draft-packages/collapsible/CHANGELOG.md index 73ccd31..cc74de1 100644 --- a/draft-packages/collapsible/CHANGELOG.md +++ b/draft-packages/collapsible/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 3.5.40 + +### Patch Changes + +- [#3945](https://github.com/cultureamp/kaizen-design-system/pull/3945) [`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db) - Make id props optional, using uuid to generate one if not supplied + ## 3.5.39 ### Patch Changes diff --git a/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx b/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx index 2cb5935..78161b4 100644 --- a/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx +++ b/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx @@ -1,6 +1,7 @@ import React, { HTMLAttributes } from "react" import classnames from "classnames" import AnimateHeight from "react-animate-height" +import { v4 } from "uuid" import { IconButton } from "@kaizen/button" import { OverrideClassName } from "@kaizen/component-base" import chevronDown from "@kaizen/component-library/icons/chevron-down.icon.svg" @@ -13,7 +14,6 @@ type Variant = "default" | "clear" export interface CollapsibleProps extends OverrideClassName> { - id: string children: JSX.Element | JSX.Element[] | string title: string renderHeader?: (title: string) => JSX.Element | JSX.Element[] @@ -48,6 +48,7 @@ export interface CollapsibleProps type State = { open: boolean + id: string } /** @@ -57,11 +58,12 @@ type State = { export class Collapsible extends React.Component { public state = { open: !!this.props.open, + id: this.props.id || v4(), } public render(): JSX.Element { const { - id, + id: _, children, title, renderHeader, @@ -78,6 +80,7 @@ export class Collapsible extends React.Component { classNameOverride, ...props } = this.props + const { id } = this.state const buttonId = `${id}-button` const sectionId = `${id}-section` const open = this.getOpen() @@ -170,10 +173,10 @@ export class Collapsible extends React.Component { this.props.controlled ? this.props.open : this.state.open private handleSectionToggle = (): void => { - const { onToggle, id, controlled } = this.props + const { onToggle, controlled } = this.props const open = this.getOpen() - onToggle && onToggle(!open, id) + onToggle && onToggle(!open, this.state.id) if (!controlled) { this.setState({ diff --git a/draft-packages/collapsible/docs/CollapsibleGroup.stories.tsx b/draft-packages/collapsible/docs/CollapsibleGroup.stories.tsx index 48605d5..36e0e37 100644 --- a/draft-packages/collapsible/docs/CollapsibleGroup.stories.tsx +++ b/draft-packages/collapsible/docs/CollapsibleGroup.stories.tsx @@ -32,13 +32,13 @@ export const CollapsibleGroupDefault: StoryFn< typeof CollapsibleGroup > = args => ( - + {lipsum} - + {lipsum} - + {lipsum} @@ -47,26 +47,13 @@ CollapsibleGroupDefault.storyName = "Collapsible Group" const CollapsibleGroupVariantClear = (): JSX.Element => ( - + {lipsum} - + {lipsum} - + {lipsum} @@ -74,13 +61,13 @@ const CollapsibleGroupVariantClear = (): JSX.Element => ( const CollapsibleGroupSeparated = (): JSX.Element => ( - + {lipsum} - + {lipsum} - + {lipsum} @@ -88,16 +75,16 @@ const CollapsibleGroupSeparated = (): JSX.Element => ( const CollapsibleGroupStickyHeaders = (): JSX.Element => ( - + {lipsum} {lipsum} {lipsum} - + {lipsum} {lipsum} - + {lipsum} {lipsum} {lipsum} diff --git a/draft-packages/collapsible/docs/ExpertAdviceCollapsible.stories.tsx b/draft-packages/collapsible/docs/ExpertAdviceCollapsible.stories.tsx index 303f679..160bf25 100644 --- a/draft-packages/collapsible/docs/ExpertAdviceCollapsible.stories.tsx +++ b/draft-packages/collapsible/docs/ExpertAdviceCollapsible.stories.tsx @@ -28,7 +28,7 @@ export default { } satisfies Meta export const DefaultStory: StoryFn = args => ( - + {lipsum} ) diff --git a/draft-packages/collapsible/docs/SingleCollapsible.stories.tsx b/draft-packages/collapsible/docs/SingleCollapsible.stories.tsx index cbf293b..38fddd6 100644 --- a/draft-packages/collapsible/docs/SingleCollapsible.stories.tsx +++ b/draft-packages/collapsible/docs/SingleCollapsible.stories.tsx @@ -36,12 +36,7 @@ export default { } satisfies Meta const SingleCollapsibleNoPadding = (): JSX.Element => ( - + Maybe you would like... @@ -60,7 +55,6 @@ const SingleCollapsibleNoPadding = (): JSX.Element => ( const SingleCollapsibleCustomHeader = (): JSX.Element => ( ( ) const SingleCollapsibleLazyLoad = (): JSX.Element => ( - + This content won't be rendered until the collapsible is opened. This is particularly useful when you have data being queried inside your @@ -119,7 +113,6 @@ export const SingleCollapsibleKaizenSiteDemo: StoryFn< ) SingleCollapsibleKaizenSiteDemo.storyName = "Collapsible" SingleCollapsibleKaizenSiteDemo.args = { - id: "collapsible-single", open: true, title: "Single Collapsible", } @@ -139,7 +132,7 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ - + {lipsum} diff --git a/draft-packages/collapsible/package.json b/draft-packages/collapsible/package.json index 5f017a7..3e3dad3 100644 --- a/draft-packages/collapsible/package.json +++ b/draft-packages/collapsible/package.json @@ -1,10 +1,10 @@ { "name": "@kaizen/draft-collapsible", - "version": "3.5.39", + "version": "3.5.40", "description": "The draft Collapsible component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { @@ -31,7 +31,8 @@ "@kaizen/component-library": "^16.9.3", "@kaizen/typography": "^2.3.11", "classnames": "^2.3.2", - "react-animate-height": "^3.2.2" + "react-animate-height": "^3.2.2", + "uuid": "^9.0.0" }, "peerDependencies": { "@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0", diff --git a/draft-packages/divider/package.json b/draft-packages/divider/package.json index 4f721fb..789fd87 100644 --- a/draft-packages/divider/package.json +++ b/draft-packages/divider/package.json @@ -3,8 +3,8 @@ "version": "2.2.11", "description": "The draft divider component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/empty-state/package.json b/draft-packages/empty-state/package.json index 352504a..346f05c 100644 --- a/draft-packages/empty-state/package.json +++ b/draft-packages/empty-state/package.json @@ -3,8 +3,8 @@ "version": "5.3.41", "description": "The draft Empty state component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/filter-menu-button/package.json b/draft-packages/filter-menu-button/package.json index 189aaae..b235d32 100644 --- a/draft-packages/filter-menu-button/package.json +++ b/draft-packages/filter-menu-button/package.json @@ -3,8 +3,8 @@ "version": "2.6.50", "description": "The draft filter-menu-button component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/form/CHANGELOG.md b/draft-packages/form/CHANGELOG.md index fb2551d..e990365 100644 --- a/draft-packages/form/CHANGELOG.md +++ b/draft-packages/form/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 10.4.9 + +### Patch Changes + +- [#3945](https://github.com/cultureamp/kaizen-design-system/pull/3945) [`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db) - Make id props optional, using uuid to generate one if not supplied + ## 10.4.8 ### Patch Changes diff --git a/draft-packages/form/KaizenDraft/Form/CheckboxField/CheckboxField.tsx b/draft-packages/form/KaizenDraft/Form/CheckboxField/CheckboxField.tsx index 8b7eb4a..dbd28d3 100644 --- a/draft-packages/form/KaizenDraft/Form/CheckboxField/CheckboxField.tsx +++ b/draft-packages/form/KaizenDraft/Form/CheckboxField/CheckboxField.tsx @@ -1,9 +1,10 @@ -import React from "react" +import React, { useState } from "react" import classnames from "classnames" +import { v4 } from "uuid" import { Checkbox, CheckboxProps, CheckedStatus, Label } from "../Primitives" import styles from "./CheckboxField.module.scss" -export interface CheckboxFieldProps extends CheckboxProps { +export interface CheckboxFieldProps extends Omit { id?: string labelText: string | React.ReactNode checkedStatus?: CheckedStatus @@ -22,7 +23,7 @@ export interface CheckboxFieldProps extends CheckboxProps { * {@link https://cultureamp.design/storybook/?path=/docs/components-form-checkbox-field--interactive-kaizen-site-demo Storybook} */ export const CheckboxField = ({ - id = "", + id: propsId, labelText, checkedStatus, disabled = false, @@ -31,37 +32,40 @@ export const CheckboxField = ({ automationId, classNameOverride, ...restProps -}: CheckboxFieldProps): JSX.Element => ( -
- +
+ ) +} CheckboxField.displayName = "CheckboxField" diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.tsx index f1c7ddc..c6092fe 100644 --- a/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.tsx +++ b/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.tsx @@ -32,7 +32,6 @@ const renderSelected = ( } export const Radio = ({ - id, name, value, selectedStatus = false, @@ -47,7 +46,6 @@ export const Radio = ({ data-automation-id={automationId} data-testid={automationId} type="radio" - id={id} name={name} value={value} checked={selectedStatus} diff --git a/draft-packages/form/KaizenDraft/Form/RadioField/RadioField.tsx b/draft-packages/form/KaizenDraft/Form/RadioField/RadioField.tsx index 9e485ec..5ae03dc 100644 --- a/draft-packages/form/KaizenDraft/Form/RadioField/RadioField.tsx +++ b/draft-packages/form/KaizenDraft/Form/RadioField/RadioField.tsx @@ -1,10 +1,11 @@ -import React from "react" +import React, { useState } from "react" import classnames from "classnames" +import { v4 } from "uuid" import { Label, Radio, RadioProps } from "../Primitives" import styles from "./RadioField.module.scss" -export interface RadioFieldProps extends RadioProps { - id: string +export interface RadioFieldProps extends Omit { + id?: string labelText: string | React.ReactNode selectedStatus?: boolean inline?: boolean @@ -22,7 +23,7 @@ export interface RadioFieldProps extends RadioProps { * {@link https://cultureamp.design/storybook/?path=/docs/components-form-radio-field--interactive-kaizen-site-demo Storybook} */ export const RadioField = ({ - id, + id: propsId, labelText, selectedStatus = false, inline = false, @@ -31,36 +32,39 @@ export const RadioField = ({ automationId, classNameOverride, ...restProps -}: RadioFieldProps): JSX.Element => ( -
- +
+ ) +} RadioField.displayName = "RadioField" diff --git a/draft-packages/form/KaizenDraft/Form/SearchField/SearchField.tsx b/draft-packages/form/KaizenDraft/Form/SearchField/SearchField.tsx index 6623d77..b04a7ef 100644 --- a/draft-packages/form/KaizenDraft/Form/SearchField/SearchField.tsx +++ b/draft-packages/form/KaizenDraft/Form/SearchField/SearchField.tsx @@ -1,9 +1,10 @@ -import React from "react" +import React, { useState } from "react" +import { v4 } from "uuid" import { InputSearch, InputSearchProps, Label } from "../Primitives" import styles from "./SearchField.module.scss" -export interface SearchFieldProps extends InputSearchProps { - id: string +export interface SearchFieldProps extends Omit { + id?: string labelText: string disabled?: boolean reversed?: boolean @@ -15,7 +16,7 @@ export interface SearchFieldProps extends InputSearchProps { * {@link https://cultureamp.design/storybook/?path=/docs/components-form-search-field--default-kaizen-demo Storybook} */ export const SearchField = ({ - id, + id: propsId, labelText, disabled, reversed = false, @@ -24,6 +25,7 @@ export const SearchField = ({ ...restProps }: SearchFieldProps): JSX.Element => { const showVisibleLabel = !secondary + const [id] = useState(propsId || v4()) return (
diff --git a/draft-packages/form/KaizenDraft/Form/Slider/Slider.tsx b/draft-packages/form/KaizenDraft/Form/Slider/Slider.tsx index 35d4b5c..2e40463 100644 --- a/draft-packages/form/KaizenDraft/Form/Slider/Slider.tsx +++ b/draft-packages/form/KaizenDraft/Form/Slider/Slider.tsx @@ -1,12 +1,13 @@ -import React, { ReactNode } from "react" +import React, { ReactNode, useState } from "react" import classnames from "classnames" +import { v4 } from "uuid" import { Box } from "@kaizen/component-library" import { Paragraph } from "@kaizen/typography" import { FieldGroup, Label, InputRange, InputRangeProps } from "../Primitives" import styles from "./Slider.module.scss" -export interface SliderFieldProps extends InputRangeProps { - id: string +export interface SliderFieldProps extends Omit { + id?: string labelText: ReactNode description?: ReactNode labelPosition?: "inline" | "block" @@ -21,7 +22,7 @@ export interface SliderFieldProps extends InputRangeProps { */ export const Slider = (props: SliderFieldProps): JSX.Element => { const { - id, + id: propsId, labelText, description, labelPosition = "inline", @@ -30,6 +31,7 @@ export const Slider = (props: SliderFieldProps): JSX.Element => { readOnlyMessage, ...restProps } = props + const [id] = useState(propsId || v4()) const descriptionId = `${id}-description` return ( diff --git a/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx b/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx index 791810a..5392c83 100644 --- a/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx +++ b/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx @@ -1,5 +1,6 @@ -import React from "react" +import React, { useState } from "react" import classnames from "classnames" +import { v4 } from "uuid" import { Icon } from "@kaizen/component-library/components/Icon" import successIcon from "@kaizen/component-library/icons/success.icon.svg" import { @@ -19,7 +20,6 @@ type OmittedInputProps = | "automationId" export interface TextFieldProps extends Omit { - id: string /** * A short example of input text. For context or additional information use the `description` prop */ @@ -41,7 +41,7 @@ export interface TextFieldProps extends Omit { * {@link https://cultureamp.design/storybook/?path=/docs/components-form-text-field--default-story Storybook} */ export const TextField = ({ - id, + id: propsId, labelText, inline = false, icon, @@ -52,6 +52,7 @@ export const TextField = ({ disabled, ...restProps }: TextFieldProps): JSX.Element => { + const [id] = useState(propsId || v4()) const validationMessageAria = validationMessage ? `${id}-field-validation-message` : "" diff --git a/draft-packages/form/KaizenDraft/Form/ToggleSwitchField/ToggleSwitchField.tsx b/draft-packages/form/KaizenDraft/Form/ToggleSwitchField/ToggleSwitchField.tsx index 459f34f..def2b05 100644 --- a/draft-packages/form/KaizenDraft/Form/ToggleSwitchField/ToggleSwitchField.tsx +++ b/draft-packages/form/KaizenDraft/Form/ToggleSwitchField/ToggleSwitchField.tsx @@ -1,5 +1,6 @@ -import React from "react" +import React, { useState } from "react" import classnames from "classnames" +import { v4 } from "uuid" import { FieldGroup, Label, @@ -10,7 +11,6 @@ import { import styles from "./ToggleSwitchField.module.scss" export interface ToggleSwitchFieldProps extends ToggleSwitchProps { - id?: string labelText: string | React.ReactNode labelPosition?: "start" | "end" toggledStatus?: ToggledStatus @@ -25,7 +25,7 @@ export interface ToggleSwitchFieldProps extends ToggleSwitchProps { * {@link https://cultureamp.design/storybook/?path=/docs/components-form-toggle-switch-field--default Storybook} */ export const ToggleSwitchField = ({ - id = "", + id: propsId, labelText, labelPosition = "start", toggledStatus, @@ -34,39 +34,42 @@ export const ToggleSwitchField = ({ inline, fullWidth, ...restProps -}: ToggleSwitchFieldProps): JSX.Element => ( - -
- +
+ + ) +} ToggleSwitchField.displayName = "ToggleSwitchField" diff --git a/draft-packages/form/docs/CheckboxField.stories.tsx b/draft-packages/form/docs/CheckboxField.stories.tsx index b3706a2..4f9a432 100644 --- a/draft-packages/form/docs/CheckboxField.stories.tsx +++ b/draft-packages/form/docs/CheckboxField.stories.tsx @@ -34,7 +34,6 @@ export const InteractiveKaizenSiteDemo: StoryFn< {...args} onCheck={onCheckHandler} checkedStatus={status} - id="checkbox-1" labelText="label" /> ) @@ -49,13 +48,11 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ = ({ = ({ = ({
( @@ -56,7 +56,6 @@ export const InteractiveKaizenSiteDemo: StoryFn< render={({ checkedStatus, onCheckHandler }): JSX.Element => ( @@ -66,7 +65,6 @@ export const InteractiveKaizenSiteDemo: StoryFn< render={({ checkedStatus, onCheckHandler }): JSX.Element => ( @@ -116,25 +114,21 @@ export const NestedCheckboxGroup: StoryFn = () => {
onCheckHandler(e.currentTarget.value, 1)} /> onCheckHandler(e.currentTarget.value, 2)} /> onCheckHandler(e.currentTarget.value, 3)} @@ -153,13 +147,11 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ = ({ = ({ = ({ = ({ = ({ = ({
- + -
diff --git a/draft-packages/form/docs/RadioField.stories.tsx b/draft-packages/form/docs/RadioField.stories.tsx index 3ca77e2..8aadb72 100644 --- a/draft-packages/form/docs/RadioField.stories.tsx +++ b/draft-packages/form/docs/RadioField.stories.tsx @@ -30,7 +30,6 @@ export const InteractiveKaizenSiteDemo: StoryFn = args => { {...args} onChange={onCheckHandler} selectedStatus={status} - id="checkbox-1" labelText="label" /> ) @@ -46,7 +45,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ = ({ > = ({ ( ( ( = ({ @@ -116,7 +111,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ = ({ = ({ = ({
- + -
diff --git a/draft-packages/form/docs/SearchField.stories.tsx b/draft-packages/form/docs/SearchField.stories.tsx index 2547879..2681889 100644 --- a/draft-packages/form/docs/SearchField.stories.tsx +++ b/draft-packages/form/docs/SearchField.stories.tsx @@ -30,7 +30,6 @@ export const DefaultKaizenDemo: StoryFn = args => { } DefaultKaizenDemo.storyName = "Default (Kaizen Demo)" DefaultKaizenDemo.args = { - id: "search-field", placeholder: "Search…", labelText: "Label", } @@ -66,23 +65,9 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ - - - + + + @@ -92,20 +77,17 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ = args => ( ) DefaultKaizenSiteDemo.storyName = "Slider" DefaultKaizenSiteDemo.args = { - id: "make-me-unique-1", labelText: "Work overall", minLabel: "Awful", maxLabel: "Fantastic", @@ -42,7 +41,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ = ({ = ({ = ({ = args => ( ) DefaultStory.args = { - id: "reply", labelText: "Your reply", autogrow: false, inline: false, @@ -52,29 +51,18 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ - - + + = ({ = ({ /> = ({ = ({ = args => ( ) DefaultStory.args = { - id: "kaizen-demo-text-field", labelText: "Label Text", type: "text", defaultInputValue: "test", @@ -61,29 +60,24 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ }) => { const DEFAULT__ROW_PROPS: TextFieldProps[] = [ { - id: "text-field--default", labelText: "Default", }, { - id: "text-field--description", labelText: "Description", description: "Description text", }, { - id: "text-field--placeholder", labelText: "Placeholder", description: "Description text", placeholder: "Enter some text here", }, { - id: "text-field--placeholder", type: "email", labelText: "Email", description: "Description text", placeholder: "jane.doe@email.com", }, { - id: "text-field--placeholder", type: "password", labelText: "Password", description: "Description text", @@ -91,7 +85,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ placeholder: "Enter a password...", }, { - id: "text-field--positive", type: "email", labelText: "Positive", status: "success", @@ -99,7 +92,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ description: "Description text", }, { - id: "text-field--negative", type: "email", labelText: "Negative", status: "error", @@ -108,7 +100,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ validationMessage: Error message, }, { - id: "text-field--cautionary", type: "email", labelText: "Cautionary", status: "caution", @@ -120,14 +111,12 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ const ICON__ROW_PROPS: TextFieldProps[] = [ { - id: "text-field--icon--default", type: "email", labelText: "Default", defaultInputValue: "Input Text", description: "Description text", }, { - id: "text-field--icon--positive", type: "email", labelText: "Positive", status: "success", @@ -135,7 +124,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ description: "Description text", }, { - id: "text-field--icon--negative", type: "email", labelText: "Negative", status: "error", @@ -144,7 +132,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ validationMessage: Error message, }, { - id: "text-field--icon--cautionary", type: "email", labelText: "Cautionary", status: "caution", @@ -164,17 +151,8 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ {DEFAULT__ROW_PROPS.map(({ id, ...restProps }) => ( - - + + ))} @@ -188,15 +166,9 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ {ICON__ROW_PROPS.map(({ id, ...restProps }) => ( + - = ({ {({ toggledStatus, toggle }): JSX.Element => ( = ({ {({ toggledStatus, toggle }): JSX.Element => ( = ({ {({ toggledStatus, toggle }): JSX.Element => ( ", () => { }) } }) - - describe("Accessibility", () => { - // simple check for roles - for (const [role] of Object.entries(AriaRoles)) { - it(`contains ARIA compliant table role ${role}`, () => { - const { queryByRole } = render() - - expect(queryByRole(role)).toBeTruthy() - }) - } - }) }) diff --git a/draft-packages/table/KaizenDraft/Table/Table.tsx b/draft-packages/table/KaizenDraft/Table/Table.tsx index 58bc570..2239699 100644 --- a/draft-packages/table/KaizenDraft/Table/Table.tsx +++ b/draft-packages/table/KaizenDraft/Table/Table.tsx @@ -68,11 +68,17 @@ export type TableHeaderRowProps = { children?: React.ReactNode } +/** + * **Deprecated:** Please replace any usages of this with TableRow + * This was incorrectly implementing role="rowheader" when this should just be role="row" + * It's now an exact replica of TableRow + * @deprecated + */ export const TableHeaderRow = ({ children, ...otherProps }: TableHeaderRowProps): JSX.Element => ( -
+
{children}
) diff --git a/draft-packages/table/package.json b/draft-packages/table/package.json index 9d47aff..75614e1 100644 --- a/draft-packages/table/package.json +++ b/draft-packages/table/package.json @@ -1,10 +1,10 @@ { "name": "@kaizen/draft-table", - "version": "5.9.3", + "version": "5.9.4", "description": "The draft Table component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { @@ -27,7 +27,7 @@ "dependencies": { "@kaizen/component-base": "^1.1.7", "@kaizen/component-library": "^16.9.3", - "@kaizen/draft-form": "^10.4.8", + "@kaizen/draft-form": "^10.4.9", "@kaizen/draft-tooltip": "^5.4.47", "@kaizen/typography": "^2.3.11", "classnames": "^2.3.2" diff --git a/draft-packages/tabs/package.json b/draft-packages/tabs/package.json index 15ba861..3b56560 100644 --- a/draft-packages/tabs/package.json +++ b/draft-packages/tabs/package.json @@ -3,8 +3,8 @@ "version": "5.2.43", "description": "The draft Tabs component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/tag/package.json b/draft-packages/tag/package.json index feea3bd..1089699 100644 --- a/draft-packages/tag/package.json +++ b/draft-packages/tag/package.json @@ -3,8 +3,8 @@ "version": "3.5.0", "description": "The draft Tag component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/tile/package.json b/draft-packages/tile/package.json index 9574ff0..169a36f 100644 --- a/draft-packages/tile/package.json +++ b/draft-packages/tile/package.json @@ -3,8 +3,8 @@ "version": "5.10.7", "description": "The draft tile component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/title-block-zen/package.json b/draft-packages/title-block-zen/package.json index 85e710d..fb78079 100644 --- a/draft-packages/title-block-zen/package.json +++ b/draft-packages/title-block-zen/package.json @@ -3,8 +3,8 @@ "version": "7.10.12", "description": "The draft Title Block (Zen) component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/tooltip/package.json b/draft-packages/tooltip/package.json index 3556dc0..f2fdb5d 100644 --- a/draft-packages/tooltip/package.json +++ b/draft-packages/tooltip/package.json @@ -3,8 +3,8 @@ "version": "5.4.47", "description": "The draft Tooltip component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/draft-packages/well/package.json b/draft-packages/well/package.json index 03c5f61..1082b9f 100644 --- a/draft-packages/well/package.json +++ b/draft-packages/well/package.json @@ -3,8 +3,8 @@ "version": "4.3.7", "description": "The draft well component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/package.json b/package.json index 4ff3325..0d4a578 100644 --- a/package.json +++ b/package.json @@ -35,16 +35,16 @@ "ci:publish": "yarn turbo build && yarn changeset publish" }, "dependencies": { - "@kaizen/components": "^1.20.4", - "@kaizen/design-tokens": "^10.0.11", - "@kaizen/tailwind": "^1.0.5", - "@storybook/addons": "^7.1.0", - "@storybook/api": "^7.1.0", - "@storybook/blocks": "^7.1.0", - "@storybook/components": "^7.1.0", - "@storybook/core-events": "^7.1.0", - "@storybook/react": "^7.1.0", - "@storybook/theming": "^7.1.0", + "@kaizen/components": "^1.21.0", + "@kaizen/design-tokens": "^10.3.11", + "@kaizen/tailwind": "1.0.5", + "@storybook/addons": "^7.2.1", + "@storybook/api": "^7.2.1", + "@storybook/blocks": "^7.2.1", + "@storybook/components": "^7.2.1", + "@storybook/core-events": "^7.2.1", + "@storybook/react": "^7.2.1", + "@storybook/theming": "^7.2.1", "classnames": "^2.3.2", "identity-obj-proxy": "^3.0.0", "lodash.isempty": "^4.4.0", @@ -60,27 +60,27 @@ "uuid": "^9.0.0" }, "devDependencies": { - "@babel/core": "^7.22.9", + "@babel/core": "^7.22.10", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-numeric-separator": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/preset-env": "^7.22.9", + "@babel/preset-env": "^7.22.10", "@babel/preset-react": "^7.22.5", "@babel/preset-typescript": "^7.22.5", "@changesets/cli": "^2.26.2", "@cultureamp/changelog-github": "^0.1.0", - "@storybook/addon-a11y": "^7.1.0", - "@storybook/addon-essentials": "^7.1.0", - "@storybook/addon-interactions": "^7.1.0", - "@storybook/addon-links": "^7.1.0", + "@storybook/addon-a11y": "^7.2.1", + "@storybook/addon-essentials": "^7.2.1", + "@storybook/addon-interactions": "^7.2.1", + "@storybook/addon-links": "^7.2.1", "@storybook/jest": "^0.1.0", - "@storybook/node-logger": "^7.1.0", - "@storybook/react-webpack5": "^7.1.0", - "@storybook/test-runner": "^0.11.0", + "@storybook/node-logger": "^7.2.1", + "@storybook/react-webpack5": "^7.2.1", + "@storybook/test-runner": "^0.13.0", "@storybook/testing-library": "^0.2.0", - "@tanstack/react-query": "^4.32.0", + "@tanstack/react-query": "^4.32.6", "@testing-library/dom": "^9.3.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.0.0", @@ -92,29 +92,28 @@ "@types/node": "^18.11.18", "@types/postcss-flexbugs-fixes": "^5.0.0", "@types/postcss-import": "^14.0.0", - "@types/react": "^18.2.15", + "@types/react": "^18.2.17", "@types/react-dom": "^18.2.7", - "@types/react-highlight": "^0.12.5", - "@typescript-eslint/eslint-plugin": "^6.0.0", - "@typescript-eslint/parser": "^6.0.0", + "@typescript-eslint/eslint-plugin": "^6.2.1", + "@typescript-eslint/parser": "^6.2.1", "babel-loader": "^9.1.3", "chromatic": "^6.20.0", "css-loader": "^6.8.1", - "eslint": "^8.45.0", - "eslint-config-prettier": "^8.8.0", + "eslint": "^8.46.0", + "eslint-config-prettier": "^9.0.0", "eslint-import-resolver-typescript": "^3.5.5", - "eslint-plugin-import": "^2.27.5", + "eslint-plugin-import": "^2.28.0", "eslint-plugin-jest": "^27.2.3", "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react": "^7.33.1", "eslint-plugin-sort-imports-es6-autofix": "^0.6.0", "eslint-plugin-ssr-friendly": "^1.2.0", "eslint-plugin-storybook": "^0.6.13", - "jest": "^29.6.1", + "jest": "^29.6.2", "jest-canvas-mock": "^2.5.2", - "jest-environment-jsdom": "^29.6.1", + "jest-environment-jsdom": "^29.6.2", "jest-static-stubs": "^0.0.1", - "node-fetch": "^3.3.1", + "node-fetch": "^3.3.2", "node-sass": "^8.0.0", "postcss": "^8.4.23", "postcss-cli": "^10.1.0", @@ -123,14 +122,14 @@ "postcss-loader": "^7.3.3", "postcss-preset-env": "^9.0.0", "postcss-scss": "^4.0.6", - "prettier": "^3.0.0", + "prettier": "^3.0.1", "raw-loader": "^4.0.2", "react-highlight": "^0.15.0", "react-test-renderer": "^18.2.0", "react-test-renderer-17": "npm:react-test-renderer@^17.0.2", "rimraf": "^5.0.1", "sass-loader": "^13.3.2", - "storybook": "^7.1.0", + "storybook": "^7.2.1", "style-loader": "^3.3.3", "stylelint": "^15.6.1", "stylelint-config-standard-scss": "^10.0.0", @@ -143,7 +142,7 @@ "webpack": "^5.88.2" }, "resolutions": { - "@types/react": "^18.2.15" + "@types/react": "^18.2.17" }, "resolutionsComments": { "@types/react": "@testing-library/react-12 has an incorrect dep (instead of peerDep) of @types/react@^17 which we don't want" diff --git a/packages/a11y/package.json b/packages/a11y/package.json index 6108213..f96d6b9 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -3,8 +3,8 @@ "version": "1.7.12", "description": "A collection of accessibility utils", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/brand-moment/package.json b/packages/brand-moment/package.json index 14c4c3f..437d731 100644 --- a/packages/brand-moment/package.json +++ b/packages/brand-moment/package.json @@ -3,8 +3,8 @@ "version": "1.13.8", "description": "The brand moment component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/brand/package.json b/packages/brand/package.json index 6981876..5050ac1 100644 --- a/packages/brand/package.json +++ b/packages/brand/package.json @@ -3,8 +3,8 @@ "version": "1.5.8", "description": "The brand component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/button/package.json b/packages/button/package.json index 24f631a..cfb463b 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -3,8 +3,8 @@ "version": "3.0.4", "description": "The Button component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/component-base/package.json b/packages/component-base/package.json index c03c1ee..a11ab17 100644 --- a/packages/component-base/package.json +++ b/packages/component-base/package.json @@ -3,8 +3,8 @@ "version": "1.1.7", "description": "Base setup and shared helpers for components", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/component-library/package.json b/packages/component-library/package.json index 627559a..cd3b245 100644 --- a/packages/component-library/package.json +++ b/packages/component-library/package.json @@ -37,8 +37,8 @@ "classnames": "^2.3.2" }, "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "test-scss-compile": "webpack build --config ./styles/__test/webpack.config.js", "clean": "rimraf -g '**/*.js.map' 'index.js*' 'index.d.ts' 'components/**/*.js' 'components/**/*.js.map' 'components/**/*.d.ts' 'util/**/*.js' 'util/**/*.js.map' 'util/**/*.d.ts'" }, diff --git a/packages/date-picker/CHANGELOG.md b/packages/date-picker/CHANGELOG.md index a2f0b05..0c4a167 100644 --- a/packages/date-picker/CHANGELOG.md +++ b/packages/date-picker/CHANGELOG.md @@ -1,5 +1,22 @@ # Change Log +## 6.2.5 + +### Patch Changes + +- [#3823](https://github.com/cultureamp/kaizen-design-system/pull/3823) [`f924fdeed`](https://github.com/cultureamp/kaizen-design-system/commit/f924fdeed3a83c46cb64ac880cbcc72b5bc6b5e8) - Update TimeField react-aria deps + +- [#3831](https://github.com/cultureamp/kaizen-design-system/pull/3831) [`5ad6c577c`](https://github.com/cultureamp/kaizen-design-system/commit/5ad6c577c7f2826ea7e285b0b8d1629643ce7b16) - Update `react-aria` dependencies. + +## 6.2.4 + +### Patch Changes + +- [#3945](https://github.com/cultureamp/kaizen-design-system/pull/3945) [`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db) - Make id props optional, using uuid to generate one if not supplied + +- Updated dependencies [[`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db)]: + - @kaizen/draft-form@10.4.9 + ## 6.2.3 ### Patch Changes diff --git a/packages/date-picker/docs/DatePicker.stories.tsx b/packages/date-picker/docs/DatePicker.stories.tsx index b88414f..2353484 100644 --- a/packages/date-picker/docs/DatePicker.stories.tsx +++ b/packages/date-picker/docs/DatePicker.stories.tsx @@ -90,7 +90,6 @@ DefaultStory.parameters = { docs: { source: { type: "code" } }, } DefaultStory.args = { - id: "datepicker-default", labelText: "Label", locale: "en-AU", onValidate: undefined, @@ -137,7 +136,6 @@ export const ValidationStory: StoryFn = () => { <>
= ({ = ({ locale="en-AU" /> undefined} @@ -242,7 +238,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ locale="en-AU" /> undefined} @@ -261,7 +256,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ locale="en-AU" /> undefined} @@ -270,7 +264,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ disabled /> undefined} @@ -286,7 +279,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ undefined} @@ -294,7 +286,6 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ locale="en-AU" /> undefined} diff --git a/packages/date-picker/docs/DateRangePicker.stories.tsx b/packages/date-picker/docs/DateRangePicker.stories.tsx index 51e4393..8abe48b 100644 --- a/packages/date-picker/docs/DateRangePicker.stories.tsx +++ b/packages/date-picker/docs/DateRangePicker.stories.tsx @@ -49,7 +49,6 @@ const DateRangePickerTemplate = ( return ( <> { return ( undefined} weekStartsOn={0} defaultMonth={new Date(2022, 2)} diff --git a/packages/date-picker/docs/TimeField.stories.tsx b/packages/date-picker/docs/TimeField.stories.tsx index 5d35aba..7ba6668 100644 --- a/packages/date-picker/docs/TimeField.stories.tsx +++ b/packages/date-picker/docs/TimeField.stories.tsx @@ -31,7 +31,6 @@ export const DefaultStory: StoryFn = args => { } DefaultStory.storyName = "TimeField" DefaultStory.args = { - id: "time-field-input", label: "Launch time", locale: "en-US", isDisabled: false, @@ -53,14 +52,12 @@ const StickerSheetTemplate: StoryFn = () => { { isDisabled /> { { classNameOverride="story__timefield-hover" /> { { - id: string + id?: string buttonRef?: RefObject onInputClick?: DateInputFieldProps["onClick"] onInputFocus?: DateInputFieldProps["onFocus"] @@ -85,7 +87,7 @@ export interface DatePickerProps * {@link https://cultureamp.design/storybook/?path=/docs/components-date-picker-date-picker--default-story Storybook} */ export const DatePicker = ({ - id, + id: propsId, buttonRef: propsButtonRef = useRef(null), locale: propsLocale, disabledDates, @@ -108,6 +110,7 @@ export const DatePicker = ({ onValidate, ...restDateInputFieldProps }: DatePickerProps): JSX.Element => { + const [id] = useState(propsId || v4()) const containerRef = useRef(null) const inputRef = useRef(null) const buttonRef = useRef(propsButtonRef?.current || null) diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx index 25ce195..46abd82 100644 --- a/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/date-picker/src/DateRangePicker/DateRangePicker.tsx @@ -3,6 +3,7 @@ import cx from "classnames" import { enUS } from "date-fns/locale" import { DateRange, isMatch } from "react-day-picker" import { FocusOn } from "react-focus-on" +import { v4 } from "uuid" import { Label } from "@kaizen/draft-form" import { LegacyCalendarRange, @@ -16,7 +17,7 @@ import { isDisabledDate } from "../utils/isDisabledDate" import dateRangePickerStyles from "./DateRangePicker.module.scss" export interface DateRangePickerProps extends DisabledDayMatchers { - id: string + id?: string classNameOverride?: string labelText: string isDisabled?: boolean @@ -53,7 +54,7 @@ export interface DateRangePickerProps extends DisabledDayMatchers { * {@link https://cultureamp.design/storybook/?path=/docs/components-date-picker-date-range-picker--date-range-picker-sticker-sheet Storybook} */ export const DateRangePicker = ({ - id, + id: propsId, buttonRef = useRef(null), description: _description, // not used labelText, @@ -72,6 +73,7 @@ export const DateRangePicker = ({ onChange, ...inputProps }: DateRangePickerProps): JSX.Element => { + const [id] = useState(propsId || v4()) const containerRef = useRef(null) const [isOpen, setIsOpen] = useState(false) @@ -179,7 +181,6 @@ export const DateRangePicker = ({ > { it("changes hour on key press", async () => { render() const hourSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} hour`, + name: `hour, ${LABEL}`, }) await pressArrowUpKey(hourSpinner) await waitFor(() => { @@ -86,7 +86,7 @@ describe("spin button functionality", () => { it("changes minutes on key press", async () => { render() const minuteSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} minute`, + name: `minute, ${LABEL}`, }) await pressArrowUpKey(minuteSpinner) await pressArrowUpKey(minuteSpinner) @@ -109,10 +109,10 @@ describe("spin button functionality", () => { // tests whether changing minute changes hour render() const hourSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} hour`, + name: `hour, ${LABEL}`, }) const minuteSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} minute`, + name: `minute, ${LABEL}`, }) await pressArrowUpKey(hourSpinner) await pressArrowDownKey(minuteSpinner) @@ -125,10 +125,10 @@ describe("spin button functionality", () => { it("allows uers to backspace to remove values", async () => { render() const hourSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} hour`, + name: `hour, ${LABEL}`, }) const minuteSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} minute`, + name: `minute, ${LABEL}`, }) await user.click(minuteSpinner) await user.keyboard("{Backspace}") @@ -151,7 +151,7 @@ describe("onChange", () => { /> ) const hourSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} hour`, + name: `hour, ${LABEL}`, }) expect(hourSpinner).toHaveTextContent("4") @@ -170,7 +170,7 @@ describe("onChange", () => { /> ) const hourSpinner = screen.getByRole("spinbutton", { - name: `${LABEL} hour`, + name: `hour, ${LABEL}`, }) expect(hourSpinner).toHaveTextContent("16") diff --git a/packages/date-picker/src/TimeField/TimeField.tsx b/packages/date-picker/src/TimeField/TimeField.tsx index 4a60bdc..4658356 100644 --- a/packages/date-picker/src/TimeField/TimeField.tsx +++ b/packages/date-picker/src/TimeField/TimeField.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useState } from "react" import { Time } from "@internationalized/date" import { useTimeField } from "@react-aria/datepicker" import { I18nProvider } from "@react-aria/i18n" @@ -7,6 +7,7 @@ import { TimeFieldStateOptions, } from "@react-stately/datepicker" import classnames from "classnames" +import { v4 } from "uuid" import { OverrideClassName } from "@kaizen/component-base" import { FieldMessage } from "@kaizen/draft-form" import { Heading } from "@kaizen/typography" @@ -26,7 +27,7 @@ export interface TimeFieldProps extends OverrideClassName< Omit > { - id: string + id?: string /** * Field label. */ @@ -52,7 +53,7 @@ export const TimeField = (props: TimeFieldProps): JSX.Element => ( TimeField.displayName = "TimeField" const TimeFieldComponent = ({ - id, + id: propsId, label, locale, onChange, @@ -63,6 +64,8 @@ const TimeFieldComponent = ({ classNameOverride, ...restProps }: TimeFieldProps): JSX.Element => { + const [id] = useState(propsId || v4()) + const handleOnChange = (timeValue: TimeValue | null): void => { if (timeValue === null) { return onChange(null) diff --git a/packages/date-picker/src/_subcomponents/Calendar/LegacyCalendarRange.tsx b/packages/date-picker/src/_subcomponents/Calendar/LegacyCalendarRange.tsx index 8797856..207e75a 100644 --- a/packages/date-picker/src/_subcomponents/Calendar/LegacyCalendarRange.tsx +++ b/packages/date-picker/src/_subcomponents/Calendar/LegacyCalendarRange.tsx @@ -14,7 +14,6 @@ import { isValidWeekStartsOn } from "./utils/isValidWeekStartsOn" export type LegacyCalendarRangeElement = HTMLDivElement export type LegacyCalendarRangeProps = { - id: string classNameOverride?: string defaultMonth?: Date weekStartsOn?: DayOfWeek @@ -25,7 +24,6 @@ export type LegacyCalendarRangeProps = { } export const LegacyCalendarRange = ({ - id, classNameOverride, defaultMonth, weekStartsOn = DayOfWeek.Mon, @@ -39,7 +37,7 @@ export const LegacyCalendarRange = ({ monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow return ( -
+
", () => { - it("renders a basic notification correctly", () => { - const { container } = render( - - Something has gone wrong - - ) - - expect(container.querySelector(".cancel")).toBeTruthy() - expect(container.firstChild).toMatchSnapshot() - }) - - it("renders a persistent notifications", () => { - const { container } = render( - - Something has gone wrong - - ) - - expect(container.querySelector(".cancel")).toBeFalsy() - expect(container.firstChild).toMatchSnapshot() - }) - it("renders a notification with a custom heading level", () => { const customHeadingProps: HeadingProps = { variant: "heading-6", diff --git a/packages/notification/src/ToastNotificationManager.tsx b/packages/notification/src/ToastNotificationManager.tsx index d5e2cad..0440706 100644 --- a/packages/notification/src/ToastNotificationManager.tsx +++ b/packages/notification/src/ToastNotificationManager.tsx @@ -109,6 +109,7 @@ const createToastNotificationManager = (): ToastNotificationApi => { } if (portal) { + // eslint-disable-next-line react/no-deprecated ReactDOM.render( renders a basic notification correctly 1`] = ` - -`; - -exports[` renders a persistent notifications 1`] = ` - -`; diff --git a/packages/notification/src/_styles.scss b/packages/notification/src/_styles.scss index 1965dc6..aad7161 100644 --- a/packages/notification/src/_styles.scss +++ b/packages/notification/src/_styles.scss @@ -137,6 +137,10 @@ $notification-slide-right: transform 300ms ease-out; margin-bottom: 0; } + &%ca-notification---persistent { + transition: none; + } + // this is only for inline notifications &%ca-notification---subtle { background: none; diff --git a/packages/notification/src/components/GenericNotification.module.scss b/packages/notification/src/components/GenericNotification.module.scss index b65ecab..55d02db 100644 --- a/packages/notification/src/components/GenericNotification.module.scss +++ b/packages/notification/src/components/GenericNotification.module.scss @@ -114,6 +114,10 @@ @extend %ca-notification---forceMultiline; } +.persistent { + @extend %ca-notification---persistent; +} + // this is only for inline notifications, but is here due to specificity issues in the _styles.scss file .subtle { @extend %ca-notification---subtle; diff --git a/packages/notification/src/components/GenericNotification.tsx b/packages/notification/src/components/GenericNotification.tsx index 122d2dc..137ee44 100644 --- a/packages/notification/src/components/GenericNotification.tsx +++ b/packages/notification/src/components/GenericNotification.tsx @@ -138,7 +138,8 @@ class GenericNotification extends React.Component< styles[this.props.style], this.state.hidden && styles.hidden, this.props.noBottomMargin && styles.noBottomMargin, - this.props.classNameOverride + this.props.classNameOverride, + this.props.persistent && styles.persistent ) } diff --git a/packages/pagination/package.json b/packages/pagination/package.json index 5b68c92..02e3ff2 100644 --- a/packages/pagination/package.json +++ b/packages/pagination/package.json @@ -3,8 +3,8 @@ "version": "1.6.43", "description": "The pagination component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index 5a64dd9..2048cbd 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -3,8 +3,8 @@ "version": "2.3.33", "description": "The progress bar component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/responsive/package.json b/packages/responsive/package.json index b2045b0..2f20e91 100644 --- a/packages/responsive/package.json +++ b/packages/responsive/package.json @@ -3,8 +3,8 @@ "version": "1.8.10", "description": "A collection of helpers for responsive UIs", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/rich-text-editor/package.json b/packages/rich-text-editor/package.json index fd86f35..2f375c9 100644 --- a/packages/rich-text-editor/package.json +++ b/packages/rich-text-editor/package.json @@ -3,8 +3,8 @@ "version": "2.2.11", "description": "The RichTextEditor component", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { diff --git a/packages/select/CHANGELOG.md b/packages/select/CHANGELOG.md index 438c6fb..1a55eac 100644 --- a/packages/select/CHANGELOG.md +++ b/packages/select/CHANGELOG.md @@ -1,5 +1,20 @@ # Change Log +## 6.18.3 + +### Patch Changes + +- [#3831](https://github.com/cultureamp/kaizen-design-system/pull/3831) [`5ad6c577c`](https://github.com/cultureamp/kaizen-design-system/commit/5ad6c577c7f2826ea7e285b0b8d1629643ce7b16) - Update `react-aria` dependencies. + +## 6.18.2 + +### Patch Changes + +- [#3945](https://github.com/cultureamp/kaizen-design-system/pull/3945) [`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db) - Make id props optional, using uuid to generate one if not supplied + +- Updated dependencies [[`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db)]: + - @kaizen/draft-form@10.4.9 + ## 6.18.1 ### Patch Changes diff --git a/packages/select/docs/Select/Select.stories.tsx b/packages/select/docs/Select/Select.stories.tsx index 8d6052c..c6f7b27 100644 --- a/packages/select/docs/Select/Select.stories.tsx +++ b/packages/select/docs/Select/Select.stories.tsx @@ -33,7 +33,6 @@ export const DefaultStory: StoryFn = props => ( DefaultStory.storyName = "Select" DefaultStory.args = { label: "label", - id: "single-select", items: singleMockItems, isFullWidth: false, description: "This is a description", @@ -48,12 +47,7 @@ DefaultStory.parameters = { export const WithSections: StoryFn = () => ( <> -
Items: diff --git a/packages/select/package.json b/packages/select/package.json index 212b4d3..ce2e91a 100644 --- a/packages/select/package.json +++ b/packages/select/package.json @@ -1,10 +1,10 @@ { "name": "@kaizen/select", - "version": "6.18.1", + "version": "6.18.3", "description": "Select components", "scripts": { - "prepublish": "tsc --project tsconfig.dist.json", - "build": "yarn prepublish", + "prepublishOnly": "tsc --project tsconfig.dist.json", + "build": "yarn clean && yarn prepublishOnly", "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'" }, "repository": { @@ -31,24 +31,24 @@ "@kaizen/component-library": "^16.9.3", "@kaizen/draft-badge": "^1.13.12", "@kaizen/draft-divider": "^2.2.11", - "@kaizen/draft-form": "^10.4.8", + "@kaizen/draft-form": "^10.4.9", "@kaizen/draft-menu": "^5.0.2", "@kaizen/draft-tooltip": "^5.4.47", "@kaizen/loading-skeleton": "^2.0.7", "@kaizen/typography": "^2.3.11", - "@react-aria/button": "^3.8.0", - "@react-aria/focus": "^3.13.0", - "@react-aria/listbox": "^3.10.0", - "@react-aria/menu": "^3.10.0", - "@react-aria/overlays": "^3.15.0", - "@react-aria/select": "^3.10.1", - "@react-aria/utils": "^3.18.0", - "@react-stately/collections": "^3.9.0", - "@react-stately/list": "^3.9.0", - "@react-stately/menu": "^3.5.3", - "@react-stately/select": "^3.5.2", - "@react-types/button": "^3.7.3", - "@react-types/shared": "^3.18.1", + "@react-aria/button": "^3.8.1", + "@react-aria/focus": "^3.14.0", + "@react-aria/listbox": "^3.10.1", + "@react-aria/menu": "^3.10.1", + "@react-aria/overlays": "^3.16.0", + "@react-aria/select": "^3.12.0", + "@react-aria/utils": "^3.19.0", + "@react-stately/collections": "^3.10.0", + "@react-stately/list": "^3.9.1", + "@react-stately/menu": "^3.5.4", + "@react-stately/select": "^3.5.3", + "@react-types/button": "^3.7.4", + "@react-types/shared": "^3.19.0", "classnames": "^2.3.2", "uuid": "^9.0.0" }, diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx index f637f1c..6df72ce 100644 --- a/packages/select/src/Select/Select.spec.tsx +++ b/packages/select/src/Select/Select.spec.tsx @@ -31,22 +31,12 @@ const SelectWrapper = ({ ) } -describe("", () => { describe("Trigger", () => { - describe("Trigger - Visual content", () => { - it("shows the trigger with placeholder when no option is selected", () => { - render() - const trigger = screen.getByRole("combobox", { - name: "Mock Label Select", - }) - expect(trigger).toBeVisible() - }) - }) - it("makes sure the menu to be labelled by trigger", () => { render() const menu = screen.getByRole("combobox", { - name: "Mock Label SRE", + name: "SRE Mock Label", }) expect(menu).toHaveTextContent("SRE") }) @@ -82,7 +72,7 @@ describe("", () => { it("is opened when user clicks on the trigger", async () => { render() const trigger = screen.getByRole("combobox", { - name: "Mock Label SRE", + name: "SRE Mock Label", }) await user.click(trigger) await waitFor(() => { @@ -110,7 +100,7 @@ describe("", () => { it("allows the user to tab to the trigger", async () => { render() const trigger = screen.getByRole("combobox", { - name: "Mock Label SRE", + name: "SRE Mock Label", }) await user.tab() await waitFor(() => { @@ -156,7 +146,7 @@ describe("", () => { const spy = jest.fn() render() const trigger = screen.getByRole("combobox", { - name: "Mock Label Select", + name: "Select Mock Label", }) await user.tab() await waitFor(() => { @@ -346,7 +336,7 @@ describe("