feat(Label): penta updates

packages/react-core/src/components/Label/Label.tsx

@@ -15,9 +15,9 @@ 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' | 'grey' | 'gold';
+  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'gold';
   /** Variant of the label. */
-  variant?: 'outline' | 'filled';
+  variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Flag indicating the label is compact. */
   isCompact?: boolean;
   /** @beta Flag indicating the label is editable. */
@@ -58,8 +58,6 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   closeBtnProps?: any;
   /** Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. */
   href?: string;
-  /** Flag indicating if the label is an overflow label. */
-  isOverflowLabel?: boolean;
   /** Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. */
   onClick?: (event: React.MouseEvent) => void;
   /** Forwards the label content and className to rendered function.  Use this prop for react router support.*/
@@ -81,6 +79,7 @@ const colorStyles = {
   orange: styles.modifiers.orange,
   purple: styles.modifiers.purple,
   red: styles.modifiers.red,
+  orangered: styles.modifiers.orangered,
   gold: styles.modifiers.gold,
   grey: ''
 };
@@ -104,7 +103,6 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   closeBtnAriaLabel,
   closeBtnProps,
   href,
-  isOverflowLabel,
   render,
   ...props
 }: LabelProps) => {
@@ -113,6 +111,10 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const editableButtonRef = React.useRef<HTMLButtonElement>();
   const editableInputRef = React.useRef<HTMLInputElement>();
 
+  const isOverflowLabel = variant === 'overflow';
+  const isAddLabel = variant === 'add';
+  const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
+
   React.useEffect(() => {
     document.addEventListener('mousedown', onDocMouseDown);
     document.addEventListener('keydown', onKeyDown);
@@ -198,12 +200,13 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     }
   };
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   const defaultButton = (
     <Button
       type="button"
       variant="plain"
+      hasNoPadding
       onClick={onClose}
       aria-label={closeBtnAriaLabel || `Close ${children}`}
       {...closeBtnProps}
@@ -253,7 +256,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   let LabelComponentChildElement = 'span';
   if (href) {
     LabelComponentChildElement = 'a';
-  } else if (isEditable || (onLabelClick && !isOverflowLabel)) {
+  } else if (isEditable || (onLabelClick && !isOverflowLabel && !isAddLabel)) {
     LabelComponentChildElement = 'button';
   }
 
@@ -265,7 +268,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const isButton = LabelComponentChildElement === 'button';
 
   const labelComponentChildProps = {
-    className: css(styles.labelContent),
+    className: css(styles.labelContent, isClickable && styles.modifiers.clickable),
     ...(isTooltipVisible && { tabIndex: 0 }),
     ...(href && { href }),
     ...(isButton && clickableLabelProps),
@@ -313,9 +316,11 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         isCompact && styles.modifiers.compact,
         isEditable && labelGrpStyles.modifiers.editable,
         isEditableActive && styles.modifiers.editableActive,
+        isClickable && styles.modifiers.clickable,
+        isAddLabel && styles.modifiers.add,
         className
       )}
-      onClick={isOverflowLabel ? onLabelClick : undefined}
+      onClick={isOverflowLabel || isAddLabel ? onLabelClick : undefined}
     >
       {!isEditableActive && labelComponentChild}
       {!isEditableActive && onClose && button}

packages/react-core/src/components/Label/LabelGroup.tsx

@@ -183,7 +183,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
             {numChildren > numLabels && (
               <li className={css(styles.labelGroupListItem)}>
                 <Label
-                  isOverflowLabel
+                  variant="overflow"
                   onClick={this.toggleCollapse}
                   className={css(isCompact && labelStyles.modifiers.compact)}
                 >
@@ -205,6 +205,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
         <div className={css(styles.labelGroupClose)}>
           <Button
             variant="plain"
+            hasNoPadding
             aria-label={closeBtnAriaLabel}
             onClick={onClick}
             id={`remove_group_${id}`}

packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`Label editable label 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close Something"
-        class="pf-v5-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
@@ -155,7 +155,7 @@ exports[`Label label with close button 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close Something"
-        class="pf-v5-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
@@ -200,7 +200,7 @@ exports[`Label label with close button and outline variant 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close Something"
-        class="pf-v5-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
@@ -336,10 +336,10 @@ exports[`Label label with grey color with outline variant 1`] = `
 exports[`Label label with href 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-label"
+    class="pf-v5-c-label pf-m-clickable"
   >
     <a
-      class="pf-v5-c-label__content"
+      class="pf-v5-c-label__content pf-m-clickable"
       href="#"
     >
       <span
@@ -355,10 +355,10 @@ exports[`Label label with href 1`] = `
 exports[`Label label with href with outline variant 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-label pf-m-outline"
+    class="pf-v5-c-label pf-m-outline pf-m-clickable"
   >
     <a
-      class="pf-v5-c-label__content"
+      class="pf-v5-c-label__content pf-m-clickable"
       href="#"
     >
       <span

packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -255,7 +255,7 @@ exports[`LabelGroup label group with closable category 1`] = `
         aria-disabled="false"
         aria-label="Close label group"
         aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
-        class="pf-v5-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"

packages/react-core/src/components/Label/examples/Label.css

@@ -0,0 +1,6 @@
+#ws-react-c-label-filled-labels .pf-v5-c-label,
+#ws-react-c-label-outlined-labels .pf-v5-c-label,
+#ws-react-c-label-compact-labels .pf-v5-c-label {
+  margin-inline-end: var(--pf-t--global--spacer--sm); 
+  margin-block-end: var(--pf-t--global--spacer--sm); 
+}

packages/react-core/src/components/Label/examples/Label.md

@@ -7,76 +7,92 @@ propComponents: ['Label', 'LabelGroup']
 
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { Link } from '@reach/router';
+import './Label.css';
 
 ## Examples
 
 ### Filled labels
 
 ```ts file="LabelFilled.tsx"
+
 ```
 
 ### Outlined labels
 
 ```ts file="LabelOutline.tsx"
+
 ```
 
 ### Compact labels
 
 ```ts file="LabelCompact.tsx"
+
 ```
 
 ### Label with router link
 
 ```ts file="LabelRouterLink.tsx"
+
 ```
 
 ### Editable labels
 
-Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape. 
+Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.
 
 You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.
 
 ```ts file="LabelEditable.tsx" isBeta
-```
 
+```
 
 ### Basic label group
-Use a label group when you have multiple labels to display at once. 
+
+Use a label group when you have multiple labels to display at once.
 
 ```ts file="LabelGroupBasic.tsx"
+
 ```
 
 ### Label group with overflow
+
 An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.
 
 ```ts file="LabelGroupOverflow.tsx"
+
 ```
 
 ### Label group with categories
+
 Use a category name to organize a set of labels
 
 ```ts file="LabelGroupCategory.tsx"
+
 ```
 
 ### Label group with removable categories
 
 ```ts file="LabelGroupCategoryRemovable.tsx"
+
 ```
 
 ### Vertical label group
+
 Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.
 
 ```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
+
 ```
 
 ### Editable label group
 
 ```ts isBeta file="LabelGroupEditableLabels.tsx"
+
 ```
 
 ### Editable label group with add button
 
 The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).
 
 ```ts isBeta file="LabelGroupEditableAdd.tsx"
+
 ```

packages/react-core/src/components/Label/examples/LabelCompact.tsx

@@ -4,24 +4,54 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 export const LabelCompact: React.FunctionComponent = () => (
   <React.Fragment>
-    <Label isCompact>Grey</Label>{' '}
+    <Label isCompact>Compact</Label>
     <Label isCompact icon={<InfoCircleIcon />}>
       Compact icon
-    </Label>{' '}
+    </Label>
     <Label isCompact onClose={() => Function.prototype}>
       Compact removable
-    </Label>{' '}
+    </Label>
     <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
       Compact icon removable
-    </Label>{' '}
+    </Label>
     <Label isCompact href="#compact">
       Compact link
-    </Label>{' '}
+    </Label>
     <Label isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
     </Label>
     <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Compact label with icon that overflows
     </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="blue" isCompact>
+      Compact
+    </Label>
+    <Label variant="outline" color="blue" isCompact icon={<InfoCircleIcon />}>
+      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}>
+      Compact icon removable
+    </Label>
+    <Label variant="outline" color="blue" isCompact href="#compact">
+      Compact link
+    </Label>
+    <Label variant="outline" color="blue" isCompact href="#compact" onClose={() => Function.prototype}>
+      Compact link removable
+    </Label>
+    <Label
+      variant="outline"
+      color="blue"
+      isCompact
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
+      Compact label with icon that overflows
+    </Label>
   </React.Fragment>
 );