chore: adjust Grid and HeadingGroup spacings and behavior (#65)

based on design QA and on uptake issues
bloom-housing · Oct 24, 2023 · 5224f64 · 5224f64
1 parent 4c3f558
commit 5224f64
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 43 deletions.
diff --git a/src/layout/Grid.scss b/src/layout/Grid.scss
@@ -4,22 +4,22 @@
   --grid-gap-lg: var(--seeds-s8);
   --grid-gap-xl: var(--seeds-s12);
 
-  --grid-gap-tablet: var(--grid-gap-sm);
+  --grid-gap-mobile: var(--grid-gap-sm);
 
   --grid-gap: var(--grid-gap-md);
 
-  @media (--lg-down) {
-    --grid-gap: var(--grid-gap-tablet);
+  @media (--sm-only) {
+    --grid-gap: var(--grid-gap-mobile);
   }
 
   display: grid;
   gap: var(--grid-gap);
 
-  @media (--lg-and-up) {
-    &[data-spacing="sm"] {
-      --grid-gap: var(--grid-gap-sm);
-    }
+  &[data-spacing="sm"] {
+    --grid-gap: var(--grid-gap-sm);
+  }
 
+  @media (--lg-and-up) {
     &[data-spacing="md"] {
       --grid-gap: var(--grid-gap-md);
     }
@@ -42,6 +42,15 @@
     --grid-columns: 1;
   }
 
+  @media (--sm-and-up) and (--lg-down) {
+    /* This ensures a wide enough min column size at "tablet" breakpoint so that
+     * no more than 2 columns show:
+     */
+    &:not([data-columns="1"]) {
+      --grid-minimum-column-size: 40%; /* a reasonable value below 50% */
+    }
+  }
+
   display: grid;
   gap: inherit;
   grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-minimum-column-size), 1fr));
@@ -51,36 +60,32 @@
   overflow-wrap: break-word;
 }
 
-@media (--sm-and-up) {
+@media (--lg-and-up) {
+  /* Convenience utility classes for use by grid cells */
+  .seeds-grid-span-2 {
+    grid-column: span 2;
+  }
+
+  .seeds-grid-span-3 {
+    grid-column: span 3;
+  }
+
+  /* Only large screens can force more than two columns */
   .seeds-grid-row[data-columns="4"] {
     --grid-columns: 4;
   }
 
   .seeds-grid-row[data-columns="3"] {
     --grid-columns: 3;
   }
+}
 
+@media (--sm-and-up) {
   .seeds-grid-row[data-columns="2"] {
     --grid-columns: 2;
   }
+}
 
-  .seeds-grid-row[data-columns="1"] {
-    --grid-columns: 1;
-  }
-
-  .seeds-grid-row[data-columns="1+2"] {
-    --grid-columns: 4;
-
-    > *:first-child {
-      grid-column: span 2;
-    }
-  }
-
-  .seeds-grid-row[data-columns="2+1"] {
-    --grid-columns: 4;
-
-    > *:last-child {
-      grid-column: span 2;
-    }
-  }
+.seeds-grid-row[data-columns="1"] {
+  --grid-columns: 1;
 }
diff --git a/src/layout/__stories__/Grid.docs.mdx b/src/layout/__stories__/Grid.docs.mdx
@@ -24,5 +24,5 @@ import Grid from "../Grid"
 | `--grid-gap-md`     |             | `--seeds-s6`    |
 | `--grid-gap-lg`     |             | `--seeds-s8`    |
 | `--grid-gap-xl`     |             | `--seeds-s12`   |
-| `--grid-gap-tablet` |             | `--grid-gap-sm` |
+| `--grid-gap-mobile` |             | `--grid-gap-sm` |
 | `--grid-gap`        |             | `--grid-gap-md` |
diff --git a/src/layout/__stories__/Grid.stories.tsx b/src/layout/__stories__/Grid.stories.tsx
@@ -22,13 +22,10 @@ export const gridExample = () => (
     <Heading size="xl">Three Columns:</Heading>
 
     <Grid spacing="lg">
-      <Grid.Row>
+      <Grid.Row columns={3}>
         <Grid.Cell>Cell 1</Grid.Cell>
         <Grid.Cell>Cell 2</Grid.Cell>
         <Grid.Cell>Cell 3</Grid.Cell>
-      </Grid.Row>
-
-      <Grid.Row columns={3}>
         <Grid.Cell>Cell 4</Grid.Cell>
         <Grid.Cell>Cell 5</Grid.Cell>
         <Grid.Cell>Cell 6</Grid.Cell>
@@ -58,8 +55,8 @@ export const gridExample = () => (
     <Heading size="xl">One Column + Two Columns:</Heading>
 
     <Grid spacing="lg">
-      <Grid.Row columns="1+2">
-        <Grid.Cell>Cell 1 (Long)</Grid.Cell>
+      <Grid.Row columns="4">
+        <Grid.Cell className="seeds-grid-span-2">Cell 1 (Long)</Grid.Cell>
         <Grid.Cell>Cell 2</Grid.Cell>
         <Grid.Cell>Cell 3</Grid.Cell>
       </Grid.Row>
@@ -68,10 +65,10 @@ export const gridExample = () => (
     <Heading size="xl">Two Columns + One Column:</Heading>
 
     <Grid spacing="lg">
-      <Grid.Row columns="2+1">
+      <Grid.Row columns="4">
         <Grid.Cell>Cell 1</Grid.Cell>
         <Grid.Cell>Cell 2</Grid.Cell>
-        <Grid.Cell>Cell 3 (Long)</Grid.Cell>
+        <Grid.Cell className="seeds-grid-span-2">Cell 3 (Long)</Grid.Cell>
       </Grid.Row>
     </Grid>
 

diff --git a/src/text/HeadingGroup.scss b/src/text/HeadingGroup.scss
@@ -1,6 +1,7 @@
 .seeds-heading-group {
   --heading-margin: 0rem;
   --subheading-margin: var(--seeds-s4);
+  --subheading-margin-sm: var(--seeds-s3);
   --heading-color: inherit;
   --subheading-color: inherit;
   --subheading-font-size: var(--seeds-font-size-base);
@@ -20,4 +21,8 @@
     font-size: var(--subheading-font-size);
     color: var(--subheading-color);
   }
+
+  :not(.text-heading-4xl, .text-heading-3xl, .text-heading-2xl) + p {
+    margin-block-start: var(--subheading-margin-sm);
+  }
 }
diff --git a/src/text/__stories__/HeadingGroup.docs.mdx b/src/text/__stories__/HeadingGroup.docs.mdx
@@ -10,10 +10,11 @@ import HeadingGroup from "../HeadingGroup"
 
 ## Theme Variables
 
-| Name                     | Description                                         | Default                  |
-| ------------------------ | --------------------------------------------------- | ------------------------ |
-| `--heading-margin`       | Vertical space added around the top heading, if any | `0rem`                   |
-| `--subheading-margin`    | The space between the heading and subheading        | `--seeds-s4`             |
-| `--heading-color`        | The heading text color                              | `inherit`                |
-| `--subheading-color`     | The subheading text color                           | `inherit`                |
-| `--subheading-font-size` | The subheading font size                            | `--seeds-font-size-base` |
+| Name                     | Description                                                    | Default                  |
+| ------------------------ | -------------------------------------------------------------- | ------------------------ |
+| `--heading-margin`       | Vertical space added around the top heading, if any            | `0rem`                   |
+| `--subheading-margin`    | The space between the heading and subheading                   | `--seeds-s4`             |
+| `--subheading-margin-sm` | The space between smaller headings (xl on down) and subheading | `--seeds-s3`             |
+| `--heading-color`        | The heading text color                                         | `inherit`                |
+| `--subheading-color`     | The subheading text color                                      | `inherit`                |
+| `--subheading-font-size` | The subheading font size                                       | `--seeds-font-size-base` |