@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

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

@@ -4,109 +4,107 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/animation';
 
-@layer kz-components {
-  $heading-active-color: $color-gray-200;
-  $divider-color: rgba($color-gray-600-rgb, 0.2);
-  $container-border-width: var(--border-width-1);
-
-  // We need a full border radius on this container element, then have classes
-  // beneath to toggle nested borders off and on for different use cases.
-  .container {
-    background-color: $color-white;
-    box-shadow: $shadow-small-box-shadow;
-    border: $container-border-width var(--border-solid-border-style) var(--color-gray-500);
-    border-radius: $border-borderless-border-radius;
-  }
+$heading-active-color: $color-gray-200;
+$divider-color: rgba($color-gray-600-rgb, 0.2);
+$container-border-width: var(--border-width-1);
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: $color-white;
+  box-shadow: $shadow-small-box-shadow;
+  border: $container-border-width var(--border-solid-border-style) var(--color-gray-500);
+  border-radius: $border-borderless-border-radius;
+}
 
-  .header {
-    display: flex;
-    align-items: center;
-    text-align: start;
-    background-color: $color-white;
-    border: none;
-    border-radius: var(--border-borderless-border-radius);
-    transition: background-color $animation-duration-rapid;
-    padding-block: calc(var(--spacing-12) - #{$container-border-width});
-    padding-inline: var(--spacing-24) var(--spacing-12);
-
-    &:hover {
-      background-color: $heading-active-color;
-    }
-
-    // Round the bottom corners of the header so when the container is open, the
-    // header background is not rounded on the corners and flush with the content beneath.
-    &.open {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+.header {
+  display: flex;
+  align-items: center;
+  text-align: start;
+  background-color: $color-white;
+  border: none;
+  border-radius: var(--border-borderless-border-radius);
+  transition: background-color $animation-duration-rapid;
+  padding-block: calc(var(--spacing-12) - #{$container-border-width});
+  padding-inline: var(--spacing-24) var(--spacing-12);
+
+  &:hover {
+    background-color: $heading-active-color;
   }
 
-  .separated {
-    & + .separated {
-      margin-top: calc(#{$spacing-md} * 0.3);
-      margin-right: 0;
-      margin-left: 0;
-    }
+  // Round the bottom corners of the header so when the container is open, the
+  // header background is not rounded on the corners and flush with the content beneath.
+  &.open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
+}
 
-  // When a collapsible group is rendered, we need the first group to have a rounded
-  // on top and the last group to have a rounded bottom edge. Then when the last group
-  // is open we remove the rounded edge as the content sits beneath and needs to be straight.
-  .groupItem {
-    & + .groupItem {
-      border-top: 1px $border-solid-border-style $divider-color;
-    }
-
-    .header {
-      border-radius: 0;
-      padding-block: var(--spacing-12);
-    }
-
-    &:first-of-type > .header {
-      border-top-left-radius: $border-borderless-border-radius;
-      border-top-right-radius: $border-borderless-border-radius;
-      padding-block-start: calc(var(--spacing-12) - #{$container-border-width});
-    }
-
-    &:last-of-type > .header:not(.open) {
-      border-bottom-left-radius: $border-borderless-border-radius;
-      border-bottom-right-radius: $border-borderless-border-radius;
-      padding-block-end: calc(var(--spacing-12) - #{$container-border-width});
-    }
+.separated {
+  & + .separated {
+    margin-top: calc(#{$spacing-md} * 0.3);
+    margin-right: 0;
+    margin-left: 0;
   }
+}
 
-  .chevronButton:hover {
-    // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
-    background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+// When a collapsible group is rendered, we need the first group to have a rounded
+// on top and the last group to have a rounded bottom edge. Then when the last group
+// is open we remove the rounded edge as the content sits beneath and needs to be straight.
+.groupItem {
+  & + .groupItem {
+    border-top: 1px $border-solid-border-style $divider-color;
   }
 
-  .title {
-    flex: 1 1 auto;
+  .header {
+    border-radius: 0;
+    padding-block: var(--spacing-12);
   }
 
-  .defaultVariant {
-    background-color: $heading-active-color;
+  &:first-of-type > .header {
+    border-top-left-radius: $border-borderless-border-radius;
+    border-top-right-radius: $border-borderless-border-radius;
+    padding-block-start: calc(var(--spacing-12) - #{$container-border-width});
   }
 
-  .clearVariant {
-    border-bottom: 1px $border-solid-border-style $divider-color;
+  &:last-of-type > .header:not(.open) {
+    border-bottom-left-radius: $border-borderless-border-radius;
+    border-bottom-right-radius: $border-borderless-border-radius;
+    padding-block-end: calc(var(--spacing-12) - #{$container-border-width});
   }
+}
 
-  .sticky {
-    position: -webkit-sticky; /* stylelint-disable-line value-no-vendor-prefix */
-    position: sticky;
-    z-index: 10;
-  }
+.chevronButton:hover {
+  // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
 
-  .section {
-    padding: var(--spacing-24);
-  }
+.title {
+  flex: 1 1 auto;
+}
 
-  .noPadding {
-    padding: 0;
-  }
+.defaultVariant {
+  background-color: $heading-active-color;
+}
 
-  .hide {
-    display: none;
-  }
+.clearVariant {
+  border-bottom: 1px $border-solid-border-style $divider-color;
+}
+
+.sticky {
+  position: -webkit-sticky; /* stylelint-disable-line value-no-vendor-prefix */
+  position: sticky;
+  z-index: 10;
+}
+
+.section {
+  padding: var(--spacing-24);
+}
+
+.noPadding {
+  padding: 0;
+}
+
+.hide {
+  display: none;
 }

package/src/Collapsible/CollapsibleGroup/CollapsibleGroup.module.scss

@@ -1,13 +1,11 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/shadow';
 
-@layer kz-components {
-  // We need a full border radius on this container element, then have classes
-  // beneath to toggle nested borders off and on for different use cases.
-  .container {
-    background-color: white;
-    box-shadow: $shadow-small-box-shadow;
-    border: var(--border-width-1) var(--border-solid-border-style) var(--color-gray-500);
-    border-radius: $border-borderless-border-radius;
-  }
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: white;
+  box-shadow: $shadow-small-box-shadow;
+  border: var(--border-width-1) var(--border-solid-border-style) var(--color-gray-500);
+  border-radius: $border-borderless-border-radius;
 }

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

@@ -2,48 +2,46 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .expertAdviceContainer {
-    background-color: $color-purple-100;
-    border: var(--border-width-1) var(--border-solid-border-style) var(--color-purple-400);
-    box-shadow: none;
-    color: $color-purple-800;
-
-    &: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;
-    }
+.expertAdviceContainer {
+  background-color: $color-purple-100;
+  border: var(--border-width-1) var(--border-solid-border-style) var(--color-purple-400);
+  box-shadow: none;
+  color: $color-purple-800;
+
+  &:hover {
+    border-color: $color-purple-500;
   }
+}
 
-  .expertAdviceHeader {
+// Override Collapsible header
+.expertAdviceContainer > div {
+  &:first-of-type {
     background-color: $color-purple-100;
-    flex: 1 1 auto;
-    align-items: center;
-    display: flex;
+    border-radius: $border-borderless-border-radius;
   }
+}
 
-  .expertAdviceHeading {
-    color: $color-purple-600;
+.expertAdviceHeader {
+  background-color: $color-purple-100;
+  flex: 1 1 auto;
+  align-items: center;
+  display: flex;
+}
 
-    .expertAdviceContainer:hover & {
-      color: $color-purple-700;
-    }
-  }
+.expertAdviceHeading {
+  color: $color-purple-600;
 
-  .expertAdviceIcon {
-    margin-inline-end: $spacing-sm;
-    width: 1.75rem;
-    height: 1.75rem;
+  .expertAdviceContainer:hover & {
+    color: $color-purple-700;
   }
+}
 
-  .expertAdviceSection {
-    padding: 0 $spacing-md $spacing-md;
-  }
+.expertAdviceIcon {
+  margin-inline-end: $spacing-sm;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.expertAdviceSection {
+  padding: 0 $spacing-md $spacing-md;
 }

package/src/Container/Container.module.scss

@@ -1,15 +1,13 @@
-@layer kz-components {
-  .container {
-    display: flex;
-    width: 100%;
-    justify-content: center;
+.container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
 
-    * {
-      &,
-      &::after,
-      &::before {
-        box-sizing: border-box;
-      }
+  * {
+    &,
+    &::after,
+    &::before {
+      box-sizing: border-box;
     }
   }
 }

package/src/Content/Content.module.scss

@@ -1,17 +1,15 @@
 @import '~@kaizen/design-tokens/sass/layout';
 @import './variables';
 
-@layer kz-components {
-  .content {
-    max-width: $layout-content-max-width;
-    margin: 0 $layout-content-side-margin;
-    width: 100%;
+.content {
+  max-width: $layout-content-max-width;
+  margin: 0 $layout-content-side-margin;
+  width: 100%;
 
-    // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
-    min-width: 0;
+  // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
+  min-width: 0;
 
-    @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-      margin: 0 $content-margin-width-on-medium-and-small;
-    }
+  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+    margin: 0 $content-margin-width-on-medium-and-small;
   }
 }

package/src/DateInput/DateInput/DateInput.module.scss

@@ -1,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .dateInput {
-    width: 100%;
-  }
+.dateInput {
+  width: 100%;
+}
 
-  .input {
-    margin-top: $spacing-6;
-  }
+.input {
+  margin-top: $spacing-6;
 }

package/src/DateInput/DateInputDescription/DateInputDescription.module.scss

@@ -1,21 +1,19 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .dateInputDescription {
-    display: inline;
-  }
+.dateInputDescription {
+  display: inline;
+}
 
-  .dateInputFormatContainer {
-    margin-inline-start: $spacing-xs;
-    white-space: nowrap;
-  }
+.dateInputFormatContainer {
+  margin-inline-start: $spacing-xs;
+  white-space: nowrap;
+}
 
-  .descriptionInputFormat {
-    display: inline-flex;
-    white-space: nowrap;
-  }
+.descriptionInputFormat {
+  display: inline-flex;
+  white-space: nowrap;
+}
 
-  .labelSeparator {
-    margin-inline-end: $spacing-xs;
-  }
+.labelSeparator {
+  margin-inline-end: $spacing-xs;
 }

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss

@@ -4,41 +4,39 @@
 @import '../../../styles/utils/animation';
 @import '../../../styles/utils/button-reset';
 
-@layer kz-components {
-  $input-disabled-opacity: 0.3;
-
-  .iconButton {
-    @include button-reset;
-
-    display: flex;
-    padding: var(--spacing-6);
-    border: $border-solid-border-width $border-solid-border-style transparent;
-    border-radius: $border-solid-border-radius;
-    position: relative;
-    inset-inline-end: -0.35rem;
-    top: -40%;
-
-    :focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline-offset: -2px;
-      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-    }
-
-    &:hover:not([disabled]) {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+$input-disabled-opacity: 0.3;
+
+.iconButton {
+  @include button-reset;
+
+  display: flex;
+  padding: var(--spacing-6);
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $border-solid-border-radius;
+  position: relative;
+  inset-inline-end: -0.35rem;
+  top: -40%;
+
+  :focus {
+    outline: none;
   }
 
-  .calendarActive {
-    color: $color-blue-500;
-    background-color: $color-blue-100;
+  &:focus-visible {
+    outline-offset: -2px;
+    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
   }
 
-  .disabled {
-    opacity: $input-disabled-opacity;
+  &:hover:not([disabled]) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
 }
+
+.calendarActive {
+  color: $color-blue-500;
+  background-color: $color-blue-100;
+}
+
+.disabled {
+  opacity: $input-disabled-opacity;
+}

package/src/DatePicker/DatePicker.module.scss

@@ -1,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .datePicker {
-    color: $color-purple-800;
-  }
+.datePicker {
+  color: $color-purple-800;
+}
 
-  .isReversed {
-    color: $color-yellow-600;
-  }
+.isReversed {
+  color: $color-yellow-600;
 }

package/src/DatePicker/DatePicker.spec.tsx

@@ -91,8 +91,11 @@ describe('<DatePicker />', () => {
       expect(screen.getByRole('dialog')).toBeVisible()
     })
 
-    // TODO: For some reason a single tab no longer jumps out of input to the button
     await user.tab()
+    await waitFor(() => {
+      expect(input).toHaveFocus()
+    })
+
     await user.tab()
     await waitFor(() => {
       const calendarButton = screen.getByRole('button', { name: 'Choose date' })
@@ -102,7 +105,7 @@ describe('<DatePicker />', () => {
     await user.tab()
     await waitFor(() => {
       const arrowButton = screen.getByRole('button', {
-        name: /Go to the previous month/i,
+        name: 'Go to previous month',
       })
       expect(arrowButton).toHaveFocus()
     })
@@ -165,8 +168,7 @@ describe('<DatePicker /> - Focus element', () => {
 
       const month = screen.getByRole('grid', { name: 'March 2022' })
       const dateToSelect = within(month).getByRole('gridcell', { name: '6' })
-      const dateToSelectButton = within(dateToSelect).getByRole('button')
-      await user.click(dateToSelectButton)
+      await user.click(dateToSelect)
 
       const input = screen.getByLabelText('Input label', { selector: 'input' })
       expect(input).toHaveFocus()
@@ -190,8 +192,7 @@ describe('<DatePicker /> - Focus element', () => {
 
       const month = screen.getByRole('grid', { name: 'March 2022' })
       const selectedDate = within(month).getByRole('gridcell', { name: '1' })
-      const selectedDateButton = within(selectedDate).getByRole('button')
-      expect(selectedDateButton).toHaveFocus()
+      expect(selectedDate).toHaveFocus()
     })
 
     it('returns focus to the input when the user escapes from the calendar', async () => {
@@ -232,8 +233,7 @@ describe('<DatePicker /> - Focus element', () => {
 
       const month = screen.getByRole('grid', { name: 'March 2022' })
       const selectedDate = within(month).getByRole('gridcell', { name: '1' })
-      const selectedDateButton = within(selectedDate).getByRole('button')
-      expect(selectedDateButton).toHaveFocus()
+      expect(selectedDate).toHaveFocus()
     })
 
     it('returns focus to the calendar button when the user escapes from the calendar', async () => {
@@ -277,8 +277,7 @@ describe('<DatePicker /> - Focus element', () => {
 
       const month = screen.getByRole('grid', { name: 'March 2022' })
       const selectedDate = within(month).getByRole('gridcell', { name: '1' })
-      const selectedDateButton = within(selectedDate).getByRole('button')
-      expect(selectedDateButton).toHaveFocus()
+      expect(selectedDate).toHaveFocus()
     })
 
     it('returns focus to the input when the user escapes from the calendar', async () => {

package/src/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useId, useRef, useState, type RefObject } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
-import { type DayEventHandler } from 'react-day-picker'
+import { type DayClickEventHandler } from 'react-day-picker'
 import { FocusOn } from 'react-focus-on'
 import {
   CalendarSingle,
@@ -161,7 +161,7 @@ export const DatePicker = ({
     onDayChange(newDate)
   }
 
-  const handleCalendarDayChange: DayEventHandler<React.MouseEvent> = (date) => {
+  const handleCalendarDayChange: DayClickEventHandler = (date) => {
     if (!isDisabledDate(date, disabledDays)) {
       const newInputValue =
         lastTrigger === 'calendarButton'

package/src/DatePicker/subcomponents/DateInputField/DateInputField.module.scss

@@ -1,7 +1,5 @@
-@layer kz-components {
-  $input-disabled-opacity: 0.3;
+$input-disabled-opacity: 0.3;
 
-  .disabled {
-    opacity: $input-disabled-opacity;
-  }
+.disabled {
+  opacity: $input-disabled-opacity;
 }