@patternfly/react-core 6.0.0-alpha.20 → 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.19","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.19","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.19","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.20",
+  "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",
@@ -58,6 +58,7 @@
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
+    "case-anything": "^2.1.13",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
@@ -72,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d00a526836d0f533fdbf7f6144dd7a89dfad6542"
+  "gitHead": "86a75d22746d3f69d3fe8aec947d39213e8b60d4"
 }

package/src/components/Icon/Icon.tsx

@@ -3,6 +3,23 @@ import styles from '@patternfly/react-styles/css/components/Icon/icon';
 import { css } from '@patternfly/react-styles';
 import { Spinner } from '../Spinner';
 
+export type IconSize =
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | 'headingSm'
+  | 'headingMd'
+  | 'headingLg'
+  | 'headingXl'
+  | 'heading_2xl'
+  | 'heading_3xl'
+  | 'bodySm'
+  | 'bodyDefault'
+  | 'bodyLg';
+
 export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
   /** Icon content */
   children?: React.ReactNode;
@@ -11,11 +28,11 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   /** Additional classes applied to the icon container */
   className?: string;
   /** Size of the icon component container and icon. */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: IconSize;
   /** Size of icon. Overrides the icon size set by the size property. */
-  iconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  iconSize?: IconSize;
   /** Size of progress icon. Overrides the icon size set by the size property. */
-  progressIconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  progressIconSize?: IconSize;
   /** Status color of the icon */
   status?: 'custom' | 'info' | 'success' | 'warning' | 'danger';
   /** Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties. */

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Icon } from '../Icon';
+import { kebabCase } from 'case-anything';
+import { Icon, IconSize } from '../Icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
@@ -41,16 +42,60 @@ test('sets additional custom class successfully', () => {
   expect(iconContainer).toHaveClass('test');
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
+Object.values([
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  'headingSm',
+  'headingMd',
+  'headingLg',
+  'headingXl',
+  'heading_2xl',
+  'heading_3xl',
+  'bodySm',
+  'bodyDefault',
+  'bodyLg'
+]).forEach((size) => {
   test(`sets icon size modifier successfully - ${size}`, () => {
     render(
-      <Icon iconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`content-${size}-icon`}>
+      <Icon iconSize={size as IconSize} title={`content-${size}-icon`}>
         <CheckIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
 
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
+  });
+
+  test(`sets progress icon size modifier successfully - ${size}`, () => {
+    render(
+      <Icon isInProgress progressIconSize={size as IconSize} title={`progress-content-${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
+
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
+  });
+
+  test(`sets size modifier successfully - ${size}`, () => {
+    render(
+      <Icon size={size as IconSize} title={`${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`${size}-icon`);
+
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
   });
 });
 
@@ -64,19 +109,6 @@ test('check icon without iconSize', () => {
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
-  test(`sets progress icon size modifier successfully - ${size}`, () => {
-    render(
-      <Icon isInProgress progressIconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`progress-content-${size}-icon`}>
-        <CheckIcon />
-      </Icon>
-    );
-    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
-
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
-  });
-});
-
 test('check icon without progress icon size', () => {
   render(
     <Icon title="no-progress-icon-size">
@@ -87,19 +119,6 @@ test('check icon without progress icon size', () => {
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
-  test(`sets size modifier successfully - ${size}`, () => {
-    render(
-      <Icon size={size as 'sm' | 'md' | 'lg' | 'xl'} title={`${size}-icon`}>
-        <CheckIcon />
-      </Icon>
-    );
-    const iconContainer = screen.getByTitle(`${size}-icon`);
-
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
-  });
-});
-
 test('check icon without size', () => {
   render(
     <Icon title="no-size">

package/src/components/Icon/examples/BodyIconSizes.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const BodyIconSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="bodySm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="bodyDefault">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="bodyLg">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const HeadingIconSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="headingSm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingMd">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingLg">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingXl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="heading_2xl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="heading_3xl">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/examples/Icon.md

@@ -23,9 +23,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 ```ts file="IconBasic.tsx"
 ```
 
-### Sizes
+### Standalone icon sizes
 
-```ts file="IconSizes.tsx"
+These are the standard options for sizing icons.
+
+```ts file="StandaloneIconSizes.tsx"
+```
+
+### Body sizes
+
+These size options are meant to make icons match the size of body text.
+
+```ts file="BodyIconSizes.tsx"
+```
+
+### Heading sizes
+
+These size options are meant to make icons match the size of heading text.
+
+```ts file="HeadingIconSizes.tsx"
 ```
 
 ### Status colors

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -4,16 +4,16 @@ import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-i
 
 export const IconContentSizes: React.FunctionComponent = () => (
   <React.Fragment>
-    <Icon size="xl" iconSize="sm">
+    <Icon size="3xl" iconSize="lg">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl" iconSize="md">
+    <Icon size="3xl" iconSize="xl">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl" iconSize="lg">
+    <Icon size="3xl" iconSize="2xl">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl">
+    <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>
   </React.Fragment>

package/src/components/Icon/examples/{IconSizes.tsx → StandaloneIconSizes.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const IconSizes: React.FunctionComponent = () => (
+export const StandaloneIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="sm">
       <PlusCircleIcon />
@@ -16,5 +16,11 @@ export const IconSizes: React.FunctionComponent = () => (
     <Icon size="xl">
       <PlusCircleIcon />
     </Icon>
+    <Icon size="2xl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="3xl">
+      <PlusCircleIcon />
+    </Icon>
   </React.Fragment>
 );

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