@kaizen/components 2.5.0 → 3.0.0

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

@@ -8,7 +8,6 @@
   $input-height: 48px;
   $input-base-padding-horizontal: $spacing-sm;
   $input-icon-size: 1.25rem; // 20px
-  $input-placeholder-opacity: 0.5;
   $input-disabled-background: $color-gray-300;
   $input-disabled-opacity: 0.3;
   $input-disabled-border-alpha: 50%;
@@ -45,29 +44,17 @@
     width: 100%;
     margin-bottom: 2px;
 
-    @include form-input-placeholder {
-      opacity: 100%;
-    }
-
     &:focus:not([disabled]),
     &:hover:focus:not([disabled]) {
       outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
         var(--color-blue-500);
       outline-offset: 1px;
-
-      @include form-input-placeholder {
-        opacity: 0%;
-      }
     }
 
     &.disabled {
       &:not(.reversed) {
         background: $input-disabled-background;
       }
-
-      @include form-input-placeholder {
-        color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-      }
     }
   }
 
@@ -204,11 +191,6 @@
     display: flex;
     align-items: center;
 
-    @include form-input-placeholder {
-      color: $color-purple-800;
-      opacity: $input-placeholder-opacity;
-    }
-
     @include form-input-focus-state {
       background-color: $color-gray-200;
     }
@@ -221,10 +203,6 @@
       background-color: $color-white;
       border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
       color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-
-      @include form-input-placeholder {
-        opacity: $input-disabled-opacity;
-      }
     }
 
     &:not(.error, .caution) {
@@ -261,11 +239,6 @@
     background: transparent;
     color: $color-white;
 
-    @include form-input-placeholder {
-      color: $color-white;
-      opacity: $input-placeholder-opacity;
-    }
-
     @include form-input-focus-state {
       background: rgba($color-white-rgb, 0.1);
     }
@@ -289,10 +262,6 @@
     &.disabled {
       background: transparent;
       color: rgba($color-white-rgb, $input-disabled-opacity);
-
-      @include form-input-placeholder {
-        opacity: $input-disabled-opacity;
-      }
     }
 
     &.error {

package/src/Input/Input/Input.tsx

@@ -14,12 +14,7 @@ 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>>
+} & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, 'placeholder'>>
 
 export const Input = ({
   inputRef,

package/src/LinkButton/LinkButton.tsx

@@ -25,13 +25,11 @@ export const LinkButton = forwardRef(
       isFullWidth = false,
       isDisabled,
       className,
-      isReversed,
       ...otherProps
     }: LinkButtonProps,
     ref: React.ForwardedRef<HTMLAnchorElement>,
   ) => {
-    const shouldUseReverse = useReversedColors()
-    const isReversedVariant = isReversed ?? shouldUseReverse
+    const isReversedVariant = useReversedColors()
 
     return (
       <RACLink

package/src/LinkButton/_docs/LinkButton--api-specification.mdx

@@ -39,7 +39,6 @@ The following example and table showcases the essential props that enable the co
     'variant',
     'icon',
     'iconPosition',
-    'isReversed',
     'isFullWidth',
     'isDisabled',
   ]}

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -102,7 +102,12 @@ export const ConfirmationModal = ({
   const footerActions: ButtonProps[] = []
 
   if (onConfirm) {
-    const confirmAction = { label: confirmLabel, onClick: onConfirm }
+    const confirmAction = {
+      label: confirmLabel,
+      onClick: onConfirm,
+      destructive: variant === 'warning',
+      primary: variant !== 'warning',
+    }
     const workingProps = confirmWorking
       ? {
           working: true,
@@ -154,11 +159,7 @@ export const ConfirmationModal = ({
             <ModalAccessibleDescription>{children}</ModalAccessibleDescription>
           </div>
         </ModalBody>
-        <ModalFooter
-          actions={footerActions}
-          appearance={variant == 'warning' ? 'destructive' : 'primary'}
-          unpadded={unpadded}
-        />
+        <ModalFooter actions={footerActions} unpadded={unpadded} />
       </div>
     </GenericModal>
   )

package/src/Modal/ContextModal/ContextModal.tsx

@@ -133,7 +133,6 @@ export const ContextModal = ({
         <ModalFooter
           variant={image ? 'context' : undefined}
           actions={footerActions}
-          appearance="primary"
           unpadded={unpadded}
         />
       </div>

package/src/Modal/GenericModal/GenericModal.tsx

@@ -5,7 +5,6 @@ import classnames from 'classnames'
 import { FocusOn } from 'react-focus-on'
 import { useIsClientReady } from '../../utils/useIsClientReady'
 
-import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
 import styles from './GenericModal.module.scss'
 
@@ -63,9 +62,9 @@ export const GenericModal = ({
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
-      warn(
-        `When using the Modal component, you must provide a label for the modal.
-        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.`,
+      // eslint-disable-next-line no-console
+      console.warn(
+        'When using the Modal component, you must provide a label for the modal. Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.',
       )
     }
   }

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx

@@ -18,10 +18,6 @@ export type ModalFooterProps = {
   'variant'?: ActionsVariantProps
   'unpadded'?: boolean
   'actions': ButtonProps[]
-  /**
-   * @deprecated we are no longer supporting different appearances for ModalFooter, instead there will only be a single default appearance set by the Button.
-   */
-  'appearance'?: 'primary' | 'destructive'
   'data-testid'?: string
   'alignStart'?: boolean
 } & HTMLAttributes<HTMLDivElement>
@@ -29,7 +25,6 @@ export type ModalFooterProps = {
 export const ModalFooter = ({
   unpadded,
   actions,
-  appearance = 'primary',
   alignStart,
   variant,
   ...props
@@ -51,9 +46,8 @@ export const ModalFooter = ({
           <div className={styles.actionButton} key={index}>
             <Button
               type="button"
-              primary={index === 0 && appearance === 'primary'}
-              destructive={index === 0 && appearance === 'destructive'}
-              secondary={index > 0}
+              primary={index === 0 && !action.destructive && !action.secondary}
+              secondary={index > 0 && !action.destructive && !action.primary}
               fullWidth={queries.isSmall}
               {...action}
             />

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

@@ -37,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} |
@@ -59,7 +61,6 @@ export const Select = React.forwardRef<any, SelectProps>(
       description,
       fullWidth: propsFullWidth,
       className: propsClassName,
-      placeholder,
       ...props
     },
     ref,
@@ -94,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,
@@ -122,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,
@@ -165,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

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);
     }

package/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.tsx

@@ -13,17 +13,12 @@ export type SelectToggleProps = {
   /** Props for the element representing the selected value. */
   valueProps: DOMAttributes<FocusableElement>
   isOpen?: 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
   /** Updates the styling of the validation. */
   status?: 'error' | 'caution'
   isDisabled?: boolean
   /** Use the `reversed` styles. */
   isReversed?: boolean
-} & OverrideClassName<HTMLAttributes<HTMLButtonElement>>
+} & OverrideClassName<Omit<HTMLAttributes<HTMLButtonElement>, 'placeholder'>>
 
 export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProps>(
   (
@@ -33,7 +28,6 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
       value,
       valueProps,
       isOpen,
-      placeholder = 'Select',
       status,
       isDisabled,
       isReversed,
@@ -55,7 +49,6 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
         ref={ref}
         className={classnames(
           styles.selectToggle,
-          (value === null || value === undefined) && styles.placeholder,
           status === 'error' && styles.error,
           status === 'caution' && styles.caution,
           isDisabled && styles.disabled,
@@ -64,7 +57,7 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
         )}
       >
         <span {...valueProps} className={styles.value}>
-          {value ?? placeholder}
+          {value}
         </span>
         <Icon
           name={isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}

package/src/TextArea/TextArea.tsx

@@ -12,12 +12,7 @@ export type TextAreaProps = {
    */
   autogrow?: boolean
   reversed?: 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
-} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>
+} & OverrideClassName<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'>>
 
 export const TextArea = ({
   textAreaRef: propsTextAreaRef,

package/src/TimeField/TimeField.tsx

@@ -11,13 +11,7 @@ import { TimeSegment } from './subcomponents/TimeSegment'
 import { type StatusType, type TimeValue, type ValueType } from './types'
 import styles from './TimeField.module.scss'
 
-type OmittedTimeFieldProps =
-  | 'errorMessage'
-  | 'validationState'
-  | 'value'
-  | 'onChange'
-  | 'label'
-  | 'hideTimeZone'
+type OmittedTimeFieldProps = 'errorMessage' | 'value' | 'onChange' | 'label' | 'hideTimeZone'
 
 export type TimeFieldProps = {
   id?: string
@@ -80,7 +74,6 @@ const TimeFieldComponent = ({
     isDisabled,
     hideTimeZone: true,
     locale,
-    validationState: status === 'default' ? 'valid' : 'invalid',
   })
 
   const hasError = !!validationMessage && status === 'error'
@@ -111,7 +104,7 @@ const TimeFieldComponent = ({
           className={classnames(
             styles.input,
             state.isDisabled && styles.isDisabled,
-            state.validationState === 'invalid' && styles.error,
+            status === 'error' && styles.error,
           )}
         >
           {state.segments.map((segment, i) => {

package/dist/cjs/src/Modal/util/console.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var yellow = '\u001b[33m ';
-var reset = '\u001b[0m ';
-/**
- * @deprecated Do not use ever again
- */
-var warn = function (message) {
-  // eslint-disable-next-line no-console
-  console.warn("".concat(yellow, "\nCULTUREAMP UI WARNING:\n").concat(singleLine(message)).concat(reset, "\n"));
-};
-var singleLine = function (message) {
-  return message.replace(/^ +/gm, ' ').replace(/\n|\r/gm, '').trim();
-};
-exports.singleLine = singleLine;
-exports.warn = warn;

package/dist/esm/src/Modal/util/console.mjs

@@ -1,13 +0,0 @@
-var yellow = '\u001b[33m ';
-var reset = '\u001b[0m ';
-/**
- * @deprecated Do not use ever again
- */
-var warn = function (message) {
-  // eslint-disable-next-line no-console
-  console.warn("".concat(yellow, "\nCULTUREAMP UI WARNING:\n").concat(singleLine(message)).concat(reset, "\n"));
-};
-var singleLine = function (message) {
-  return message.replace(/^ +/gm, ' ').replace(/\n|\r/gm, '').trim();
-};
-export { singleLine, warn };

package/dist/types/Modal/util/console.d.ts

@@ -1,5 +0,0 @@
-/**
- * @deprecated Do not use ever again
- */
-export declare const warn: (message: string) => void;
-export declare const singleLine: (message: string) => string;

package/dist/types/utils/useResizeObserver.d.ts

@@ -1,22 +0,0 @@
-import { type Ref } from 'react';
-export interface DOMRectReadOnly {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-    readonly top: number;
-    readonly right: number;
-    readonly bottom: number;
-    readonly left: number;
-}
-/**
- * Hook for observing changes to a DOM element via ResizeObserver.
- *
- * @param {resolveEntryCallback} resolveEntry - Callback for resolving the
- * desired value from each ResizeObserverEntry emitted by ResizeObserver
- * @return {Array} An array containing a ref for binding to the observed DOM
- * element, and the current value of the callback-resolved ResizeObserverEntry
- * @callback resolveEntryCallback
- * @deprecated use native `ResizeObserver` DOM API instead
- */
-export declare const useResizeObserver: <T, E extends Element = HTMLElement>(resolveEntry?: (entry: ResizeObserverEntry) => any) => [Ref<E>, T | undefined];

package/src/Modal/util/console.ts

@@ -1,13 +0,0 @@
-const yellow = '\u001b[33m '
-const reset = '\u001b[0m '
-
-/**
- * @deprecated Do not use ever again
- */
-export const warn = (message: string): void => {
-  // eslint-disable-next-line no-console
-  console.warn(`${yellow}\nCULTUREAMP UI WARNING:\n${singleLine(message)}${reset}\n`)
-}
-
-export const singleLine = (message: string): string =>
-  message.replace(/^ +/gm, ' ').replace(/\n|\r/gm, '').trim()