@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.2

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

@@ -6,7 +6,7 @@ exports[`renders compact no background successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-compact pf-m-no-background"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -59,7 +59,7 @@ exports[`renders compact no background successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -315,7 +315,7 @@ exports[`renders compact successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-compact"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -368,7 +368,7 @@ exports[`renders compact successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -624,7 +624,7 @@ exports[`renders guides successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-guides"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -673,7 +673,7 @@ exports[`renders guides successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -909,7 +909,7 @@ exports[`tree view renders active successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -958,7 +958,7 @@ exports[`tree view renders active successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1194,7 +1194,7 @@ exports[`tree view renders badges successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1252,7 +1252,7 @@ exports[`tree view renders badges successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1533,7 +1533,7 @@ exports[`tree view renders basic successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1582,7 +1582,7 @@ exports[`tree view renders basic successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1818,7 +1818,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1878,7 +1878,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
           </label>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2174,7 +2174,7 @@ exports[`tree view renders icons successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2238,7 +2238,7 @@ exports[`tree view renders icons successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2549,7 +2549,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2625,7 +2625,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
           </label>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2903,13 +2903,35 @@ exports[`tree view renders search successfully 1`] = `
   <div
     class="pf-v5-c-tree-view__search"
   >
-    <input
-      aria-label="Search input example"
-      class="pf-v5-c-form-control pf-m-search"
-      id="input-search"
-      name="search-input"
-      type="search"
-    />
+    <div
+      class="pf-v5-c-form-control pf-m-icon"
+    >
+      <input
+        aria-label="Search input example"
+        id="input-search"
+        name="search-input"
+        type="search"
+      />
+      <div
+        class="pf-v5-c-form-control__utilities"
+      >
+        <div
+          class="pf-v5-c-form-control__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -2926,7 +2948,7 @@ exports[`tree view renders toolbar successfully 1`] = `
       class="pf-v5-c-divider"
     />
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2975,7 +2997,7 @@ exports[`tree view renders toolbar successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li

package/src/components/TreeView/examples/TreeView.md

@@ -1,7 +1,7 @@
 ---
 id: Tree view
 section: components
-cssPrefix: pf-c-tree-view
+cssPrefix: pf-v5-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 

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

@@ -12,7 +12,7 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
-test('renders with class pf-c-truncate', () => {
+test('renders with class pf-v5-c-truncate', () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
@@ -44,7 +44,7 @@ test('renders truncate with content', () => {
   expect(test).toHaveTextContent('Test');
 });
 
-test('only renders pf-c-truncate__start with default position', () => {
+test('only renders pf-v5-c-truncate__start with default position', () => {
   render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');

package/src/components/Truncate/examples/Truncate.md

@@ -2,7 +2,6 @@
 id: Truncate
 section: components
 propComponents: [Truncate]
-beta: true
 ---
 
 import './TruncateExamples.css';
@@ -13,7 +12,7 @@ import './TruncateExamples.css';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
   />
@@ -25,7 +24,7 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     trailingNumChars={10}
@@ -38,7 +37,7 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     position={'start'}
@@ -50,10 +49,10 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-c-truncate--example">
+<div className="pf-v5-c-truncate--example">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     tooltipPosition={'bottom'}
   />
 </div>
-```
+```

package/src/components/Truncate/examples/TruncateExamples.css

@@ -1,4 +1,4 @@
-.pf-c-truncate--example {
+.pf-v5-c-truncate--example {
   width: 320px;
   resize: horizontal;
   overflow: auto;

package/src/components/Wizard/WizardHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import { Title } from '../Title';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
@@ -31,19 +30,20 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   isCloseHidden,
   closeButtonAriaLabel,
   titleId,
-  descriptionComponent: Component = 'p',
+  descriptionComponent: Component = 'div',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
     {!isCloseHidden && (
-      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
-        <TimesIcon aria-hidden="true" />
-      </Button>
+      <div className={css(styles.wizardClose)}>
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
+          <TimesIcon aria-hidden="true" />
+        </Button>
+      </div>
     )}
-
-    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
-      {title || <>&nbsp;</>}
-    </Title>
+    <div className={css(styles.wizardTitle)}>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+    </div>
 
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>

package/src/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-c-wizard
+cssPrefix: pf-v5-c-wizard
 propComponents:
   [
     'Wizard',

package/src/demos/Button.md

@@ -15,7 +15,7 @@ Please note that only the button can be interacted with in this example. The use
 
 ```ts
 import React from 'react';
-import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';
+import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 const ProgressButton: React.FunctionComponent = () => {

package/src/demos/Card/Card.md

@@ -19,6 +19,7 @@ import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from './CardData.jsx';
 
 ## Demos
 
@@ -84,6 +85,7 @@ import sparkIcon from './camel-spark_200x150.png';
 import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
+import { data } from './CardData.jsx';
 
 class CardViewBasic extends React.Component {
   constructor(props) {
@@ -93,7 +95,7 @@ class CardViewBasic extends React.Component {
       filters: {
         products: []
       },
-      res: [],
+      cardData: data,
       isChecked: false,
       selectedItems: [],
       areAllSelected: false,
@@ -134,7 +136,8 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onCardKebabDropdownToggle = (key) => {
+    this.onCardKebabDropdownToggle = (key, event) => {
+      event?.stopPropagation();
       this.setState((prevState) => ({
         [key]: !prevState[key]
       }));
@@ -149,7 +152,7 @@ class CardViewBasic extends React.Component {
     this.deleteItem = (item) => (event) => {
       const filter = (getter) => (val) => getter(val) !== item.id;
       this.setState({
-        res: this.state.res.filter(filter(({ id }) => id)),
+        cardData: this.state.cardData.filter(filter(({ id }) => id)),
         selectedItems: this.state.selectedItems.filter(filter((id) => id))
       });
     };
@@ -162,7 +165,8 @@ class CardViewBasic extends React.Component {
 
     this.onPerPageSelect = (_event, perPage) => {
       this.setState({
-        perPage
+        perPage,
+        page: 1
       });
     };
 
@@ -264,7 +268,7 @@ class CardViewBasic extends React.Component {
 
   splitCheckboxSelectAll(e) {
     const { checked } = e.target;
-    const { isChecked, res } = this.state;
+    const { isChecked, cardData } = this.state;
     let collection = [];
 
     if (checked) {
@@ -329,9 +333,9 @@ class CardViewBasic extends React.Component {
   }
 
   getAllItems() {
-    const { res } = this.state;
+    const { cardData } = this.state;
     const collection = [];
-    for (const items of res) {
+    for (const items of cardData) {
       collection.push(items.id);
     }
 
@@ -339,31 +343,19 @@ class CardViewBasic extends React.Component {
   }
 
   updateSelected() {
-    const { res, selectedItems } = this.state;
-    let rows = res.map((post) => {
+    const { cardData, selectedItems } = this.state;
+    let rows = cardData.map((post) => {
       post.selected = selectedItems.includes(post.id);
       return post;
     });
 
     this.setState({
-      res: rows
+      cardData: rows
     });
   }
 
-  fetch(page, perPage) {
-    fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
   renderPagination() {
-    const { page, perPage, totalItemCount } = this.state;
+    const { page, perPage, totalItemCount, cardData } = this.state;
 
     const defaultPerPageOptions = [
       {
@@ -386,12 +378,8 @@ class CardViewBasic extends React.Component {
         page={page}
         perPage={perPage}
         perPageOptions={defaultPerPageOptions}
-        onSetPage={(_evt, value) => {
-          this.fetch(value, perPage);
-        }}
-        onPerPageSelect={(_evt, value) => {
-          this.fetch(1, value);
-        }}
+        onSetPage={this.onSetPage}
+        onPerPageSelect={this.onPerPageSelect}
         variant="top"
         isCompact
       />
@@ -399,7 +387,7 @@ class CardViewBasic extends React.Component {
   }
 
   buildSelectDropdown() {
-    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
+    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected, filters, cardData } = this.state;
     const numSelected = selectedItems.length;
     const allSelected = areAllSelected;
     const anySelected = numSelected > 0;
@@ -455,16 +443,56 @@ class CardViewBasic extends React.Component {
 
     const filterDropdownItems = (
       <SelectList>
-        <SelectOption hasCheckbox key="patternfly" itemId="PatternFly" isSelected={filters.products.includes("PatternFly")}>PatternFly</SelectOption>
-        <SelectOption hasCheckbox key="activemq" itemId="ActiveMQ" isSelected={filters.products.includes("ActiveMQ")}>ActiveMQ</SelectOption>
-        <SelectOption hasCheckbox key="apachespark" itemId="Apache Spark" isSelected={filters.products.includes("Apache Spark")}>Apache Spark</SelectOption>
-        <SelectOption hasCheckbox key="avro" itemId="Avro" isSelected={filters.products.includes("Avro")}>Avro</SelectOption>
-        <SelectOption hasCheckbox key="azureservices" itemId="Azure Services" isSelected={filters.products.includes("Azure Services")}>Azure Services</SelectOption>
-        <SelectOption hasCheckbox key="crypto" itemId="Crypto" isSelected={filters.products.includes("Crypto")}>Crypto</SelectOption>
-        <SelectOption hasCheckbox key="dropbox" itemId="DropBox" isSelected={filters.products.includes("DropBox")}>DropBox</SelectOption>
-        <SelectOption hasCheckbox key="jbossdatagrid" itemId="JBoss Data Grid" isSelected={filters.products.includes("JBoss Data Grid")}>JBoss Data Grid</SelectOption>
-        <SelectOption hasCheckbox key="rest" itemId="REST" isSelected={filters.products.includes("REST")}>REST</SelectOption>
-        <SelectOption hasCheckbox key="swagger" itemId="SWAGGER" isSelected={filters.products.includes("SWAGGER")}>SWAGGER</SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="patternfly"
+          value="PatternFly"
+          isSelected={filters.products.includes('PatternFly')}
+        >
+          PatternFly
+        </SelectOption>
+        <SelectOption hasCheckbox key="activemq" value="ActiveMQ" isSelected={filters.products.includes('ActiveMQ')}>
+          ActiveMQ
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="apachespark"
+          value="Apache Spark"
+          isSelected={filters.products.includes('Apache Spark')}
+        >
+          Apache Spark
+        </SelectOption>
+        <SelectOption hasCheckbox key="avro" value="Avro" isSelected={filters.products.includes('Avro')}>
+          Avro
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="azureservices"
+          value="Azure Services"
+          isSelected={filters.products.includes('Azure Services')}
+        >
+          Azure Services
+        </SelectOption>
+        <SelectOption hasCheckbox key="crypto" value="Crypto" isSelected={filters.products.includes('Crypto')}>
+          Crypto
+        </SelectOption>
+        <SelectOption hasCheckbox key="dropbox" value="DropBox" isSelected={filters.products.includes('DropBox')}>
+          DropBox
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="jbossdatagrid"
+          value="JBoss Data Grid"
+          isSelected={filters.products.includes('JBoss Data Grid')}
+        >
+          JBoss Data Grid
+        </SelectOption>
+        <SelectOption hasCheckbox key="rest" value="REST" isSelected={filters.products.includes('REST')}>
+          REST
+        </SelectOption>
+        <SelectOption hasCheckbox key="swagger" value="SWAGGER" isSelected={filters.products.includes('SWAGGER')}>
+          SWAGGER
+        </SelectOption>
       </SelectList>
     );
 
@@ -474,11 +502,7 @@ class CardViewBasic extends React.Component {
           aria-label="Products"
           role="menu"
           toggle={(toggleRef) => (
-            <MenuToggle
-              ref={toggleRef}
-              onClick={this.onToolbarDropdownToggle}
-              isExpanded={isLowerToolbarDropdownOpen}
-            >
+            <MenuToggle ref={toggleRef} onClick={this.onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>
               Filter by creator name
               {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
             </MenuToggle>
@@ -508,7 +532,7 @@ class CardViewBasic extends React.Component {
       splitButtonDropdownIsOpen,
       activeItem,
       filters,
-      res,
+      cardData,
       checked,
       selectedItems,
       areAllSelected,
@@ -576,13 +600,6 @@ class CardViewBasic extends React.Component {
       </React.Fragment>
     );
 
-    const filtered =
-      filters.products.length > 0
-        ? res.filter((card) => {
-            return filters.products.length === 0 || filters.products.includes(card.name);
-          })
-        : res;
-
     const icons = {
       pfIcon,
       activeMQIcon,
@@ -596,6 +613,13 @@ class CardViewBasic extends React.Component {
       swaggerIcon
     };
 
+    const filtered =
+      filters.products.length > 0
+        ? data.filter((card) => {
+            return filters.products.length === 0 || filters.products.includes(card.name);
+          })
+        : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
+
     return (
       <React.Fragment>
         <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
@@ -630,6 +654,7 @@ class CardViewBasic extends React.Component {
                 <Card
                   hasSelectableInput
                   isCompact
+                  isSelectableRaised
                   key={product.name}
                   id={product.name.replace(/ /g, '-')}
                   onKeyDown={(e) => this.onKeyDown(e, product.id)}
@@ -642,14 +667,14 @@ class CardViewBasic extends React.Component {
                       actions: (
                         <>
                           <Dropdown
-                            isOpen={this.state[key]}
+                            isOpen={this.state[key] ?? false}
                             onOpenChange={(isOpen) => this.setState({ [key]: isOpen })}
-                            toggle={(toggleRef) => (
+                            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                               <MenuToggle
                                 ref={toggleRef}
                                 aria-label={`${product.name} actions`}
                                 variant="plain"
-                                onClick={() => this.onCardKebabDropdownToggle(key)}
+                                onClick={(e) => this.onCardKebabDropdownToggle(key, e)}
                                 isExpanded={this.state[key]}
                               >
                                 <EllipsisVIcon />