fix(subgrid): narrow mode margin value

carbon-design-system · Dec 16, 2024 · 9bb3b03 · 9bb3b03
1 parent 2c2bbcb
commit 9bb3b03
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 5 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
@@ -156,12 +156,12 @@
 
   // Start
   .#{$prefix}--css-grid--start {
-    margin-inline-start: 0;
+    margin-inline-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
   }
 
   // End
   .#{$prefix}--css-grid--end {
-    margin-inline-end: 0;
+    margin-inline-end: 0rem; /* stylelint-disable-line length-zero-no-unit */
   }
 
   // -----------------------------------------------------------------------------
@@ -183,11 +183,11 @@
   .#{$prefix}--subgrid--wide {
     --cds-grid-gutter-start: #{math.div($grid-gutter, 2)};
     --cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
-    --cds-grid-column-hang: 0;
+    --cds-grid-column-hang: 0rem; /* stylelint-disable-line length-zero-no-unit */
   }
 
   .#{$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
@@ -36,6 +36,58 @@ export default {
   ],
 };
 
+export const ATestSubgrid = () => {
+  return (
+    <>
+      <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>
+    </>
+  );
+};
+
 export const Default = () => {
   return (
     <Grid>