@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -1,332 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DataList Cell default 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__cell"
-  >
-    Secondary
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList Cells 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-content"
-  >
-    <div
-      class="pf-v5-c-data-list__cell data-list-custom"
-      id="primary-item"
-    >
-      Primary Id
-    </div>
-    <div
-      class="pf-v5-c-data-list__cell data-list-custom"
-      id="primary-item"
-    >
-      Primary Id 2
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-2xl"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - always 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - lg 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-lg"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - md 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - none 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-none"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - sm 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-sm"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - xl 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-xl"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataListAction button 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-action"
-  >
-    <button
-      aria-disabled="false"
-      class="pf-v5-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-      data-ouia-component-type="PF5/Button"
-      data-ouia-safe="true"
-      id="delete-item-1"
-      type="button"
-    >
-      Delete
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListAction dropdown 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-action"
-  >
-    <div
-      class="pf-v5-c-data-list__action"
-    >
-      <button
-        aria-expanded="false"
-        class="pf-v5-c-menu-toggle"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-menu-toggle__text"
-        />
-        <span
-          class="pf-v5-c-menu-toggle__controls"
-        >
-          <span
-            class="pf-v5-c-menu-toggle__toggle-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-      <div
-        class="pf-v5-c-menu"
-        data-ouia-component-id="OUIA-Generated-Dropdown-1"
-        data-ouia-component-type="PF5/Dropdown"
-        data-ouia-safe="true"
-        style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
-      >
-        <div
-          class="pf-v5-c-menu__content"
-        >
-          <ul
-            class="pf-v5-c-menu__list"
-            role="menu"
-          >
-            <li
-              class="pf-v5-c-menu__list-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-              data-ouia-component-type="PF5/DropdownItem"
-              data-ouia-safe="true"
-              role="none"
-            >
-              <button
-                class="pf-v5-c-menu__item"
-                role="menuitem"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="pf-v5-c-menu__item-main"
-                >
-                  <span
-                    class="pf-v5-c-menu__item-text"
-                  >
-                    action-1
-                  </span>
-                </span>
-              </button>
-            </li>
-            ,
-            <li
-              class="pf-v5-c-menu__list-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-2"
-              data-ouia-component-type="PF5/DropdownItem"
-              data-ouia-safe="true"
-              role="none"
-            >
-              <button
-                class="pf-v5-c-menu__item"
-                role="menuitem"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="pf-v5-c-menu__item-main"
-                >
-                  <span
-                    class="pf-v5-c-menu__item-text"
-                  >
-                    action-2
-                  </span>
-                </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListContent 1`] = `
-<DocumentFragment>
-  <section
-    aria-label="Primary Content Details"
-    class="pf-v5-c-data-list__expandable-content"
-    id=""
-  >
-    <div
-      class="pf-v5-c-data-list__expandable-content-body"
-    >
-       test
-    </div>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListContent hasNoPadding 1`] = `
-<DocumentFragment>
-  <section
-    aria-label="Primary Content Details"
-    class="pf-v5-c-data-list__expandable-content"
-    hidden=""
-    id=""
-  >
-    <div
-      class="pf-v5-c-data-list__expandable-content-body pf-m-no-padding"
-    >
-      test
-    </div>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DataList Item 1`] = `
-<DocumentFragment>
-  <li
-    aria-labelledby="item-1"
-    class="pf-v5-c-data-list__item data-list-item-custom"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList Item default 1`] = `
-<DocumentFragment>
-  <li
-    aria-labelledby="item-1"
-    class="pf-v5-c-data-list__item"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-md data-list-custom"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List compact 1`] = `
+exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-compact pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List default 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
+    aria-label="list"
     class="pf-v5-c-data-list pf-m-grid-md"
     role="list"
   />
 </DocumentFragment>
 `;
-
-exports[`DataList List draggable 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-compact pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList item row default 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-row"
-  />
-</DocumentFragment>
-`;

package/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-action"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cell renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__cell"
+  >
+    Secondary
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <section
+    aria-label="Primary Content Details"
+    class="pf-v5-c-data-list__expandable-content"
+    id=""
+  >
+    <div
+      class="pf-v5-c-data-list__expandable-content-body"
+    >
+       test
+    </div>
+  </section>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <li
+    aria-labelledby="item-1"
+    class="pf-v5-c-data-list__item"
+    id=""
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cells renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-content"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Item row renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-row"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-control"
+  >
+    <div
+      class="pf-v5-c-data-list__toggle"
+    >
+      <button
+        aria-controls="false"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-label="Details"
+        aria-labelledby=" ex-toggle2"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        id="ex-toggle2"
+        type="button"
+      >
+        <div
+          class="pf-v5-c-data-list__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/examples/DataList.md

@@ -23,6 +23,10 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 ## Examples
 

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -166,8 +166,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', lg: 'visible' }}
-            aria-labelledby="check-action-item2 check-action-action2"
-            id="check-action-action2"
+            aria-labelledby="check-action-item2 check-action-action2a"
+            id="check-action-action2a"
             aria-label="Actions"
           >
             <Button variant="primary">Primary</Button>
@@ -192,7 +192,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           <DataListAction
             visibility={{ xl: 'hidden' }}
             aria-labelledby="check-action-item3 check-action-action3"
-            id="check-actiokn-action3"
+            id="check-action-action3"
             aria-label="Actions"
             isPlainButtonAction
           >
@@ -231,8 +231,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', xl: 'visible' }}
-            aria-labelledby="check-action-item3 check-action-action3"
-            id="check-action-action3"
+            aria-labelledby="check-action-item3 check-action-action3a"
+            id="check-action-action3a"
             aria-label="Actions"
           >
             <Button variant="primary">Primary</Button>

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -162,7 +162,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               ]}
             />
             <DataListAction
-              aria-labelledby="m-ex-item2 mex-action2"
+              aria-labelledby="m-ex-item2 m-ex-action2"
               id="m-ex-action2"
               aria-label="Actions"
               isPlainButtonAction

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -19,6 +19,11 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+/* eslint-disable camelcase */
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
@@ -45,9 +50,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     display: 'block',
     width: '100%',
     padding: '.25rem .5rem',
-    color: 'var(--pf-v5-global--Color--100)',
-    backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
-    border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid'
+    color: global_Color_100.var,
+    backgroundColor: global_BackgroundColor_200.var,
+    border: `${global_BorderWidth_sm.var} ${global_BorderColor_100.var} solid`
   };
 
   return (

package/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_width_chars';
 
 /** Props that customize the requirement of a date */
 export interface DatePickerRequiredObject {
@@ -97,7 +98,7 @@ const DatePickerBase = (
     className,
     locale = undefined,
     dateFormat = yyyyMMddFormat,
-    dateParse = (val: string) => val.split('-').length === 3 && new Date(`${val}T00:00:00`),
+    dateParse = (val: string) => (val.split('-').length === 3 ? new Date(`${val}T00:00:00`) : new Date(undefined)),
     isDisabled = false,
     placeholder = 'YYYY-MM-DD',
     value: valueProp = '',
@@ -131,7 +132,7 @@ const DatePickerBase = (
   const [pristine, setPristine] = React.useState(true);
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
-  const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
+  const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();
@@ -229,7 +230,7 @@ const DatePickerBase = (
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
-        elementToFocus={valueDate ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
+        elementToFocus={isValidDate(valueDate) ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
         position="bottom"
         bodyContent={
           <CalendarMonth
@@ -284,7 +285,7 @@ const DatePickerBase = (
       >
         <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
-            <InputGroupItem isFill>
+            <InputGroupItem>
               <TextInput
                 isDisabled={isDisabled}
                 isRequired={requiredDateOptions?.isRequired}

package/src/components/DatePicker/__tests__/DatePicker.test.tsx

@@ -16,13 +16,9 @@ test('disabled date picker', () => {
 test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
   const user = userEvent.setup();
 
-  const rangeValidator = (date: Date) => {
-    return '';
-  };
+  const rangeValidator = (_date: Date) => '';
 
-  const rangeValidatorB = (date: Date) => {
-    return '';
-  };
+  const rangeValidatorB = (_date: Date) => '';
 
   render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
@@ -119,7 +115,7 @@ test('Does not render emptyDateText when requiredDateOptions.isRequired is false
   await user.click(screen.getByRole('textbox'));
   await user.click(document.body);
 
-  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument;
+  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument();
 });
 
 test('Renders text input as invalid on blur when requiredDateOptions.isRequired is true', async () => {

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

@@ -13,7 +13,7 @@ exports[`With popover opened 1`] = `
         class="pf-v5-c-input-group"
       >
         <div
-          class="pf-v5-c-input-group__item pf-m-fill"
+          class="pf-v5-c-input-group__item"
         >
           <span
             class="pf-v5-c-form-control"
@@ -787,7 +787,7 @@ exports[`disabled date picker 1`] = `
         class="pf-v5-c-input-group"
       >
         <div
-          class="pf-v5-c-input-group__item pf-m-fill"
+          class="pf-v5-c-input-group__item"
         >
           <span
             class="pf-v5-c-form-control pf-m-disabled"

package/src/components/DescriptionList/DescriptionList.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
+import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
+import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
 export interface BreakpointModifiers {
   default?: string;
@@ -102,19 +105,19 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+      ...setBreakpointModifiers(cssGridTemplateColumnsMin.name, autoFitMinModifier)
     };
   }
   if (termWidth) {
     style = {
       ...style,
-      ...{ '--pf-v5-c-description-list__term--width': termWidth }
+      ...{ [cssTermWidth.name]: termWidth }
     };
   }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+      ...setBreakpointModifiers(cssHorizontalTermWidth.name, horizontalTermWidthModifier)
     };
   }