@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.7

package/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`Chip closable 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-2"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
   >
     <span
       class="pf-c-chip__text"
@@ -50,6 +51,7 @@ exports[`Chip closable with tooltip 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-3"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
   >
     <span
       class="pf-c-chip__text"
@@ -94,6 +96,7 @@ exports[`Chip custom max-width text 1`] = `
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     style="--pf-c-chip__text--MaxWidth: 100px;"
+    textmaxwidth="100px"
   >
     <span
       class="pf-c-chip__text"
@@ -164,3 +167,47 @@ exports[`Chip readonly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Chip with role='gridcell' 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-chip my-chp-cls"
+    data-ouia-component-id="OUIA-Generated-Chip-6"
+    data-ouia-component-type="PF4/Chip"
+    data-ouia-safe="true"
+    role="gridcell"
+  >
+    <span
+      class="pf-c-chip__text"
+      id="pf-random-id-5"
+    >
+      I'm a roled chip
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="close"
+      aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="close"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      id="remove_pf-random-id-5"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/ContextSelector/ContextSelector.tsx

@@ -41,7 +41,7 @@ export interface ContextSelectorProps extends OUIAProps {
   /** Value in the Search field */
   searchInputValue?: string;
   /** Function callback called when user changes the Search Input */
-  onSearchInputChange?: (value: string) => void;
+  onSearchInputChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Search Input placeholder */
   searchInputPlaceholder?: string;
   /** Function callback for when Search Button is clicked */
@@ -149,7 +149,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
                 submitSearchButtonLabel={searchButtonAriaLabel}
                 placeholder={searchInputPlaceholder}
                 onChange={onSearchInputChange}
-                onSearch={(value, event, _) => {
+                onSearch={(event, _value, _) => {
                   onSearchButtonClick(event);
                 }}
                 value={searchInputValue}

package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx

@@ -44,7 +44,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
     setOpen(!isOpen);
   };
 
-  const onSearchInputChange = (value: string) => {
+  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
   };
 

package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx

@@ -43,7 +43,7 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
     setOpen(!isOpen);
   };
 
-  const onSearchInputChange = (value: string) => {
+  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
   };
 

package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx

@@ -43,7 +43,7 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
     setOpen(!isOpen);
   };
 
-  const onSearchInputChange = (value: string) => {
+  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
   };
 

package/src/components/DatePicker/DatePicker.tsx

@@ -42,9 +42,9 @@ export interface DatePickerProps
   /** Error message to display when the text input cannot be parsed. */
   invalidFormatText?: string;
   /** Callback called every time the text input loses focus. */
-  onBlur?: (value: string, date?: Date) => void;
+  onBlur?: (event: any, value: string, date?: Date) => void;
   /** Callback called every time the text input value changes. */
-  onChange?: (value: string, date?: Date) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void;
   /** String to display in the empty text input as a hint for the expected date format. */
   placeholder?: string;
   /** Props to pass to the popover that contains the calendar month component. */
@@ -138,28 +138,28 @@ const DatePickerBase = (
     setErrorText(validators.map(validator => validator(date)).join('\n') || '');
   };
 
-  const onTextInput = (value: string) => {
+  const onTextInput = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     setValue(value);
     setErrorText('');
     const newValueDate = dateParse(value);
     setValueDate(newValueDate);
     if (isValidDate(newValueDate)) {
-      onChange(value, new Date(newValueDate));
+      onChange(event, value, new Date(newValueDate));
     } else {
-      onChange(value);
+      onChange(event, value);
     }
   };
 
-  const onInputBlur = () => {
+  const onInputBlur = (event: any) => {
     if (pristine) {
       return;
     }
     const newValueDate = dateParse(value);
     if (isValidDate(newValueDate)) {
-      onBlur(value, new Date(newValueDate));
+      onBlur(event, value, new Date(newValueDate));
       setError(newValueDate);
     } else {
-      onBlur(value);
+      onBlur(event, value);
       setErrorText(invalidFormatText);
     }
   };
@@ -170,7 +170,7 @@ const DatePickerBase = (
     setValueDate(newValueDate);
     setError(newValueDate);
     setPopoverOpen(false);
-    onChange(newValue, new Date(newValueDate));
+    onChange(null, newValue, new Date(newValueDate));
   };
 
   const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {

package/src/components/DatePicker/examples/DatePickerBasic.tsx

@@ -4,8 +4,8 @@ import { DatePicker } from '@patternfly/react-core';
 export const DatePickerBasic: React.FunctionComponent = () => (
   <DatePicker
     // eslint-disable-next-line no-console
-    onBlur={(str, date) => console.log('onBlur', str, date)}
+    onBlur={(_event, str, date) => console.log('onBlur', str, date)}
     // eslint-disable-next-line no-console
-    onChange={(str, date) => console.log('onChange', str, date)}
+    onChange={(_event, str, date) => console.log('onChange', str, date)}
   />
 );

package/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -7,7 +7,7 @@ export const DatePickerControlled: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Button onClick={() => setValue(initialValue)}>Reset date</Button>
-      <DatePicker value={value} onChange={value => setValue(value)} />
+      <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
     </React.Fragment>
   );
 };

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { Spinner } from '../Spinner';
 
 export interface DropdownToggleCheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
@@ -15,6 +16,8 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
+  /** @beta Flag to show if the checkbox is in progress */
+  isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
   /** A callback for when the checkbox selection changes */
@@ -25,6 +28,10 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
+  /** @beta Text describing current loading status or progress */
+  defaultProgressAriaValueText?: string;
+  /** @beta Aria-label for the default progress icon to describe what is loading */
+  defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -68,6 +75,9 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       isValid,
       isDisabled,
       isChecked,
+      isInProgress = false,
+      defaultProgressAriaLabel,
+      defaultProgressAriaValueText = 'Loading...',
       children,
       ouiaId,
       ouiaSafe,
@@ -77,13 +87,27 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
+
+    const spinner = (
+      <Spinner
+        diameter="1em"
+        isSVG
+        aria-valuetext={defaultProgressAriaValueText}
+        aria-live="polite"
+        aria-label={defaultProgressAriaLabel}
+      />
+    );
+
     const text = children && (
       <span className={css(styles.dropdownToggleText, className)} aria-hidden="true" id={`${props.id}-text`}>
         {children}
       </span>
     );
     return (
-      <label className={css(styles.dropdownToggleCheck, className)} htmlFor={props.id}>
+      <label
+        className={css(styles.dropdownToggleCheck, isInProgress && styles.modifiers.inProgress, className)}
+        htmlFor={props.id}
+      >
         <input
           {...props}
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
@@ -98,6 +122,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
             ouiaSafe
           )}
         />
+        {isInProgress && <span className={css(styles.dropdownToggleProgress, className)}>{spinner}</span>}
         {text}
       </label>
     );

package/src/components/Dropdown/examples/Dropdown.md

@@ -116,7 +116,7 @@ You may use a `<BadgeToggle>` to display the number of dropdown menu items.
 ```ts file="./DropdownBadge.tsx"
 ```
 
-### Split button
+### Split button (checkbox)
 
 To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
 
@@ -125,13 +125,20 @@ The following example shows a split button with a `<DropdownToggleCheckbox>`, wh
 ```ts file="./DropdownSplitButton.tsx"
 ```
 
-### Split button text label
+### Split button (checkbox with toggle text)
 
 Text labels may optionally be used alongside actions within split buttons.
 
 ```ts file="./DropdownSplitButtonText.tsx"
 ```
 
+### Split button (progress checkbox)
+
+The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
+
+```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+```
+
 ### Split button toggle variants
 
 Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles. 

package/src/components/Dropdown/examples/DropdownSplitButton.tsx

@@ -54,7 +54,7 @@ export const DropdownSplitButton: React.FunctionComponent = () => {
       toggle={
         <DropdownToggle
           splitButtonItems={[
-            <DropdownToggleCheckbox id="split-button-checkbox" key="split-checkbox" aria-label="Select all" />
+            <DropdownToggleCheckbox id="split-button-toggle-checkbox" key="split-checkbox" aria-label="Select all" />
           ]}
           onToggle={onToggle}
           id="toggle-split-button"

package/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+
+  const [isTimedOut1, setIsTimedOut1] = React.useState(true);
+  const [isTimedOut2, setIsTimedOut2] = React.useState(true);
+
+  const onToggle1 = (isOpen: boolean) => {
+    setIsOpen1(isOpen);
+  };
+
+  const onToggle2 = (isOpen: boolean) => {
+    setIsOpen2(isOpen);
+  };
+
+  const showProgressIcon1 = () => {
+    setIsTimedOut1(false);
+    setTimeout(() => setIsTimedOut1(true), 3000);
+  };
+
+  const showProgressIcon2 = () => {
+    setIsTimedOut2(false);
+    setTimeout(() => setIsTimedOut2(true), 3000);
+  };
+
+  const onFocus1 = () => {
+    const element = document.getElementById('toggle-split-button-progress');
+    element.focus();
+  };
+
+  const onFocus2 = () => {
+    const element = document.getElementById('toggle-split-button-progress-text');
+    element.focus();
+  };
+
+  const onChange1 = (checked: boolean) => {
+    setIsChecked1(checked);
+    showProgressIcon1();
+  };
+
+  const onChange2 = (checked: boolean) => {
+    setIsChecked2(checked);
+    showProgressIcon2();
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(false);
+    onFocus1();
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(false);
+    onFocus2();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <>
+      <Dropdown
+        onSelect={onSelect1}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                onChange={onChange1}
+                isChecked={isChecked1}
+                isInProgress={!isTimedOut1}
+                id="split-button-progress-toggle-checkbox"
+                key="split-progress-checkbox"
+                aria-label="Select all"
+              />
+            ]}
+            onToggle={onToggle1}
+            id="toggle-split-button-progress"
+          />
+        }
+        isOpen={isOpen1}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onSelect2}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                onChange={onChange2}
+                isChecked={isChecked2}
+                isInProgress={!isTimedOut2}
+                id="split-button-progress-text-checkbox"
+                key="split-progress-checkbox"
+                aria-label="Select all"
+              >
+                10 selected
+              </DropdownToggleCheckbox>
+            ]}
+            onToggle={onToggle2}
+            id="toggle-split-button-progress-text"
+          />
+        }
+        isOpen={isOpen2}
+        dropdownItems={dropdownItems}
+      />
+    </>
+  );
+};

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -13,7 +13,7 @@ import { SearchInput } from '../SearchInput';
  * such as sorting, can also be passed into this sub-component.
  */
 
-export interface DualListSelectorPaneProps {
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   /** Additional classes applied to the dual list selector pane. */
   className?: string;
   /** A dual list selector list or dual list selector tree to be rendered in the pane. */
@@ -65,6 +65,8 @@ export interface DualListSelectorPaneProps {
   searchInputAriaLabel?: string;
   /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
   onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
 }
 
 export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
@@ -87,13 +89,14 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
+  listMinHeight,
   ...props
 }: DualListSelectorPaneProps) => {
   const [input, setInput] = React.useState('');
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -165,7 +168,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <SearchInput
                   onChange={isDisabled ? undefined : onChange}
                   onClear={
-                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                    onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent<HTMLInputElement>, '')
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}
@@ -198,12 +201,21 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             displayOption={displayOption}
             id={`${id}-list`}
             isDisabled={isDisabled}
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+            })}
           >
             {children}
           </DualListSelectorListWrapper>
         )}
         {isTree && (
-          <DualListSelectorListWrapper aria-labelledby={`${id}-status`} id={`${id}-list`}>
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            id={`${id}-list`}
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+            })}
+          >
             {options.length > 0 ? (
               <DualListSelectorList>
                 <DualListSelectorTree

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -20,6 +20,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples