feat(label-group): create pf-label-group element

.changeset/yummy-eagles-itch.md

@@ -0,0 +1,19 @@
+---
+"@patternfly/elements": minor
+---
+
+Added `<pf-label-group>`.
+
+A **label group** is a collection of labels that can be grouped by category
+and used to represent one or more values assigned to a single attribute.
+When the number of labels exceeds the configured limit, additional labels
+are hidden under an overflow indicator.
+
+```html
+<pf-label-group>
+  <span slot="category">Filters</span>
+  <pf-label removable>Security</pf-label>
+  <pf-label removable>Performance</pf-label>
+  <pf-label removable>Networking</pf-label>
+</pf-label-group>
+```

elements/package.json

@@ -39,6 +39,7 @@
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
     "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",
     "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",
+    "./pf-label-group/pf-label-group.js": "./pf-label-group/pf-label-group.js",
     "./pf-label/pf-label.js": "./pf-label/pf-label.js",
     "./pf-select/pf-select.js": "./pf-select/pf-select.js",
     "./pf-select/pf-listbox.js": "./pf-select/pf-listbox.js",

elements/pf-label-group/README.md

@@ -0,0 +1,46 @@
+# Label Group
+A label group is a collection of labels that can be grouped by category and
+used to represent one or more values assigned to a single attribute. When
+the number of labels exceeds the configured limit, additional labels are
+hidden under an overflow indicator.
+
+Read more about Label Group in the [PatternFly Elements Label Group documentation](https://patternflyelements.org/components/label-group)
+
+## Installation
+
+Load `<pf-label-group>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-label-group/pf-label-group.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-label-group/pf-label-group.js';
+```
+
+## Usage
+
+```html
+<pf-label-group>
+  <pf-label color="blue">Security</pf-label>
+  <pf-label color="green">Performance</pf-label>
+  <pf-label color="red">Networking</pf-label>
+</pf-label-group>
+```
+
+With a category:
+```html
+<pf-label-group>
+  <span slot="category">Filters</span>
+  <pf-label removable>Security</pf-label>
+  <pf-label removable>Performance</pf-label>
+</pf-label-group>
+```

elements/pf-label-group/demo/index.html

@@ -0,0 +1,9 @@
+<pf-label-group>
+  <pf-label color="blue">Blue</pf-label>
+  <pf-label color="green">Green</pf-label>
+  <pf-label color="orange">Orange</pf-label>
+</pf-label-group>
+
+<script type="module">
+  import '@patternfly/elements/pf-label-group/pf-label-group.js';
+</script>

elements/pf-label-group/demo/label-group-closeable.html

@@ -0,0 +1,10 @@
+<pf-label-group closeable>
+  <span slot="category">Filters</span>
+  <pf-label color="blue" removable>Security</pf-label>
+  <pf-label color="green" removable>Performance</pf-label>
+  <pf-label color="red" removable>Networking</pf-label>
+</pf-label-group>
+
+<script type="module">
+  import '@patternfly/elements/pf-label-group/pf-label-group.js';
+</script>

elements/pf-label-group/demo/label-group-vertical.html

@@ -0,0 +1,10 @@
+<pf-label-group orientation="vertical">
+  <span slot="category">Group</span>
+  <pf-label color="red" icon="info-circle" removable>Label 1</pf-label>
+  <pf-label color="green" icon="info-circle" removable>Label 2</pf-label>
+  <pf-label color="blue" icon="info-circle" removable>Label 3</pf-label>
+</pf-label-group>
+
+<script type="module">
+  import '@patternfly/elements/pf-label-group/pf-label-group.js';
+</script>

elements/pf-label-group/demo/label-group-with-a-very-long-name.html

@@ -0,0 +1,10 @@
+<pf-label-group>
+  <span slot="category">Label group with a very long category name</span>
+  <pf-label color="red" icon="info-circle">Label 1</pf-label>
+  <pf-label color="blue" icon="info-circle">Label 2</pf-label>
+  <pf-label color="green" icon="info-circle">Label 3</pf-label>
+</pf-label-group>
+
+<script type="module">
+  import '@patternfly/elements/pf-label-group/pf-label-group.js';
+</script>

elements/pf-label-group/demo/label-group-with-overflow-labels.html

@@ -0,0 +1,13 @@
+<pf-label-group num-labels="3">
+  <span slot="category">Tags</span>
+  <pf-label color="orange" icon="info-circle" removable>Label 1</pf-label>
+  <pf-label color="purple" icon="info-circle" removable>Label 2</pf-label>
+  <pf-label color="blue" icon="info-circle" removable>Label 3</pf-label>
+  <pf-label color="red" icon="info-circle" removable>Label 4</pf-label>
+  <pf-label color="cyan" icon="info-circle" removable>Label 5</pf-label>
+  <pf-label color="green" icon="info-circle" removable>Label 6</pf-label>
+</pf-label-group>
+
+<script type="module">
+  import '@patternfly/elements/pf-label-group/pf-label-group.js';
+</script>

elements/pf-label-group/docs/pf-label-group.md

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <pf-label-group></pf-label-group>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}

elements/pf-label-group/pf-label-group.css

@@ -0,0 +1,100 @@
+:host {
+  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-label-group__label--MaxWidth: 18ch;
+  --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--pf-global--Color--100, #151515);
+}
+
+[hidden],
+.empty,
+::slotted([hidden]),
+::slotted([overflow-hidden]) {
+  display: none !important;
+}
+
+#outer {
+  display: inline-flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  column-gap: var(--pf-global--spacer--xs, 0.25rem);
+  border-radius: var(--pf-global--BorderRadius--sm, 3px);
+  padding: 0 !important;
+}
+
+#outer.has-category {
+  padding:
+    var(--pf-c-label-group--m-category--PaddingTop)
+    var(--pf-c-label-group--m-category--PaddingRight)
+    var(--pf-c-label-group--m-category--PaddingBottom)
+    var(--pf-c-label-group--m-category--PaddingLeft) !important;
+  background-color: var(--pf-c-label-group--m-category--BackgroundColor);
+}
+
+#labels {
+  margin-inline-end: var(--pf-c-label-group__list--MarginRight);
+  margin-block-end: var(--pf-c-label-group__list--MarginBottom);
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-global--FontSize--sm, 14px);
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+  line-height: 1.6;
+}
+
+#labels ::slotted(pf-label) {
+  display: inline-flex;
+  min-width: 0;
+  margin-inline-end: var(--pf-c-label-group__list-item--MarginRight);
+  margin-block-end: var(--pf-c-label-group__list-item--MarginBottom);
+}
+
+::slotted([slot="category"]) {
+  display: inline-block;
+  max-inline-size: var(--pf-c-label-group__label--MaxWidth);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin-inline-end: var(--pf-c-label-group__label--MarginRight);
+  font-size: var(--pf-c-label-group__label--FontSize);
+}
+
+:host([orientation="vertical"]) #outer {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+#close-button {
+  --pf-icon--size: 16px;
+  margin-block: var(--pf-c-label-group__close--MarginTop) var(--pf-c-label-group__close--MarginBottom);
+  inset-block-start: 0.125em;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}