@kaizen/components 1.47.2 → 1.47.4

package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx

@@ -1,5 +1,7 @@
 import React from "react"
+import { offset, size, autoPlacement } from "@floating-ui/react-dom"
 import { Meta } from "@storybook/react"
+import { Text } from "~components/Text"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -11,7 +13,9 @@ import { CalendarPopover, CalendarPopoverProps } from "../index"
 export default {
   title: "Components/Date controls/Calendars/CalendarPopover",
   parameters: {
-    chromatic: { disable: false },
+    chromatic: {
+      disable: false,
+    },
     controls: { disable: true },
     a11y: {
       config: {
@@ -24,34 +28,65 @@ export default {
         ],
       },
     },
+    viewport: {
+      viewports: {
+        ViewportFull: {
+          name: "Viewport full size",
+          styles: {
+            width: "1024px",
+            height: "1500px",
+          },
+        },
+      },
+      defaultViewport: "ViewportFull",
+    },
   },
 } satisfies Meta
 
 const CalendarPopoverExample = ({
   children,
   rowHeight = 300,
-}: Partial<CalendarPopoverProps & { rowHeight: number }>): JSX.Element => {
+  /** this is here as a convenient way to test overlap */
+  strategy = "fixed",
+}: Partial<
+  CalendarPopoverProps & {
+    rowHeight: number
+    /** this is here as a convenient way to test overlap */
+    strategy?: "absolute" | "fixed"
+  }
+>): JSX.Element => {
   const [referenceElement, setReferenceElement] =
     React.useState<HTMLDivElement | null>(null)
 
   return (
     <>
       <div
+        className="bg-orange-300 inline-block"
         ref={setReferenceElement}
-        style={{ paddingBottom: "24px", marginTop: `${rowHeight}px` }}
-      />
+        style={{ marginBottom: `${rowHeight}px` }}
+      >
+        Reference element
+      </div>
       <CalendarPopover
         referenceElement={referenceElement}
-        popperOptions={{
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [24, 0],
+        floatingOptions={{
+          strategy,
+          middleware: [
+            offset(15),
+            size({
+              apply({ availableHeight, availableWidth, elements }) {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${Math.max(availableHeight - 25, 155)}px`,
+                  maxWidth: `${availableWidth}px`,
+                })
               },
-            },
+            }),
+            autoPlacement({
+              // This needs to be here for testing purposes as the default behaviour
+              // will cause overlapping calendars in the table
+              allowedPlacements: ["bottom-start"],
+            }),
           ],
-          placement: "top-start",
         }}
       >
         {children}
@@ -73,13 +108,13 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Row>
 
         <StickerSheet.Row rowTitle="CalendarSingle">
-          <CalendarPopoverExample>
+          <CalendarPopoverExample rowHeight={350}>
             <CalendarSingle selected={new Date("2022-02-19")} />
           </CalendarPopoverExample>
         </StickerSheet.Row>
 
         <StickerSheet.Row rowTitle="CalendarRange">
-          <CalendarPopoverExample>
+          <CalendarPopoverExample rowHeight={350}>
             <CalendarRange
               selected={{
                 from: new Date("2022-02-19"),
@@ -90,8 +125,9 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Row>
 
         <StickerSheet.Row rowTitle="CalendarRange with divider">
-          <CalendarPopoverExample>
+          <CalendarPopoverExample rowHeight={350}>
             <CalendarRange
+              data-testid="sb-final-calendar"
               selected={{
                 from: new Date("2022-02-19"),
                 to: new Date("2022-03-04"),
@@ -118,3 +154,56 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: "rtl",
   },
 }
+
+export const StickerSheetResponsive: StickerSheetStory = {
+  name: "Sticker Sheet (Responsive)",
+  render: () => (
+    <>
+      <Text variant="intro-lede" classNameOverride="mb-12 ">
+        CalendarSingle scaled to availableHeight
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarSingle selected={new Date("2022-02-19")} />
+        </CalendarPopoverExample>
+      </div>
+      <Text variant="intro-lede" classNameOverride="mb-12 ">
+        CalendarRange scaled to availableHeight
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarRange
+            selected={{
+              from: new Date("2022-02-19"),
+              to: new Date("2022-03-04"),
+            }}
+            hasDivider
+          />
+        </CalendarPopoverExample>
+      </div>
+      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
+        CalendarSingle scaled to availableWidth
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarSingle selected={new Date("2022-03-19")} />
+        </CalendarPopoverExample>
+      </div>
+      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
+        CalendarRanger scaled to availableWidth
+      </Text>
+      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
+        <CalendarPopoverExample strategy="absolute">
+          <CalendarRange
+            data-testid="sb-final-calendar"
+            selected={{
+              from: new Date("2022-02-19"),
+              to: new Date("2022-03-04"),
+            }}
+            hasDivider
+          />
+        </CalendarPopoverExample>
+      </div>
+    </>
+  ),
+}

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/Heading/Heading.module.scss

@@ -1,5 +1,6 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/typography";
+@import "../../styles/foundation/_layers.css";
 
 @layer reset {
   .heading {