@indico-data/design-system 2.17.2 → 2.19.0

package/src/components/forms/input/Input.tsx

@@ -1,30 +1,27 @@
 import React from 'react';
+import classNames from 'classnames';
+
 import { Icon } from '@/components/icons';
 import { IconName } from '@/types';
-import { Label } from '../subcomponents/Label';
+import { withLabel, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface InputProps {
-  label: string;
-  name: string;
+export interface InputProps extends WithLabelProps {
   value?: string | undefined;
-  placeholder: string;
+  placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   iconName?: IconName;
   isClearable?: boolean;
   className?: string;
   defaultValue?: string;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
-      label,
       name,
       placeholder,
       onChange,
@@ -34,7 +31,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       errorMessage,
       helpText,
       iconName,
-      hasHiddenLabel,
       className,
       ...rest
     },
@@ -45,9 +41,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
     };
 
+    const inputClasses = classNames(
+      'input',
+      {
+        error: hasErrors,
+        'input--has-icon': iconName,
+      },
+      className,
+    );
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="input-wrapper">
           {iconName && (
             <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
@@ -60,11 +64,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`}
+            className={inputClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
           {isClearable && (
@@ -83,7 +86,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledInput = withLabel(Input);
+
+export { LabeledInput as Input };

package/src/components/forms/input/styles/Input.scss

@@ -4,14 +4,12 @@
 :root [data-theme='dark'] {
   // Typography
   --pf-input-background-color: var(--pf-white-color);
-  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color);
   --pf-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-input-help-text-color: var(--pf-gray-color-400);
   --pf-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-disabled-color: var(--pf-gray-color-400);
-  --pf-input-border-color: var(--pf-gray-color);
 
   // input Radius
   --pf-input-rounded: var(--pf-rounded);
@@ -20,7 +18,7 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-input-background-color: var(--pf-primary-color);
-  --pf-input-border-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color-100);
   --pf-input-placeholder-text-color: var(--pf-gray-color);
   --pf-input-help-text-color: var(--pf-gray-color-200);
@@ -96,17 +94,6 @@
       cursor: pointer;
     }
   }
-  .is-visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
   .form-label {
     margin-bottom: var(--pf-margin-2);
   }

package/src/components/forms/passwordInput/PasswordInput.mdx

@@ -5,22 +5,24 @@ import * as PasswordInput from './PasswordInput.stories';
 
 # Password Input
 
-The password input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+The password input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (**_Our components are compatible with but do not provide the plugin_**)
 
 <Canvas
   of={PasswordInput.Default}
   source={{
     code: `
 <PasswordInput 
-  name="first_name" 
+  label="Label Name"
+  name="first_name"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
   isRequired
+  hasHiddenLabel={false}
   hasShowPassword
-  placeholder="Placeholder Text"
-  value=''
-  onChange={() => {}}
-  helpText="This Is Help Text" 
-  label="Label Name" 
-/>
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}/>
     `,
   }}
 />

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { PasswordInput, PasswordInputProps } from './PasswordInput';
 import { SetStateAction, useEffect, useState } from 'react';
-import { iconNames } from 'build/generated/iconTypes';
+import labelArgTypes from '@/storybook/labelArgTypes';
 
 const meta: Meta = {
   title: 'Forms/PasswordInput',
@@ -29,26 +29,6 @@ const meta: Meta = {
       },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the password field',
@@ -69,17 +49,6 @@ const meta: Meta = {
         },
       },
     },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required astherisk on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     isDisabled: {
       control: 'boolean',
       description: 'Toggles the disabled state of the input',
@@ -112,22 +81,12 @@ const meta: Meta = {
         },
       },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     ref: {
       table: {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 
@@ -143,7 +102,7 @@ const defaultArgs = {
 
 export const Default: Story = {
   args: {
-    isRequired: false,
+    isRequired: true,
     helpText: 'This Is Help Text',
     label: 'Label Name',
     name: 'first_name',

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -1,28 +1,24 @@
 import React, { useState } from 'react';
 import { Icon } from '@/components/icons';
-import { Label } from '../subcomponents/Label';
+import { withLabel, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import classNames from 'classnames';
 
-export interface PasswordInputProps {
+export interface PasswordInputProps extends WithLabelProps {
   ref?: React.LegacyRef<HTMLInputElement>;
-  label: string;
   value?: string | undefined;
-  name: string;
-  placeholder: string;
+  placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   hasShowPassword?: boolean;
   defaultValue?: string;
 }
 
-export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
   (
     {
-      label,
       name,
       placeholder,
       onChange,
@@ -30,7 +26,6 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
       isDisabled,
       errorMessage,
       helpText,
-      hasHiddenLabel,
       hasShowPassword = true,
       ...rest
     },
@@ -44,9 +39,16 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
       setShowPassword((prevShowPassword) => !prevShowPassword);
     };
 
+    const inputClasses = classNames(
+      'password-input',
+      {
+        error: hasErrors,
+      },
+      'password-input--has-icon',
+    );
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="password-input-wrapper">
           <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" />
           <input
@@ -57,11 +59,10 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`password-input ${hasErrors ? 'error' : ''} password-input--has-icon`}
+            className={inputClasses}
             aria-invalid={hasErrors ? 'true' : 'false'}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
           {hasShowPassword && (
@@ -80,7 +81,11 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledPasswordInput = withLabel(PasswordInput);
+
+export { LabeledPasswordInput as PasswordInput };

package/src/components/forms/passwordInput/styles/PasswordInput.scss

@@ -4,14 +4,12 @@
 :root [data-theme='dark'] {
   // Typography
   --pf-password-input-background-color: var(--pf-white-color);
-  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-border-color: var(--pf-form-input-border-color);
   --pf-password-input-text-color: var(--pf-gray-color);
   --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-password-input-help-text-color: var(--pf-gray-color-400);
   --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-password-input-border-color: var(--pf-gray-color);
   --pf-password-input-disabled-color: var(--pf-gray-color-400);
-  --pf-password-input-border-color: var(--pf-gray-color);
 
   // input Radius
   --pf-password-input-rounded: var(--pf-rounded);
@@ -20,7 +18,7 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-password-input-background-color: var(--pf-primary-color);
-  --pf-password-input-border-color: var(--pf-gray-color-100);
+  --pf-password-input-border-color: var(--pf-form-input-border-color);
   --pf-password-input-text-color: var(--pf-gray-color-100);
   --pf-password-input-placeholder-text-color: var(--pf-gray-color);
   --pf-password-input-help-text-color: var(--pf-gray-color-200);
@@ -103,17 +101,6 @@
       cursor: pointer;
     }
   }
-  .is-visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
   .form-label {
     margin-bottom: var(--pf-margin-2);
   }

package/src/components/forms/radio/styles/Radio.scss

@@ -4,15 +4,15 @@
 :root [data-theme='dark'] {
   --pf-radio-background-color: var(--pf-white-color);
   --pf-radio-check-color: var(--pf-primary-color);
-  --pf-radio-border-color: var(--pf-gray-color);
+  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-400);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-radio-background-color: transparent;
+  --pf-radio-background-color: var(--pf-primary-color-600);
   --pf-radio-check-color: var(--pf-white-color);
-  --pf-radio-border-color: var(--pf-white-color);
+  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-300);
 }
 

package/src/components/forms/select/styles/Select.scss

@@ -2,12 +2,12 @@
 :root,
 :root [data-theme='light'] {
   --pf-select-background-color: var(--pf-white-color);
-  --pf-select-border-color: var(--pf-gray-color);
+  --pf-select-border-color: var(--pf-form-input-border-color);
   --pf-select-text-color: var(--pf-gray-color);
   --pf-select-indicator-color: var(--pf-gray-color);
   --pf-select-placeholder-text-color: var(--pf-gray-color);
   --pf-select-hover-color: var(--pf-gray-color);
-  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-selected-color: var(--pf-primary-color-100);
   --pf-select-option-text-color: var(--pf-gray-color);
   --pf-select-option-hover-color: var(--pf-primary-color-100);
 
@@ -19,12 +19,12 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-select-background-color: var(--pf-primary-color);
-  --pf-select-border-color: var(--pf-gray-color-100);
+  --pf-select-border-color: var(--pf-form-input-border-color);
   --pf-select-text-color: var(--pf-gray-color-100);
   --pf-select-indicator-color: var(--pf-gray-color-100);
   --pf-select-placeholder-text-color: var(--pf-gray-color-100);
   --pf-select-hover-color: var(--pf-gray-color-100);
-  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-selected-color: var(--pf-primary-color-900);
   --pf-select-option-text-color: var(--pf-gray-color-100);
   --pf-select-option-hover-color: var(--pf-primary-color-300);
 
@@ -65,6 +65,23 @@
       color: var(--pf-select-text-color);
     }
 
+    &multi-value {
+      background-color: var(--pf-select-option-selected-color);
+      border-radius: var(--pf-rounded);
+      &__label {
+        padding-top: 5px; // TODO -- clean up padding on this component overall
+        color: var(--pf-select-option-text-color);
+      }
+      &__remove {
+        color: var(--pf-select-option-text-color);
+        cursor: pointer;
+        &:hover {
+          background-color: var(--pf-select-option-hover-color);
+          color: var(--pf-select-hover-color);
+        }
+      }
+    }
+
     &menu {
       border: 1px solid var(--pf-select-border-color);
       box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);

package/src/components/forms/subcomponents/Label.tsx

@@ -1,16 +1,18 @@
-interface LabelProps {
+import React, { forwardRef } from 'react';
+
+export interface LabelProps {
   label: string;
   name: string;
   isRequired?: boolean;
+}
+
+export interface WithLabelProps extends LabelProps {
   hasHiddenLabel?: boolean;
 }
 
-export const Label = ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => {
+export const Label = ({ label, name, isRequired }: LabelProps) => {
   return (
-    <div
-      data-testid={`${name}-testId`}
-      className={`form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`}
-    >
+    <div data-testid={`${name}-testId`} className={`form-label`}>
       <label htmlFor={`${name}`}>
         {label}
         {isRequired ? <span className="text-error"> *</span> : ''}
@@ -18,3 +20,24 @@ export const Label = ({ label, name, isRequired, hasHiddenLabel }: LabelProps) =
     </div>
   );
 };
+
+// HOC to add common label functionality to components
+export function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>) {
+  const WithLabelComponent = (
+    { label, hasHiddenLabel = false, name, isRequired, ...rest }: P & WithLabelProps,
+    ref: React.Ref<any>,
+  ) => {
+    const ariaLabel = hasHiddenLabel
+      ? { 'aria-label': isRequired ? `${label} (required)` : label }
+      : {};
+
+    return (
+      <div className="form-control">
+        {!hasHiddenLabel && <Label label={label} name={name} isRequired={isRequired} />}
+        <WrappedComponent {...(rest as P)} id={name} name={name} {...ariaLabel} ref={ref} />
+      </div>
+    );
+  };
+
+  return forwardRef(WithLabelComponent);
+}

package/src/components/forms/subcomponents/__tests__/Label.test.tsx

@@ -1,33 +1,81 @@
 import { render, screen } from '@testing-library/react';
-import { Label } from '@/components/forms/subcomponents/Label';
+import { Label, withLabel } from '@/components/forms/subcomponents/Label';
+
+// Mock component to wrap with HOC
+const MockComponent: React.FC = (props) => {
+  return <input {...props} />;
+};
+
+const LabeledMockComponent = withLabel(MockComponent);
 
 describe('Label', () => {
-  it('renders the `required` astherisc when the label is required', () => {
-    render(<Label label={'name'} name={'name'} isRequired={true} hasHiddenLabel={false} />);
+  it('renders the `required` asterisk when the label is required', () => {
+    render(<Label label="name" name="name" isRequired={true} />);
     expect(screen.getByText('*')).toBeInTheDocument();
     expect(screen.getByText('*')).toBeVisible();
   });
-  it('does not render the `required` astherisc when the label is not required', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+
+  it('does not render the `required` asterisk when the label is not required', () => {
+    render(<Label label="name" name="name" isRequired={false} />);
     expect(screen.queryByText('*')).not.toBeInTheDocument();
     expect(screen.queryByText('*')).toBeNull();
   });
-  it('renders the label for screen readers while hidden visually', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
-    expect(screen.getByText('name')).toBeInTheDocument();
-    expect(screen.getByText('name')).toBeVisible();
-  });
+
   it('renders the label text', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    render(<Label label="name" name="name" isRequired={false} />);
     const label = screen.getByTestId('name-testId');
     expect(label).toBeInTheDocument();
     expect(label).toBeVisible();
-    expect(label).not.toHaveClass('is-visually-hidden');
   });
+});
 
-  it('renders the label text when the label is hidden', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+describe('withLabel HOC', () => {
+  it('renders the wrapped component with a visible label', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel={false} />,
+    );
     const label = screen.getByTestId('name-testId');
-    expect(label).toHaveClass('is-visually-hidden');
+    const input = screen.getByRole('textbox');
+
+    expect(label).toBeInTheDocument();
+    expect(label).toBeVisible();
+    expect(input).toBeInTheDocument();
+  });
+
+  it('renders the wrapped component with an aria-label when hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-label', 'name');
+  });
+
+  it('renders the wrapped component with an aria-label including "required" when isRequired is true and hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={true} hasHiddenLabel />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-label', 'name (required)');
+  });
+
+  it('does not render the visible label when hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel />);
+    expect(screen.queryByTestId('name-testId')).not.toBeInTheDocument();
+  });
+
+  it('renders the `required` asterisk when isRequired is true and hasHiddenLabel is false', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={true} hasHiddenLabel={false} />,
+    );
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeVisible();
+  });
+
+  it('does not render the `required` asterisk when isRequired is false and hasHiddenLabel is false', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel={false} />,
+    );
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+    expect(screen.queryByText('*')).toBeNull();
   });
 });

package/src/components/forms/textarea/Textarea.mdx

@@ -5,13 +5,23 @@ import * as Textarea from './Textarea.stories';
 
 # Textarea
 
-The Textarea component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+The Textarea component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (**_Our components are compatible with but do not provide the plugin_**)
 
 <Canvas
   of={Textarea.Default}
   source={{
     code: `
-    <Textarea name="first_name" isRequired helpText="This Is Help Text" placeholder="This is a placeholder" value="''" onChange={handleChange} label="Label Name"  />
+<Textarea 
+  label="Label Name"
+  name="textarea"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}
+/>
     `,
   }}
 />