@kaizen/components 0.0.0-canary-fix-si-css-layers-20240523071705 → 0.0.0-canary-back-to-basics-20240529053149

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 import React from "react"
 import { Meta } from "@storybook/react"
 import {
@@ -16,7 +15,7 @@ export default {
       config: {
         rules: [
           {
-            // Built with no label on purpose, to be used within `RadioField` where label is present
+            // Built with no label on purpose, to be used within `CheckboxField` where label is present
             id: "label",
             enabled: false,
           },
@@ -26,69 +25,56 @@ export default {
   },
 } satisfies Meta
 
-const CheckboxExampleGroup = (props: CheckboxProps): JSX.Element => (
-  <div className="grid gap-8">
-    <Checkbox {...props} />
-    <Checkbox {...props} checkedStatus="on" />
-    <Checkbox {...props} checkedStatus="mixed" />
-  </div>
-)
-
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    /** @note: If you have multiple StickerSheets to display, you can add a `heading` */
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Enabled">
-          <CheckboxExampleGroup onCheck={() => {}} />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled">
-          <CheckboxExampleGroup onCheck={() => {}} disabled />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            disabled
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            disabled
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            disabled
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Read Only">
-          <CheckboxExampleGroup />
-          <CheckboxExampleGroup data-sb-pseudo-styles="hover" />
-          <CheckboxExampleGroup data-sb-pseudo-styles="active" />
-          <CheckboxExampleGroup data-sb-pseudo-styles="focus" />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      onCheck: () => undefined,
+      reversed: isReversed,
+    } satisfies Partial<CheckboxProps>
+
+    const rows = [
+      { title: "Off", checkedStatus: "off" },
+      { title: "On", checkedStatus: "on" },
+      { title: "Mixed", checkedStatus: "mixed" },
+    ] satisfies Array<{
+      title: string
+      checkedStatus: CheckboxProps["checkedStatus"]
+    }>
+
+    return (
+      <StickerSheet isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["Default", "Hover", "Focus", "Disabled"]}
+          hasVerticalHeadings
+        />
+        <StickerSheet.Body>
+          {rows.map(({ title, checkedStatus }) => (
+            <StickerSheet.Row key={title} rowTitle={title}>
+              <Checkbox {...defaultProps} checkedStatus={checkedStatus} />
+              <Checkbox
+                {...defaultProps}
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="hover"
+              />
+              <Checkbox
+                {...defaultProps}
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="focus"
+              />
+              <Checkbox
+                {...defaultProps}
+                checkedStatus={checkedStatus}
+                disabled
+              />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    )
+  },
   parameters: {
     pseudo: {
       hover: '[data-sb-pseudo-styles="hover"]',
-      active: '[data-sb-pseudo-styles="active"]',
       focus: '[data-sb-pseudo-styles="focus"]',
       focusVisible: '[data-sb-pseudo-styles="focus"]',
     },
@@ -104,19 +90,8 @@ export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     backgrounds: { default: "Purple 700" },
   },
   args: { isReversed: true },
 }
-
-export const StickerSheetRTL: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
-    ...StickerSheetTemplate.parameters,
-    textDirection: "rtl",
-  },
-}

package/src/Checkbox/CheckboxField/CheckboxField.module.scss

@@ -3,12 +3,6 @@
 @import "~@kaizen/design-tokens/sass/typography";
 @import "../../../styles/utils/form-variables";
 
-// -----------------------------------------------
-// Checkbox Field
-// -----------------------------------------------
-///////////////////////////////////////////////////
-// LAYOUT
-///////////////////////////////////////////////////
 .container {
   position: relative;
   margin-bottom: $spacing-xs;
@@ -44,3 +38,9 @@
     }
   }
 }
+
+.label {
+  &:disabled {
+    pointer-events: none;
+  }
+}

package/src/Checkbox/CheckboxField/CheckboxField.tsx

@@ -51,6 +51,7 @@ export const CheckboxField = ({
         reversed={reversed}
         labelType="checkbox"
         disabled={disabled}
+        classNameOverride={styles.label}
       >
         <Checkbox
           id={`${id}-field-checkbox`}

package/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx

@@ -14,78 +14,63 @@ export default {
   },
 } satisfies Meta
 
-const CheckboxFieldGroupWrapper = (props: CheckboxFieldProps): JSX.Element => (
-  <div className="grid gap-8">
-    <CheckboxField {...props} />
-    <CheckboxField {...props} checkedStatus="on" />
-    <CheckboxField {...props} checkedStatus="mixed" />
-  </div>
-)
-
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    /** @note: If you have multiple StickerSheets to display, you can add a `heading` */
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Enabled">
-          <CheckboxFieldGroupWrapper
-            labelText="Checkbox"
-            reversed={isReversed}
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Hover"
-            reversed={isReversed}
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Active"
-            reversed={isReversed}
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Focus"
-            reversed={isReversed}
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled">
-          <CheckboxFieldGroupWrapper
-            labelText="Checkbox"
-            disabled
-            reversed={isReversed}
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Hover"
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Active"
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Focus"
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
-  /** @note: Only required if you have pseudo states, otherwise this can be removed */
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      onCheck: () => undefined,
+      reversed: isReversed,
+    } satisfies Partial<CheckboxFieldProps>
+
+    const rows = [
+      { title: "Off", checkedStatus: "off" },
+      { title: "On", checkedStatus: "on" },
+      { title: "Mixed", checkedStatus: "mixed" },
+    ] satisfies Array<{
+      title: string
+      checkedStatus: CheckboxFieldProps["checkedStatus"]
+    }>
+
+    return (
+      <StickerSheet isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["Default", "Hover", "Focus", "Disabled"]}
+          hasVerticalHeadings
+        />
+        <StickerSheet.Body>
+          {rows.map(({ title, checkedStatus }) => (
+            <StickerSheet.Row key={title} rowTitle={title}>
+              <CheckboxField
+                {...defaultProps}
+                labelText="Checkbox"
+                checkedStatus={checkedStatus}
+              />
+              <CheckboxField
+                {...defaultProps}
+                labelText="Hover"
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="hover"
+              />
+              <CheckboxField
+                {...defaultProps}
+                labelText="Focus"
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="focus"
+              />
+              <CheckboxField
+                {...defaultProps}
+                labelText="Disabled"
+                checkedStatus={checkedStatus}
+                disabled
+              />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    )
+  },
   parameters: {
-    /** @todo: Remove any inapplicable pseudo states */
     pseudo: {
       hover: '[data-sb-pseudo-styles="hover"]',
-      active: '[data-sb-pseudo-styles="active"]',
       focus: '[data-sb-pseudo-styles="focus"]',
       focusVisible: '[data-sb-pseudo-styles="focus"]',
     },
@@ -101,7 +86,6 @@ export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     backgrounds: { default: "Purple 700" },
   },
@@ -112,7 +96,6 @@ export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     textDirection: "rtl",
   },

package/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.module.scss

@@ -8,20 +8,17 @@
   box-shadow: none;
   color: $color-purple-800;
 
-  > div {
-    &:first-of-type {
-      background-color: $color-purple-100;
-      border-radius: $border-borderless-border-radius;
-
-      &:hover {
-        background-color: $color-purple-100;
-      }
-    }
+  &:hover {
+    border-color: $color-purple-500;
   }
 }
 
-.expertAdviceContainer:hover {
-  border-color: $color-purple-500;
+// Override Collapsible header
+.expertAdviceContainer > div {
+  &:first-of-type {
+    background-color: $color-purple-100;
+    border-radius: $border-borderless-border-radius;
+  }
 }
 
 .expertAdviceHeader {

package/src/DatePicker/_docs/DatePicker.mdx

@@ -70,3 +70,17 @@ There are multiple props to disable days within the Calendar.
 
 <Canvas of={DatePickerStories.DisabledDays} />
 <Controls of={DatePickerStories.DisabledDays} />
+
+### Responsive behaviour
+
+To ensure calendar content is accessible across multiple viewports and satisfy the [content reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) spec in WCAG guidelines, the `DatePicker`'s popover will scroll when there is not enough space available. The main case for this is to assist users on 400% zoom and ensure content is not visually lost below the fold.
+
+<Canvas of={DatePickerStories.LimitedViewportHeight} />
+
+This is determined by the [size](https://floating-ui.com/docs/size) middleware from the `floatingUI` library, which calculates and sets the available height and width based on the viewport and available whitespace.
+
+<Canvas of={DatePickerStories.FullViewportHeight} />
+
+The `DatePicker`'s popover will also re-adjust its position to the top if there is not enough space available below.
+
+<Canvas of={DatePickerStories.AboveIfAvailable} />

package/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react"
 import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within, expect } from "@storybook/test"
 import Highlight from "react-highlight"
 import { Button } from "~components/Button"
 import { defaultMonthControls } from "~components/Calendar/_docs/controls/defaultMonthControls"
@@ -249,3 +250,118 @@ export const Validation: Story = {
 export const DisabledDays: Story = {
   parameters: { controls: { include: /^disabled/ } },
 }
+
+export const LimitedWindowWidth: Story = {
+  name: "At 400% window size",
+  parameters: {
+    controls: { disable: true },
+    viewport: {
+      viewports: {
+        ViewportAt400: {
+          name: "Viewport at 400%",
+          styles: {
+            width: "320px",
+            height: "350px",
+          },
+        },
+      },
+      defaultViewport: "ViewportAt400",
+    },
+    a11y: { disable: true }, // accessible label fix to be addressed in a separate PR
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: "Choose date" }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const AboveIfAvailable: Story = {
+  name: "Limited viewport autoplacement above",
+  args: {
+    labelText: "Calendar with space above",
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "500px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportAutoPlace",
+    },
+    a11y: { disable: true }, // accessible label fix to be addressed in a separate PR
+  },
+  decorators: [
+    Story => (
+      <div className="mt-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: "Choose date" }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const LimitedViewportHeight: Story = {
+  name: "Limited viewport height",
+  args: {
+    labelText: "Calendar with reduced space below",
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportHeight: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "300px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportHeight",
+    },
+    a11y: { disable: true }, // accessible label fix to be addressed in a separate PR
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[150px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: "Choose date" }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const FullViewportHeight: Story = {
+  name: "Full viewport height",
+  args: {
+    labelText: "Calendar with full space below",
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: "Choose date" }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+  parameters: {
+    a11y: { disable: true }, // accessible label fix to be addressed in a separate PR
+  },
+}

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -23,3 +23,8 @@ Date range picker form field.
 
 <Canvas of={DateRangePickerStories.Playground} />
 <Controls of={DateRangePickerStories.Playground} />
+
+
+## Responsive behaviour
+
+As both the `DatePicker` and `DateRangePicker` use the `CalendarPopover` component under the hood, they share the same responsive behaviour. You can read more on this [here](/docs/components-date-controls-datepicker--docs#responsive-behaviour).

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.tsx

@@ -1,4 +1,9 @@
-import React, { ButtonHTMLAttributes, HTMLAttributes, useContext } from "react"
+import React, {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  useContext,
+  useRef,
+} from "react"
 import { useButton } from "@react-aria/button"
 import { AriaMenuOptions, useMenuTrigger } from "@react-aria/menu"
 import { MenuTriggerState, useMenuTriggerState } from "@react-stately/menu"
@@ -32,7 +37,7 @@ export function MenuTriggerProvider({
   const state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange })
 
   // Get A11y attributes and events for the menu trigger and menu elements
-  const ref = React.createRef<HTMLButtonElement>()
+  const ref = useRef<HTMLButtonElement>(null)
   const { menuTriggerProps, menuProps } = useMenuTrigger<ItemType>(
     {},
     state,

package/src/Illustration/subcomponents/Base/Base.module.scss

@@ -9,42 +9,42 @@
 .figure {
   margin: 0;
   position: relative;
+}
 
-  // nested to get more specificity, beat out the generic button styles
-  .pausePlayButton {
-    opacity: 0%;
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    /* stylelint-disable declaration-no-important */
-    background-color: $color-white !important;
-    border: 1px solid $color-gray-400;
-    transition: all $animation-duration-immediate;
-
-    @media (hover: none) and (pointer: coarse) {
-      opacity: 100%;
-    }
+// nested to get more specificity, beat out the generic button styles
+.figure .pausePlayButton {
+  opacity: 0%;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  /* stylelint-disable declaration-no-important */
+  background-color: $color-white !important;
+  border: 1px solid $color-gray-400;
+  transition: all $animation-duration-immediate;
+
+  @media (hover: none) and (pointer: coarse) {
+    opacity: 100%;
+  }
 
-    svg {
-      color: $color-purple-800;
-      opacity: 70%;
-    }
+  svg {
+    color: $color-purple-800;
+    opacity: 70%;
+  }
 
-    &:hover,
-    &:focus {
-      opacity: 100%;
-      background-color: $color-gray-200 !important;
+  &:hover,
+  &:focus {
+    opacity: 100%;
+    background-color: $color-gray-200 !important;
 
-      svg {
-        opacity: 100%;
-      }
+    svg {
+      opacity: 100%;
     }
   }
+}
 
-  &:hover {
-    .pausePlayButton {
-      opacity: 100%;
-    }
+.figure:hover {
+  .pausePlayButton {
+    opacity: 100%;
   }
 }
 

package/src/Input/Input/Input.module.scss

@@ -237,7 +237,6 @@ $input-with-icon-padding: calc(
     }
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 ///////////////////////////////////////////////////
 // THEMES
@@ -357,3 +356,4 @@ $input-with-icon-padding: calc(
     }
   }
 }
+/* stylelint-enable no-descending-specificity */

package/src/Label/Label.module.scss

@@ -12,14 +12,7 @@ $label-start-margin: $spacing-xs;
   color: $dt-color-form-text-color;
   visibility: visible;
   width: 100%;
-  text-align: left; // fallback for IE and Edge
   text-align: start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    text-align: right; // fallback for IE and Edge
-    text-align: start;
-  }
 }
 
 .reversed {
@@ -87,25 +80,11 @@ $label-start-margin: $spacing-xs;
   // apply padding when label is inline with form control
   .prependedLabel {
     order: -1; // place label before the control
-    margin-right: $label-start-margin;
-    margin-left: 0;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: 0;
-      margin-left: $label-start-margin;
-    }
+    margin-inline-end: $label-start-margin;
   }
 
   .appendedLabel {
-    margin-right: 0;
-    margin-left: $label-start-margin;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: $label-start-margin;
-      margin-left: 0;
-    }
+    margin-inline-start: $label-start-margin;
   }
 }