@patternfly/react-core 6.0.0-alpha.37 → 6.0.0-alpha.38

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.0.0-alpha.36","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.0.0-alpha.37","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.0.0-alpha.36","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.0.0-alpha.37","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.0.0-alpha.36","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.0.0-alpha.37","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.37",
+  "version": "6.0.0-alpha.38",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e4cb348a4bac71637dc90085ee7dda5f16e1019c"
+  "gitHead": "3a88c11a91941fd01688e978a5c07b947f3a078a"
 }

package/src/components/Label/Label.tsx

@@ -5,9 +5,14 @@ import labelGrpStyles from '@patternfly/react-styles/css/components/Label/label-
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import { css } from '@patternfly/react-styles';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { useIsomorphicLayoutEffect } from '../../helpers';
 import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
@@ -18,6 +23,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'gold';
   /** 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. */
+  status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';
   /** Flag indicating the label is compact. */
   isCompact?: boolean;
   /** @beta Flag indicating the label is editable. */
@@ -46,7 +53,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** Icon added to the left of the label text. */
+  /** Icon added to the left of the label text. Overrides the icon set by the status property. */
   icon?: React.ReactNode;
   /** Close click callback for removable labels. If present, label will have a close button. */
   onClose?: (event: React.MouseEvent) => void;
@@ -84,11 +91,20 @@ const colorStyles = {
   grey: ''
 };
 
+const statusIcons = {
+  success: <CheckCircleIcon />,
+  warning: <ExclamationTriangleIcon />,
+  danger: <ExclamationCircleIcon />,
+  info: <InfoCircleIcon />,
+  custom: <BellIcon />
+};
+
 export const Label: React.FunctionComponent<LabelProps> = ({
   children,
   className = '',
   color = 'grey',
   variant = 'filled',
+  status,
   isCompact = false,
   isEditable = false,
   editableProps,
@@ -115,6 +131,14 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const isAddLabel = variant === 'add';
   const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
 
+  let _icon;
+  if (status) {
+    _icon = statusIcons[status];
+  }
+  if (icon) {
+    _icon = icon;
+  }
+
   React.useEffect(() => {
     document.addEventListener('mousedown', onDocMouseDown);
     document.addEventListener('keydown', onKeyDown);
@@ -235,7 +259,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   }, [isEditableActive]);
   const content = (
     <React.Fragment>
-      {icon && <span className={css(styles.labelIcon)}>{icon}</span>}
+      {_icon && <span className={css(styles.labelIcon)}>{_icon}</span>}
       <span
         ref={textRef}
         className={css(styles.labelText)}
@@ -318,7 +342,9 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       className={css(
         styles.label,
         colorStyles[color],
+        variant === 'filled' && styles.modifiers.filled,
         variant === 'outline' && styles.modifiers.outline,
+        status && styles.modifiers[status],
         isOverflowLabel && styles.modifiers.overflow,
         isCompact && styles.modifiers.compact,
         isEditable && labelGrpStyles.modifiers.editable,

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

@@ -3,7 +3,7 @@
 exports[`Label editable label 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-editable"
+    class="pf-v6-c-label pf-m-filled pf-m-editable"
   >
     <button
       class="pf-v6-c-label__content"
@@ -49,7 +49,7 @@ exports[`Label editable label 1`] = `
 exports[`Label editable label 2`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-editable pf-m-editable-active"
+    class="pf-v6-c-label pf-m-filled pf-m-editable pf-m-editable-active"
   >
     <input
       class="pf-v6-c-label__content"
@@ -64,7 +64,7 @@ exports[`Label editable label 2`] = `
 exports[`Label label with additional class name 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label klass1"
+    class="pf-v6-c-label pf-m-filled klass1"
   >
     <span
       class="pf-v6-c-label__content"
@@ -82,7 +82,7 @@ exports[`Label label with additional class name 1`] = `
 exports[`Label label with additional class name and props 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label class-1"
+    class="pf-v6-c-label pf-m-filled class-1"
     data-label-name="something"
     id="label-1"
   >
@@ -102,7 +102,7 @@ exports[`Label label with additional class name and props 1`] = `
 exports[`Label label with blue color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-blue"
+    class="pf-v6-c-label pf-m-blue pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -138,7 +138,7 @@ exports[`Label label with blue color with outline variant 1`] = `
 exports[`Label label with close button 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label"
+    class="pf-v6-c-label pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -228,7 +228,7 @@ exports[`Label label with close button and outline variant 1`] = `
 exports[`Label label with cyan color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-cyan"
+    class="pf-v6-c-label pf-m-cyan pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -264,7 +264,7 @@ exports[`Label label with cyan color with outline variant 1`] = `
 exports[`Label label with green color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-green"
+    class="pf-v6-c-label pf-m-green pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -300,7 +300,7 @@ exports[`Label label with green color with outline variant 1`] = `
 exports[`Label label with grey color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label"
+    class="pf-v6-c-label pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -336,7 +336,7 @@ exports[`Label label with grey color with outline variant 1`] = `
 exports[`Label label with href 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-clickable"
+    class="pf-v6-c-label pf-m-filled pf-m-clickable"
   >
     <a
       class="pf-v6-c-label__content pf-m-clickable"
@@ -374,7 +374,7 @@ exports[`Label label with href with outline variant 1`] = `
 exports[`Label label with orange color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-orange"
+    class="pf-v6-c-label pf-m-orange pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -410,7 +410,7 @@ exports[`Label label with orange color with outline variant 1`] = `
 exports[`Label label with purple color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-purple"
+    class="pf-v6-c-label pf-m-purple pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -446,7 +446,7 @@ exports[`Label label with purple color with outline variant 1`] = `
 exports[`Label label with red color 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-red"
+    class="pf-v6-c-label pf-m-red pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -482,7 +482,7 @@ exports[`Label label with red color with outline variant 1`] = `
 exports[`Label label with truncation 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label"
+    class="pf-v6-c-label pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -501,7 +501,7 @@ exports[`Label label with truncation 1`] = `
 exports[`Label renders 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label"
+    class="pf-v6-c-label pf-m-filled"
   >
     <span
       class="pf-v6-c-label__content"
@@ -519,7 +519,7 @@ exports[`Label renders 1`] = `
 exports[`Label renders with isCompact 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-label pf-m-compact"
+    class="pf-v6-c-label pf-m-filled pf-m-compact"
   >
     <span
       class="pf-v6-c-label__content"

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

@@ -17,7 +17,7 @@ exports[`LabelGroup label group compact 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label pf-m-compact"
+            class="pf-v6-c-label pf-m-filled pf-m-compact"
           >
             <span
               class="pf-v6-c-label__content"
@@ -34,7 +34,7 @@ exports[`LabelGroup label group compact 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label pf-m-compact"
+            class="pf-v6-c-label pf-m-filled pf-m-compact"
           >
             <span
               class="pf-v6-c-label__content"
@@ -51,7 +51,7 @@ exports[`LabelGroup label group compact 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label pf-m-compact"
+            class="pf-v6-c-label pf-m-filled pf-m-compact"
           >
             <span
               class="pf-v6-c-label__content"
@@ -104,7 +104,7 @@ exports[`LabelGroup label group default 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label"
+            class="pf-v6-c-label pf-m-filled"
           >
             <span
               class="pf-v6-c-label__content"
@@ -147,7 +147,7 @@ exports[`LabelGroup label group with category 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label"
+            class="pf-v6-c-label pf-m-filled"
           >
             <span
               class="pf-v6-c-label__content"
@@ -190,7 +190,7 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label"
+            class="pf-v6-c-label pf-m-filled"
           >
             <span
               class="pf-v6-c-label__content"
@@ -233,7 +233,7 @@ exports[`LabelGroup label group with closable category 1`] = `
           class="pf-v6-c-label-group__list-item"
         >
           <span
-            class="pf-v6-c-label"
+            class="pf-v6-c-label pf-m-filled"
           >
             <span
               class="pf-v6-c-label__content"

package/src/components/Label/examples/Label.md

@@ -5,6 +5,7 @@ cssPrefix: ['pf-v5-c-label', 'pf-v5-c-label-group']
 propComponents: ['Label', 'LabelGroup']
 ---
 
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { Link } from '@reach/router';
 import './Label.css';

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

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const LabelCompact: React.FunctionComponent = () => (
   <React.Fragment>
     <Label isCompact>Compact</Label>
-    <Label isCompact icon={<InfoCircleIcon />}>
+    <Label isCompact icon={<CubeIcon />}>
       Compact icon
     </Label>
     <Label isCompact onClose={() => Function.prototype}>
       Compact removable
     </Label>
-    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+    <Label isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
       Compact icon removable
     </Label>
     <Label isCompact href="#compact">
@@ -20,7 +20,7 @@ export const LabelCompact: React.FunctionComponent = () => (
     <Label isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
     </Label>
-    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label isCompact icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Compact label with icon that overflows
     </Label>
     <br />
@@ -28,13 +28,13 @@ export const LabelCompact: React.FunctionComponent = () => (
     <Label variant="outline" color="blue" isCompact>
       Compact
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<InfoCircleIcon />}>
+    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />}>
       Compact icon
     </Label>
     <Label variant="outline" color="blue" isCompact onClose={() => Function.prototype}>
       Compact removable
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
       Compact icon removable
     </Label>
     <Label variant="outline" color="blue" isCompact href="#compact">
@@ -47,7 +47,7 @@ export const LabelCompact: React.FunctionComponent = () => (
       variant="outline"
       color="blue"
       isCompact
-      icon={<InfoCircleIcon />}
+      icon={<CubeIcon />}
       onClose={() => Function.prototype}
       textMaxWidth="16ch"
     >