@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

package/components/Label/label.css

@@ -3,6 +3,7 @@
   --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--MaxWidth: 100%;
   --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-label--Color: var(--pf-global--Color--100);
@@ -105,21 +106,22 @@
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
+  --pf-c-label__content--BackgroundColor: transparent;
   --pf-c-label__content--MaxWidth: 100%;
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-editable__content--MaxWidth: 16ch;
-  --pf-c-label__text--MaxWidth: 16ch;
+  --pf-c-label__text--MaxWidth: 100%;
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
+  --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
+  --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
+  --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-editable--Cursor: pointer;
   --pf-c-label--m-editable--TextDecoration: underline;
   --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -140,6 +142,7 @@
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
   position: relative;
+  max-width: var(--pf-c-label--MaxWidth);
   padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
   font-size: var(--pf-c-label--FontSize);
   color: var(--pf-c-label--Color);
@@ -284,12 +287,6 @@
 }
 
 .pf-c-label.pf-m-editable {
-  text-decoration: var(--pf-c-label--m-editable--TextDecoration);
-  cursor: var(--pf-c-label--m-editable--Cursor);
-  text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
-  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
-  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
   --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
@@ -299,6 +296,12 @@
   --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
   --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
   --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
+  text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+  text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+  cursor: var(--pf-c-label--m-editable--Cursor);
 }
 .pf-c-label.pf-m-editable:hover {
   --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -311,17 +314,6 @@
   --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
 }
-.pf-c-label .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
-  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
-  margin-top: var(--pf-c-label__c-button--MarginTop);
-  margin-right: var(--pf-c-label__c-button--MarginRight);
-  margin-bottom: var(--pf-c-label__c-button--MarginBottom);
-  margin-left: var(--pf-c-label__c-button--MarginLeft);
-}
 .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
@@ -347,11 +339,10 @@
 }
 
 .pf-c-label__content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   max-width: var(--pf-c-label__content--MaxWidth);
+  overflow: hidden;
   color: var(--pf-c-label__content--Color);
+  background-color: var(--pf-c-label__content--BackgroundColor);
   border-width: 0;
 }
 .pf-c-label__content::before {
@@ -365,9 +356,17 @@
   border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
   border-radius: var(--pf-c-label--BorderRadius);
 }
+input.pf-c-label__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 a.pf-c-label__content,
 button.pf-c-label__content {
+  padding: 0;
   cursor: pointer;
+  background-color: transparent;
   border: none;
 }
 a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
@@ -392,6 +391,20 @@ button.pf-c-label__content:focus {
   color: var(--pf-c-label__icon--Color);
 }
 
+.pf-c-label__actions {
+  margin-right: var(--pf-c-label__actions--MarginRight);
+  font-size: var(--pf-c-label__actions--FontSize);
+}
+.pf-c-label__actions .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
+  margin-top: var(--pf-c-label__actions--c-button--MarginTop);
+  margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
+}
+
 :where(.pf-theme-dark) .pf-c-label {
   --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/components/Label/label.scss

@@ -4,6 +4,7 @@
   --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--MaxWidth: 100%;
   --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-label--Color: var(--pf-global--Color--100);
@@ -134,27 +135,30 @@
 
   // Content
   --pf-c-label__content--Color: var(--pf-global--Color--100);
+  --pf-c-label__content--BackgroundColor: transparent;
   --pf-c-label__content--MaxWidth: 100%;
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-editable__content--MaxWidth: 16ch;
 
-  // text
-  --pf-c-label__text--MaxWidth: 16ch;
+  // Text
+  --pf-c-label__text--MaxWidth: 100%;
 
   // Icon
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
 
-  // Close button
-  --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  // Actions
+  --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
+
+  // Actions button (close)
+  --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
+  --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
+  --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
   // Editable
   --pf-c-label--m-editable--Cursor: pointer;
@@ -180,6 +184,7 @@
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
 
   position: relative;
+  max-width: var(--pf-c-label--MaxWidth);
   padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
   font-size: var(--pf-c-label--FontSize);
   color: var(--pf-c-label--Color);
@@ -340,13 +345,6 @@
   }
 
   &.pf-m-editable {
-    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
-    cursor: var(--pf-c-label--m-editable--Cursor);
-    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
-    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
-    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
-    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
-
     --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
     --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
@@ -359,6 +357,13 @@
     --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
     --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
 
+    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+    cursor: var(--pf-c-label--m-editable--Cursor);
+
     &:hover {
       --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
     }
@@ -374,19 +379,6 @@
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
   }
 
-  .pf-c-button {
-    --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
-    --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
-    --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
-    --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
-    --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
-
-    margin-top: var(--pf-c-label__c-button--MarginTop);
-    margin-right: var(--pf-c-label__c-button--MarginRight);
-    margin-bottom: var(--pf-c-label__c-button--MarginBottom);
-    margin-left: var(--pf-c-label__c-button--MarginLeft);
-  }
-
   &.pf-m-overflow,
   &.pf-m-add {
     --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
@@ -413,10 +405,10 @@
 }
 
 .pf-c-label__content {
-  @include pf-text-overflow;
-
   max-width: var(--pf-c-label__content--MaxWidth);
+  overflow: hidden;
   color: var(--pf-c-label__content--Color);
+  background-color: var(--pf-c-label__content--BackgroundColor);
   border-width: 0;
 
   &::before {
@@ -431,11 +423,18 @@
     border-radius: var(--pf-c-label--BorderRadius);
   }
 
+  // truncate input fields
+  @at-root input#{&} {
+    @include pf-text-overflow;
+  }
+
   // the content element can be used as a link
   @at-root {
     a#{&},
     button#{&} {
+      padding: 0;
       cursor: pointer;
+      background-color: transparent;
       border: none;
 
       &,
@@ -462,6 +461,22 @@
   color: var(--pf-c-label__icon--Color);
 }
 
+.pf-c-label__actions {
+  margin-right: var(--pf-c-label__actions--MarginRight);
+  font-size: var(--pf-c-label__actions--FontSize);
+
+  .pf-c-button {
+    --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
+    --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
+    --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
+    --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
+    --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
+
+    margin-top: var(--pf-c-label__actions--c-button--MarginTop);
+    margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
+  }
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/label";
 

package/components/LabelGroup/label-group.css

@@ -1,6 +1,16 @@
 .pf-c-label-group {
-  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group--ColumnGap: 0;
+  --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
@@ -10,26 +20,22 @@
   --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--MarginBottom: 0;
-  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-label-group__label--MaxWidth: 18ch;
   --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
   --pf-c-label-group__textarea--MinWidth: 12.5rem;
   --pf-c-label-group__textarea--PaddingTop: 0.125rem;
   --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-label-group__textarea--PaddingBottom: 0;
   --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
   display: inline-flex;
+  row-gap: var(--pf-c-label-group--RowGap);
+  column-gap: var(--pf-c-label-group--ColumnGap);
   align-items: center;
 }
 .pf-c-label-group.pf-m-category {
@@ -42,11 +48,12 @@
   border-radius: var(--pf-c-label-group--m-category--BorderRadius);
 }
 .pf-c-label-group.pf-m-vertical {
-  --pf-c-label-group__list--MarginRight: 0;
-  --pf-c-label-group__list--MarginBottom: 0;
-  --pf-c-label-group__list-item--MarginRight: 0;
-  --pf-c-label-group__label--MarginRight: 0;
-  --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
+  --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
+  --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
+  --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
+  --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
+  --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
+  --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
   --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
   --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
   --pf-c-label-group__close--MarginBottom: 0;
@@ -63,9 +70,6 @@
 .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
   flex-direction: column;
 }
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
-  --pf-c-label-group__list-item--MarginBottom: 0;
-}
 .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
   --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
   --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -86,20 +90,20 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
+  row-gap: var(--pf-c-label-group__main--RowGap);
+  column-gap: var(--pf-c-label-group__main--ColumnGap);
   align-items: baseline;
 }
 
 .pf-c-label-group__list {
   display: inline-flex;
   flex-wrap: wrap;
-  margin-right: var(--pf-c-label-group__list--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
+  row-gap: var(--pf-c-label-group__list--RowGap);
+  column-gap: var(--pf-c-label-group__list--ColumnGap);
 }
 
 .pf-c-label-group__list-item {
   display: inline-flex;
-  margin-right: var(--pf-c-label-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
 }
 
 .pf-c-label-group__label {
@@ -107,12 +111,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: var(--pf-c-label-group__label--MaxWidth);
-  margin-right: var(--pf-c-label-group__label--MarginRight);
-  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
   font-size: var(--pf-c-label-group__label--FontSize);
 }
 
 .pf-c-label-group__close {
+  display: flex;
+  align-self: start;
   margin-top: var(--pf-c-label-group__close--MarginTop);
   margin-right: var(--pf-c-label-group__close--MarginRight);
   margin-bottom: var(--pf-c-label-group__close--MarginBottom);

package/components/LabelGroup/label-group.scss

@@ -1,7 +1,21 @@
 .pf-c-label-group {
-  // List
-  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  // Label group - spaces main with the close button
+  --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group--ColumnGap: 0;
+  --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
+
+  // Main - spaces the category label with the list
+  --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
+
+  // List - spaces the items
+  --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
 
   // Category
   --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
@@ -15,9 +29,6 @@
   --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Label
-  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--MarginBottom: 0;
-  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-label-group__label--MaxWidth: 18ch;
 
@@ -26,14 +37,9 @@
   --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
-  // List item
-  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
-
   // Textarea
   --pf-c-label-group__textarea--MinWidth: #{pf-size-prem(200px)};
   --pf-c-label-group__textarea--PaddingTop: #{pf-size-prem(2px)};
@@ -42,6 +48,8 @@
   --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
 
   display: inline-flex;
+  row-gap: var(--pf-c-label-group--RowGap);
+  column-gap: var(--pf-c-label-group--ColumnGap);
   align-items: center;
 
   &.pf-m-category {
@@ -55,11 +63,12 @@
   }
 
   &.pf-m-vertical {
-    --pf-c-label-group__list--MarginRight: 0;
-    --pf-c-label-group__list--MarginBottom: 0;
-    --pf-c-label-group__list-item--MarginRight: 0;
-    --pf-c-label-group__label--MarginRight: 0;
-    --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
+    --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
+    --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
+    --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
+    --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
+    --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
+    --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
     --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
     --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
     --pf-c-label-group__close--MarginBottom: 0;
@@ -79,10 +88,6 @@
       flex-direction: column;
     }
 
-    .pf-c-label-group__list-item:last-child {
-      --pf-c-label-group__list-item--MarginBottom: 0;
-    }
-
     .pf-c-label-group__close .pf-c-button {
       --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
       --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -109,32 +114,32 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
+  row-gap: var(--pf-c-label-group__main--RowGap);
+  column-gap: var(--pf-c-label-group__main--ColumnGap);
   align-items: baseline;
 }
 
 .pf-c-label-group__list {
   display: inline-flex;
   flex-wrap: wrap;
-  margin-right: var(--pf-c-label-group__list--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
+  row-gap: var(--pf-c-label-group__list--RowGap);
+  column-gap: var(--pf-c-label-group__list--ColumnGap);
 }
 
 .pf-c-label-group__list-item {
   display: inline-flex;
-  margin-right: var(--pf-c-label-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
 }
 
 .pf-c-label-group__label {
   @include pf-text-overflow;
 
   max-width: var(--pf-c-label-group__label--MaxWidth);
-  margin-right: var(--pf-c-label-group__label--MarginRight);
-  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
   font-size: var(--pf-c-label-group__label--FontSize);
 }
 
 .pf-c-label-group__close {
+  display: flex;
+  align-self: start;
   margin-top: var(--pf-c-label-group__close--MarginTop);
   margin-right: var(--pf-c-label-group__close--MarginRight);
   margin-bottom: var(--pf-c-label-group__close--MarginBottom);

package/components/Login/login.css

@@ -157,10 +157,10 @@
 @media (min-width: 1200px) {
   .pf-c-login__container {
     display: grid;
-    justify-content: center;
-    grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
-    grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
     grid-template-areas: "main header" "main footer" "main .";
+    grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
+    grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
+    justify-content: center;
     padding-right: var(--pf-c-login__container--PaddingRight);
     padding-left: var(--pf-c-login__container--PaddingLeft);
   }
@@ -182,10 +182,10 @@
 }
 
 .pf-c-login__main {
+  grid-area: main;
   align-self: start;
   margin-bottom: var(--pf-c-login__main--MarginBottom);
   background-color: var(--pf-c-login__main--BackgroundColor);
-  grid-area: main;
 }
 .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
   padding-top: var(--pf-c-login__main-header--PaddingTop);
@@ -197,8 +197,8 @@
 .pf-c-login__main-header {
   display: grid;
   grid-template-columns: 100%;
-  column-gap: var(--pf-c-login__main-header--ColumnGap);
   row-gap: var(--pf-c-login__main-header--RowGap);
+  column-gap: var(--pf-c-login__main-header--ColumnGap);
   align-items: center;
   padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
 }
@@ -210,26 +210,26 @@
 
 .pf-c-login__main-header-utilities,
 .pf-c-login__main-header .pf-c-dropdown {
-  grid-column: auto;
   grid-row: auto;
+  grid-column: auto;
 }
 @media (min-width: 768px) {
   .pf-c-login__main-header-utilities,
-.pf-c-login__main-header .pf-c-dropdown {
-    grid-column: 2/3;
+  .pf-c-login__main-header .pf-c-dropdown {
     grid-row: 1;
+    grid-column: 2/3;
   }
 }
 
 .pf-c-login__main-header-utilities .pf-c-dropdown {
-  grid-column: auto;
   grid-row: auto;
+  grid-column: auto;
 }
 
 .pf-c-login__main-header-desc {
+  grid-column: 1/-1;
   margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
   font-size: var(--pf-c-login__main-header-desc--FontSize);
-  grid-column: 1/-1;
 }
 
 .pf-c-login__main-body {
@@ -264,11 +264,11 @@
 }
 
 .pf-c-login__main-footer-links-item-link svg {
-  fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
   width: 100%;
   max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
   height: 100%;
   max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
+  fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
 }
 .pf-c-login__main-footer-links-item-link:hover svg {
   fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);