@patternfly/react-core 4.222.2 → 4.222.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.222.3 (2022-06-15)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.222.2 (2022-06-15)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.css

@@ -11978,10 +11978,6 @@ ul.pf-c-list {
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
 
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
-
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -12024,7 +12020,7 @@ ul.pf-c-list {
 
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 
@@ -23044,69 +23040,6 @@ svg.pf-c-spinner.pf-m-xl {
   color: var(--pf-global--Color--100);
 }
 
-.pf-c-draggable {
-  --pf-c-draggable--Cursor: auto;
-  --pf-c-draggable--m-dragging--Cursor: grabbing;
-  --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
-  --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
-  --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
-  cursor: var(--pf-c-draggable--Cursor);
-}
-
-.pf-c-draggable.pf-m-dragging {
-  --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
-  position: relative;
-  background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
-  box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
-}
-
-.pf-c-draggable.pf-m-dragging::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
-}
-
-.pf-c-draggable.pf-m-drag-outside {
-  --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
-  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
-}
-
-.pf-c-droppable {
-  --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
-  --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
-  --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
-}
-
-.pf-c-droppable.pf-m-dragging {
-  position: relative;
-}
-
-.pf-c-droppable.pf-m-dragging::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  content: "";
-}
-
-.pf-c-droppable::after {
-  background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
-  border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
-}
-
-.pf-c-droppable.pf-m-drag-outside {
-  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
-}
-
 .pf-c-text-input-group {
   --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -26755,6 +26688,69 @@ svg.pf-c-spinner.pf-m-xl {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
+.pf-c-draggable {
+  --pf-c-draggable--Cursor: auto;
+  --pf-c-draggable--m-dragging--Cursor: grabbing;
+  --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
+  --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
+  cursor: var(--pf-c-draggable--Cursor);
+}
+
+.pf-c-draggable.pf-m-dragging {
+  --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
+  position: relative;
+  background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
+  box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
+}
+
+.pf-c-draggable.pf-m-dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
+}
+
+.pf-c-draggable.pf-m-drag-outside {
+  --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
+  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
+}
+
+.pf-c-droppable {
+  --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
+  --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
+}
+
+.pf-c-droppable.pf-m-dragging {
+  position: relative;
+}
+
+.pf-c-droppable.pf-m-dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+}
+
+.pf-c-droppable::after {
+  background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
+  border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
+}
+
+.pf-c-droppable.pf-m-drag-outside {
+  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
+}
+
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/dist/umd/react-core.min.css

@@ -11978,10 +11978,6 @@ ul.pf-c-list {
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
 
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
-
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -12024,7 +12020,7 @@ ul.pf-c-list {
 
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.2",
+  "version": "4.222.3",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.2",
-    "@patternfly/react-styles": "^4.72.2",
-    "@patternfly/react-tokens": "^4.74.2",
+    "@patternfly/react-icons": "^4.73.3",
+    "@patternfly/react-styles": "^4.72.3",
+    "@patternfly/react-tokens": "^4.74.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.196.7",
+    "@patternfly/patternfly": "4.196.8",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "7c58918e8fab9b30e51e24dce84141b9a7a063d2"
+  "gitHead": "302f7d03810ce43c87e50939e21e46e6f7029ca9"
 }

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

@@ -12,416 +12,22 @@ import { Link } from '@reach/router';
 
 ### Filled
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <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 href="#filled" onClose={Function.prototype}>
-    Grey link removable
-  </Label>
-  <Label icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Grey label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="blue">Blue</Label>{' '}
-  <Label color="blue" icon={<InfoCircleIcon />}>
-    Blue icon
-  </Label>{' '}
-  <Label color="blue" onClose={Function.prototype}>
-    Blue removable
-  </Label>{' '}
-  <Label color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Blue icon removable
-  </Label>{' '}
-  <Label color="blue" href="#filled">
-    Blue link
-  </Label>{' '}
-  <Label color="blue" href="#filled" onClose={Function.prototype}>
-    Blue link removable
-  </Label>
-  <Label color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Blue label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="green">Green</Label>{' '}
-  <Label color="green" icon={<InfoCircleIcon />}>
-    Green icon
-  </Label>{' '}
-  <Label color="green" onClose={Function.prototype}>
-    Green removable
-  </Label>{' '}
-  <Label color="green" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Green icon removable
-  </Label>{' '}
-  <Label color="green" href="#filled">
-    Green link
-  </Label>{' '}
-  <Label color="green" href="#filled" onClose={Function.prototype}>
-    Green link removable
-  </Label>
-  <Label color="green" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Green label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="orange">Orange</Label>{' '}
-  <Label color="orange" icon={<InfoCircleIcon />}>
-    Orange icon
-  </Label>{' '}
-  <Label color="orange" onClose={Function.prototype}>
-    Orange removable
-  </Label>{' '}
-  <Label color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Orange icon removable
-  </Label>{' '}
-  <Label color="orange" href="#filled">
-    Orange link
-  </Label>{' '}
-  <Label color="orange" href="#filled" onClose={Function.prototype}>
-    Orange link removable
-  </Label>
-  <Label color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Orange label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="red">Red</Label>{' '}
-  <Label color="red" icon={<InfoCircleIcon />}>
-    Red icon
-  </Label>{' '}
-  <Label color="red" onClose={Function.prototype}>
-    Red removable
-  </Label>{' '}
-  <Label color="red" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Red icon removable
-  </Label>{' '}
-  <Label color="red" href="#filled">
-    Red link
-  </Label>{' '}
-  <Label color="red" href="#filled" onClose={Function.prototype}>
-    Red link removable
-  </Label>
-  <Label color="red" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Red label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="purple">Purple</Label>{' '}
-  <Label color="purple" icon={<InfoCircleIcon />}>
-    Purple icon
-  </Label>{' '}
-  <Label color="purple" onClose={Function.prototype}>
-    Purple removable
-  </Label>{' '}
-  <Label color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Purple icon removable
-  </Label>{' '}
-  <Label color="purple" href="#filled">
-    Purple link
-  </Label>{' '}
-  <Label color="purple" href="#filled" onClose={Function.prototype}>
-    Purple link removable
-  </Label>
-  <Label color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Purple label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="cyan">Cyan</Label>{' '}
-  <Label color="cyan" icon={<InfoCircleIcon />}>
-    Cyan icon
-  </Label>{' '}
-  <Label color="cyan" onClose={Function.prototype}>
-    Cyan removable
-  </Label>{' '}
-  <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Cyan icon removable
-  </Label>{' '}
-  <Label color="cyan" href="#filled">
-    Cyan link
-  </Label>{' '}
-  <Label color="cyan" href="#filled" onClose={Function.prototype}>
-    Cyan link removable
-  </Label>
-  <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Cyan label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="gold">Gold</Label>{' '}
-  <Label color="gold" icon={<InfoCircleIcon />}>
-    Gold icon
-  </Label>{' '}
-  <Label color="gold" onClose={Function.prototype}>
-    Gold removable
-  </Label>{' '}
-  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Gold icon removable
-  </Label>{' '}
-  <Label color="gold" href="#filled">
-    Gold link
-  </Label>{' '}
-  <Label color="gold" href="#filled" onClose={Function.prototype}>
-    Gold link removable
-  </Label>
-  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Gold label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelFilled.tsx"
 ```
 
 ### Outline
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label variant="outline">Grey</Label>{' '}
-  <Label variant="outline" icon={<InfoCircleIcon />}>
-    Grey icon
-  </Label>{' '}
-  <Label variant="outline" onClose={Function.prototype}>
-    Grey removable
-  </Label>{' '}
-  <Label variant="outline" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Grey icon removable
-  </Label>{' '}
-  <Label variant="outline" href="#outline">
-    Grey link
-  </Label>{' '}
-  <Label variant="outline" href="#outline" onClose={Function.prototype}>
-    Grey link removable
-  </Label>
-  <Label variant="outline" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Grey label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="blue">
-    Blue
-  </Label>{' '}
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
-    Blue icon
-  </Label>{' '}
-  <Label variant="outline" color="blue" onClose={Function.prototype}>
-    Blue removable
-  </Label>{' '}
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Blue icon removable
-  </Label>{' '}
-  <Label variant="outline" color="blue" href="#outline">
-    Blue link
-  </Label>{' '}
-  <Label variant="outline" color="blue" href="#outline" onClose={Function.prototype}>
-    Blue link removable
-  </Label>
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Blue label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="green">
-    Green
-  </Label>{' '}
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
-    Green icon
-  </Label>{' '}
-  <Label variant="outline" color="green" onClose={Function.prototype}>
-    Green removable
-  </Label>{' '}
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Green icon removable
-  </Label>{' '}
-  <Label variant="outline" color="green" href="#outline">
-    Green link
-  </Label>{' '}
-  <Label variant="outline" color="green" href="#outline" onClose={Function.prototype}>
-    Green link removable
-  </Label>
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Green label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="orange">
-    Orange
-  </Label>{' '}
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
-    Orange icon
-  </Label>{' '}
-  <Label variant="outline" color="orange" onClose={Function.prototype}>
-    Orange removable
-  </Label>{' '}
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Orange icon removable
-  </Label>{' '}
-  <Label variant="outline" color="orange" href="#outline">
-    Orange link
-  </Label>{' '}
-  <Label variant="outline" color="orange" href="#outline" onClose={Function.prototype}>
-    Orange link removable
-  </Label>
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Orange label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="red">
-    Red
-  </Label>{' '}
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
-    Red icon
-  </Label>{' '}
-  <Label variant="outline" color="red" onClose={Function.prototype}>
-    Red removable
-  </Label>{' '}
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Red icon removable
-  </Label>{' '}
-  <Label variant="outline" color="red" href="#outline">
-    Red link
-  </Label>{' '}
-  <Label variant="outline" color="red" href="#outline" onClose={Function.prototype}>
-    Red link removable
-  </Label>
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Red label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="purple">
-    Purple
-  </Label>{' '}
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
-    Purple icon
-  </Label>{' '}
-  <Label variant="outline" color="purple" onClose={Function.prototype}>
-    Purple removable
-  </Label>{' '}
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Purple icon removable
-  </Label>{' '}
-  <Label variant="outline" color="purple" href="#outline">
-    Purple link
-  </Label>{' '}
-  <Label variant="outline" color="purple" href="#outline" onClose={Function.prototype}>
-    Purple link removable
-  </Label>
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Purple label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="cyan">
-    Cyan
-  </Label>{' '}
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
-    Cyan icon
-  </Label>{' '}
-  <Label variant="outline" color="cyan" onClose={Function.prototype}>
-    Cyan removable
-  </Label>{' '}
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Cyan icon removable
-  </Label>{' '}
-  <Label variant="outline" color="cyan" href="#outline">
-    Cyan link
-  </Label>{' '}
-  <Label variant="outline" color="cyan" href="#outline" onClose={Function.prototype}>
-    Cyan link removable
-  </Label>
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Cyan label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="gold">
-    Gold
-  </Label>{' '}
-  <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
-    Gold icon
-  </Label>{' '}
-  <Label variant="outline" color="gold" onClose={Function.prototype}>
-    Gold removable
-  </Label>{' '}
-  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Gold icon removable
-  </Label>{' '}
-  <Label variant="outline" color="gold" href="#outline">
-    Gold link
-  </Label>{' '}
-  <Label variant="outline" color="gold" href="#outline" onClose={Function.prototype}>
-    Gold link removable
-  </Label>
-  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Gold label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelOutline.tsx"
 ```
 
 ### Compact
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label isCompact>Grey</Label>{' '}
-  <Label isCompact icon={<InfoCircleIcon />}>
-    Compact icon
-  </Label>{' '}
-  <Label isCompact onClose={Function.prototype}>
-    Compact removable
-  </Label>{' '}
-  <Label isCompact icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Compact icon removable
-  </Label>{' '}
-  <Label isCompact href="#outline">
-    Compact link
-  </Label>{' '}
-  <Label isCompact href="#outline" onClose={Function.prototype}>
-    Compact link removable
-  </Label>
-  <Label isCompact icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Compact label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelCompact.tsx"
 ```
 
 ### Router link
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
-
-<Label
-  color="blue"
-  icon={<InfoCircleIcon />}
-  onClose={Function.prototype}
-  isTruncated
-  render={({ className, content, componentRef }) => (
-    <Link to="/" className={className} innerRef={componentRef}>
-      {content}
-    </Link>
-  )}
->
-  Blue label router link with icon that overflows
-</Label>;
+```ts file="LabelRouterLink.tsx"
 ```
 
 ### Editable
@@ -430,5 +36,5 @@ Click or press either enter or space to begin editing a label. After editing, cl
 
 You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.
 
-```js file="LabelEditable.tsx" isBeta 
+```ts file="LabelEditable.tsx" isBeta
 ```

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelCompact: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label isCompact>Grey</Label>{' '}
+    <Label isCompact icon={<InfoCircleIcon />}>
+      Compact icon
+    </Label>{' '}
+    <Label isCompact onClose={() => Function.prototype}>
+      Compact removable
+    </Label>{' '}
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Compact icon removable
+    </Label>{' '}
+    <Label isCompact href="#outline">
+      Compact link
+    </Label>{' '}
+    <Label isCompact href="#outline" onClose={() => Function.prototype}>
+      Compact link removable
+    </Label>
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Compact label with icon that overflows
+    </Label>
+  </React.Fragment>
+);

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

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelFilled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <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 href="#filled" onClose={() => Function.prototype}>
+      Grey link removable
+    </Label>
+    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Grey label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="blue">Blue</Label>{' '}
+    <Label color="blue" icon={<InfoCircleIcon />}>
+      Blue icon
+    </Label>{' '}
+    <Label color="blue" onClose={() => Function.prototype}>
+      Blue removable
+    </Label>{' '}
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Blue icon removable
+    </Label>{' '}
+    <Label color="blue" href="#filled">
+      Blue link
+    </Label>{' '}
+    <Label color="blue" href="#filled" onClose={() => Function.prototype}>
+      Blue link removable
+    </Label>
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Blue label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="green">Green</Label>{' '}
+    <Label color="green" icon={<InfoCircleIcon />}>
+      Green icon
+    </Label>{' '}
+    <Label color="green" onClose={() => Function.prototype}>
+      Green removable
+    </Label>{' '}
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Green icon removable
+    </Label>{' '}
+    <Label color="green" href="#filled">
+      Green link
+    </Label>{' '}
+    <Label color="green" href="#filled" onClose={() => Function.prototype}>
+      Green link removable
+    </Label>
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Green label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="orange">Orange</Label>{' '}
+    <Label color="orange" icon={<InfoCircleIcon />}>
+      Orange icon
+    </Label>{' '}
+    <Label color="orange" onClose={() => Function.prototype}>
+      Orange removable
+    </Label>{' '}
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Orange icon removable
+    </Label>{' '}
+    <Label color="orange" href="#filled">
+      Orange link
+    </Label>{' '}
+    <Label color="orange" href="#filled" onClose={() => Function.prototype}>
+      Orange link removable
+    </Label>
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Orange label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="red">Red</Label>{' '}
+    <Label color="red" icon={<InfoCircleIcon />}>
+      Red icon
+    </Label>{' '}
+    <Label color="red" onClose={() => Function.prototype}>
+      Red removable
+    </Label>{' '}
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Red icon removable
+    </Label>{' '}
+    <Label color="red" href="#filled">
+      Red link
+    </Label>{' '}
+    <Label color="red" href="#filled" onClose={() => Function.prototype}>
+      Red link removable
+    </Label>
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Red label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="purple">Purple</Label>{' '}
+    <Label color="purple" icon={<InfoCircleIcon />}>
+      Purple icon
+    </Label>{' '}
+    <Label color="purple" onClose={() => Function.prototype}>
+      Purple removable
+    </Label>{' '}
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Purple icon removable
+    </Label>{' '}
+    <Label color="purple" href="#filled">
+      Purple link
+    </Label>{' '}
+    <Label color="purple" href="#filled" onClose={() => Function.prototype}>
+      Purple link removable
+    </Label>
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Purple label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="cyan">Cyan</Label>{' '}
+    <Label color="cyan" icon={<InfoCircleIcon />}>
+      Cyan icon
+    </Label>{' '}
+    <Label color="cyan" onClose={() => Function.prototype}>
+      Cyan removable
+    </Label>{' '}
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Cyan icon removable
+    </Label>{' '}
+    <Label color="cyan" href="#filled">
+      Cyan link
+    </Label>{' '}
+    <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
+      Cyan link removable
+    </Label>
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Cyan label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="gold">Gold</Label>{' '}
+    <Label color="gold" icon={<InfoCircleIcon />}>
+      Gold icon
+    </Label>{' '}
+    <Label color="gold" onClose={() => Function.prototype}>
+      Gold removable
+    </Label>{' '}
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Gold icon removable
+    </Label>{' '}
+    <Label color="gold" href="#filled">
+      Gold link
+    </Label>{' '}
+    <Label color="gold" href="#filled" onClose={() => Function.prototype}>
+      Gold link removable
+    </Label>
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Gold label with icon that overflows
+    </Label>
+  </React.Fragment>
+);

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

@@ -0,0 +1,188 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelOutline: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label variant="outline">Grey</Label>{' '}
+    <Label variant="outline" icon={<InfoCircleIcon />}>
+      Grey icon
+    </Label>{' '}
+    <Label variant="outline" onClose={() => Function.prototype}>
+      Grey removable
+    </Label>{' '}
+    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Grey icon removable
+    </Label>{' '}
+    <Label variant="outline" href="#outline">
+      Grey link
+    </Label>{' '}
+    <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
+      Grey link removable
+    </Label>
+    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Grey label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="blue">
+      Blue
+    </Label>{' '}
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
+      Blue icon
+    </Label>{' '}
+    <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+      Blue removable
+    </Label>{' '}
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Blue icon removable
+    </Label>{' '}
+    <Label variant="outline" color="blue" href="#outline">
+      Blue link
+    </Label>{' '}
+    <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+      Blue link removable
+    </Label>
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Blue label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="green">
+      Green
+    </Label>{' '}
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
+      Green icon
+    </Label>{' '}
+    <Label variant="outline" color="green" onClose={() => Function.prototype}>
+      Green removable
+    </Label>{' '}
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Green icon removable
+    </Label>{' '}
+    <Label variant="outline" color="green" href="#outline">
+      Green link
+    </Label>{' '}
+    <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+      Green link removable
+    </Label>
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Green label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="orange">
+      Orange
+    </Label>{' '}
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
+      Orange icon
+    </Label>{' '}
+    <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+      Orange removable
+    </Label>{' '}
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Orange icon removable
+    </Label>{' '}
+    <Label variant="outline" color="orange" href="#outline">
+      Orange link
+    </Label>{' '}
+    <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+      Orange link removable
+    </Label>
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Orange label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="red">
+      Red
+    </Label>{' '}
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
+      Red icon
+    </Label>{' '}
+    <Label variant="outline" color="red" onClose={() => Function.prototype}>
+      Red removable
+    </Label>{' '}
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Red icon removable
+    </Label>{' '}
+    <Label variant="outline" color="red" href="#outline">
+      Red link
+    </Label>{' '}
+    <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+      Red link removable
+    </Label>
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Red label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="purple">
+      Purple
+    </Label>{' '}
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
+      Purple icon
+    </Label>{' '}
+    <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+      Purple removable
+    </Label>{' '}
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Purple icon removable
+    </Label>{' '}
+    <Label variant="outline" color="purple" href="#outline">
+      Purple link
+    </Label>{' '}
+    <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+      Purple link removable
+    </Label>
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Purple label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="cyan">
+      Cyan
+    </Label>{' '}
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
+      Cyan icon
+    </Label>{' '}
+    <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
+      Cyan removable
+    </Label>{' '}
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Cyan icon removable
+    </Label>{' '}
+    <Label variant="outline" color="cyan" href="#outline">
+      Cyan link
+    </Label>{' '}
+    <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
+      Cyan link removable
+    </Label>
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Cyan label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="gold">
+      Gold
+    </Label>{' '}
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+      Gold icon
+    </Label>{' '}
+    <Label variant="outline" color="gold" onClose={() => Function.prototype}>
+      Gold removable
+    </Label>{' '}
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Gold icon removable
+    </Label>{' '}
+    <Label variant="outline" color="gold" href="#outline">
+      Gold link
+    </Label>{' '}
+    <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
+      Gold link removable
+    </Label>
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Gold label with icon that overflows
+    </Label>
+  </React.Fragment>
+);

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import { Link } from '@reach/router';
+
+export const LabelRouterLink: React.FunctionComponent = () => (
+  <Label
+    color="blue"
+    icon={<InfoCircleIcon />}
+    onClose={() => Function.prototype}
+    isTruncated
+    render={({ className, content, componentRef }) => (
+      <Link to="/" className={className} innerRef={componentRef}>
+        {content}
+      </Link>
+    )}
+  >
+    Blue label router link with icon that overflows
+  </Label>
+);