@patternfly/react-core 5.0.0-alpha.61 → 5.0.0-alpha.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.61",
+  "version": "5.0.0-alpha.63",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0770cf02282b314c9ecd11ee48b5b8eefc0c8c6f"
+  "gitHead": "729d7446d8c6769feecaa9406667d89cfbf53a9c"
 }

package/src/components/Alert/examples/Alert.md

@@ -32,11 +32,11 @@ import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Alert title="Default alert title" />
-  <Alert variant="info" title="Info alert title" />
-  <Alert variant="success" title="Success alert title" />
-  <Alert variant="warning" title="Warning alert title" />
-  <Alert variant="danger" title="Danger alert title" />
+  <Alert title="Default alert title" ouiaId="DefaultAlert" />
+  <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
+  <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
+  <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
+  <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
 </React.Fragment>
 ```
 

package/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 export const BreadcrumbBasic: React.FunctionComponent = () => (
-  <Breadcrumb>
+  <Breadcrumb ouiaId="BasicBreadcrumb">
     <BreadcrumbItem to="#">Section home</BreadcrumbItem>
     <BreadcrumbItem to="#">Section title</BreadcrumbItem>
     <BreadcrumbItem to="#">Section title</BreadcrumbItem>

package/src/components/Button/examples/ButtonVariations.tsx

@@ -7,12 +7,12 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button>{' '}
-    <Button variant="secondary" isDanger>
+    <Button variant="primary" ouiaId="Primary">Primary</Button> <Button variant="secondary" ouiaId="Secondary">Secondary</Button>{' '}
+    <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
       Danger Secondary
     </Button>{' '}
-    <Button variant="tertiary">Tertiary</Button> <Button variant="danger">Danger</Button>{' '}
-    <Button variant="warning">Warning</Button>
+    <Button variant="tertiary" ouiaId="Tertiary">Tertiary</Button> <Button variant="danger" ouiaId="Danger">Danger</Button>{' '}
+    <Button variant="warning" ouiaId="Warning">Warning</Button>
     <br />
     <br />
     <Button variant="link" icon={<PlusCircleIcon />}>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { TextInput } from '../TextInput/TextInput';
-import { Button } from '../Button/Button';
-import { Select, SelectOption } from '../Select';
+import { TextInput } from '../TextInput';
+import { Button } from '../Button';
+import { Select, SelectList, SelectOption } from '../Select';
+import { MenuToggle, MenuToggleElement } from '../MenuToggle';
 import { InputGroup } from '../InputGroup';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -263,13 +264,21 @@ export const CalendarMonth = ({
               Month
             </span>
             <Select
-              // Max width with "September"
-              width="140px"
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={()=>setIsSelectOpen(!isSelectOpen)}
+                  isExpanded={isSelectOpen}
+                  style={{width: "140px"} as React.CSSProperties }
+                >
+                  {monthFormatted}
+                </MenuToggle>
+              )}
               aria-labelledby={hiddenMonthId}
               isOpen={isSelectOpen}
-              onToggle={() => {
-                setIsSelectOpen(!isSelectOpen);
-                onSelectToggle(!isSelectOpen);
+              onOpenChange={(isOpen) => {
+                setIsSelectOpen(isOpen);
+                onSelectToggle(isOpen);
               }}
               onSelect={(ev, monthNum) => {
                 // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
@@ -285,14 +294,15 @@ export const CalendarMonth = ({
                   onMonthChange(ev, newDate);
                 }, 0);
               }}
-              variant="single"
-              selections={monthFormatted}
+              selected={monthFormatted}
             >
-              {longMonths.map((longMonth, index) => (
-                <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
-                  {longMonth}
-                </SelectOption>
-              ))}
+              <SelectList>
+                {longMonths.map((longMonth, index) => (
+                  <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
+                    {longMonth}
+                  </SelectOption>
+                ))}
+              </SelectList>
             </Select>
           </div>
           <div className={styles.calendarMonthHeaderYear}>

package/src/components/Card/examples/CardBasic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
-  <Card>
+  <Card ouiaId="BasicCard">
     <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>

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

@@ -103,45 +103,36 @@ exports[`With popover opened 1`] = `
                   >
                     Month
                   </span>
-                  <div
-                    class="pf-c-select"
-                    data-ouia-component-id="OUIA-Generated-Select-single-1"
-                    data-ouia-component-type="PF4/Select"
-                    data-ouia-safe="true"
-                    style="width: 140px;"
-                  >
+                  <div>
                     <button
                       aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Options menu"
-                      aria-labelledby="unique_id_mock pf-select-toggle-id-0"
-                      class="pf-c-select__toggle"
-                      id="pf-select-toggle-id-0"
+                      class="pf-c-menu-toggle"
+                      style="width: 140px;"
                       type="button"
                     >
-                      <div
-                        class="pf-c-select__toggle-wrapper"
+                      <span
+                        class="pf-c-menu-toggle__text"
                       >
-                        <span
-                          class="pf-c-select__toggle-text"
-                        >
-                          December
-                        </span>
-                      </div>
+                        December
+                      </span>
                       <span
-                        class="pf-c-select__toggle-arrow"
+                        class="pf-c-menu-toggle__controls"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-svg"
-                          fill="currentColor"
-                          role="img"
-                          viewBox="0 0 320 512"
+                        <span
+                          class="pf-c-menu-toggle__toggle-icon"
                         >
-                          <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>
+                          <svg
+                            aria-hidden="true"
+                            class="pf-svg"
+                            fill="currentColor"
+                            role="img"
+                            viewBox="0 0 320 512"
+                          >
+                            <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>

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

@@ -24,6 +24,7 @@ export const DropdownBasic: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      ouiaId="BasicDropdown"
     >
       <DropdownList>
         <DropdownItem itemId={0} key="link">

package/src/components/FormSelect/examples/FormSelectBasic.tsx

@@ -19,7 +19,7 @@ export const FormSelectBasic: React.FunctionComponent = () => {
   ];
 
   return (
-    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input" ouiaId="BasicFormSelect">
       {options.map((option, index) => (
         <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
       ))}

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -8,9 +8,11 @@ import {
   LoginPage,
   ListItem,
   ListVariant,
+  MenuToggle,
+  MenuToggleElement,
   Select,
-  SelectOption,
-  SelectOptionObject
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
@@ -22,7 +24,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const [isValidPassword, setIsValidPassword] = React.useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
   const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
-  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState<string | SelectOptionObject>('English');
+  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');
 
   /** i18n object is used to simulate i18n integration of native language translation */
   const i18n = {
@@ -35,23 +37,21 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     Bengali: 'বাংলা'
   };
 
-  const headerUtilsOptions = [
-    <SelectOption key={0} value={i18n.English} />,
-    <SelectOption key={1} value={i18n.Mandarin} />,
-    <SelectOption key={2} value={i18n.Hindi} />,
-    <SelectOption key={3} value={i18n.Spanish} />,
-    <SelectOption key={4} value={i18n.Portuguese} />,
-    <SelectOption key={5} value={i18n.Arabic} />,
-    <SelectOption key={6} value={i18n.Bengali} />
-  ];
-
-  const onHeaderUtilsToggle = (_event: any, isExpanded: boolean) => {
-    setIsHeaderUtilsOpen(isExpanded);
-  };
+  const headerUtilsOptions = (
+    <SelectList>
+      <SelectOption key={0} itemId={i18n.English}>{i18n.English}</SelectOption>
+      <SelectOption key={1} itemId={i18n.Mandarin}>{i18n.Mandarin}</SelectOption>
+      <SelectOption key={2} itemId={i18n.Hindi}>{i18n.Hindi}</SelectOption>
+      <SelectOption key={3} itemId={i18n.Spanish}>{i18n.Spanish}</SelectOption>
+      <SelectOption key={4} itemId={i18n.Portuguese}>{i18n.Portuguese}</SelectOption>
+      <SelectOption key={5} itemId={i18n.Arabic}>{i18n.Arabic}</SelectOption>
+      <SelectOption key={6} itemId={i18n.Bengali}>{i18n.Bengali}</SelectOption>
+    </SelectList>
+  );
 
   const onHeaderUtilsSelect = (
     _event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
-    value: string | SelectOptionObject
+    value: string
   ) => {
     setSelectedHeaderUtils(value);
     setIsHeaderUtilsOpen(false);
@@ -60,9 +60,18 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const headerUtils = (
     <Select
       aria-label="Select Language"
-      onToggle={onHeaderUtilsToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}
+          isExpanded={isHeaderUtilsOpen}
+        >
+          {selectedHeaderUtils}
+        </MenuToggle>
+      )}
       onSelect={onHeaderUtilsSelect}
-      selections={selectedHeaderUtils}
+      onOpenChange={isOpen => setIsHeaderUtilsOpen(isOpen)}
+      selected={selectedHeaderUtils}
       isOpen={isHeaderUtilsOpen}
     >
       {headerUtilsOptions}

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
+import { Icon } from '../Icon';
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -85,7 +86,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
 
     const content = (
       <>
-        {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
+        {icon && <span className={css(styles.menuToggleIcon)}><Icon>{icon}</Icon></span>}
         {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
         {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (

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

@@ -124,17 +124,25 @@ exports[`menu toggle shows icon 1`] = `
     <span
       class="pf-c-menu-toggle__icon"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 512 512"
+      <span
+        class="pf-c-icon"
       >
-        <path
-          d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-        />
-      </svg>
+        <span
+          class="pf-c-icon__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+            />
+          </svg>
+        </span>
+      </span>
     </span>
     <span
       class="pf-c-menu-toggle__text"

package/src/components/Modal/examples/ModalBasic.tsx

@@ -10,7 +10,7 @@ export const ModalBasic: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button variant="primary" onClick={handleModalToggle}>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
         Show basic modal
       </Button>
       <Modal
@@ -25,6 +25,7 @@ export const ModalBasic: React.FunctionComponent = () => {
             Cancel
           </Button>
         ]}
+        ouiaId="BasicModal"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

package/src/components/Nav/examples/NavDefault.tsx

@@ -9,7 +9,7 @@ export const NavDefault: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} aria-label="Default global">
+    <Nav onSelect={onSelect} aria-label="Default global" ouiaId="DefaultNav">
       <NavList>
         <NavItem preventDefault id="nav-default-link1" to="#nav-default-link1" itemId={0} isActive={activeItem === 0}>
           Default Link 1

package/src/components/Pagination/examples/PaginationTop.tsx

@@ -26,6 +26,7 @@ export const PaginationTop: React.FunctionComponent = () => {
       onSetPage={onSetPage}
       widgetId="top-example"
       onPerPageSelect={onPerPageSelect}
+      ouiaId="PaginationTop"
     />
   );
 };