@patternfly/patternfly 6.1.0-prerelease.9 → 6.1.0

package/components/Label/label.css

@@ -4,7 +4,7 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
-  --pf-v6-c-label--MinWidth: 3em;
+  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -161,6 +161,7 @@
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-label__content--Cursor: initial;
@@ -353,6 +354,7 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
+  --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
   --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -441,6 +443,7 @@
 .pf-v6-c-label__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pf-v6-c-label__text {

package/components/Label/label.scss

@@ -6,7 +6,7 @@
   --#{$label}--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --#{$label}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$label}--MaxWidth: 100%;
-  --#{$label}--MinWidth: 3em;
+  --#{$label}--MinWidth: calc((var(--#{$label}--FontSize) * var(--pf-t--global--font--line-height--body) + var(--#{$label}--PaddingBlockStart) + var(--#{$label}--PaddingBlockEnd)));
   --#{$label}--BorderWidth: 0;
   --#{$label}--BorderColor: transparent;
   --#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -203,6 +203,7 @@
   --#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
+  --#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd)));
 
   // Content
   --#{$label}__content--MaxWidth: 100%;
@@ -424,6 +425,7 @@
     --#{$label}--PaddingBlockEnd: var(--#{$label}--m-compact--PaddingBlockEnd);
     --#{$label}--PaddingInlineStart: var(--#{$label}--m-compact--PaddingInlineStart);
     --#{$label}--FontSize: var(--#{$label}--m-compact--FontSize);
+    --#{$label}--MinWidth: var(--#{$label}--m-compact--MinWidth);
     --#{$label}--m-editable--TextUnderlineOffset: var(--#{$label}--m-compact--m-editable--TextUnderlineOffset);
   }
 
@@ -535,6 +537,7 @@
 .#{$label}__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .#{$label}__text {

package/components/Table/table.css

@@ -308,6 +308,9 @@
   --pf-v6-c-table--cell--TextOverflow: ellipsis;
   --pf-v6-c-table--cell--WhiteSpace: nowrap;
 }
+.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
+  margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
+}
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
   outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
 }

package/components/Table/table.scss

@@ -406,6 +406,10 @@
     --#{$table}--cell--TextOverflow: ellipsis;
     --#{$table}--cell--WhiteSpace: nowrap;
 
+    .#{$table}__sort .#{$table}__button {
+      margin-block-end: calc(var(--#{$table}__button--PaddingBlockEnd) * -1);
+    }
+
     // stylelint-disable
     &.pf-m-nested-column-header {
       button:where(.#{$button}) {

package/components/_index.css

@@ -7882,7 +7882,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
-  --pf-v6-c-label--MinWidth: 3em;
+  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -8039,6 +8039,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-label__content--Cursor: initial;
@@ -8231,6 +8232,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
+  --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
   --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -8319,6 +8321,7 @@ label.pf-v6-c-input-group__text {
 .pf-v6-c-label__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pf-v6-c-label__text {
@@ -16532,6 +16535,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--TextOverflow: ellipsis;
   --pf-v6-c-table--cell--WhiteSpace: nowrap;
 }
+.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
+  margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
+}
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
   outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
 }

package/docs/components/Label/examples/Label.md

@@ -6582,6 +6582,41 @@ Use a label group to display multiple labels at once.
   </div>
 </div>
 
+<br />
+<br />
+
+<div class="pf-v6-c-label-group">
+  <div class="pf-v6-c-label-group__main">
+    <ul
+      class="pf-v6-c-label-group__list"
+      role="list"
+      aria-label="Group of labels"
+    >
+      <li class="pf-v6-c-label-group__list-item">
+        <span class="pf-v6-c-label">
+          <span class="pf-v6-c-label__content">
+            <span class="pf-v6-c-label__text">A</span>
+          </span>
+        </span>
+      </li>
+      <li class="pf-v6-c-label-group__list-item">
+        <span class="pf-v6-c-label pf-m-blue">
+          <span class="pf-v6-c-label__content">
+            <span class="pf-v6-c-label__text">T</span>
+          </span>
+        </span>
+      </li>
+      <li class="pf-v6-c-label-group__list-item">
+        <span class="pf-v6-c-label pf-m-green">
+          <span class="pf-v6-c-label__content">
+            <span class="pf-v6-c-label__text">I</span>
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+
 ```
 
 ### Label group with overflow

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.1.0-prerelease.9",
+  "version": "6.1.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -15344,7 +15344,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
-  --pf-v6-c-label--MinWidth: 3em;
+  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -15501,6 +15501,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-label__content--Cursor: initial;
@@ -15693,6 +15694,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
+  --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
   --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -15781,6 +15783,7 @@ label.pf-v6-c-input-group__text {
 .pf-v6-c-label__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pf-v6-c-label__text {
@@ -23994,6 +23997,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--TextOverflow: ellipsis;
   --pf-v6-c-table--cell--WhiteSpace: nowrap;
 }
+.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
+  margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
+}
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
   outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
 }

package/patternfly.css

@@ -15480,7 +15480,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
-  --pf-v6-c-label--MinWidth: 3em;
+  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -15637,6 +15637,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-label__content--Cursor: initial;
@@ -15829,6 +15830,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
+  --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
   --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -15917,6 +15919,7 @@ label.pf-v6-c-input-group__text {
 .pf-v6-c-label__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pf-v6-c-label__text {
@@ -24130,6 +24133,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--TextOverflow: ellipsis;
   --pf-v6-c-table--cell--WhiteSpace: nowrap;
 }
+.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
+  margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
+}
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
   outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
 }