@kaizen/components 2.4.0 → 3.0.0

package/src/Notification/subcomponents/CancelButton/CancelButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Icon } from '~components/Icon'
-import styles from '../GenericNotification/GenericNotification.module.scss'
+import styles from '../GenericNotification/GenericNotification.module.css'
 
 type CancelButtonProps = {
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css

@@ -0,0 +1,392 @@
+:root {
+  --border-width: var(--border-width-1);
+  --notification-vertical-padding: calc(var(--spacing-6) - var(--border-width));
+  --notification-fade-out: opacity 200ms ease;
+  --notification-collapse-height: margin-top 200ms ease, margin-bottom 200ms ease;
+  --notification-collapse-height-delayed: margin-top 200ms ease 200ms, margin-bottom 200ms ease;
+  --notification-pop-up: transform 200ms ease-out;
+  --notification-slide-right: transform 300ms ease-out;
+}
+
+@layer kz-components {
+  /* Replace @extend %ca-notification from _mixin.scss */
+  .notification {
+    display: flex;
+    box-sizing: border-box;
+    pointer-events: all;
+
+    &:focus {
+      outline-offset: 1px;
+      outline: 2px solid var(--color-blue-500);
+    }
+  }
+
+  /* Variants */
+  .inline,
+  .toast {
+    margin-bottom: var(--spacing-24);
+    border-width: var(--border-width);
+    border-style: solid;
+    border-radius: var(--border-solid-border-radius);
+  }
+
+  .inline {
+    width: auto;
+    min-height: 46px;
+    padding: var(--notification-vertical-padding) var(--spacing-12);
+    transition:
+      var(--notification-fade-out), var(--notification-pop-up), var(--notification-collapse-height);
+  }
+
+  .toast {
+    container-type: inline-size;
+    width: 25rem;
+    box-shadow: var(--shadow-small-box-shadow);
+    max-width: 100%;
+    padding: var(--notification-vertical-padding) 10px;
+    transition:
+      var(--notification-fade-out), var(--notification-slide-right),
+      var(--notification-collapse-height-delayed);
+    will-change: transform;
+  }
+
+  .global {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-width: 0;
+    border-radius: 0;
+    margin-bottom: 0;
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-16);
+    padding-inline-start: var(--spacing-8);
+    transition: var(--notification-collapse-height);
+    position: relative;
+    z-index: 1030;
+  }
+
+  /* Types (colors) */
+  .success {
+    background: var(--color-green-100);
+    border-color: var(--color-green-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-green-500);
+  }
+
+  .informative {
+    background: var(--color-blue-100);
+    border-color: var(--color-blue-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-blue-500);
+  }
+
+  .cautionary,
+  .security {
+    background: var(--color-yellow-100);
+    border-color: var(--color-yellow-700);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-yellow-700);
+  }
+
+  .warning {
+    background: var(--color-red-100);
+    border-color: var(--color-red-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-red-500);
+  }
+
+  /* Hidden state */
+  .hidden {
+    opacity: 0;
+  }
+
+  .hidden.inline,
+  .hidden.global {
+    margin-bottom: 0;
+  }
+
+  .hidden.inline {
+    /*
+    When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
+    We want it moving the fastest when it is the furthest off screen.
+    */
+    transition-timing-function: ease-in;
+    transform: translateY(-50%);
+  }
+
+  .hidden.toast {
+    /*
+    When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
+    We want it moving the fastest when it is the furthest off screen.
+    */
+    transition-timing-function: ease-in;
+    transform: translateX(50%);
+  }
+
+  .hidden.global {
+    z-index: 1029;
+    opacity: 1;
+  }
+
+  /* Structure: .icon (from %ca-notification__icon) */
+  .icon {
+    align-items: flex-start;
+    box-sizing: content-box;
+    color: var(--icon-color);
+  }
+
+  .inline .icon,
+  .toast .icon {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+    margin-top: var(--spacing-6);
+  }
+
+  .global .icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+
+  /* Structure: .textContainer from %ca-notification__text-container */
+  .textContainer {
+    box-sizing: content-box;
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 0 0;
+  }
+
+  .inline .textContainer,
+  .toast .textContainer {
+    margin-inline-start: var(--spacing-6);
+  }
+
+  .toast .textContainer {
+    max-width: calc(100% - var(--spacing-48));
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+
+  .global .textContainer {
+    margin-inline-start: var(--spacing-8);
+  }
+
+  .inline .textContainer {
+    /*
+  Inline notifications often fade onto a white background.
+  Fading the higher-contrast text out at, as well as the whole container, makes for a smoother animation.  
+  */
+    transition: var(--notification-fade-out);
+  }
+
+  .forceMultiline {
+    flex-direction: column;
+  }
+
+  /* Structure: .title from %ca-notification__title */
+  .title {
+    position: relative;
+    font-family: var(--typography-heading-6-font-family);
+    font-weight: var(--typography-heading-6-font-weight);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
+    margin: 0;
+    padding-right: 6px;
+
+    /* overriding Bootstrap style that changes h6s to text-transform: uppercase */
+    text-transform: none;
+    color: inherit;
+    top: 0.37em;
+  }
+
+  .notificationTitle {
+    top: 0.42em;
+    position: relative;
+    margin-inline-end: var(--spacing-6);
+    line-height: var(--typography-heading-6-line-height);
+  }
+
+  @container (max-width: 25rem) {
+    .notificationTitle {
+      width: 100%;
+    }
+  }
+
+  /* Structure: .text from %ca-notification__text */
+  .text {
+    position: relative;
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+    margin: 0;
+    color: inherit;
+
+    a[href]:not([data-rac]) {
+      border-bottom: var(--spacing-1) solid var(--color-blue-500);
+      text-decoration: none;
+      color: var(--color-blue-500);
+
+      &:hover {
+        text-decoration: none;
+        color: var(--color-blue-600);
+        border-bottom: var(--spacing-1) solid var(--color-blue-600);
+      }
+    }
+
+    strong {
+      font-weight: var(--typography-button-secondary-font-weight);
+    }
+
+    p {
+      font-weight: inherit;
+    }
+  }
+
+  .inline .text,
+  .toast .text {
+    position: relative;
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+
+    /*
+    When the title and text are on different lines this ensures the baselines of the first lines are exactly 1 grid unit apart.
+    When they are both on a single line it ensures both are 1 grid unit tall.
+    */
+    margin-top: var(--spacing-6);
+    flex: 0 1 auto;
+    padding-bottom: var(--spacing-12);
+    top: 0.21em;
+  }
+
+  .toast .text {
+    width: 100%;
+  }
+
+  .global .text {
+    position: static;
+    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);
+  }
+
+  /* Structure: .cancel from %ca-notification__cancel */
+  .cancel {
+    cursor: pointer;
+    appearance: none;
+    transition: none;
+    transform: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: var(--color-purple-800);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-solid-border-radius);
+
+    .icon {
+      opacity: 0.7;
+      transition: var(--animation-duration-fast) opacity;
+    }
+
+    &:disabled,
+    &.disabled {
+      .icon {
+        opacity: 0.3;
+      }
+    }
+
+    &:not(:disabled, .disabled) {
+      &:hover,
+      &:focus,
+      &.hover {
+        .icon {
+          opacity: 1;
+        }
+      }
+
+      &:active,
+      &.active {
+        .icon {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -4px;
+    }
+  }
+
+  .inline .cancel,
+  .toast .cancel {
+    width: var(--spacing-48);
+    height: var(--spacing-48);
+    margin-top: calc(-1 * var(--spacing-6));
+    margin-bottom: calc(-1 * var(--spacing-6));
+  }
+
+  .inline .cancel {
+    margin-inline-end: calc(-1 * var(--spacing-12));
+  }
+
+  .toast .cancel {
+    margin-inline-end: -10px;
+  }
+
+  .global .cancel {
+    width: var(--spacing-48);
+    height: var(--spacing-48);
+    margin-top: calc(-1 * var(--spacing-24));
+    margin-bottom: calc(-1 * var(--spacing-24));
+  }
+
+  /* Structure: .cancelLabel from %ca-notification__cancel__label */
+  .cancelLabel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: rect(0 0 0 0);
+    border: 0;
+  }
+
+  /* Modifiers */
+  .noBottomMargin {
+    margin-bottom: 0;
+  }
+
+  .persistent {
+    transition: none;
+  }
+
+  /* This is only for inline notifications */
+  .subtle {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+}

package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx

@@ -7,7 +7,7 @@ import { isRefObject } from '~components/utils/isRefObject'
 import { CancelButton } from '../CancelButton'
 import { NotificationHeading } from '../NotificationHeading'
 import { NotificationIconVariant } from '../NotificationIcon'
-import styles from './GenericNotification.module.scss'
+import styles from './GenericNotification.module.css'
 
 type GenericNotificationBase = {
   style: 'global' | 'inline' | 'toast'

package/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Heading, type HeadingProps } from '~components/Heading'
-import styles from '../GenericNotification/GenericNotification.module.scss'
+import styles from '../GenericNotification/GenericNotification.module.css'
 
 type NotificationHeadingProps = {
   titleProp?: HeadingProps['children']

package/src/Select/Select.module.scss

@@ -22,8 +22,6 @@
 
 // Should match the values for the Input component
 $input-height: 48px;
-$input-placeholder-opacity: 0.7;
-
 $focus-border-color: $color-blue-500;
 
 %focus-border {
@@ -106,12 +104,6 @@ $focus-border-color: $color-blue-500;
     }
   }
 
-  .placeholder {
-    @include base-font-style;
-
-    opacity: $input-placeholder-opacity;
-  }
-
   .menu {
     // Temporary 6px until we redesign this component with Inter
     border: 6px $border-solid-border-style transparent;
@@ -227,10 +219,6 @@ $focus-border-color: $color-blue-500;
         color: $color-white;
       }
 
-      .placeholder {
-        color: $color-white;
-      }
-
       &.error {
         .control {
           border: $border-solid-border-width $border-solid-border-style $color-red-300;
@@ -304,10 +292,6 @@ $focus-border-color: $color-blue-500;
           border-color: $secondary-reversed-focus-color;
         }
       }
-
-      .placeholder {
-        color: $color-white;
-      }
     }
   }
 

package/src/Select/Select.tsx

@@ -1,11 +1,13 @@
 import React, { useId, useState } from 'react'
 import classnames from 'classnames'
+import { useButton } from 'react-aria'
 import ReactSelect, {
   components,
   type NoticeProps,
   type Props as ReactSelectProps,
 } from 'react-select'
 import Async, { type AsyncProps as ReactAsyncSelectProps } from 'react-select/async'
+import { ClearButton } from '~components/ClearButton'
 import { FieldMessage } from '~components/FieldMessage'
 import { Icon } from '~components/Icon'
 import { Label } from '~components/Label'
@@ -35,12 +37,14 @@ export type SelectProps = {
    * @default false
    */
   fullWidth?: boolean
-  /**
-   * @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
-} & ReactSelectProps<any, boolean>
+} & Omit<ReactSelectProps<any, boolean>, 'placeholder'>
+
+// react-select defaults to showing "Select..." placeholder text, which goes against our a11y
+// standards — use `label` for the field name and `description` for help text instead.
+// `noPlaceholderText` overrides the default string; `NullPlaceholder` removes the empty DOM node
+// that react-select still renders even when the text is empty.
+const noPlaceholderText = ''
+const NullPlaceholder = (): null => null
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
@@ -57,7 +61,6 @@ export const Select = React.forwardRef<any, SelectProps>(
       description,
       fullWidth: propsFullWidth,
       className: propsClassName,
-      placeholder,
       ...props
     },
     ref,
@@ -92,10 +95,10 @@ export const Select = React.forwardRef<any, SelectProps>(
           {...props}
           ref={ref}
           aria-labelledby={labelId}
-          placeholder={placeholder ?? ''}
+          placeholder={noPlaceholderText}
           components={{
             Control,
-            Placeholder,
+            Placeholder: NullPlaceholder,
             DropdownIndicator,
             Menu,
             GroupHeading,
@@ -120,17 +123,19 @@ export const Select = React.forwardRef<any, SelectProps>(
 Select.displayName = 'Select'
 
 interface AsyncProps
-  extends ReactAsyncSelectProps<any, boolean, any>, ReactSelectProps<any, boolean, any> {}
+  extends
+    Omit<ReactAsyncSelectProps<any, boolean, any>, 'placeholder'>,
+    Omit<ReactSelectProps<any, boolean, any>, 'placeholder'> {}
 
 export const AsyncSelect = React.forwardRef(
-  ({ className: propsClassName, placeholder, ...props }: AsyncProps, ref: React.Ref<any>) => (
+  ({ className: propsClassName, ...props }: AsyncProps, ref: React.Ref<any>) => (
     <Async
       {...props}
       ref={ref}
-      placeholder={placeholder ?? ''}
+      placeholder={noPlaceholderText}
       components={{
         Control,
-        Placeholder,
+        Placeholder: NullPlaceholder,
         DropdownIndicator,
         Menu,
         Option,
@@ -140,7 +145,7 @@ export const AsyncSelect = React.forwardRef(
         MultiValue,
         IndicatorsContainer,
         ValueContainer,
-        ClearIndicator: undefined,
+        ClearIndicator,
         IndicatorSeparator: null,
         LoadingMessage,
       }}
@@ -163,12 +168,6 @@ const Control: typeof components.Control = (props) => (
   </div>
 )
 
-const Placeholder: typeof components.Placeholder = (props) => (
-  <components.Placeholder {...props} className={styles.placeholderOverrides}>
-    <span className={styles.placeholder}>{props.children}</span>
-  </components.Placeholder>
-)
-
 const DropdownIndicator: typeof components.DropdownIndicator = (props) => (
   <components.DropdownIndicator {...props} className={styles.dropdownIndicator}>
     <Icon
@@ -235,8 +234,8 @@ const Input: typeof components.Input = (props) => (
 const ValueContainer: typeof components.ValueContainer = (props) => (
   <components.ValueContainer {...props} className={styles.valueContainer} />
 )
-const ClearIndicator: typeof components.ClearIndicator = (props) => (
-  <components.ClearIndicator {...props} className={styles.clearIndicator}>
-    <Icon name="cancel" isPresentational isFilled />
-  </components.ClearIndicator>
-)
+const ClearIndicator: typeof components.ClearIndicator = (props) => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const { buttonProps } = useButton({ ...props, onClick: props.clearValue }, buttonRef)
+  return <ClearButton {...buttonProps} classNameOverride={styles.clearIndicator} />
+}

package/src/SingleSelect/SingleSelect.tsx

@@ -10,7 +10,6 @@ import { Popover, useFloating } from '~components/MultiSelect/subcomponents/Popo
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { SelectProvider } from './context'
 import {
-  ListBox,
   ListBoxSection,
   ListItem,
   Option,
@@ -69,16 +68,11 @@ export type SingleSelectProps<Option extends SingleSelectOption = SingleSelectOp
    * Creates a portal for the Popover to the matching element id
    */
   portalContainerId?: string
-  /**
-   * @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
   /**
    * Handler that is called when the selection changes.
    */
   onSelectionChange?: (key: Key) => void
-} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
+} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps | 'placeholder'>>
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
@@ -98,7 +92,6 @@ export const SingleSelect = <Option extends SingleSelectOption = SingleSelectOpt
   classNameOverride,
   selectedKey,
   description,
-  placeholder = '',
   isDisabled,
   onSelectionChange,
   portalContainerId,
@@ -121,7 +114,6 @@ export const SingleSelect = <Option extends SingleSelectOption = SingleSelectOpt
     disabledKeys: disabledKeys,
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description,
-    placeholder,
     isDisabled,
     isRequired,
     onSelectionChange: onSelectionChange ? (key) => onSelectionChange(key!) : undefined,
@@ -158,7 +150,6 @@ export const SingleSelect = <Option extends SingleSelectOption = SingleSelectOpt
     'value': state?.selectedItem?.rendered,
     valueProps,
     'isOpen': state.isOpen,
-    placeholder,
     status,
     'isDisabled': triggerProps.isDisabled,
     isReversed,
@@ -225,7 +216,3 @@ SingleSelect.Section = ListBoxSection
 SingleSelect.SectionDivider = SectionDivider
 SingleSelect.Option = Option
 SingleSelect.ItemDefaultRender = ListItem
-
-// @deprecated Legacy exported aliases
-SingleSelect.TriggerButton = SelectToggle
-SingleSelect.ListBox = ListBox

package/src/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -6,6 +6,7 @@ import { FieldMessage } from '~components/FieldMessage'
 import { ContextModal } from '~components/Modal'
 import { RadioField, RadioGroup } from '~components/Radio'
 import { SingleSelect } from '../SingleSelect'
+import { SelectToggle } from '../subcomponents'
 import { type SingleSelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
@@ -125,13 +126,15 @@ export const AdditionalProperties: Story = {
 }
 
 const sourceCodeCustomiseTrigger = `
+import { SelectToggle } from '@kaizen/components/subcomponents'
+
 <SingleSelect
-  trigger={props => <SingleSelect.TriggerButton {...props} id="select--custom-trigger" />}
+  trigger={props => <SelectToggle {...props} id="select--custom-trigger" />}
 />
 `
 export const CustomiseTrigger: Story = {
   args: {
-    trigger: (props) => <SingleSelect.TriggerButton {...props} id="select--custom-trigger" />,
+    trigger: (props) => <SelectToggle {...props} id="select--custom-trigger" />,
   },
   parameters: {
     docs: {

package/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -63,10 +63,6 @@
     }
   }
 
-  .placeholder {
-    color: rgb($color-purple-800-rgb, 0.7);
-  }
-
   .error {
     border: $border-solid-border-width $border-solid-border-style $color-red-500;
   }
@@ -87,10 +83,6 @@
     background-color: transparent;
     color: $color-white;
 
-    &.placeholder {
-      color: rgba($color-white-rgb, 0.65);
-    }
-
     &.selectToggle .icon {
       color: rgb(255, 255, 255, 0.8);
     }