@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/components/Card/card.scss

@@ -6,14 +6,17 @@
   --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-card__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-card__title-text--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-card__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-card__title-text--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
 
   // Expandable
   --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
@@ -23,16 +26,44 @@
   --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
 
-  // Hoverable/selectable
-  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+
+  // Selectable/Clickable
+  --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
+
+  // Selected state (checked) of selectable card
+  --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
+
+  // Hover on selectable card
+  --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
-  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
 
-  // Hoverable/selectable raised
+  // Focus on selectable card (label)
+  --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
+  --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
+
+  // Focus on a selected card (label)
+  --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
+  
+  // Disabled state
+  --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
+  --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
+
+  // Selectable AND Clickable
+  // Hover on selectable AND clickable card
+  --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
+
+  // Selected selectable AND clickable card
+  --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
+
+  // Clicked (pf-m-current) selectable AND clickable card
+  --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
+  --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
+
+  // Hoverable/selectable raised (deprecated)
   --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
   --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -79,7 +110,7 @@
   --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
 
   // Display large
-  --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-card--m-display-lg__title-text--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
   --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
@@ -104,59 +135,81 @@
   // Toggle right
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
 
-  // Card input
+  // Card input (selectable raised)
   --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
 
+  position: relative;
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
   box-shadow: var(--pf-c-card--BoxShadow);
 
-  &.pf-m-hoverable {
-    &:hover {
-      box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
-    }
+  // SELECTABLE CARDS, CLICKABLE CARDS
+  &.pf-m-selectable,
+  &.pf-m-clickable {
+    isolation: isolate;
+    box-shadow: none; // box-shadow will come from the input's ::before instead of the card so remove this so there's isn't a double shadow
   }
 
-  &.pf-m-selectable {
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
-    }
-
-    &:focus {
-      box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
+  // stylelint-disable selector-max-class
+  // Cards that are selectable AND clickable
+  &.pf-m-selectable.pf-m-clickable {
+    .pf-c-card__selectable-actions .pf-c-check__label,
+    .pf-c-card__selectable-actions .pf-c-radio__label {
+      position: unset;
+  
+      &::before {
+        position: absolute;
+        inset: 0;
+        cursor: pointer;
+      }
     }
 
-    &:active {
-      box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
+    .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
+    .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
+      --pf-c-card--BackgroundColor: unset;
+      --pf-c-card--BorderColor: unset;
     }
 
+    // Card is selected
+    .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+    .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
     &.pf-m-selected {
-      box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
+      --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
+      --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
+    }
 
-      &::before {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        height: var(--pf-c-card--m-selectable--m-selected--before--Height);
-        content: "";
-        background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
+    // Card is clicked
+    &.pf-m-current {
+      --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
+      --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
+
+      // a selected card is clicked
+      &.pf-m-selected,
+      & .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+      & .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label {
+          --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
+        --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
       }
     }
-  }
 
+    // Disabled card
+    .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
+    .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
+    &.pf-m-disabled {
+      --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
+      --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
+      --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
+    }    
+  }
+  // stylelint-enable selector-max-class 
+ 
+  // RAISED CARDS
   &.pf-m-hoverable-raised,
   &.pf-m-selectable-raised,
   &.pf-m-non-selectable-raised {
-    position: relative;
-
     &::before {
       position: absolute;
       right: var(--pf-c-card--m-selectable-raised--before--Right);
@@ -229,7 +282,7 @@
   }
 
   &.pf-m-display-lg {
-    --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
+    --pf-c-card__title-text--FontSize: var(--pf-c-card--m-display-lg__title-text--FontSize);
     --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
     --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
     --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
@@ -295,20 +348,16 @@
     --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
     --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
 
-    .pf-c-card__actions {
-      --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
-    }
-
     .pf-c-card__header-toggle {
       order: 2;
     }
-
-    .pf-c-card__title {
-      flex: 1;
-    }
   }
 }
 
+.pf-c-card__header-main {
+  flex: 1;
+}
+
 .pf-c-card__header-toggle {
   align-self: flex-start;
   margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
@@ -319,23 +368,21 @@
   transition: var(--pf-c-card__header-toggle-icon--Transition);
 }
 
-.pf-c-card__title {
-  font-family: var(--pf-c-card__title--FontFamily);
-  font-size: var(--pf-c-card__title--FontSize);
-  font-weight: var(--pf-c-card__title--FontWeight);
+.pf-c-card__title-text {
+  font-family: var(--pf-c-card__title-text--FontFamily);
+  font-size: var(--pf-c-card__title-text--FontSize);
+  font-weight: var(--pf-c-card__title-text--FontWeight);
+  line-height: var(--pf-c-card__title-text--LineHeight);
 }
 
 .pf-c-card__actions {
   display: flex;
+  gap: var(--pf-c-card__actions--Gap);
   align-items: center;
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
-  margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
-
-  > * + * {
-    margin-left: var(--pf-c-card__actions--child--MarginLeft);
-  }
+  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
 
   + .pf-c-card__title,
   + .pf-c-card__body,
@@ -344,11 +391,64 @@
   }
 
   &.pf-m-no-offset {
-    --pf-c-card__header-toggle--MarginTop: 0;
-    --pf-c-card__header-toggle--MarginBottom: 0;
+    --pf-c-card__actions--MarginTop: 0;
+    --pf-c-card__actions--MarginBottom: 0;
+  }
+}
+
+// Labels are used to handle states of selectable and clickable cards
+.pf-c-card__selectable-actions .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__label {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    content: '';
+    background-color: var(--pf-c-card--BackgroundColor, transparent);
+    border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
+    box-shadow: var(--pf-c-card--BoxShadow, none);
+  }
+
+  &:hover {
+    --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
+    --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
   }
 }
 
+// Selected card
+.pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
+.pf-c-card.pf-m-selected {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
+}
+
+// Focus on the card (label)
+.pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
+}
+
+// Focus on a selected card
+.pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
+}
+
+// Disabled card
+.pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
+.pf-c-card.pf-m-disabled {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
+}
+
 .pf-c-card__header,
 .pf-c-card__title,
 .pf-c-card__body,
@@ -385,6 +485,7 @@
   font-size: var(--pf-c-card__footer--FontSize);
 }
 
+// for the selectable raised
 .pf-c-card__sr-input:focus + .pf-c-card::after {
   position: absolute;
   top: 0;

package/components/Chip/chip.css

@@ -22,18 +22,19 @@
   --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
   --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip__text--Color: var(--pf-global--Color--100);
   --pf-c-chip__text--MaxWidth: 16ch;
-  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
-  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
-  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
-  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
   color: var(--pf-global--Color--100);
   position: relative;
@@ -68,19 +69,6 @@
 .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
   font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
 }
-.pf-c-chip .pf-c-button {
-  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
-  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
-  margin-top: var(--pf-c-chip__c-button--MarginTop);
-  margin-right: var(--pf-c-chip__c-button--MarginRight);
-  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
-}
-.pf-c-chip .pf-c-badge {
-  margin-left: var(--pf-c-chip__c-badge--MarginLeft);
-}
 
 .pf-c-chip__text {
   overflow: hidden;
@@ -88,7 +76,6 @@
   white-space: nowrap;
   position: relative;
   max-width: var(--pf-c-chip__text--MaxWidth);
-  font-size: var(--pf-c-chip__text--FontSize);
   color: var(--pf-c-chip__text--Color);
 }
 
@@ -97,6 +84,28 @@
   margin-left: var(--pf-c-chip__icon--MarginLeft);
 }
 
+.pf-c-chip__content {
+  display: flex;
+  column-gap: var(--pf-c-chip__content--ColumnGap);
+  align-items: center;
+  font-size: var(--pf-c-chip__content--FontSize);
+}
+
+.pf-c-chip__actions {
+  font-size: var(--pf-c-chip__actions--FontSize);
+}
+.pf-c-chip__actions .pf-c-button {
+  --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
+  --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
+  margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
+  margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
+  margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
+  line-height: 1;
+}
+
 :where(.pf-theme-dark) .pf-c-chip {
   --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);

package/components/Chip/chip.scss

@@ -17,23 +17,26 @@
   --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
   --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
 
+  // chip content
+  --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
+
   // chip text
-  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-chip__text--Color: var(--pf-global--Color--100);
   --pf-c-chip__text--MaxWidth: 16ch;
 
-  // chip button
-  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
-  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
-  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
-  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
+  // chip actions
+  --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
 
-  // chip badge
-  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
+  // buttons within chip actions
+  --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
 
   // icon
   --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
@@ -78,24 +81,6 @@
       font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
     }
   }
-
-  // Button
-  .pf-c-button {
-    --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
-    --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
-    --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
-    --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
-    --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
-
-    margin-top: var(--pf-c-chip__c-button--MarginTop);
-    margin-right: var(--pf-c-chip__c-button--MarginRight);
-    margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
-  }
-
-  // badge
-  .pf-c-badge {
-    margin-left: var(--pf-c-chip__c-badge--MarginLeft);
-  }
 }
 
 // Text element
@@ -104,7 +89,6 @@
 
   position: relative;
   max-width: var(--pf-c-chip__text--MaxWidth);
-  font-size: var(--pf-c-chip__text--FontSize);
   color: var(--pf-c-chip__text--Color);
 }
 
@@ -113,6 +97,31 @@
   margin-left: var(--pf-c-chip__icon--MarginLeft);
 }
 
+.pf-c-chip__content {
+  display: flex;
+  column-gap: var(--pf-c-chip__content--ColumnGap);
+  align-items: center;
+  font-size: var(--pf-c-chip__content--FontSize);
+}
+
+.pf-c-chip__actions {
+  font-size: var(--pf-c-chip__actions--FontSize);
+
+  // Actions Button
+  .pf-c-button {
+    --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
+    --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
+    --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
+    --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
+    --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
+
+    margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
+    margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
+    margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
+    line-height: 1;
+  }
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/chip";
 

package/components/ChipGroup/chip-group.css

@@ -10,28 +10,39 @@
 
 .pf-c-chip-group {
   color: var(--pf-global--Color--100);
-  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-chip-group--PaddingTop: 0;
+  --pf-c-chip-group--PaddingRight: 0;
+  --pf-c-chip-group--PaddingBottom: 0;
+  --pf-c-chip-group--PaddingLeft: 0;
+  --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: 0;
+  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
+  row-gap: var(--pf-c-chip-group--RowGap);
+  column-gap: var(--pf-c-chip-group--ColumnGap);
   max-width: 100%;
+  padding-top: var(--pf-c-chip-group--PaddingTop);
+  padding-right: var(--pf-c-chip-group--PaddingRight);
+  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
+  padding-left: var(--pf-c-chip-group--PaddingLeft);
 }
 .pf-c-chip-group.pf-m-category {
-  padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
-  padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
-  padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
-  padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
+  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
+  --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
+  --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
+  --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
   background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
   border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
 }
@@ -40,15 +51,12 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
+  row-gap: var(--pf-c-chip-group__main--RowGap);
+  column-gap: var(--pf-c-chip-group__main--ColumnGap);
   align-items: baseline;
   min-width: 0;
 }
 
-.pf-c-chip-group__list {
-  margin-right: var(--pf-c-chip-group__list--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
-}
-
 .pf-c-chip-group,
 .pf-c-chip-group__list {
   display: inline-flex;
@@ -57,11 +65,14 @@
   min-width: 0;
 }
 
+.pf-c-chip-group__list {
+  row-gap: var(--pf-c-chip-group__list--RowGap);
+  column-gap: var(--pf-c-chip-group__list--ColumnGap);
+}
+
 .pf-c-chip-group__list-item {
   display: inline-flex;
   min-width: 0;
-  margin-right: var(--pf-c-chip-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }
 
 .pf-c-chip-group__label {
@@ -69,7 +80,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: var(--pf-c-chip-group__label--MaxWidth);
-  margin-right: var(--pf-c-chip-group__label--MarginRight);
   font-size: var(--pf-c-chip-group__label--FontSize);
 }