@patternfly/react-core 5.0.0-prerelease.8 → 5.0.0

package/src/components/Menu/examples/Menu.md

@@ -14,7 +14,8 @@ propComponents:
     'MenuSearchInput',
     'MenuGroup',
     'MenuContainer',
-    'MenuPopperProps'
+    'MenuPopperProps',
+    'TooltipProps'
   ]
 ouia: true
 ---

package/src/components/Menu/examples/MenuBasic.tsx

@@ -33,6 +33,12 @@ export const MenuBasic: React.FunctionComponent = () => {
             <MenuItem isDisabled to="#default-link4">
               Disabled link
             </MenuItem>
+            <MenuItem isAriaDisabled tooltipProps={{content: "aria-disabled action", position: "top"}}>
+              Aria-disabled action
+            </MenuItem>
+            <MenuItem isAriaDisabled to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+              Aria-disabled link
+            </MenuItem>
           </MenuList>
         </MenuContent>
       </Menu>

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -48,7 +48,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
 
   const rootProps = getRootProps({
     ...props,
-    onClick: (event) => event.preventDefault() // Prevents clicking TextArea from opening file dialog
+    onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
   });
 
   return (

package/src/components/Nav/examples/Nav.md

@@ -48,9 +48,9 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 ```
 
-### Legacy tertiary
+### Tertiary (deprecated)
 
-```ts file="./NavLegacyTertiary.tsx"
+```ts file="./NavLegacyTertiary.tsx" isDeprecated
 
 ```
 

package/src/components/NumberInput/NumberInput.tsx

@@ -139,7 +139,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             {...(isDisabled && { isDisabled })}
             {...(onChange && { onChange: (event, _value) => onChange(event) })}
             onBlur={handleBlur}
-            {...(!onChange && { isReadOnly: true })}
+            {...(!onChange && { readOnlyVariant: "default" })}
             onKeyDown={keyDownHandler}
             validated={validated}
           />

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

@@ -231,4 +231,17 @@ describe('numberInput', () => {
 
     expect(consoleSpy).not.toHaveBeenCalled();
   });
+
+  test('input is read only if onChange not passed ', () => {
+    render(<NumberInput inputAriaLabel="readonly input" value={5}/>);
+    const input = screen.getByLabelText('readonly input');
+    expect(input).toHaveAttribute('readOnly');
+  });
+
+  test('input is not read only if onChange passed ', () => {
+    const onChangeMock = jest.fn();
+    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock}/>);
+    const input = screen.getByLabelText('not readonly input');
+    expect(input).not.toHaveAttribute('readOnly');
+  });
 });

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

@@ -43,8 +43,8 @@ exports[`numberInput disables lower threshold 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -52,10 +52,11 @@ exports[`numberInput disables lower threshold 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-7"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -135,8 +136,8 @@ exports[`numberInput disables upper threshold 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -144,10 +145,11 @@ exports[`numberInput disables upper threshold 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-8"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="100"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -229,8 +231,8 @@ exports[`numberInput passes button props successfully 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -238,10 +240,11 @@ exports[`numberInput passes button props successfully 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-13"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -322,7 +325,7 @@ exports[`numberInput passes input props successfully 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -335,7 +338,7 @@ exports[`numberInput passes input props successfully 1`] = `
             type="number"
             value="5"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -416,8 +419,8 @@ exports[`numberInput renders custom width 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -425,10 +428,11 @@ exports[`numberInput renders custom width 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-11"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -509,8 +513,8 @@ exports[`numberInput renders defaults & extra props 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -518,10 +522,11 @@ exports[`numberInput renders defaults & extra props 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-1"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -602,8 +607,8 @@ exports[`numberInput renders disabled 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control pf-m-disabled"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly pf-m-disabled"
         >
           <input
             aria-invalid="false"
@@ -612,10 +617,11 @@ exports[`numberInput renders disabled 1`] = `
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             disabled=""
+            readonly=""
             type="number"
             value="90"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -696,8 +702,8 @@ exports[`numberInput renders error validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control pf-m-error"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly pf-m-error"
         >
           <input
             aria-invalid="true"
@@ -705,13 +711,14 @@ exports[`numberInput renders error validated 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-3"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
-          <div
+          <span
             class="pf-v5-c-form-control__utilities"
           >
-            <div
+            <span
               class="pf-v5-c-form-control__icon pf-m-status"
             >
               <svg
@@ -727,9 +734,9 @@ exports[`numberInput renders error validated 1`] = `
                   d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                 />
               </svg>
-            </div>
-          </div>
-        </div>
+            </span>
+          </span>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -809,8 +816,8 @@ exports[`numberInput renders success validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control pf-m-success"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly pf-m-success"
         >
           <input
             aria-invalid="false"
@@ -818,13 +825,14 @@ exports[`numberInput renders success validated 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-2"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
-          <div
+          <span
             class="pf-v5-c-form-control__utilities"
           >
-            <div
+            <span
               class="pf-v5-c-form-control__icon pf-m-status"
             >
               <svg
@@ -840,9 +848,9 @@ exports[`numberInput renders success validated 1`] = `
                   d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
                 />
               </svg>
-            </div>
-          </div>
-        </div>
+            </span>
+          </span>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -927,8 +935,8 @@ exports[`numberInput renders unit & position 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -936,10 +944,11 @@ exports[`numberInput renders unit & position 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-10"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1019,8 +1028,8 @@ exports[`numberInput renders unit 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -1028,10 +1037,11 @@ exports[`numberInput renders unit 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-9"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1116,8 +1126,8 @@ exports[`numberInput renders value 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -1125,10 +1135,11 @@ exports[`numberInput renders value 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-5"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="90"
           />
-        </div>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1208,8 +1219,8 @@ exports[`numberInput renders warning validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <div
-          class="pf-v5-c-form-control pf-m-warning"
+        <span
+          class="pf-v5-c-form-control pf-m-readonly pf-m-warning"
         >
           <input
             aria-invalid="false"
@@ -1217,13 +1228,14 @@ exports[`numberInput renders warning validated 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-4"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
-          <div
+          <span
             class="pf-v5-c-form-control__utilities"
           >
-            <div
+            <span
               class="pf-v5-c-form-control__icon pf-m-status"
             >
               <svg
@@ -1239,9 +1251,9 @@ exports[`numberInput renders warning validated 1`] = `
                   d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                 />
               </svg>
-            </div>
-          </div>
-        </div>
+            </span>
+          </span>
+        </span>
       </div>
       <div
         class="pf-v5-c-input-group__item"

package/src/components/Page/examples/Page.md

@@ -61,13 +61,13 @@ To add horizontal navigation to the top of a `<Page>`, add the navigation inside
 
 ```
 
-### Legacy tertiary navigation
+### Tertiary navigation (deprecated)
 
 [Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
 
 Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
 
-```ts file="./PageTertiaryNav.tsx"
+```ts file="./PageTertiaryNav.tsx" isDeprecated
 
 ```
 

package/src/components/Pagination/__tests__/Generated/__snapshots__/Navigation.test.tsx.snap

@@ -71,7 +71,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-pagination__nav-page-select"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -85,7 +85,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
           type="number"
           value="42"
         />
-      </div>
+      </span>
     </div>
     <div
       class="pf-v5-c-pagination__nav-control"