@kaizen/components 0.0.0-canary-fixed-fouc-bundle-20240530040956 → 0.0.0-canary-version-entries-poc-20240605062554

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/overlays/v1"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/DateInput/DateInput/DateInput.tsx

@@ -27,6 +27,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
     <div className={classnames(styles.dateInput, classNameOverride)}>
       <Label
         htmlFor={id}
+        id={`${id}-input-label`}
         labelText={labelText}
         reversed={isReversed}
         disabled={disabled}

package/src/DatePicker/DatePicker.spec.tsx

@@ -33,7 +33,7 @@ describe("<DatePicker />", () => {
 
   it("should have an empty input value when a date is not provided", () => {
     render(<DatePickerWrapper />)
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("")
   })
 
@@ -72,7 +72,7 @@ describe("<DatePicker />", () => {
 
   it("allows you to tab through input, button and calendar", async () => {
     render(<DatePickerWrapper />)
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
 
     await user.tab()
     await waitFor(() => {
@@ -112,7 +112,7 @@ describe("<DatePicker />", () => {
       screen.queryByText("05/01/2022 is not available, try another date")
     ).not.toBeInTheDocument()
 
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     await user.click(input)
 
     await waitFor(() => {
@@ -137,7 +137,7 @@ describe("<DatePicker /> - Focus element", () => {
     beforeEach(async () => {
       render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
     })
 
@@ -146,7 +146,7 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveFocus()
     })
 
@@ -157,7 +157,7 @@ describe("<DatePicker /> - Focus element", () => {
 
       await user.keyboard("{Escape}")
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveFocus()
     })
 
@@ -170,7 +170,7 @@ describe("<DatePicker /> - Focus element", () => {
       const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveFocus()
     })
   })
@@ -181,7 +181,7 @@ describe("<DatePicker /> - Focus element", () => {
     })
 
     it("shows focus within the calendar", async () => {
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
       await waitFor(() => {
         expect(input).toHaveFocus()
@@ -198,7 +198,7 @@ describe("<DatePicker /> - Focus element", () => {
     })
 
     it("returns focus to the input when the user escapes from the calendar", async () => {
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
       await waitFor(() => {
         expect(input).toHaveFocus()
@@ -303,7 +303,7 @@ describe("<DatePicker /> - Input format", () => {
   it("formats values when focus is on the input", async () => {
     render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
 
     await user.click(input)
@@ -316,7 +316,7 @@ describe("<DatePicker /> - Input format", () => {
   it("formats values when the input loses focus - onBlur", async () => {
     render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
 
     await user.click(input)
@@ -409,7 +409,7 @@ describe("<DatePicker /> - Validation", () => {
           defaultMonth={new Date("2022-03-01")}
         />
       )
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
       await waitFor(() => {
         expect(screen.queryByRole("dialog")).toBeVisible()
@@ -449,7 +449,7 @@ describe("<DatePicker /> - Validation", () => {
     it("displays error message when input date is invalid", async () => {
       render(<DatePickerWrapper />)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022Blah")
 
       await user.tab()
@@ -464,7 +464,7 @@ describe("<DatePicker /> - Validation", () => {
     it("displays error message when input date is disabled", async () => {
       render(<DatePickerWrapper disabledBefore={new Date("2022-05-15")} />)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022")
 
       await user.tab()

package/src/DatePicker/DatePicker.tsx

@@ -16,6 +16,7 @@ import {
   setFocusInCalendar,
 } from "~components/Calendar"
 import { CalendarPopover } from "~components/Calendar/CalendarPopover"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import {
   DateInputField,
   DateInputFieldProps,
@@ -305,17 +306,25 @@ export const DatePicker = ({
       </div>
 
       {isOpen && (
-        <CalendarPopover referenceElement={containerRef.current}>
-          <CalendarSingle
-            id={calendarId}
-            selected={selectedDay}
-            defaultMonth={defaultMonth}
-            weekStartsOn={weekStartsOn}
-            disabled={disabledDays}
-            locale={locale}
-            onDayClick={handleCalendarDayChange}
-            onMount={handleCalendarMount}
-          />
+        <CalendarPopover
+          referenceElement={containerRef.current}
+          aria-labelledby={`${id}-calendar-label ${id}-input-label`}
+        >
+          <>
+            <VisuallyHidden id={`${id}-calendar-label`}>
+              Select date from calendar for:
+            </VisuallyHidden>
+            <CalendarSingle
+              id={calendarId}
+              selected={selectedDay}
+              defaultMonth={defaultMonth}
+              weekStartsOn={weekStartsOn}
+              disabled={disabledDays}
+              locale={locale}
+              onDayClick={handleCalendarDayChange}
+              onMount={handleCalendarMount}
+            />
+          </>
         </CalendarPopover>
       )}
     </FocusOn>

package/src/DateRangePicker/DateRangePicker.tsx

@@ -15,6 +15,7 @@ import {
 } from "~components/Calendar/LegacyCalendarRange"
 import { DateStartIcon } from "~components/Icon"
 import { Label } from "~components/Label"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./DateRangePicker.module.scss"
 
 export type DateRangePickerProps = {
@@ -146,7 +147,12 @@ export const DateRangePicker = ({
   return (
     <div>
       <div ref={containerRef} className={classNameOverride}>
-        <Label disabled={isDisabled} htmlFor={id} labelText={labelText} />
+        <Label
+          id={`${id}-input-label`}
+          disabled={isDisabled}
+          htmlFor={id}
+          labelText={labelText}
+        />
         <button
           type="button"
           id={id}
@@ -178,7 +184,13 @@ export const DateRangePicker = ({
           onEscapeKey={handleOpenClose}
           enabled={isOpen}
         >
-          <CalendarPopover referenceElement={containerRef.current}>
+          <CalendarPopover
+            referenceElement={containerRef.current}
+            aria-labelledby={`${id}-calendar-label ${id}-input-label`}
+          >
+            <VisuallyHidden id={`${id}-calendar-label`}>
+              Select dates from calendar for:
+            </VisuallyHidden>
             <LegacyCalendarRange
               selectedRange={selectedDateRange}
               defaultMonth={defaultMonth}

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { Canvas, DocsStory, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as DateRangePickerStories from "./DateRangePicker.stories"
 
@@ -28,3 +28,7 @@ Date range picker form field.
 ## 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).
+
+<DocsStory of={DateRangePickerStories.AboveIfAvailable} />
+<DocsStory of={DateRangePickerStories.LimitedViewportHeight} />
+<DocsStory of={DateRangePickerStories.FullViewportHeight} />

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { fn } from "@storybook/test"
+import { userEvent, within, expect, fn } from "@storybook/test"
 import { DateRange } from "react-day-picker"
 import { DateRangePicker, formatDateRangeValue } from "../index"
 
@@ -20,8 +20,8 @@ type Story = StoryObj<typeof meta>
 const DateRangePickerTemplate: Story = {
   render: args => {
     const [selectedDateRange, setSelectedDateRange] = useState<DateRange>({
-      from: undefined,
-      to: undefined,
+      from: args?.selectedDateRange?.from,
+      to: args?.selectedDateRange?.to,
     })
     const [value, setValue] = useState(args.value)
 
@@ -58,3 +58,99 @@ export const Playground: Story = {
     },
   },
 }
+
+const selectedDateRange = {
+  from: new Date(2022, 2, 6),
+  to: new Date(2022, 2, 15),
+}
+
+export const AboveIfAvailable: Story = {
+  ...DateRangePickerTemplate,
+  name: "Limited viewport autoplacement above",
+  args: {
+    labelText: "Calendar with space above",
+    selectedDateRange,
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "500px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportAutoPlace",
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="mt-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const LimitedViewportHeight: Story = {
+  ...DateRangePickerTemplate,
+  name: "Limited viewport height",
+  args: {
+    labelText: "Calendar with reduced space below",
+    selectedDateRange,
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportHeight: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "300px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportHeight",
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[150px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const FullViewportHeight: Story = {
+  ...DateRangePickerTemplate,
+  name: "Full viewport height",
+  args: {
+    labelText: "Calendar with full space below",
+    selectedDateRange,
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}

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

@@ -25,21 +25,11 @@ const FieldGroupTemplate = ({
   <div>
     <FieldGroup inline={inline} classNameOverride="mr-6">
       <Label htmlFor={`id--field-${id}`}>Email</Label>
-      <input
-        className="border border-gray-500"
-        placeholder="Native text input..."
-        type="text"
-        id="id--field-2"
-      />
+      <input className="border border-gray-500" type="text" id="id--field-2" />
     </FieldGroup>
     <FieldGroup inline={inline}>
       <Label htmlFor={`id--field-${id}`}>Username</Label>
-      <input
-        className="border border-gray-500"
-        placeholder="Native text input..."
-        type="text"
-        id="id--field-2"
-      />
+      <input className="border border-gray-500" type="text" id="id--field-2" />
     </FieldGroup>
   </div>
 )

package/src/FieldGroup/_docs/FieldGroup.stories.tsx

@@ -12,7 +12,6 @@ const meta = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-1"
         />
@@ -42,16 +41,14 @@ export const Inline: Story = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
-          id="id--field-2"
+          id="id--field-1"
         />
       </FieldGroup>
       <FieldGroup inline>
-        <Label htmlFor="id--field-1">Username</Label>
+        <Label htmlFor="id--field-2">Username</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-2"
         />
@@ -67,16 +64,14 @@ export const Default: Story = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
-          id="id--field-2"
+          id="id--field-1"
         />
       </FieldGroup>
       <FieldGroup>
-        <Label htmlFor="id--field-1">Username</Label>
+        <Label htmlFor="id--field-2">Username</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-2"
         />

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { ClearIcon } from "~components/Icon"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/overlays/v1"
 import { DataAttributes } from "~types/DataAttributes"
 import { isRefObject } from "~utils/isRefObject"
 import { FilterButton, FilterButtonProps } from "../FilterButton"

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -6,7 +6,7 @@ import { Heading, HeadingProps } from "~components/Heading"
 import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { Tooltip, TooltipProps } from "~components/Tooltip"
+import { Tooltip, TooltipProps } from "~components/overlays/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
 

package/src/Input/Input/Input.tsx

@@ -14,6 +14,11 @@ export type InputProps = {
   endIconAdornment?: React.ReactNode
   reversed?: boolean
   type?: InputType
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
+  placeholder?: string
 } & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>
 
 export const Input = ({

package/src/Input/InputSearch/InputSearch.spec.tsx

@@ -12,10 +12,12 @@ const defaultInputProps = {
   onChange: jest.fn(),
 }
 
-const renderInput = (props?: InputSearchProps): ReturnType<typeof render> => {
+const renderInput = (
+  props?: Omit<InputSearchProps, "id">
+): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultInputProps, ...props }
 
-  return render(<InputSearch {...mergedInputProps} />)
+  return render(<InputSearch {...mergedInputProps} data-testid="someInputId" />)
 }
 
 describe("<InputSearch />", () => {
@@ -28,9 +30,10 @@ describe("<InputSearch />", () => {
   })
 
   it("should call the `onChange` event when text value is updated", async () => {
-    const placeholder = "someInputPlaceholder"
-    const utils = renderInput({ value: "", placeholder, id: "someInputId" })
-    const input = utils.getByPlaceholderText(placeholder)
+    const utils = renderInput({
+      value: "",
+    })
+    const input = utils.getByTestId("someInputId")
 
     await user.type(input, "Hello")
     await waitFor(() => {
@@ -39,12 +42,12 @@ describe("<InputSearch />", () => {
   })
 
   it("should render a disabled inside of input", () => {
-    const { container } = renderInput({ disabled: true, id: "someInputId" })
+    const { container } = renderInput({ disabled: true })
     expect(container.querySelector("[disabled]")).toBeTruthy()
   })
 
   it("should render a reversed input", () => {
-    const { container } = renderInput({ reversed: true, id: "someInputId" })
+    const { container } = renderInput({ reversed: true })
     expect(container.querySelector(".reversed")).toBeTruthy()
   })
 })

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.module.scss

@@ -12,7 +12,7 @@
   right: $spacing-md;
   top: 0;
   bottom: 0;
-  z-index: 1030;
+  z-index: 1100;
   max-width: 100%;
   pointer-events: none;
 

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.module.scss

@@ -2,25 +2,43 @@
 @import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.editorLabel {
+  margin-bottom: $spacing-6;
+  display: inline-block;
+}
 
 .editableContainer :global(.ProseMirror) {
-  padding: $spacing-sm;
+  padding: calc($spacing-12 - $border-solid-border-width);
   position: relative;
   border-radius: $border-solid-border-radius;
-  border: $border-focus-ring-border-width $border-focus-ring-border-style
-    transparent;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
   transition:
     background-color $animation-duration-immediate,
     border-color $animation-duration-immediate;
-  background-color: $color-gray-200;
+  background-color: $color-white;
+  min-height: $typography-paragraph-body-line-height;
 }
 
 .editableContainer:hover :global(.ProseMirror) {
   background-color: $color-gray-200;
-  border-color: $color-blue-500;
 }
 
 .editableContainer .hiddenButton:focus-within + * > :global(.ProseMirror) {
-  border: $border-focus-ring-border-width $border-focus-ring-border-style
-    $color-blue-500;
+  background-color: $color-gray-200;
+
+  &::before {
+    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    background: transparent;
+    border: $border-focus-ring-border-width $border-focus-ring-border-style
+      $color-blue-500;
+    border-radius: 10px;
+    inset: calc(-1 * #{$focus-ring-offset});
+    z-index: 1;
+  }
 }

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.tsx

@@ -37,7 +37,9 @@ export const EditableRichTextContent = ({
   ...restProps
 }: EditableRichTextContentProps): JSX.Element => (
   <>
-    {!isLabelHidden && <Label labelText={labelText} />}
+    {!isLabelHidden && (
+      <Label classNameOverride={styles.editorLabel} labelText={labelText} />
+    )}
     {/* Disabling these a11y linting errors because there is a <button> that mitigates these concerns. The onClick here is just an additional layer. */}
     {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
     <div

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as EditableRichTextContentStories from "./EditableRichTextContent.stories"
 
 <Meta of={EditableRichTextContentStories} />
@@ -15,15 +15,17 @@ import * as EditableRichTextContentStories from "./EditableRichTextContent.stori
 
 ## Overview
 
-To render the contents of your <LinkTo pageId="components-richtexteditor">RichTextEditor</LinkTo> using the same structure for both components.
+To render the contents of your [RichTextEditor](/docs/components-richtexteditor-richtexteditor--docs) using the same structure for both components.
 
 <Canvas of={EditableRichTextContentStories.Playground} />
 <Controls of={EditableRichTextContentStories.Playground} />
 
 ## Usage
 
-The general idea is to use this component in combination with the <LinkTo pageId="components-richtexteditor">RichTextEditor</LinkTo> to toggle between a read only state
-and an editable state.
+The `EditableRichTextContent` indicates interactivity similar to a `text` or `textarea` input and should be used in combination with the [RichTextEditor](/docs/components-richtexteditor-richtexteditor--docs) to toggle between inactive and editable states.
+
+This differs from the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs) component, which is used to render `RichTextEditor` content as read-only text.
+
 
 ```tsx
 const [editMode, setEditMode] = useState<boolean>(false);