feat(description-list): added display and card mods (#4895)

patternfly · Jun 17, 2022 · 2e27c62 · 2e27c62
1 parent e1ce9f1
commit 2e27c62
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 44 deletions.
diff --git a/src/patternfly/components/DescriptionList/description-list-group.hbs b/src/patternfly/components/DescriptionList/description-list-group.hbs
@@ -1,6 +1,12 @@
-<div class="pf-c-description-list__group{{#if description-list-group--modifier}} {{description-list-group--modifier}}{{/if}}"
-  {{#if description-list-group--attribute}}
-    {{{description-list-group--attribute}}}
-  {{/if}}>
-  {{> @partial-block}}
-</div>
+{{#if description-list-group--IsCard}}
+  {{#> card card--modifier=(concat 'pf-m-description-list-group ' description-list-group--modifier) card--attribute=description-list-group--attribute}}
+    {{> @partial-block}}
+  {{/card}}
+{{else}}
+  <div class="pf-c-description-list__group{{#if description-list-group--modifier}} {{description-list-group--modifier}}{{/if}}"
+    {{#if description-list-group--attribute}}
+      {{{description-list-group--attribute}}}
+    {{/if}}>
+    {{> @partial-block}}
+  </div>
+{{/if}}
diff --git a/src/patternfly/components/DescriptionList/description-list.scss b/src/patternfly/components/DescriptionList/description-list.scss
@@ -12,6 +12,7 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
   --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-description-list__group--GridTemplateColumns: auto;
+  --pf-c-description-list__group--GridTemplateRows: auto 1fr;
   --pf-c-description-list__group--GridColumn: auto;
 
   // compact
@@ -36,11 +37,13 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
 
   // vertical
   --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
+  --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
 
   // horizontal
   --pf-c-description-list--m-horizontal__term--width: 12ch;
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
   --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width); // use --pf-c-description-list__term--width here as it is re-defined on line 45
+  --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
   --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
   --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
   --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -56,6 +59,10 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
   --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
 
+  // Display modifiers
+  --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
+
   display: grid;
   align-items: baseline;
   row-gap: var(--pf-c-description-list--RowGap);
@@ -94,7 +101,8 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
     column-count: var(--pf-c-description-list--GridTemplateColumns--count);
     margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
 
-    .pf-c-description-list__group {
+    .pf-c-description-list__group,
+    > .pf-c-card {
       display: inline-grid;
       width: 100%;
       margin-bottom: var(--pf-c-description-list--RowGap);
@@ -107,14 +115,29 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
       // stylelint-enable
     }
   }
+
+  &.pf-m-display-lg {
+    --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
+  }
+
+  &.pf-m-display-2xl {
+    --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
+  }
+
+  > .pf-c-card {
+    align-self: stretch;
+    padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
+  }
 }
 
-.pf-c-description-list__group {
+.pf-c-description-list__group,
+.pf-c-description-list > .pf-c-card {
   display: grid;
   grid-column: var(--pf-c-description-list__group--GridColumn);
   row-gap: var(--pf-c-description-list__group--RowGap);
   column-gap: var(--pf-c-description-list__group--ColumnGap);
   grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
   align-items: baseline;
 }
 
@@ -143,6 +166,10 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   color: var(--pf-c-description-list__term-icon--Color);
 }
 
+.pf-c-description-list__description {
+  font-size: var(--pf-c-description-list__description--FontSize, inherit);
+}
+
 .pf-c-description-list__text {
   min-width: 0; // this allows overflow-wrap to work
 
@@ -185,10 +212,12 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
 
       &.pf-m-horizontal#{$breakpoint-name} {
         --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+        --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
       }
 
       &.pf-m-vertical#{$breakpoint-name} {
         --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+        --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
       }
     }
   }

diff --git a/src/patternfly/components/DescriptionList/description-list__example.hbs b/src/patternfly/components/DescriptionList/description-list__example.hbs
@@ -33,29 +33,31 @@
       example
     {{/description-list-description}}
   {{/description-list-group}}
-  {{#> description-list-group}}
-    {{#> description-list-term}}
-      {{#> description-list-text}}
-        Pod selector
-      {{/description-list-text}}
-    {{/description-list-term}}
-    {{#> description-list-description}}
-      {{#> button button--modifier="pf-m-link pf-m-inline"}}
-        {{#> button-icon button-icon--modifier="pf-m-start"}}
-          <i class="fas fa-plus-circle" aria-hidden="true"></i>
-        {{/button-icon}}
-        app=MyApp
-      {{/button}}
-    {{/description-list-description}}
-  {{/description-list-group}}
-  {{#> description-list-group}}
-    {{#> description-list-term}}
-      {{#> description-list-text}}
-        Annotation
-      {{/description-list-text}}
-    {{/description-list-term}}
-    {{#> description-list-description}}
-      2 Annotations
-    {{/description-list-description}}
-  {{/description-list-group}}
+  {{#unless description-list__example--IsShort}}
+    {{#> description-list-group}}
+      {{#> description-list-term}}
+        {{#> description-list-text}}
+          Pod selector
+        {{/description-list-text}}
+      {{/description-list-term}}
+      {{#> description-list-description}}
+        {{#> button button--modifier="pf-m-link pf-m-inline"}}
+          {{#> button-icon button-icon--modifier="pf-m-start"}}
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
+          {{/button-icon}}
+          app=MyApp
+        {{/button}}
+      {{/description-list-description}}
+    {{/description-list-group}}
+    {{#> description-list-group}}
+      {{#> description-list-term}}
+        {{#> description-list-text}}
+          Annotation
+        {{/description-list-text}}
+      {{/description-list-term}}
+      {{#> description-list-description}}
+        2 Annotations
+      {{/description-list-description}}
+    {{/description-list-group}}
+  {{/unless}}
 {{/description-list}}
diff --git a/src/patternfly/components/DescriptionList/examples/DescriptionList.md b/src/patternfly/components/DescriptionList/examples/DescriptionList.md
@@ -16,12 +16,12 @@ cssPrefix: pf-c-description-list
 {{> description-list__example description-list--title="Term help text" description-list-term--TextIsHelp="true"}}
 ```
 
-### Default 2 col
+### Default, two column
 ```hbs
 {{> description-list__example description-list--title="Default 2 column DL" description-list--modifier="pf-m-2-col" description-list--IsLongDescription="true"}}
 ```
 
-### Default 3 col on lg
+### Default, three column on lg breakpoint
 ```hbs
 {{> description-list__example description-list--title="Default 3 column DL" description-list--modifier="pf-m-3-col-on-lg"}}
 ```
@@ -31,12 +31,12 @@ cssPrefix: pf-c-description-list
 {{> description-list__example description-list--title="Horizontal DL" description-list--modifier="pf-m-horizontal"}}
 ```
 
-### Horizontal 2 col
+### Horizontal, two column
 ```hbs
 {{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-2-col"}}
 ```
 
-### Horizontal 3 col on lg
+### Horizontal, three column on lg breakpoint
 ```hbs
 {{> description-list__example description-list--title="Horizontal 3 column DL" description-list--modifier="pf-m-horizontal pf-m-3-col-on-lg"}}
 ```
@@ -71,7 +71,7 @@ Column fill will modify the default placement of description list groups to fill
 {{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}}
 ```
 
-### Auto-fit, min width modified grid template columns
+### Auto-fit, min width modified, grid template columns
 ```hbs
 {{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit" description-list--attribute='style="--pf-c-description-list--GridTemplateColumns--min: 200px;"'}}
 ```
@@ -83,40 +83,74 @@ Column fill will modify the default placement of description list groups to fill
 
 ## Responsive column definitions
 
-### Default responsive columns
+### Default, responsive columns
 ```hbs
 {{> description-list__example description-list--title="Default responsive DL" description-list--modifier="pf-m-2-col-on-lg pf-m-3-col-on-xl"}}
 ```
 
-### Horizontal responsive columns
+### Horizontal, responsive columns
 ```hbs
 {{> description-list__example description-list--title="Horizontal responsive DL columns" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"}}
 ```
 
-### Responsive horizontal, vertical group layout
+### Responsive, horizontal, vertical group layout
 ```hbs
 {{> description-list__example description-list--title="Horizontal responsive DL groups" description-list--modifier="pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"}}
 ```
 
 ## Auto-column-width
 
-### Default auto columns width
+### Default, auto columns width
 ```hbs
 {{> description-list__example description-list--title="Auto column width DL" description-list--modifier="pf-m-auto-column-widths pf-m-3-col"}}
 ```
 
-### Horizontal auto column width
+### Horizontal, auto column width
 ```hbs
 {{> description-list__example description-list--title="Horizontal ato-fit DL" description-list--modifier="pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"}}
 ```
 
 ## Inline grid
 
-### Default inline grid
+### Default, inline grid
 ```hbs
 {{> description-list__example description-list--title="Default inline grid" description-list--modifier="pf-m-3-col pf-m-inline-grid"}}
 ```
 
+### Display variant
+```hbs
+{{> description-list__example description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg" description-list--title="Card DL"}}
+```
+
+## Card variants
+
+Cards can be used as [description list group wrappers](../card#description-list-group-wrapper-card-variant). Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
+
+### Description list group wrapper as card
+```hbs
+{{> description-list__example description-list--modifier="pf-m-2-col-on-lg" description-list-group--IsCard="true" description-list--title="Card DL"}}
+```
+
+### Display lg and card variant
+```hbs
+{{> description-list__example description-list-group--IsCard="true" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg" description-list--title="Card DL"}}
+```
+
+### Display 2xl and card variant
+```hbs
+{{> description-list__example description-list-group--IsCard="true" description-list--modifier="pf-m-display-2xl pf-m-2-col-on-lg" description-list--title="Card DL"}}
+```
+
+### Display and card variant, three column on lg breakpoint
+```hbs
+{{> description-list__example description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-3-col-on-lg pf-m-display-lg" description-list--title="Card DL"}}
+```
+
+### Display and card variant, horizontal, modified term width
+```hbs
+{{> description-list__example description-list--attribute='style="--pf-c-description-list__term--width: 10ch;"' description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal" description-list--title="Card DL"}}
+```
+
 <!-- ## Auto term with is only supported in FF currently
 
 ### Horizontal 2 col auto term width
@@ -151,6 +185,8 @@ Column fill will modify the default placement of description list groups to fill
 | `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
 | `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
 | `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
+| `.pf-m-display-lg` | `.pf-c-description-list` | Modifies the description list to have large display styling. |
+| `.pf-m-display-2xl` | `.pf-c-description-list` | Modifies the description list to have 2xl display styling. |
 | `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
 | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
 | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |