@kaizen/components 0.0.0-canary-update-floating-fms-20250715035144 → 0.0.0-canary-handle-avatar-error-20250716233812

package/src/__alpha__/SingleSelect/_docs/mockData.ts

@@ -0,0 +1,92 @@
+export const singleMockItems = [
+  { label: 'Short black', value: 'short-black' },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Flat white', value: 'flat-white' },
+  { label: 'Mocha', value: 'mocha' },
+  { label: 'Cappuccino', value: 'cappuccino' },
+  { label: 'Magic', value: 'magic' },
+]
+
+export const groupedMockItems = [
+  {
+    label: 'Colours',
+    options: [
+      { label: 'Blue', value: 'blue' },
+      { label: 'Red', value: 'red' },
+      { label: 'Green', value: 'green' },
+    ],
+  },
+  {
+    label: 'Flavours',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Chocolate', value: 'chocolate' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+  },
+]
+
+export const mixedMockItemsDisabled = [
+  { label: 'Short black', value: 'short-black', disabled: true },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew', disabled: true },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large', disabled: true },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla', disabled: true },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUngroupedFirst = [
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUnordered = [
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]

package/src/__alpha__/SingleSelect/index.ts

@@ -0,0 +1 @@
+export * from './SingleSelect'

package/src/__alpha__/SingleSelect/subcomponents/List/List.module.css

@@ -0,0 +1,7 @@
+@layer kz-components {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/List/List.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBox as RACListBox, type ListBoxProps } from 'react-aria-components'
+import styles from './List.module.css'
+
+export const List = ({
+  children,
+  className,
+  ...props
+}: ListBoxProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBox className={classNames(styles.list, className)} {...props}>
+      {children}
+    </RACListBox>
+  )
+}
+List.displayName = 'SingleSelect.List'

package/src/__alpha__/SingleSelect/subcomponents/List/index.ts

@@ -0,0 +1 @@
+export * from './List'

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listItem {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBoxItem as RACListBoxItem, type ListBoxItemProps } from 'react-aria-components'
+import styles from './ListItem.module.css'
+
+export const ListItem = ({
+  children,
+  className,
+  ...props
+}: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBoxItem className={classNames(styles.listItem, className)} {...props}>
+      {children}
+    </RACListBoxItem>
+  )
+}
+ListItem.displayName = 'SingleSelect.ListItem'

package/src/__alpha__/SingleSelect/subcomponents/ListItem/index.ts

@@ -0,0 +1 @@
+export * from './ListItem'

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listSectionHeader {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.tsx

@@ -0,0 +1,23 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import {
+  Header as RACHeader,
+  ListBoxSection as RACListBoxSection,
+  type ListBoxSectionProps,
+} from 'react-aria-components'
+import styles from './ListSection.module.css'
+
+export const ListSection = ({
+  name,
+  className,
+  children,
+  ...props
+}: ListBoxSectionProps<object> & PropsWithChildren & { name: string }): React.ReactElement => {
+  return (
+    <RACListBoxSection {...props}>
+      <RACHeader className={classNames(styles.listSectionHeader, className)}>{name}</RACHeader>
+      {children}
+    </RACListBoxSection>
+  )
+}
+ListSection.displayName = 'SingleSelect.ListSection'

package/src/__alpha__/SingleSelect/subcomponents/ListSection/index.ts

@@ -0,0 +1 @@
+export * from './ListSection'

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css

@@ -0,0 +1,18 @@
+@layer kz-components {
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button as RACButton, SelectValue } from 'react-aria-components'
+import { Icon } from '~components/__next__/Icon'
+import styles from './Trigger.module.css'
+
+export const Trigger = (): JSX.Element => {
+  return (
+    <RACButton className={styles.button}>
+      <SelectValue />
+      <Icon name="keyboard_arrow_down" isPresentational />
+    </RACButton>
+  )
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/index.ts

@@ -0,0 +1 @@
+export * from './Trigger'

package/src/__alpha__/SingleSelect/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export * from './List'
+export * from './ListSection'
+export * from './ListItem'
+export * from './Trigger'

package/src/__alpha__/index.ts

@@ -0,0 +1 @@
+export * from './SingleSelect'

package/src/__next__/Button/_docs/Button--api-specification.mdx

@@ -156,6 +156,12 @@ If a button is statically the full width of a container you can use the `isFullW
 
 For resizing on smaller screens, consider using the `className` prop to leverage CSS media or container queries, ie: `<Button className="w-full md:w-[initial]">Label</Button>`.
 
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />
+
 ## Additional API options
 
 The following table is a collection of additional React Aria and native HTML props that are exposed from the React Aria API. These are not required for the implementation of `Button` but can be used to extend its functionality. Refer back to the [overview section](#overview) for the core props that enable most use cases.

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

@@ -391,3 +391,32 @@ export const DontExampleTertiaryButtonWithIcons: Story = {
     variant: 'tertiary',
   },
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: () => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}

package/src/__next__/Menu/_docs/Menu--api-specification.mdx

@@ -83,3 +83,9 @@ Menu items can be disabled with the `isDisabled` prop.
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
 <Canvas className="mb-24" of={exampleStories.Controlled} />
+
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />

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

@@ -128,3 +128,32 @@ export const Sections: Story = {
     </MenuTrigger>
   ),
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: ({ defaultOpen: _, ...args }) => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger {...args}>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}

package/src/__next__/Tabs/subcomponents/TabList/TabList.module.css

@@ -26,7 +26,9 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+
+    /* from $ca-z-index-fixed */
+    z-index: 1030;
     background: var(--color-white);
     inset-block: 0 1px;
     width: 48px;

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "listBox": "ListBox-module_listBox__HBScm",
-  "overflown": "ListBox-module_overflown__PdKED",
-  "hidden": "ListBox-module_hidden__mO-oL",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__RnMj0"
-};
-module.exports = styles;

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

@@ -1,7 +0,0 @@
-var styles = {
-  "listBox": "ListBox-module_listBox__HBScm",
-  "overflown": "ListBox-module_overflown__PdKED",
-  "hidden": "ListBox-module_hidden__mO-oL",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__RnMj0"
-};
-export { styles as default };

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

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