Feat(chip, label): Add wrappers for content and actions to manage sty…

…ling embedded components (patternfly#5360)
mattnolting · Mar 2, 2023 · f92e302 · f92e302
1 parent b87a8f7
commit f92e302
Show file tree

Hide file tree

Showing 16 changed files with 749 additions and 454 deletions.
diff --git a/src/patternfly/components/Chip/chip-actions.hbs b/src/patternfly/components/Chip/chip-actions.hbs
@@ -0,0 +1,6 @@
+<span class="pf-c-chip__actions{{#if chip-actions--modifier}} {{chip-actions--modifier}}{{/if}}"
+  {{#if chip-actions--attribute}}
+    {{{chip-actions--attribute}}}
+  {{/if}}>
+  {{> @partial-block}}
+</span>
diff --git a/src/patternfly/components/Chip/chip-content.hbs b/src/patternfly/components/Chip/chip-content.hbs
@@ -0,0 +1,6 @@
+<span class="pf-c-chip__content{{#if chip-content--modifier}} {{chip-content--modifier}}{{/if}}"
+  {{#if chip-content--attribute}}
+    {{{chip-content--attribute}}}
+  {{/if}}>
+  {{> @partial-block}}
+</span>
diff --git a/src/patternfly/components/Chip/chip.scss b/src/patternfly/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;
+  align-items: center;
+  column-gap: var(--pf-c-chip__content--ColumnGap);
+  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";
 

diff --git a/src/patternfly/components/Chip/examples/Chip.md b/src/patternfly/components/Chip/examples/Chip.md
@@ -9,59 +9,77 @@ cssPrefix: pf-c-chip
 ```hbs
 
 {{#> chip chip--type="div"}}
-  {{#> chip-text chip-text--attribute='id="chip_one"'}}
-    Chip
-  {{/chip-text}}
-  {{#> button button--modifier="pf-m-plain" button--attribute='aria-labelledby="remove_chip_one chip_one" aria-label="Remove" id="remove_chip_one"'}}
-    <i class="fas fa-times" aria-hidden="true"></i>
-  {{/button}}
+  {{#> chip-content}}
+    {{#> chip-text chip-text--attribute='id="chip_one"'}}
+      Chip
+    {{/chip-text}}
+  {{/chip-content}}
+  {{#> chip-actions}}
+    {{#> button button--modifier="pf-m-plain" button--attribute='aria-labelledby="remove_chip_one chip_one" aria-label="Remove" id="remove_chip_one"'}}
+      <i class="fas fa-times" aria-hidden="true"></i>
+    {{/button}}
+  {{/chip-actions}}
 {{/chip}}
 <br>
 <br>
 {{#> chip chip--type="div"}}
-  {{#> chip-text chip-text--attribute='id="chip_two"'}}
-    Really long chip that goes on and on
-  {{/chip-text}}
-  {{#> button button--modifier="pf-m-plain" button--attribute='aria-labelledby="remove_chip_two chip_two" aria-label="Remove" id="remove_chip_two"'}}
-    <i class="fas fa-times" aria-hidden="true"></i>
-  {{/button}}
+  {{#> chip-content}}
+    {{#> chip-text chip-text--attribute='id="chip_two"'}}
+      Really long chip that goes on and on
+    {{/chip-text}}
+  {{/chip-content}}
+  {{#> chip-actions}}
+    {{#> button button--modifier="pf-m-plain" button--attribute='aria-labelledby="remove_chip_two chip_two" aria-label="Remove" id="remove_chip_two"'}}
+      <i class="fas fa-times" aria-hidden="true"></i>
+    {{/button}}
+  {{/chip-actions}}
 {{/chip}}
 <br>
 <br>
 {{#> chip chip--type="div"}}
-  {{#> chip-text chip-text--attribute='id="chip_three"'}}
-    Chip
-  {{/chip-text}}
-  {{#> badge badge--modifier="pf-m-read"}}
-    00
-  {{/badge}}
-  {{#> button button--modifier="pf-m-plain" button--attribute='aria-labelledby="remove_chip_three chip_three" aria-label="Remove" id="remove_chip_three"'}}
-    <i class="fas fa-times" aria-hidden="true"></i>
-  {{/button}}
+  {{#> chip-content}}
+    {{#> chip-text chip-text--attribute='id="chip_three"'}}
+      Chip
+    {{/chip-text}}
+    {{#> badge badge--modifier="pf-m-read"}}
+      00
+    {{/badge}}
+  {{/chip-content}}
+  {{#> chip-actions}}
+    {{#> button button--modifier="pf-m-plain" button--attribute='aria-labelledby="remove_chip_three chip_three" aria-label="Remove" id="remove_chip_three"'}}
+      <i class="fas fa-times" aria-hidden="true"></i>
+    {{/button}}
+  {{/chip-actions}}
 {{/chip}}
 <br>
 <br>
 {{#> chip chip--type="div"}}
-  {{#> chip-text}}
-    Read-only chip
-  {{/chip-text}}
+  {{#> chip-content}}
+    {{#> chip-text}}
+      Read-only chip
+    {{/chip-text}}
+  {{/chip-content}}
 {{/chip}}
 <br>
 <br>
 {{#> chip chip--type="button" chip--modifier="pf-m-overflow"}}
-  {{#> chip-text}}
-    Overflow chip
-  {{/chip-text}}
+  {{#> chip-content}}
+    {{#> chip-text}}
+      Overflow chip
+    {{/chip-text}}
+  {{/chip-content}}
 {{/chip}}
 <br>
 <br>
 {{#> chip chip--type="div" chip--modifier="pf-m-draggable"}}
-  {{#> chip-icon}}
-    <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
-  {{/chip-icon}}
-  {{#> chip-text}}
-    Draggable chip
-  {{/chip-text}}
+  {{#> chip-content}}
+    {{#> chip-icon}}
+      <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
+    {{/chip-icon}}
+    {{#> chip-text}}
+      Draggable chip
+    {{/chip-text}}
+  {{/chip-content}}
 {{/chip}}
 ```
 
@@ -81,9 +99,9 @@ A Chip is used to display items that have been filtered or selected from a large
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
-| `.pf-c-chip__text` | `<span>` | Initiates the text inside of the chip. **Required** |
-| `.pf-c-chip__icon` | `<span>` | Initiates the icon inside of the chip. |
-| `.pf-c-button` | `.pf-c-chip <button>` | Initiates the button used to remove the chip. |
-| `.pf-c-badge` | `<span>` | Initiates the badge inside the chip. |
+| `.pf-c-chip__content` | `<span>` | Creates a content wrapper for the chip. **Required** |
+| `.pf-c-chip__text` | `<span>` | Initiates the text inside the chip. **Required** |
+| `.pf-c-chip__icon` | `<span>` | Initiates the icon inside the chip. |
+| `.pf-c-chip__actions` | `<span>` | Creates a wrapper for chip actions. **Required for removable chips** |
 | `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
 | `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |