From 9bb3b03b4d054495221c29bbc0fca658cd6ac772 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 16 Dec 2024 13:00:02 -0600
Subject: [PATCH 1/5] fix(subgrid): narrow mode margin value

---
 packages/grid/scss/_css-grid.scss             | 10 ++--
 .../react/src/components/Grid/Grid.stories.js | 52 +++++++++++++++++++
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index 6913cf61ffb5..a36a3ee2f33e 100644
--- 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
index db6e7b489751..c10956c72385 100644
--- 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>

From 90f7222cf8b1508bc54ef4538ab2bb9879e452f3 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 16 Dec 2024 13:05:32 -0600
Subject: [PATCH 2/5] chore: revert extra change

---
 packages/grid/scss/_css-grid.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index a36a3ee2f33e..3114228a3828 100644
--- a/packages/grid/scss/_css-grid.scss
+++ b/packages/grid/scss/_css-grid.scss
@@ -156,12 +156,12 @@
 
   // Start
   .#{$prefix}--css-grid--start {
-    margin-inline-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
+    margin-inline-start: 0;
   }
 
   // End
   .#{$prefix}--css-grid--end {
-    margin-inline-end: 0rem; /* stylelint-disable-line length-zero-no-unit */
+    margin-inline-end: 0;
   }
 
   // -----------------------------------------------------------------------------

From 0a55588d56e8ec7f3d61c5e1e4044b5326448a02 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 16 Dec 2024 13:08:52 -0600
Subject: [PATCH 3/5] chore: remove duplicate style

---
 packages/grid/scss/_css-grid.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index 3114228a3828..a19b66f5dd14 100644
--- a/packages/grid/scss/_css-grid.scss
+++ b/packages/grid/scss/_css-grid.scss
@@ -183,11 +183,10 @@
   .#{$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: 0rem; /* stylelint-disable-line length-zero-no-unit */
+    --cds-grid-column-hang: 0;
   }
 
   .#{$prefix}--subgrid--narrow {
-    --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)};
   }

From b42fc4d7290c257c54d0e8d305747da083778a25 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 16 Dec 2024 13:11:44 -0600
Subject: [PATCH 4/5] chore: oops

---
 packages/grid/scss/_css-grid.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index a19b66f5dd14..3a0c50d2b464 100644
--- a/packages/grid/scss/_css-grid.scss
+++ b/packages/grid/scss/_css-grid.scss
@@ -187,6 +187,7 @@
   }
 
   .#{$prefix}--subgrid--narrow {
+    --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)};
   }

From 7877fe747fd77cb5803c281fa2e828972b61bc1a Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 16 Dec 2024 16:38:03 -0600
Subject: [PATCH 5/5] chore: update stoybook

---
 .../react/src/components/Grid/Grid.stories.js | 186 +++++++++---------
 1 file changed, 91 insertions(+), 95 deletions(-)

diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js
index c10956c72385..42e5913ec184 100644
--- a/packages/react/src/components/Grid/Grid.stories.js
+++ b/packages/react/src/components/Grid/Grid.stories.js
@@ -36,58 +36,6 @@ 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>
@@ -162,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>
+    </>
   );
 };