@kaizen/components 1.35.1 → 1.35.2

package/package.json

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

package/src/Button/Button/_docs/Button.mdx

@@ -82,6 +82,11 @@ Alternatively use the `workingLabelHidden` prop to hide the button label all tog
 
 <Canvas of={ButtonStories.Working} />
 
+### Controlling the working state
+Here is an example of controlling whether the button is 'working' or not, using state.
+
+<Canvas of={ButtonStories.ResolveWorking} />
+
 ### Loading
 
 Use the <LinkTo pageId="components-loading-states-loadinginput">LoadingInput</LinkTo> component for button placeholders.

package/src/Button/Button/_docs/Button.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
 import { AddIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
@@ -142,3 +142,29 @@ export const NativeFormButton: Story = {
   ),
   parameters: { controls: { disable: true } },
 }
+
+export const ResolveWorking: Story = {
+  render: () => {
+    const [state, setState] = useState<"Ready" | "Working" | "Completed">(
+      "Ready"
+    )
+    const handleClick = (): void => {
+      if (state === "Ready") {
+        setState("Working")
+        setTimeout(() => setState("Completed"), 3000)
+      } else {
+        setState("Ready")
+      }
+    }
+
+    return (
+      <Button
+        label={state}
+        working={state === "Working"}
+        workingLabel="Button is doing some work"
+        workingLabelHidden
+        onClick={handleClick}
+      />
+    )
+  },
+}

package/src/Button/GenericButton/GenericButton.spec.tsx

@@ -111,3 +111,72 @@ describe("<GenericButton /> with native HTML `form` attributes", () => {
     ).toHaveAttribute("form", buttonFormAttributes.form)
   })
 })
+
+describe("<GenericButton /> `working` accessible states", () => {
+  it("renders a button without aria-live by default", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+      />
+    )
+
+    const button = getByTestId("id--generic-test")
+    // The id is passed to the element not the container so we have to get its parent
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).not.toHaveAttribute("aria-live", "")
+  })
+
+  it("renders a button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+
+  it("renders a link button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+        href="/"
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+
+  it("renders a custom button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+        component={props => (
+          <button type="button" {...props}>
+            Custom button
+          </button>
+        )}
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+})

package/src/Button/GenericButton/GenericButton.tsx

@@ -129,7 +129,7 @@ export const GenericButton = forwardRef(
           styles.container,
           props.fullWidth && styles.fullWidth
         )}
-        aria-live="polite"
+        aria-live={"workingLabel" in props ? "polite" : undefined}
       >
         {determineButtonRenderer()}
       </span>

package/src/MultiSelect/MultiSelect.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, waitFor, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { MultiSelect, MultiSelectProps } from "./MultiSelect"
 
@@ -331,3 +331,58 @@ describe("Removing all options", () => {
     })
   })
 })
+
+describe("Has validation status", () => {
+  it("renders a validation message", () => {
+    render(
+      <MultiSelectWrapper
+        selectedValues={new Set(["waffle"])}
+        validationMessage={{
+          status: "error",
+          message: "No waffles are available",
+        }}
+      />
+    )
+    expect(screen.getByText("No waffles are available")).toBeInTheDocument()
+  })
+  it("describes the Toggle", () => {
+    render(
+      <MultiSelectWrapper
+        selectedValues={new Set(["waffle"])}
+        label="Breakfast menu"
+        validationMessage={{
+          status: "caution",
+          message: "Only four waffles remain",
+        }}
+      />
+    )
+    expect(
+      screen.getByRole("button", {
+        name: "Breakfast menu",
+        description: "Only four waffles remain",
+      })
+    ).toBeInTheDocument()
+  })
+  it("announces the validation message before the Toggle's description", () => {
+    const description = "Choose you breakfast."
+    const validationMessage = "Only four waffles remain."
+
+    render(
+      <MultiSelectWrapper
+        selectedValues={new Set(["waffle"])}
+        label="Breakfast menu"
+        description={description}
+        validationMessage={{
+          status: "caution",
+          message: "Only four waffles remain.",
+        }}
+      />
+    )
+    expect(
+      screen.getByRole("button", {
+        name: "Breakfast menu",
+        description: `${validationMessage} ${description}`,
+      })
+    ).toBeInTheDocument()
+  })
+})

package/src/MultiSelect/MultiSelect.tsx

@@ -10,7 +10,7 @@ import {
 } from "./subcomponents/MultiSelectOptions"
 import { MultiSelectToggle } from "./subcomponents/MultiSelectToggle"
 import { Popover, useFloating } from "./subcomponents/Popover"
-import { MultiSelectOption } from "./types"
+import { MultiSelectOption, ValidationMessage } from "./types"
 import styles from "./MultiSelect.module.scss"
 
 export type MultiSelectProps = {
@@ -24,6 +24,8 @@ export type MultiSelectProps = {
   onSelectedValuesChange: MultiSelectOptionsProps["onChange"]
   isOpen: boolean
   onOpenChange: (isOpen: boolean) => void
+  /** A status and message to provide context to the validation issue  */
+  validationMessage?: ValidationMessage
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 export const MultiSelect = ({
@@ -36,10 +38,12 @@ export const MultiSelect = ({
   isOpen,
   onOpenChange,
   classNameOverride,
+  validationMessage,
   ...restProps
 }: MultiSelectProps): JSX.Element => {
   const id = propsId ?? useId()
   const descriptionId = `${id}-description`
+  const validationId = `${id}-validation-message`
 
   const toggleButtonRef = useRef<HTMLButtonElement>(null)
   const { refs } = useFloating()
@@ -88,20 +92,23 @@ export const MultiSelect = ({
           ref={toggleButtonRef}
           id={`${id}--toggle`}
           aria-labelledby={`${id}--label`}
-          aria-describedby={descriptionId}
+          aria-describedby={`${validationId} ${descriptionId}`}
           aria-controls={`${id}--popover`}
           onClick={handleToggleClick}
           isOpen={isOpen}
           selectedOptions={Array.from(selectedValues).map(
             value => itemsMap[value]
           )}
+          status={validationMessage?.status}
           onRemoveOption={handleOnRemoveOption}
           onRemoveAllOptions={handleRemoveAllOptions}
         />
       </div>
 
+      {validationMessage && (
+        <FieldMessage id={validationId} {...validationMessage} />
+      )}
       {description && <FieldMessage id={descriptionId} message={description} />}
-      {/* ValidationMessage */}
 
       {isOpen && (
         <Popover

package/src/MultiSelect/_docs/MultiSelect.mdx

@@ -64,3 +64,13 @@ The open state is controlled by the consumer through the `isOpen` and `onOpenCha
 You can add a description which will be linked to the trigger button with aria-describedby.
 
 <Canvas of={MultiSelectStories.Description} />
+
+### Validation
+
+Validation states are defined in the `validationMessage` object, containing a `status` and `message`.
+
+<Canvas of={MultiSelectStories.ValidationMessage} />
+
+A validation message will render below the MultiSelect and will be read to assistive technologies before the `description` content.
+
+<Canvas of={MultiSelectStories.ValidationMessageWithDescription} />

package/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx

@@ -51,49 +51,87 @@ const StickerSheetTemplate: StickerSheetStory = {
     >(new Set())
 
     return (
-      <StickerSheet
-        heading="MultiSelect"
-        className={classnames("w-full", IS_CHROMATIC && "pb-160")}
-      >
-        <StickerSheet.Header
-          headings={["Closed", "Open", "No items"]}
-          headingsWidth="30%"
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <MultiSelect
-              id="id--multi-select-options--closed"
-              label="Label"
-              description="A short description"
-              isOpen={isOpenClosed}
-              onOpenChange={setIsOpenClosed}
-              onSelectedValuesChange={setSelectedValuesClosed}
-              selectedValues={selectedValuesClosed}
-              items={options}
-            />
-            <MultiSelect
-              id="id--multi-select-options--open"
-              label="Label"
-              description="A short description"
-              isOpen={isOpenOpen}
-              onOpenChange={setIsOpenOpen}
-              onSelectedValuesChange={setSelectedValuesOpen}
-              selectedValues={selectedValuesOpen}
-              items={options}
-            />
-            <MultiSelect
-              id="id--multi-select-options--no-items"
-              label="Label"
-              description="A short description"
-              isOpen={isOpenNoItems}
-              onOpenChange={setIsOpenNoItems}
-              selectedValues={selectedValuesNoItems}
-              onSelectedValuesChange={setSelectedValuesNoItems}
-              items={[]}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
-      </StickerSheet>
+      <>
+        <StickerSheet
+          heading="MultiSelect"
+          className={classnames("w-full", IS_CHROMATIC && "pb-160")}
+        >
+          <StickerSheet.Header
+            headings={["Closed", "Open", "No items"]}
+            headingsWidth="30%"
+          />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <MultiSelect
+                id="id--multi-select-options--closed"
+                label="Label"
+                description="A short description"
+                isOpen={isOpenClosed}
+                onOpenChange={setIsOpenClosed}
+                onSelectedValuesChange={setSelectedValuesClosed}
+                selectedValues={selectedValuesClosed}
+                items={options}
+              />
+              <MultiSelect
+                id="id--multi-select-options--open"
+                label="Label"
+                description="A short description"
+                isOpen={isOpenOpen}
+                onOpenChange={setIsOpenOpen}
+                onSelectedValuesChange={setSelectedValuesOpen}
+                selectedValues={selectedValuesOpen}
+                items={options}
+              />
+              <MultiSelect
+                id="id--multi-select-options--no-items"
+                label="Label"
+                description="A short description"
+                isOpen={isOpenNoItems}
+                onOpenChange={setIsOpenNoItems}
+                selectedValues={selectedValuesNoItems}
+                onSelectedValuesChange={setSelectedValuesNoItems}
+                items={[]}
+              />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+        <StickerSheet
+          heading="Validation"
+          className={classnames("w-full", IS_CHROMATIC && "pb-160")}
+        >
+          <StickerSheet.Header headings={["Error", "Caution"]} />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <MultiSelect
+                id="id--multi-select--error"
+                label="Label"
+                isOpen={false}
+                onOpenChange={() => undefined}
+                onSelectedValuesChange={() => undefined}
+                selectedValues={selectedValuesOpen}
+                items={options}
+                validationMessage={{
+                  status: "error",
+                  message: "There are no waffles left.",
+                }}
+              />
+              <MultiSelect
+                id="id--multi-select--caution"
+                label="Label"
+                isOpen={false}
+                onOpenChange={() => undefined}
+                onSelectedValuesChange={() => undefined}
+                selectedValues={selectedValuesNoItems}
+                items={options}
+                validationMessage={{
+                  status: "error",
+                  message: "There are only four pancakes left.",
+                }}
+              />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
     )
   },
 }

package/src/MultiSelect/_docs/MultiSelect.stories.tsx

@@ -150,3 +150,24 @@ export const Description: Story = {
     description: "Breakfast will be delivered directly to your house",
   },
 }
+
+export const ValidationMessage: Story = {
+  ...MultiSelectTemplate,
+  args: {
+    validationMessage: {
+      status: "error",
+      message: "There are no more waffles",
+    },
+  },
+}
+
+export const ValidationMessageWithDescription: Story = {
+  ...MultiSelectTemplate,
+  args: {
+    description: "Breakfast will be delivered to your house.",
+    validationMessage: {
+      status: "caution",
+      message: "Only five more waffles remain.",
+    },
+  },
+}

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss

@@ -18,6 +18,15 @@
     border-color: $color-gray-600;
     background-color: $color-gray-200;
   }
+
+  &.error {
+    border: $border-solid-border-style $border-solid-border-width $color-red-500;
+  }
+
+  &.caution {
+    border: $border-solid-border-style $border-solid-border-width
+      $color-yellow-600;
+  }
 }
 
 .toggleButton {

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
+import { FieldMessageProps } from "~components/FieldMessage"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { RemovableTag } from "~components/__future__/Tag"
 import { OverrideClassName } from "~types/OverrideClassName"
@@ -13,6 +14,7 @@ export type MultiSelectToggleProps = {
   ["aria-controls"]: string
   selectedOptions: MultiSelectOption[]
   isOpen?: boolean
+  status?: FieldMessageProps["status"]
   onRemoveOption: (optionValue: MultiSelectOption["value"]) => void
   onRemoveAllOptions: () => void
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
@@ -32,6 +34,7 @@ export const MultiSelectToggle = forwardRef<
       selectedOptions,
       onRemoveOption,
       onRemoveAllOptions,
+      status,
       ...restProps
     },
     ref
@@ -43,7 +46,11 @@ export const MultiSelectToggle = forwardRef<
        */}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
-        className={classnames(styles.multiSelectToggle, classNameOverride)}
+        className={classnames(
+          styles.multiSelectToggle,
+          classNameOverride,
+          status && styles[status]
+        )}
         onClick={onClick}
         {...restProps}
       >

package/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx

@@ -92,6 +92,23 @@ const StickerSheetTemplate: StickerSheetStory = {
           </StickerSheet.Body>
         </StickerSheet>
 
+        <StickerSheet
+          isReversed={isReversed}
+          heading="Validation states"
+          className="w-full"
+        >
+          <StickerSheet.Header
+            headings={["Error", "Caution"]}
+            verticalHeadingsWidth="10rem"
+          />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <MultiSelectToggle status="error" {...defaultProps} />
+              <MultiSelectToggle status="caution" {...defaultProps} />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+
         <StickerSheet
           isReversed={isReversed}
           heading="Has selected values"

package/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -43,7 +43,7 @@ export const Popover = <RT extends ReferenceType>({
     },
     placement: "bottom-start",
     middleware: [
-      offset(15),
+      offset(6),
       flip(),
       size({
         apply({ availableWidth, availableHeight, elements }) {

package/src/MultiSelect/types.ts

@@ -1,5 +1,12 @@
+import { FieldMessageStatus } from "~components/FieldMessage"
+
 export type MultiSelectOption = {
   label: string
   // Used for "value" attribute in option - must be unique
   value: string | number
 }
+
+export type ValidationMessage = {
+  status?: Extract<FieldMessageStatus, "error" | "caution">
+  message: string | React.ReactElement
+}

package/src/__future__/Select/Select.spec.tsx

@@ -33,14 +33,35 @@ const SelectWrapper = ({
 
 describe("<Select />", () => {
   describe("Trigger", () => {
-    it("makes sure the menu to be labelled by trigger", () => {
+    it("has the label as the accessible name", () => {
+      const { getByRole } = render(<SelectWrapper />)
+      const menu = getByRole("combobox", {
+        name: "Mock Label",
+      })
+      expect(menu).toBeInTheDocument()
+    })
+
+    it("has the value when an item is selected", () => {
       const { getByRole } = render(<SelectWrapper selectedKey="batch-brew" />)
       const menu = getByRole("combobox", {
-        name: "Batch brew Mock Label",
+        name: "Mock Label",
       })
       expect(menu).toHaveTextContent("Batch brew")
     })
 
+    it("allows more aria-labelledby references to be sent in", () => {
+      const { getByRole } = render(
+        <>
+          <div id="extra-label">extra label stuff</div>
+          <SelectWrapper aria-labelledby="extra-label" />
+        </>
+      )
+      const menu = getByRole("combobox", {
+        name: "Mock Label extra label stuff",
+      })
+      expect(menu).toBeInTheDocument()
+    })
+
     describe("when uncontrolled", () => {
       it("does not show the menu initially", () => {
         const { queryByRole } = render(<SelectWrapper />)
@@ -76,7 +97,7 @@ describe("<Select />", () => {
           />
         )
         const trigger = getByRole("combobox", {
-          name: "Batch brew Mock Label",
+          name: "Mock Label",
         })
         await user.click(trigger)
         await waitFor(() => {
@@ -93,7 +114,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.click(trigger)
           await waitFor(() => {
@@ -108,7 +129,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" defaultOpen />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
 
           await user.click(trigger)
@@ -147,7 +168,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.tab()
           await waitFor(() => {
@@ -160,7 +181,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.tab()
           await waitFor(() => {
@@ -305,9 +326,7 @@ describe("<Select />", () => {
         })
         await user.keyboard("{Enter}")
 
-        await user.click(
-          getByRole("combobox", { name: "Short black Mock Label" })
-        )
+        await user.click(getByRole("combobox", { name: "Mock Label" }))
         await waitFor(() => {
           expect(
             getByRole("option", { name: "Short black", selected: true })
@@ -320,7 +339,7 @@ describe("<Select />", () => {
         const { getByRole } = render(
           <SelectWrapper onSelectionChange={spy} defaultOpen />
         )
-        const trigger = getByRole("combobox", { name: "Select Mock Label" })
+        const trigger = getByRole("combobox", { name: "Mock Label" })
 
         await user.tab()
         await waitFor(() => {
@@ -332,7 +351,7 @@ describe("<Select />", () => {
         await user.keyboard("{Enter}")
         await waitFor(() => {
           expect(spy).toHaveBeenCalledTimes(1)
-          expect(trigger).toHaveAccessibleName("Short black Mock Label")
+          expect(trigger).toHaveAccessibleName("Mock Label")
         })
       })
     })