@kaizen/components 1.78.1 → 1.78.3

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stories.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, within } from '@storybook/test'
+import { VisuallyHidden } from '~components/VisuallyHidden'
 import { LikertScaleLegacy } from '../index'
 import { type Scale, type ScaleItem } from '../types'
 
@@ -57,7 +59,7 @@ export const Playground: Story = {
         code: `
   const SatisfactionExample = () => {
     const [selectedItem, setSelectedItem] = useState<ScaleItem | null>(null)
-  
+
     return (
       <LikertScaleLegacy
         scale={[
@@ -82,3 +84,30 @@ export const Playground: Story = {
     },
   },
 }
+
+export const IsRequired: Story = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState<ScaleItem | null>(null)
+    const labelId = React.useId()
+    return (
+      <div>
+        <VisuallyHidden id={labelId}>Likert scale label</VisuallyHidden>
+        <LikertScaleLegacy
+          {...args}
+          labelId={labelId}
+          selectedItem={selectedItem}
+          onSelect={setSelectedItem}
+        />
+      </div>
+    )
+  },
+  args: {
+    isRequired: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const likertScale = canvas.getByRole('radiogroup', { name: 'Likert scale label' })
+
+    expect(likertScale).toHaveAttribute('aria-required', 'true')
+  },
+}

package/src/Menu/subcomponents/StatelessMenu/StatelessMenu.tsx

@@ -46,7 +46,6 @@ export type StatelessMenuProps = {
   'renderButton': (args: {
     'onClick': (e: any) => void
     'onMouseDown': (e: any) => void
-    'aria-haspopup': boolean
     'aria-expanded': boolean
   }) => React.ReactElement
   'onClick'?: (event: SyntheticEvent) => void
@@ -76,7 +75,6 @@ export const StatelessMenu = ({
       toggleMenuDropdown()
     },
     'onMouseDown': (e: React.MouseEvent<Element, MouseEvent>) => e.preventDefault(),
-    'aria-haspopup': true,
     'aria-expanded': isMenuVisible,
   })
 

package/src/__next__/Select/Select.tsx

@@ -85,6 +85,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   status,
   validationMessage,
   isReversed,
+  isRequired = false,
   isFullWidth,
   disabledValues,
   classNameOverride,
@@ -93,6 +94,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   placeholder = '',
   isDisabled,
   portalContainerId,
+  onSelectionChange,
   ...restProps
 }: SelectProps<Option>): JSX.Element => {
   const { refs } = useFloating<HTMLButtonElement>()
@@ -114,6 +116,8 @@ export const Select = <Option extends SelectOption = SelectOption>({
     description,
     placeholder,
     isDisabled,
+    isRequired,
+    onSelectionChange: onSelectionChange ? (key) => onSelectionChange(key!) : undefined,
     ...restProps,
   }
 
@@ -153,6 +157,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
     isReversed,
     'ref': refs.setReference,
     'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
+    'aria-required': isRequired,
   }
 
   const [portalContainer, setPortalContainer] = useState<HTMLElement>()

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

@@ -92,6 +92,14 @@ Add validation messages using `status` and `validationMessage`.
 
 <Canvas of={SelectStories.Validation} />
 
+#### isRequired and validationBehavior
+
+When using the `isRequired` property you can also specify the `validationBehavior` to change from `aria` to `native` form validation.
+
+<Canvas of={SelectStories.SelectNativeValidationBehavior} />
+
+While both use `aria-required` to announce whether the field has to have a value to assistive technologies, the `native` will option will prevent form submissions if the `selectedKey` is `undefined`.
+
 ### Full width
 
 Set `isFullWidth` to `true` to have the Select span the full width of its container.

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

@@ -1,7 +1,10 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
+import { FieldMessage } from '~components/FieldMessage'
 import { ContextModal } from '~components/Modal'
 import { RadioField, RadioGroup } from '~components/Radio'
+import { Button } from '~components/__next__'
 import { Select } from '../Select'
 import { type SelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
@@ -229,3 +232,93 @@ export const TouchDeviceTest: Story = {
     )
   },
 }
+
+export const RequiredSelect: Story = {
+  args: {
+    label: 'Required Select',
+    isRequired: true,
+    validationBehavior: 'native',
+  },
+  render: (args) => <Select {...args} />,
+}
+
+export const SelectNativeValidationBehavior: Story = {
+  parameters: {
+    name: 'Required Select with native form validation',
+  },
+  args: {
+    label: 'Required Select',
+    isRequired: true,
+    validationBehavior: 'native',
+  },
+  render: (args) => {
+    const [hasSubmitted, setHasSubmitted] = React.useState(false)
+    return (
+      <div>
+        <form
+          className="flex flex-col gap-16"
+          name="form-with-required-select"
+          aria-describedby={hasSubmitted ? 'id--field-message-form' : undefined}
+          onSubmit={(e) => {
+            e.preventDefault()
+            setHasSubmitted(true)
+          }}
+        >
+          <Select {...args} isRequired />
+          <div>
+            <Button type="submit">Submit</Button>
+          </div>
+        </form>
+        {hasSubmitted && (
+          <FieldMessage
+            id="id--field-message-form"
+            classNameOverride="mt-8"
+            status="success"
+            message={'Form submitted!'}
+          />
+        )}
+      </div>
+    )
+  },
+}
+
+export const NativeFormValidationWithoutSelectedVal: Story = {
+  ...SelectNativeValidationBehavior,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const submitButton = canvas.getByRole('button', { name: 'Submit' })
+    const requiredSelect = canvas.getByRole('combobox', { name: 'Required Select' })
+    const form = await canvas.findByRole('form')
+
+    await step('Select has aria-required attribute', async () => {
+      expect(requiredSelect).toHaveAttribute('aria-required', 'true')
+    })
+
+    await step('Submit will not call onSubmit without a selected value', async () => {
+      await userEvent.click(submitButton)
+      await waitFor(() => {
+        expect(form).toHaveAccessibleDescription('')
+      })
+    })
+  },
+}
+
+export const NativeFormValidationWithSelectedVal: Story = {
+  ...SelectNativeValidationBehavior,
+  args: {
+    selectedKey: 'short-black',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const submitButton = canvas.getByRole('button', { name: 'Submit' })
+    const form = await canvas.findByRole('form')
+
+    await step('Submit will call onSubmit with a selected value', async () => {
+      await userEvent.click(submitButton)
+
+      await waitFor(() => {
+        expect(form).toHaveAccessibleDescription('Form submitted!')
+      })
+    })
+  },
+}

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

@@ -28,7 +28,7 @@ Tooltips are brief floating labels used to add additional contextual information
   source={{
     code: `
 <TooltipTrigger>
-  <Button label="Button" />
+  <Button>Button</Button>
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
   `,
@@ -75,7 +75,7 @@ The `TooltipTrigger` wraps both the `Tooltip` and its trigger element, controlli
 ```jsx
 <TooltipTrigger>
   /* In this case the trigger element is the Button */
-  <Button label="Button" />
+  <Button>Button</Button>
   /* The Tooltip and its content is a child of the trigger */
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>

package/src/__next__/Tooltip/_docs/Tooltip.docs.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Button, IconButton } from '~components/Button'
 import { FieldMessage } from '~components/FieldMessage'
 import { Focusable } from '~components/Focusable'
 import { Input } from '~components/Input'
 import { Label } from '~components/Label'
 import { Text } from '~components/Text'
+import { Button } from '~components/__next__/Button'
 import { Icon } from '~components/__next__/Icon'
 import { Tooltip, TooltipTrigger } from '../index'
 import * as TestStories from './Tooltip.spec.stories'
@@ -37,7 +37,7 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={true} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -46,14 +46,9 @@ export const Playground: Story = {
 export const Primary: Story = {
   render: () => (
     <TooltipTrigger>
-      <IconButton
-        label="Add something"
-        icon={<Icon name="add" isPresentational />}
-        primary
-        // Negate the aria description (added by RAC) as it should be the
-        // same as the accessible name, therefore no need to duplicate it
-        aria-describedby={null}
-      />
+      <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+        Add something
+      </Button>
       <Tooltip>Add something</Tooltip>
     </TooltipTrigger>
   ),
@@ -105,14 +100,9 @@ export const DoConcise: Story = {
   render: () => (
     <div>
       <TooltipTrigger>
-        <IconButton
-          label="Add topic"
-          icon={<Icon name="add" isPresentational />}
-          primary
-          // Negate the aria description (added by RAC) as it should be the
-          // same as the accessible name, therefore no need to duplicate it
-          aria-describedby={null}
-        />
+        <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+          Add topic
+        </Button>
         <Tooltip>Add topic to agenda</Tooltip>
       </TooltipTrigger>
     </div>
@@ -128,17 +118,12 @@ export const DontConcise: Story = {
   render: () => (
     <div>
       <TooltipTrigger>
-        <IconButton
-          label="Add something"
-          icon={<Icon name="add" isPresentational />}
-          primary
-          // Negate the aria description (added by RAC) as it should be the
-          // same as the accessible name, therefore no need to duplicate it
-          aria-describedby={null}
-        />
+        <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+          Add something
+        </Button>
         <Tooltip>
           Add Topic to agenda. This will create a new topic where you can discuss recent work with
-          your manager.{' '}
+          your manager.
         </Tooltip>
       </TooltipTrigger>
     </div>
@@ -150,11 +135,11 @@ export const ShouldFlip: Story = {
   render: () => (
     <div className="flex flex-col gap-8 pl-96 overflow-hidden max-w-[250px]">
       <TooltipTrigger>
-        <Button label="Should flip" />
+        <Button>Should flip</Button>
         <Tooltip placement="end">Tooltip content</Tooltip>
       </TooltipTrigger>
       <TooltipTrigger>
-        <Button label="Won't flip" />
+        <Button>Won&apos;t flip</Button>
         <Tooltip placement="end" shouldFlip={false}>
           Tooltip content
         </Tooltip>
@@ -188,7 +173,7 @@ export const UncontrolledState: Story = {
           Toggle open
         </button>
         <TooltipTrigger isOpen={isOpen}>
-          <Button label="Button" />
+          <Button>Button</Button>
           <Tooltip>Tooltip content</Tooltip>
         </TooltipTrigger>
       </div>

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

@@ -34,7 +34,7 @@ Tooltips are brief floating labels used to add additional contextual information
   source={{
     code: `
 <TooltipTrigger>
-  <Button label="Button" />
+  <Button>Button</Button>
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
   `,

package/src/__next__/Tooltip/_docs/Tooltip.spec.stories.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
-import { Button, IconButton } from '~components/Button'
 import { Focusable } from '~components/Focusable'
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '~components/Tabs'
+import { LinkButton } from '~components/LinkButton'
 import { Text } from '~components/Text'
+import { Button } from '~components/__next__/Button'
 import { Icon } from '~components/__next__/Icon'
+import { Tab, TabList, TabPanel, Tabs } from '~components/__next__/Tabs'
 import { Tag } from '~components/__next__/Tag'
 import { Tooltip, TooltipTrigger } from '../index'
 
@@ -32,12 +33,10 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-// TODO: update this to use the new `next` button component
-
 export const OnButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -46,10 +45,12 @@ export const OnButton: Story = {
     const button = canvas.queryByRole('button') ?? canvas.getByRole('link')
 
     await step('Hover shows', async () => {
-      await userEvent.unhover(button)
+      await waitFor(() => userEvent.unhover(button))
       await userEvent.hover(button)
-      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
-      expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
+      const tooltip = canvas.findByRole('tooltip')
+      await expect(await tooltip).toBeInTheDocument()
+      await expect((await tooltip).checkVisibility()).toBe(true)
+      await expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
       await userEvent.unhover(button)
     })
 
@@ -76,7 +77,7 @@ export const OnLink: Story = {
   ...OnButton,
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" href="#" />
+      <LinkButton href="#">Button</LinkButton>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -86,12 +87,9 @@ export const OnButtonWithDesc: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <>
       <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-        <IconButton
-          label="(TESTING) Add label"
-          icon={<Icon name="add" isPresentational />}
-          primary
-          aria-describedby="blah"
-        />
+        <Button icon={<Icon name="add" isPresentational />} aria-describedby="blah" hasHiddenLabel>
+          (TESTING) Add label
+        </Button>
         <Tooltip {...args}>Tooltip content</Tooltip>
       </TooltipTrigger>
       <Text variant="body" id="blah" classNameOverride="p-4">
@@ -104,14 +102,9 @@ export const OnButtonWithDesc: Story = {
 export const OnIconButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <IconButton
-        label="Add something"
-        icon={<Icon name="add" isPresentational />}
-        primary
-        // Negate the aria description (added by RAC) as it should be the
-        // same as the accessible name, therefore no need to duplicate it
-        aria-describedby={null}
-      />
+      <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+        Add something
+      </Button>
       <Tooltip {...args}>Add something</Tooltip>
     </TooltipTrigger>
   ),
@@ -120,36 +113,7 @@ export const OnIconButton: Story = {
 export const OnDisabledButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" disabled />
-      <Tooltip {...args}>Tooltip content</Tooltip>
-    </TooltipTrigger>
-  ),
-}
-
-export const OnCustomButtonAnchor: Story = {
-  name: 'On Button with custom <a>',
-  render: ({ defaultOpen, isOpen, ...args }) => (
-    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button
-        label="Button"
-        component={(props) => (
-          // eslint-disable-next-line jsx-a11y/anchor-is-valid
-          <a {...props} href="#" style={{ padding: '0 1rem' }}>
-            Custom Link
-          </a>
-        )}
-      />
-      <Tooltip {...args}>Tooltip content</Tooltip>
-    </TooltipTrigger>
-  ),
-}
-
-export const OnCustomButton: Story = {
-  ...OnButton,
-  name: 'On Button with custom <button>',
-  render: ({ defaultOpen, isOpen, ...args }) => (
-    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" component={(props) => <button type="button" {...props} />} />
+      <Button isDisabled>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -175,9 +139,8 @@ export const OnTabs: Story = {
           <Tooltip {...args}>Tooltip content</Tooltip>
         </TooltipTrigger>
       </TabList>
-      <TabPanels>
-        <TabPanel classNameOverride="p-24 font-family-paragraph">Tab content</TabPanel>
-      </TabPanels>
+
+      <TabPanel className="p-24 font-family-paragraph">Tab content</TabPanel>
     </Tabs>
   ),
 }
@@ -185,7 +148,7 @@ export const OnTabs: Story = {
 export const Placement: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args} placement="top" shouldFlip={false}>
         Placement top
       </Tooltip>
@@ -205,7 +168,7 @@ export const Placement: Story = {
 export const ReversedColors: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),

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

@@ -1,9 +1,9 @@
 import React, { type FunctionComponent } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Button } from '~components/Button'
 import { Focusable } from '~components/Focusable'
 import { Tag } from '~components/__next__'
+import { Button } from '~components/__next__/Button'
 import { Tooltip, TooltipTrigger } from '../index'
 import * as testStories from './Tooltip.spec.stories'
 
@@ -33,7 +33,7 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={true} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "listBox": "ListBox-module_listBox__q95MO",
-  "overflown": "ListBox-module_overflown__wChQA",
-  "hidden": "ListBox-module_hidden__eYdXv",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__WcLRm"
-};
-module.exports = styles;

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "listBox": "ListBox-module_listBox__q95MO",
-  "overflown": "ListBox-module_overflown__wChQA",
-  "hidden": "ListBox-module_hidden__eYdXv",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__WcLRm"
-};
-export { styles as default };

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "menuPopup": "MenuPopup-module_menuPopup__UVgnP"
-};
-export { styles as default };

package/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss

@@ -1,23 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
-.listBox {
-  list-style: none;
-  padding: $spacing-sm;
-  margin: 0 $spacing-sm 0 0;
-  display: grid;
-  max-height: 22rem;
-  overflow-y: auto;
-}
-
-.overflown {
-  padding-right: $spacing-sm;
-}
-
-.hidden {
-  display: none;
-}
-
-// this is a div but remove styles briefly flickering to a bullet list as the sections are removed
-.noResultsWrapper {
-  list-style: none;
-}

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss

@@ -1,22 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-
-// figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
-$menu-container-width: 294px;
-$menu-container-max-height: 312px;
-
-.menuPopup {
-  position: absolute;
-  z-index: 1000; // from $ca-z-index-dropdown
-  box-sizing: border-box;
-  background: $color-white;
-  color: $color-purple-800;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  padding: $spacing-sm 0;
-  margin-top: $spacing-xs;
-  text-align: start;
-  width: $menu-container-width;
-}