@patternfly/react-core 5.0.0-prerelease.2 → 5.0.0-prerelease.20

package/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuToggle.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`OptionsMenuToggle should match snapshot (auto-generated) 1`] = `
     aria-label="'Options menu'"
     class="pf-v5-c-dropdown__toggle"
     data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-    data-ouia-component-type="PF4/DropdownToggle"
+    data-ouia-component-type="PF5/DropdownToggle"
     data-ouia-safe="true"
     id="''-toggle"
     type="button"
@@ -27,8 +27,10 @@ exports[`OptionsMenuToggle should match snapshot (auto-generated) 1`] = `
         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"

package/src/deprecated/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`optionsMenu expanded 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-expanded"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-7"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="expanded"
   >
@@ -15,7 +15,7 @@ exports[`optionsMenu expanded 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="expanded-toggle"
       type="button"
@@ -30,8 +30,10 @@ exports[`optionsMenu expanded 1`] = `
           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"
@@ -67,7 +69,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-13"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -84,7 +86,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-14"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -101,7 +103,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="true"
               class="pf-m-disabled pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-15"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -118,7 +120,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-16"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -157,7 +159,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-17"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -174,7 +176,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-18"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -199,7 +201,7 @@ exports[`optionsMenu isDisabled 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-10"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="disabled"
   >
@@ -209,7 +211,7 @@ exports[`optionsMenu isDisabled 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       disabled=""
       id="disabled-toggle"
@@ -225,8 +227,10 @@ exports[`optionsMenu isDisabled 1`] = `
           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"
@@ -243,7 +247,7 @@ exports[`optionsMenu open up 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-top"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-5"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="openUp"
   >
@@ -253,7 +257,7 @@ exports[`optionsMenu open up 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="openUp-toggle"
       type="button"
@@ -268,8 +272,10 @@ exports[`optionsMenu open up 1`] = `
           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"
@@ -286,7 +292,7 @@ exports[`optionsMenu plain 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-8"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="plain"
   >
@@ -296,7 +302,7 @@ exports[`optionsMenu plain 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle pf-m-plain"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="plain-toggle"
       type="button"
@@ -312,7 +318,7 @@ exports[`optionsMenu regular 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-1"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="regular"
   >
@@ -322,7 +328,7 @@ exports[`optionsMenu regular 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="regular-toggle"
       type="button"
@@ -337,8 +343,10 @@ exports[`optionsMenu regular 1`] = `
           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"
@@ -355,7 +363,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-expanded"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-3"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="regular"
   >
@@ -365,7 +373,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="regular-toggle"
       type="button"
@@ -380,8 +388,10 @@ exports[`optionsMenu renders in strict mode 1`] = `
           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"
@@ -417,7 +427,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-2"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -434,7 +444,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-4"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -451,7 +461,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="true"
               class="pf-m-disabled pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-6"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -468,7 +478,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-8"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -507,7 +517,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-10"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -524,7 +534,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-12"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -549,7 +559,7 @@ exports[`optionsMenu right aligned + open up 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-top pf-m-align-right"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-6"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="rightAlignedOpenUp"
   >
@@ -559,7 +569,7 @@ exports[`optionsMenu right aligned + open up 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="rightAlignedOpenUp-toggle"
       type="button"
@@ -574,8 +584,10 @@ exports[`optionsMenu right aligned + open up 1`] = `
           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"
@@ -592,7 +604,7 @@ exports[`optionsMenu right aligned 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-align-right"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-4"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="rightAligned"
   >
@@ -602,7 +614,7 @@ exports[`optionsMenu right aligned 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="rightAligned-toggle"
       type="button"
@@ -617,8 +629,10 @@ exports[`optionsMenu right aligned 1`] = `
           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"
@@ -635,7 +649,7 @@ exports[`optionsMenu text 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-9"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="text"
   >

package/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md

@@ -5,6 +5,7 @@ subsection: menus
 cssPrefix: pf-v5-c-options-menu
 propComponents: ['OptionsMenu', 'OptionsMenuItem', 'OptionsMenuSeparator', 'OptionsMenuToggle', 'OptionsMenuToggleWithText']
 ouia: true
+deprecated: true
 ---
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';

package/src/deprecated/components/PageHeader/examples/PageHeader.md

@@ -3,6 +3,7 @@ id: Page
 section: components
 cssPrefix: pf-v5-c-page
 propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
+deprecated: true
 ---
 
 import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';

package/src/deprecated/components/Select/Select.tsx

@@ -37,6 +37,7 @@ import { Popper } from '../../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../../helpers/favorites';
 import { ValidatedOptions } from '../../../helpers/constants';
 import { findTabbableElements } from '../../../helpers/util';
+import { TextInput } from '../../../components/TextInput';
 
 // seed for the aria-labelledby ID
 let currentId = 0;
@@ -1381,8 +1382,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
-                  <input
+                <TextInput 
+                    className={css(styles.selectToggleTypeahead)}
                     aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                     id={`${selectToggleId}-select-typeahead`}
                     aria-label={typeAheadAriaLabel}
@@ -1393,14 +1394,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                         ? typeaheadInputValue
                         : this.getDisplay(selections[0] as string, 'text') || ''
                     }
-                    type="text"
+                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
                     onClick={this.onClick}
-                    onChange={this.onChange}
                     autoComplete={inputAutoComplete}
-                    disabled={isDisabled}
+                    isDisabled={isDisabled}
                     ref={this.inputRef}
-                  />
-                </div>
+                />
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1410,8 +1409,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
                 {selections && Array.isArray(selections) && selections.length > 0 && selectedChips}
-                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
-                  <input
+                <TextInput 
+                    className={css(styles.selectToggleTypeahead)}
                     aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                     id={`${selectToggleId}-select-multi-typeahead-typeahead`}
                     aria-label={typeAheadAriaLabel}
@@ -1419,14 +1418,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                     {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
                     placeholder={placeholderText as string}
                     value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                    type="text"
-                    onChange={this.onChange}
+                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
                     onClick={this.onClick}
                     autoComplete={inputAutoComplete}
-                    disabled={isDisabled}
+                    isDisabled={isDisabled}
                     ref={this.inputRef}
-                  />
-                </div>
+                />
               </div>
               {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
             </React.Fragment>