npm - @patternfly/react-core - Versions diffs - 6.3.1-prerelease.1 → 6.3.1-prerelease.11 - Mend

@patternfly/react-core 6.3.1-prerelease.1 → 6.3.1-prerelease.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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
-```
+```

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx CHANGED Viewed

@@ -618,7 +618,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
-      <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card filtering toolbar">
+      <PageSection isFilled padding={{ md: 'padding' }} aria-label="Card filtering toolbar">
         <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
           <ToolbarContent>{toolbarItems}</ToolbarContent>
         </Toolbar>

package/src/deprecated/components/Wizard/WizardNavItem.tsx CHANGED Viewed

@@ -92,7 +92,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon />