@patternfly/react-core 6.0.0-alpha.72 → 6.0.0-alpha.73

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.71",
+  "version": "6.0.0-alpha.72",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.71",
+  "version": "6.0.0-alpha.72",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.71",
+  "version": "6.0.0-alpha.72",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.72",
+  "version": "6.0.0-alpha.73",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.26",
-    "@patternfly/react-styles": "^6.0.0-alpha.25",
-    "@patternfly/react-tokens": "^6.0.0-alpha.25",
+    "@patternfly/react-icons": "^6.0.0-alpha.27",
+    "@patternfly/react-styles": "^6.0.0-alpha.26",
+    "@patternfly/react-tokens": "^6.0.0-alpha.26",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.150",
+    "@patternfly/patternfly": "6.0.0-alpha.160",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0df6094898bc94f9b0881e1ab97e6d0941df90af"
+  "gitHead": "5ce8c9748b3f0fafa36430e68d82d0725dff2f2e"
 }

package/src/components/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
-export type BannerColor = 'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple';
+export type BannerColor = 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple';
 
 export type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';
 

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

@@ -47,9 +47,9 @@ test('Renders with class name pf-m-orange when "orange" is passed to color prop'
   expect(screen.getByText('Test')).toHaveClass('pf-m-orange');
 });
 
-test('Renders with class name pf-m-gold when "gold" is passed to color prop', () => {
-  render(<Banner color="gold">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
+test('Renders with class name pf-m-yellow when "yellow" is passed to color prop', () => {
+  render(<Banner color="yellow">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-yellow');
 });
 
 test('Renders with class name pf-m-green when "green" is passed to color prop', () => {
@@ -57,9 +57,9 @@ test('Renders with class name pf-m-green when "green" is passed to color prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-green');
 });
 
-test('Renders with class name pf-m-cyan when "cyan" is passed to color prop', () => {
-  render(<Banner color="cyan">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-cyan');
+test('Renders with class name pf-m-teal when "teal" is passed to color prop', () => {
+  render(<Banner color="teal">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-teal');
 });
 
 test('Renders with class name pf-m-blue when "blue" is passed to color prop', () => {

package/src/components/Banner/examples/BannerBasic.tsx

@@ -11,11 +11,11 @@ export const BannerBasic: React.FunctionComponent = () => (
     <br />
     <Banner color="orange">Orange banner</Banner>
     <br />
-    <Banner color="gold">Gold banner</Banner>
+    <Banner color="yellow">Yellow banner</Banner>
     <br />
     <Banner color="green">Green banner</Banner>
     <br />
-    <Banner color="cyan">Cyan banner</Banner>
+    <Banner color="teal">Teal banner</Banner>
     <br />
     <Banner color="blue">Blue banner</Banner>
     <br />

package/src/components/Label/Label.tsx

@@ -20,7 +20,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'gold';
+  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
@@ -83,13 +83,13 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
 
 const colorStyles = {
   blue: styles.modifiers.blue,
-  cyan: styles.modifiers.cyan,
+  teal: styles.modifiers.teal,
   green: styles.modifiers.green,
   orange: styles.modifiers.orange,
   purple: styles.modifiers.purple,
   red: styles.modifiers.red,
   orangered: styles.modifiers.orangered,
-  gold: styles.modifiers.gold,
+  yellow: styles.modifiers.yellow,
   grey: ''
 };
 

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { Label } from '../Label';
 
-const labelColors = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey'];
+const labelColors = ['blue', 'teal', 'green', 'orange', 'purple', 'red', 'grey', 'yellow'];
 
 describe('Label', () => {
   test('renders', () => {

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

@@ -225,42 +225,6 @@ exports[`Label label with close button and outline variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with cyan color 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-v6-c-label pf-m-cyan pf-m-filled"
-  >
-    <span
-      class="pf-v6-c-label__content"
-    >
-      <span
-        class="pf-v6-c-label__text"
-      >
-        Something
-      </span>
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Label label with cyan color with outline variant 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-v6-c-label pf-m-cyan pf-m-outline"
-  >
-    <span
-      class="pf-v6-c-label__content"
-    >
-      <span
-        class="pf-v6-c-label__text"
-      >
-        Something
-      </span>
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
 exports[`Label label with green color 1`] = `
 <DocumentFragment>
   <span
@@ -479,6 +443,42 @@ exports[`Label label with red color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with teal color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-teal pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with teal color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-teal pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label label with truncation 1`] = `
 <DocumentFragment>
   <span
@@ -498,6 +498,42 @@ exports[`Label label with truncation 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with yellow color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-yellow pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with yellow color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-yellow pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label renders 1`] = `
 <DocumentFragment>
   <span

package/src/components/Label/examples/LabelFilled.tsx

@@ -259,81 +259,81 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="cyan">Cyan</Label>
-      <Label color="cyan" icon={<CubeIcon />}>
-        Cyan icon
+      <Label color="teal">Teal</Label>
+      <Label color="teal" icon={<CubeIcon />}>
+        Teal icon
       </Label>
-      <Label color="cyan" onClose={() => Function.prototype}>
-        Cyan removable
+      <Label color="teal" onClose={() => Function.prototype}>
+        Teal removable
       </Label>
-      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Cyan icon removable
+      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Teal icon removable
       </Label>
-      <Label color="cyan" href="#filled">
-        Cyan link
+      <Label color="teal" href="#filled">
+        Teal link
       </Label>
-      <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
-        Cyan link removable
+      <Label color="teal" href="#filled" onClose={() => Function.prototype}>
+        Teal link removable
       </Label>{' '}
-      <Label color="cyan" onClick={() => logColor('cyan')}>
-        Cyan clickable
+      <Label color="teal" onClick={() => logColor('teal')}>
+        Teal clickable
       </Label>
-      <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
-        Cyan clickable removable
+      <Label color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+        Teal clickable removable
       </Label>{' '}
-      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Cyan label with icon that overflows
+      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Teal label with icon that overflows
       </Label>{' '}
-      <Label color="cyan" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
-        Cyan link removable (disabled)
+      <Label color="teal" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Teal link removable (disabled)
       </Label>{' '}
       <Label
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('cyan')}
+        onClick={() => logColor('teal')}
         onClose={() => Function.prototype}
       >
-        Cyan clickable removable (disabled)
+        Teal clickable removable (disabled)
       </Label>
       <br />
       <br />
-      <Label color="gold">Gold</Label>
-      <Label color="gold" icon={<CubeIcon />}>
-        Gold icon
+      <Label color="yellow">Yellow</Label>
+      <Label color="yellow" icon={<CubeIcon />}>
+        Yellow icon
       </Label>
-      <Label color="gold" onClose={() => Function.prototype}>
-        Gold removable
+      <Label color="yellow" onClose={() => Function.prototype}>
+        Yellow removable
       </Label>
-      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Gold icon removable
+      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Yellow icon removable
       </Label>
-      <Label color="gold" href="#filled">
-        Gold link
+      <Label color="yellow" href="#filled">
+        Yellow link
       </Label>
-      <Label color="gold" href="#filled" onClose={() => Function.prototype}>
-        Gold link removable
+      <Label color="yellow" href="#filled" onClose={() => Function.prototype}>
+        Yellow link removable
       </Label>{' '}
-      <Label color="gold" onClick={() => logColor('gold')}>
-        Gold clickable
+      <Label color="yellow" onClick={() => logColor('yellow')}>
+        Yellow clickable
       </Label>
-      <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
-        Gold clickable removable
+      <Label color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+        Yellow clickable removable
       </Label>{' '}
-      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Gold label with icon that overflows
+      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Yellow label with icon that overflows
       </Label>{' '}
-      <Label color="gold" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
-        Gold link removable (disabled)
+      <Label color="yellow" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Yellow link removable (disabled)
       </Label>{' '}
       <Label
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('gold')}
+        onClick={() => logColor('yellow')}
         onClose={() => Function.prototype}
       >
-        Gold clickable removable (disabled)
+        Yellow clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -182,7 +182,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           <MenuItem itemId="Orange">Orange</MenuItem>
           <MenuItem itemId="Red">Red</MenuItem>
           <MenuItem itemId="Purple">Purple</MenuItem>
-          <MenuItem itemId="Cyan">Cyan</MenuItem>
+          <MenuItem itemId="Teal">Teal</MenuItem>
         </MenuList>
       </MenuContent>
     </Menu>

package/src/components/Label/examples/LabelOutline.tsx

@@ -328,101 +328,107 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="cyan">
-        Cyan
+      <Label variant="outline" color="teal">
+        Teal
       </Label>
-      <Label variant="outline" color="cyan" icon={<CubeIcon />}>
-        Cyan icon
+      <Label variant="outline" color="teal" icon={<CubeIcon />}>
+        Teal icon
       </Label>
-      <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
-        Cyan removable
+      <Label variant="outline" color="teal" onClose={() => Function.prototype}>
+        Teal removable
       </Label>
-      <Label variant="outline" color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Cyan icon removable
+      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Teal icon removable
       </Label>
-      <Label variant="outline" color="cyan" href="#outline">
-        Cyan link
+      <Label variant="outline" color="teal" href="#outline">
+        Teal link
       </Label>
-      <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
-        Cyan link removable
+      <Label variant="outline" color="teal" href="#outline" onClose={() => Function.prototype}>
+        Teal link removable
       </Label>{' '}
-      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
-        Cyan clickable
+      <Label variant="outline" color="teal" onClick={() => logColor('teal')}>
+        Teal clickable
       </Label>
-      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
-        Cyan clickable removable
+      <Label variant="outline" color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+        Teal clickable removable
       </Label>
-      <Label variant="outline" color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Cyan label with icon that overflows
+      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Teal label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
         onClose={() => Function.prototype}
       >
-        Cyan link removable (disabled)
+        Teal link removable (disabled)
       </Label>{' '}
       <Label
         variant="outline"
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('cyan')}
+        onClick={() => logColor('teal')}
         onClose={() => Function.prototype}
       >
-        Cyan clickable removable (disabled)
+        Teal clickable removable (disabled)
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="gold">
-        Gold
+      <Label variant="outline" color="yellow">
+        Yellow
       </Label>
-      <Label variant="outline" color="gold" icon={<CubeIcon />}>
-        Gold icon
+      <Label variant="outline" color="yellow" icon={<CubeIcon />}>
+        Yellow icon
       </Label>
-      <Label variant="outline" color="gold" onClose={() => Function.prototype}>
-        Gold removable
+      <Label variant="outline" color="yellow" onClose={() => Function.prototype}>
+        Yellow removable
       </Label>
-      <Label variant="outline" color="gold" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Gold icon removable
+      <Label variant="outline" color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Yellow icon removable
       </Label>
-      <Label variant="outline" color="gold" href="#outline">
-        Gold link
+      <Label variant="outline" color="yellow" href="#outline">
+        Yellow link
       </Label>
-      <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
-        Gold link removable
+      <Label variant="outline" color="yellow" href="#outline" onClose={() => Function.prototype}>
+        Yellow link removable
       </Label>{' '}
-      <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
-        Gold clickable
+      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')}>
+        Yellow clickable
       </Label>
-      <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
-        Gold clickable removable
+      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+        Yellow clickable removable
       </Label>
-      <Label variant="outline" color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Gold label with icon that overflows
+      <Label
+        variant="outline"
+        color="yellow"
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Yellow label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
         onClose={() => Function.prototype}
       >
-        Gold link removable (disabled)
+        Yellow link removable (disabled)
       </Label>{' '}
       <Label
         variant="outline"
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('gold')}
+        onClick={() => logColor('yellow')}
         onClose={() => Function.prototype}
       >
-        Gold clickable removable (disabled)
+        Yellow clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/demos/Tabs.md

@@ -47,7 +47,6 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-ic
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
-
 TabsOpenDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
 
@@ -97,7 +96,7 @@ TabsOpenDemo = () => {
             <DescriptionListDescription>
               <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                 <FlexItem>
-                  <Label color="cyan">NS</Label>
+                  <Label color="teal">NS</Label>
                 </FlexItem>
                 <FlexItem>
                   <a href="#">knative-serving-ingress</a>
@@ -293,7 +292,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
             <DescriptionListDescription>
               <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                 <FlexItem>
-                  <Label color="cyan">NS</Label>
+                  <Label color="teal">NS</Label>
                 </FlexItem>
                 <FlexItem>
                   <a href="#">knative-serving-ingress</a>