@patternfly/react-core 6.3.1-prerelease.5 → 6.3.1-prerelease.7

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.4","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.6","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.4","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.6","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.4","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.6","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.5",
+  "version": "6.3.1-prerelease.7",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "559712b7e2d3720b833a20caed00a2991f361243"
+  "gitHead": "3bdab282cd61e6a509e383aa3bbcd0feb7857745"
 }

package/src/components/Tabs/Tabs.tsx

@@ -438,6 +438,10 @@ class Tabs extends Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
+
+    if (prevState.uncontrolledIsExpandedLocal !== this.state.uncontrolledIsExpandedLocal) {
+      this.setAccentStyles(true);
+    }
   }
 
   static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {

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

@@ -1,4 +1,5 @@
 import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Tabs } from '../Tabs';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
@@ -50,6 +51,53 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when com
   jest.useRealTimers();
 });
 
+test(`Renders with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component initially mounts`, async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
+  render(
+    <Tabs
+      isVertical
+      expandable={{ default: 'expandable' }}
+      toggleText="Jump to section"
+      defaultIsExpanded={false}
+      role="region"
+    >
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  jest.useFakeTimers();
+  await user.click(screen.getByRole('button', { name: 'Jump to section' }));
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
+  jest.useRealTimers();
+});
+
+test(`Does not render with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component is finished mounting`, async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Tabs
+      isVertical
+      expandable={{ default: 'expandable' }}
+      toggleText="Jump to section"
+      defaultIsExpanded={false}
+      role="region"
+    >
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Jump to section' }));
+  expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">

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

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-12"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -413,7 +413,7 @@ exports[`should render expandable vertical tabs 1`] = `
         <button
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
+          data-ouia-component-id="OUIA-Generated-Button-plain-5"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="generated-id-button"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    data-ouia-component-id="OUIA-Generated-Tabs-6"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-15"
+      data-ouia-component-id="OUIA-Generated-Tabs-17"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-17"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-7"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    data-ouia-component-id="OUIA-Generated-Tabs-10"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

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

@@ -9,6 +9,7 @@ import {
   DataListItemCells,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -28,7 +29,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const DataListBasic: React.FunctionComponent = () => {
   const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
@@ -98,13 +99,22 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon /> 10
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
+                              10 <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 4
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 5
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>
@@ -140,23 +150,41 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon /> 5
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 9
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              9 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 2
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              2 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem>
-                              <CheckCircleIcon />
+                              <Icon status="success">
+                                <CheckCircleIcon />
+                              </Icon>
                               11
+                              <span className="pf-v6-screen-reader">Completed</span>
                             </FlexItem>
                             <FlexItem>
-                              <ExclamationTriangleIcon /> 4
+                              <Icon status="warning">
+                                <ExclamationTriangleIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Warnings</span>
                             </FlexItem>
                             <FlexItem>
-                              <TimesCircleIcon /> 1
+                              <Icon status="danger">
+                                <ExclamationCircleIcon />
+                              </Icon>
+                              1 <span className="pf-v6-screen-reader">Error</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>
@@ -220,14 +248,23 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon />
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
                               10
+                              <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 4
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 5
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>
@@ -263,22 +300,40 @@ export const DataListBasic: React.FunctionComponent = () => {
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                             <FlexItem>
-                              <CodeBranchIcon /> 5
+                              <Icon>
+                                <CodeBranchIcon />
+                              </Icon>
+                              5 <span className="pf-v6-screen-reader">Branches</span>
                             </FlexItem>
                             <FlexItem>
-                              <CodeIcon /> 9
+                              <Icon>
+                                <CodeIcon />
+                              </Icon>
+                              9 <span className="pf-v6-screen-reader">Code blocks</span>
                             </FlexItem>
                             <FlexItem>
-                              <CubeIcon /> 2
+                              <Icon>
+                                <CubeIcon />
+                              </Icon>
+                              2 <span className="pf-v6-screen-reader">Workspaces</span>
                             </FlexItem>
                             <FlexItem>
-                              <CheckCircleIcon /> 11
+                              <Icon status="success">
+                                <CheckCircleIcon />
+                              </Icon>
+                              11 <span className="pf-v6-screen-reader">Completed</span>
                             </FlexItem>
                             <FlexItem>
-                              <ExclamationTriangleIcon /> 4
+                              <Icon status="warning">
+                                <ExclamationTriangleIcon />
+                              </Icon>
+                              4 <span className="pf-v6-screen-reader">Warnings</span>
                             </FlexItem>
                             <FlexItem>
-                              <TimesCircleIcon /> 1
+                              <Icon status="danger">
+                                <ExclamationCircleIcon />
+                              </Icon>
+                              1 <span className="pf-v6-screen-reader">Error</span>
                             </FlexItem>
                             <FlexItem> Updated 2 days ago</FlexItem>
                           </Flex>

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

@@ -10,6 +10,7 @@ import {
   DataListItemCells,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -151,17 +152,29 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
                           <Flex flexWrap={{ default: 'wrap' }}>
                             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                               <FlexItem>
-                                <CodeBranchIcon /> {threads}
+                                <Icon>
+                                  <CodeBranchIcon />
+                                </Icon>{' '}
+                                {threads}
+                                <span className="pf-v6-screen-reader">Branches</span>
                               </FlexItem>
                             </Flex>
                             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                               <FlexItem>
-                                <CodeIcon /> {applications}
+                                <Icon>
+                                  <CodeIcon />
+                                </Icon>{' '}
+                                {applications}
+                                <span className="pf-v6-screen-reader">Code blocks</span>
                               </FlexItem>
                             </Flex>
                             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                               <FlexItem>
-                                <CubeIcon /> {workspaces}
+                                <Icon>
+                                  <CubeIcon />
+                                </Icon>{' '}
+                                {workspaces}
+                                <span className="pf-v6-screen-reader">Workspaces</span>
                               </FlexItem>
                             </Flex>
                             <FlexItem> Updated {lastModified}</FlexItem>

package/src/demos/DataListDemo.md

@@ -15,7 +15,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
@@ -30,14 +30,17 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 ### Expandable control in toolbar
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
+
 ```
 
 ### Actionable
 
 ```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+
 ```
 
 ### Static bottom pagination
 
 ```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
-```
+
+```