fix(subgrid): narrow mode margin (#18255)

* fix(subgrid): narrow mode margin value * chore: revert extra change * chore: remove duplicate style * chore: oops * chore: update stoybook
carbon-design-system · Dec 17, 2024 · d56c885 · d56c885
1 parent 1cf7200
commit d56c885
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 45 deletions.
diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
@@ -138,7 +138,7 @@
 
   // Narrow
   .#{$prefix}--css-grid--narrow {
-    --cds-grid-gutter-start: 0;
+    --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
   }
 
   // Condensed
@@ -187,7 +187,7 @@
   }
 
   .#{$prefix}--subgrid--narrow {
-    --cds-grid-gutter-start: 0;
+    --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
     --cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
     --cds-grid-column-hang: #{math.div($grid-gutter, 2)};
   }

diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js
@@ -110,49 +110,97 @@ export const Responsive = () => (
 
 export const Subgrid = () => {
   return (
-    <Grid>
-      <Column sm={2} md={4} lg={3}>
-        <p>Small: Span 2 of 4</p>
-        <p>Medium: Span 4 of 8</p>
-        <p>Large: Span 3 of 16</p>
-      </Column>
-      <Column sm={2} md={4} lg={10}>
-        <p>Small: Span 2 of 4</p>
-        <p>Medium: Span 4 of 8</p>
-        <p>Large: Span 10 of 16</p>
-        <Grid className="example">
-          <Column sm={1} md={1} lg={2}>
-            <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
-          </Column>
-          <Column sm={1} md={1} lg={2}>
-            <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
-          </Column>
-          <Column sm={0} md={1} lg={1}>
-            <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={1} lg={1}>
-            <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-        </Grid>
-      </Column>
-      <Column sm={0} md={0} lg={3}>
-        <p>Small: Span 0 of 4</p>
-        <p>Medium: Span 0 of 8</p>
-        <p>Large: Span 3 of 16</p>
-      </Column>
-    </Grid>
+    <>
+      <Grid>
+        <Column sm={2} md={4} lg={3}>
+          <p>Small: Span 2 of 4</p>
+          <p>Medium: Span 4 of 8</p>
+          <p>Large: Span 3 of 16</p>
+        </Column>
+        <Column sm={2} md={4} lg={10}>
+          <p>Small: Span 2 of 4</p>
+          <p>Medium: Span 4 of 8</p>
+          <p>Large: Span 10 of 16</p>
+          <Grid className="example">
+            <Column sm={1} md={1} lg={2}>
+              <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
+            </Column>
+            <Column sm={1} md={1} lg={2}>
+              <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
+            </Column>
+            <Column sm={0} md={1} lg={1}>
+              <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={1} lg={1}>
+              <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+          </Grid>
+        </Column>
+        <Column sm={0} md={0} lg={3}>
+          <p>Small: Span 0 of 4</p>
+          <p>Medium: Span 0 of 8</p>
+          <p>Large: Span 3 of 16</p>
+        </Column>
+      </Grid>
+
+      <h5>Wide</h5>
+      <Grid>
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={8} lg={16}>
+          <Grid>
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+          </Grid>
+        </Column>
+      </Grid>
+      <h5>Narrow</h5>
+      <Grid narrow>
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={8} lg={16}>
+          <Grid narrow>
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+          </Grid>
+        </Column>
+      </Grid>
+      <h5>Condensed</h5>
+      <Grid condensed>
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={8} lg={16}>
+          <Grid condensed>
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+          </Grid>
+        </Column>
+      </Grid>
+    </>
   );
 };