@patternfly/react-core 6.0.0-alpha.21 → 6.0.0-alpha.22

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.20","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.21","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.20","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.21","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.20","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.21","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.21",
+  "version": "6.0.0-alpha.22",
   "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": "1794095e336814dc8ed16282e1bae4a171ebaa46"
+  "gitHead": "86a75d22746d3f69d3fe8aec947d39213e8b60d4"
 }

package/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}

package/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}`}

package/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

package/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"

package/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); 
+}

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

@@ -7,71 +7,86 @@ 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
@@ -79,4 +94,5 @@ Labels in a group can also be stacked vertically. This example shows a verical l
 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"
+
 ```

package/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>
 );

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

@@ -9,16 +9,17 @@ export const LabelFilled: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
-      <Label onClose={() => Function.prototype}>Grey removable</Label>{' '}
+      <Label>Grey</Label>
+      <Label icon={<InfoCircleIcon />}>Grey icon</Label>
+      <Label onClose={() => Function.prototype}>Grey removable</Label>
       <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Grey icon removable
-      </Label>{' '}
-      <Label href="#filled">Grey link</Label>{' '}
+      </Label>
+      <Label href="#filled">Grey link</Label>
       <Label href="#filled" onClose={() => Function.prototype}>
         Grey link removable
       </Label>
-      <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}
+      <Label onClick={() => logColor('grey')}>Grey clickable</Label>
       <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
@@ -27,25 +28,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="blue">Blue</Label>{' '}
+      <Label color="blue">Blue</Label>
       <Label color="blue" icon={<InfoCircleIcon />}>
         Blue icon
-      </Label>{' '}
+      </Label>
       <Label color="blue" onClose={() => Function.prototype}>
         Blue removable
-      </Label>{' '}
+      </Label>
       <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Blue icon removable
-      </Label>{' '}
+      </Label>
       <Label color="blue" href="#filled">
         Blue link
-      </Label>{' '}
+      </Label>
       <Label color="blue" href="#filled" onClose={() => Function.prototype}>
         Blue link removable
       </Label>
       <Label color="blue" onClick={() => logColor('blue')}>
         Blue clickable
-      </Label>{' '}
+      </Label>
       <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
@@ -54,25 +55,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="green">Green</Label>{' '}
+      <Label color="green">Green</Label>
       <Label color="green" icon={<InfoCircleIcon />}>
         Green icon
-      </Label>{' '}
+      </Label>
       <Label color="green" onClose={() => Function.prototype}>
         Green removable
-      </Label>{' '}
+      </Label>
       <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Green icon removable
-      </Label>{' '}
+      </Label>
       <Label color="green" href="#filled">
         Green link
-      </Label>{' '}
+      </Label>
       <Label color="green" href="#filled" onClose={() => Function.prototype}>
         Green link removable
       </Label>
       <Label color="green" onClick={() => logColor('green')}>
         Green clickable
-      </Label>{' '}
+      </Label>
       <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
@@ -81,25 +82,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="orange">Orange</Label>{' '}
+      <Label color="orange">Orange</Label>
       <Label color="orange" icon={<InfoCircleIcon />}>
         Orange icon
-      </Label>{' '}
+      </Label>
       <Label color="orange" onClose={() => Function.prototype}>
         Orange removable
-      </Label>{' '}
+      </Label>
       <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Orange icon removable
-      </Label>{' '}
+      </Label>
       <Label color="orange" href="#filled">
         Orange link
-      </Label>{' '}
+      </Label>
       <Label color="orange" href="#filled" onClose={() => Function.prototype}>
         Orange link removable
       </Label>
       <Label color="orange" onClick={() => logColor('orange')}>
         Orange clickable
-      </Label>{' '}
+      </Label>
       <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
@@ -108,25 +109,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="red">Red</Label>{' '}
+      <Label color="red">Red</Label>
       <Label color="red" icon={<InfoCircleIcon />}>
         Red icon
-      </Label>{' '}
+      </Label>
       <Label color="red" onClose={() => Function.prototype}>
         Red removable
-      </Label>{' '}
+      </Label>
       <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Red icon removable
-      </Label>{' '}
+      </Label>
       <Label color="red" href="#filled">
         Red link
-      </Label>{' '}
+      </Label>
       <Label color="red" href="#filled" onClose={() => Function.prototype}>
         Red link removable
       </Label>
       <Label color="red" onClick={() => logColor('red')}>
         Red clickable
-      </Label>{' '}
+      </Label>
       <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
@@ -135,25 +136,52 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="purple">Purple</Label>{' '}
+      <Label color="orangered">Orange red</Label>
+      <Label color="orangered" icon={<InfoCircleIcon />}>
+        Orange red icon
+      </Label>
+      <Label color="orangered" onClose={() => Function.prototype}>
+        Orange red removable
+      </Label>
+      <Label color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange red icon removable
+      </Label>
+      <Label color="orangered" href="#filled">
+        Orange red link
+      </Label>
+      <Label color="orangered" href="#filled" onClose={() => Function.prototype}>
+        Orange red link removable
+      </Label>
+      <Label color="orangered" onClick={() => logColor('orangered')}>
+        Orange red clickable
+      </Label>
+      <Label color="orangered" onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
+        Orange red clickable removable
+      </Label>
+      <Label color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Orange red label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="purple">Purple</Label>
       <Label color="purple" icon={<InfoCircleIcon />}>
         Purple icon
-      </Label>{' '}
+      </Label>
       <Label color="purple" onClose={() => Function.prototype}>
         Purple removable
-      </Label>{' '}
+      </Label>
       <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Purple icon removable
-      </Label>{' '}
+      </Label>
       <Label color="purple" href="#filled">
         Purple link
-      </Label>{' '}
+      </Label>
       <Label color="purple" href="#filled" onClose={() => Function.prototype}>
         Purple link removable
       </Label>
       <Label color="purple" onClick={() => logColor('purple')}>
         Purple clickable
-      </Label>{' '}
+      </Label>
       <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
@@ -162,25 +190,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="cyan">Cyan</Label>{' '}
+      <Label color="cyan">Cyan</Label>
       <Label color="cyan" icon={<InfoCircleIcon />}>
         Cyan icon
-      </Label>{' '}
+      </Label>
       <Label color="cyan" onClose={() => Function.prototype}>
         Cyan removable
-      </Label>{' '}
+      </Label>
       <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Cyan icon removable
-      </Label>{' '}
+      </Label>
       <Label color="cyan" href="#filled">
         Cyan link
-      </Label>{' '}
+      </Label>
       <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
         Cyan link removable
       </Label>
       <Label color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
-      </Label>{' '}
+      </Label>
       <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
@@ -189,25 +217,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="gold">Gold</Label>{' '}
+      <Label color="gold">Gold</Label>
       <Label color="gold" icon={<InfoCircleIcon />}>
         Gold icon
-      </Label>{' '}
+      </Label>
       <Label color="gold" onClose={() => Function.prototype}>
         Gold removable
-      </Label>{' '}
+      </Label>
       <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Gold icon removable
-      </Label>{' '}
+      </Label>
       <Label color="gold" href="#filled">
         Gold link
-      </Label>{' '}
+      </Label>
       <Label color="gold" href="#filled" onClose={() => Function.prototype}>
         Gold link removable
       </Label>
       <Label color="gold" onClick={() => logColor('gold')}>
         Gold clickable
-      </Label>{' '}
+      </Label>
       <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>

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

@@ -56,7 +56,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
       numLabels={5}
       isEditable
       addLabelControl={
-        <Label color="blue" variant="outline" isOverflowLabel onClick={onAdd}>
+        <Label variant="add" onClick={onAdd}>
           Add label
         </Label>
       }

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

@@ -102,7 +102,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
 
   const toggle = (
     <div ref={toggleRef}>
-      <Label color="blue" variant="outline" isOverflowLabel onClick={onToggleClick}>
+      <Label variant="overflow" onClick={onToggleClick}>
         Add label
       </Label>
     </div>