@patternfly/react-core 6.0.0-alpha.50 → 6.0.0-alpha.52

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -15,28 +15,57 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
     setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
-    <ToggleGroup aria-label="Text and icon toggle group">
-      <ToggleGroupItem
-        icon={<CopyIcon />}
-        text="Copy"
-        buttonId="toggle-group-text-icons-1"
-        isSelected={isSelected['toggle-group-text-icons-1']}
-        onChange={handleItemClick}
-      />
-      <ToggleGroupItem
-        icon={<UndoIcon />}
-        text="Undo"
-        buttonId="toggle-group-text-icons-2"
-        isSelected={isSelected['toggle-group-text-icons-2']}
-        onChange={handleItemClick}
-      />
-      <ToggleGroupItem
-        icon={<ShareSquareIcon />}
-        text="Share"
-        buttonId="toggle-group-text-icons-3"
-        isSelected={isSelected['toggle-group-text-icons-3']}
-        onChange={handleItemClick}
-      />
-    </ToggleGroup>
+    <>
+      <ToggleGroup aria-label="Text and icon toggle group with icons at start">
+        <ToggleGroupItem
+          icon={<CopyIcon />}
+          text="Copy"
+          buttonId="toggle-group-text-icons-1"
+          isSelected={isSelected['toggle-group-text-icons-1']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<UndoIcon />}
+          text="Undo"
+          buttonId="toggle-group-text-icons-2"
+          isSelected={isSelected['toggle-group-text-icons-2']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<ShareSquareIcon />}
+          text="Share"
+          buttonId="toggle-group-text-icons-3"
+          isSelected={isSelected['toggle-group-text-icons-3']}
+          onChange={handleItemClick}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup aria-label="Text and icon toggle group with icons at end">
+        <ToggleGroupItem
+          icon={<CopyIcon />}
+          iconPosition="end"
+          text="Copy"
+          buttonId="toggle-group-text-icons-4"
+          isSelected={isSelected['toggle-group-text-icons-4']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<UndoIcon />}
+          iconPosition="end"
+          text="Undo"
+          buttonId="toggle-group-text-icons-5"
+          isSelected={isSelected['toggle-group-text-icons-5']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<ShareSquareIcon />}
+          iconPosition="end"
+          text="Share"
+          buttonId="toggle-group-text-icons-6"
+          isSelected={isSelected['toggle-group-text-icons-6']}
+          onChange={handleItemClick}
+        />
+      </ToggleGroup>
+    </>
   );
 };

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

@@ -10,6 +10,8 @@ import { ToolbarFilter } from '../ToolbarFilter';
 import { ToolbarGroup } from '../ToolbarGroup';
 import { Button } from '../../Button/Button';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('Toolbar', () => {
   it('should render inset', () => {
     const items = (

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

@@ -111,12 +111,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
               <span
                 aria-hidden="true"
                 class="pf-v6-c-label-group__label"
-                id="pf-random-id-0"
+                id="generated-id"
               >
                 Status
               </span>
               <ul
-                aria-labelledby="pf-random-id-0"
+                aria-labelledby="generated-id"
                 class="pf-v6-c-label-group__list"
                 role="list"
               >
@@ -216,12 +216,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
               <button
                 aria-disabled="false"
                 aria-label="Close label group"
-                aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
+                aria-labelledby="remove_group_generated-id generated-id"
                 class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
-                id="remove_group_pf-random-id-0"
+                id="remove_group_generated-id"
                 type="button"
               >
                 <svg

package/src/demos/AlertGroup.md

@@ -6,6 +6,7 @@ section: components
 import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 

package/src/demos/BackToTop.md

@@ -2,6 +2,7 @@
 id: Back to top
 section: components
 ---
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 

package/src/demos/Banner.md

@@ -5,6 +5,7 @@ section: components
 
 import { css } from '@patternfly/react-styles';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 
@@ -24,7 +25,7 @@ import {
   Text
 } from '@patternfly/react-core';
 
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { css } from '@patternfly/react-styles';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 
@@ -89,7 +90,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { css } from '@patternfly/react-styles';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 
@@ -132,8 +133,8 @@ class BannerDemo extends React.Component {
               <PageSection>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
-                    <GalleryItem key={i}>
-                      <Card key={i}>
+                    <GalleryItem key={index}>
+                      <Card key={index}>
                         <CardBody>This is a card</CardBody>
                       </Card>
                     </GalleryItem>

package/src/demos/CardView/CardView.md

@@ -18,6 +18,8 @@ import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
 ## Demos
 
 This demonstrates how you can assemble a full page view that contains a grid of equal sized cards that includes a toolbar for managing card grid contents.

package/src/demos/CardView/examples/CardView.tsx

@@ -48,7 +48,7 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 export const CardViewBasic: React.FunctionComponent = () => {

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -24,7 +24,7 @@ import {
   ToolbarContent
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -38,7 +38,7 @@ export const DataListBasic: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <React.Fragment>
-      <ToolbarItem>
+      <ToolbarItem variant="bulk-select">
         <MenuToggle
           aria-label="Select cards"
           splitButtonOptions={{
@@ -55,13 +55,15 @@ export const DataListBasic: React.FunctionComponent = () => {
       <ToolbarItem>
         <MenuToggle>Filter by creator name</MenuToggle>
       </ToolbarItem>
-      <ToolbarItem>
+      <ToolbarItem variant="overflow-menu">
         <OverflowMenu breakpoint="md">
           <OverflowMenuItem>
             <Button variant="primary">Create instance</Button>
           </OverflowMenuItem>
           <OverflowMenuControl hasAdditionalOptions>
-            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain" icon={<EllipsisVIcon />} />
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
+              <EllipsisVIcon />
+            </MenuToggle>
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>

package/src/demos/DataListDemo.md

@@ -14,6 +14,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -648,7 +648,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -377,7 +377,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -464,7 +464,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -514,7 +514,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -487,7 +487,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -295,7 +295,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -362,7 +362,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/JumpLinks.md

@@ -4,6 +4,7 @@ section: components
 ---
 
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 
@@ -34,7 +35,7 @@ import {
   TextContent,
   getResizeObserver
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 ScrollspyH2 = () => {

package/src/demos/PrimaryDetail.md

@@ -24,6 +24,7 @@ import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 

package/src/demos/RTL/RTL.md

@@ -26,6 +26,6 @@ This demonstrates how the UI adapts to the writing mode of the page.
 
 ### Paginated table
 
-```js file="./examples/PaginatedTable.jsx" isFullscreen
+```js file="./examples/PaginatedTable.tsx" isFullscreen
 
 ```