Skip to content

Commit d56c885

Browse files
alisonjosephalisonjoseph
authored
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
1 parent 1cf7200 commit d56c885

File tree

2 files changed

+93
-45
lines changed

2 files changed

+93
-45
lines changed

‎packages/grid/scss/_css-grid.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138

139139
// Narrow
140140
.#{$prefix}--css-grid--narrow {
141-
--cds-grid-gutter-start: 0;
141+
--cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
142142
}
143143

144144
// Condensed
@@ -187,7 +187,7 @@
187187
}
188188

189189
.#{$prefix}--subgrid--narrow {
190-
--cds-grid-gutter-start: 0;
190+
--cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
191191
--cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
192192
--cds-grid-column-hang: #{math.div($grid-gutter, 2)};
193193
}

‎packages/react/src/components/Grid/Grid.stories.js‎

Lines changed: 91 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -110,49 +110,97 @@ export const Responsive = () => (
110110

111111
export const Subgrid = () => {
112112
return (
113-
<Grid>
114-
<Column sm={2} md={4} lg={3}>
115-
<p>Small: Span 2 of 4</p>
116-
<p>Medium: Span 4 of 8</p>
117-
<p>Large: Span 3 of 16</p>
118-
</Column>
119-
<Column sm={2} md={4} lg={10}>
120-
<p>Small: Span 2 of 4</p>
121-
<p>Medium: Span 4 of 8</p>
122-
<p>Large: Span 10 of 16</p>
123-
<Grid className="example">
124-
<Column sm={1} md={1} lg={2}>
125-
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
126-
</Column>
127-
<Column sm={1} md={1} lg={2}>
128-
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
129-
</Column>
130-
<Column sm={0} md={1} lg={1}>
131-
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
132-
</Column>
133-
<Column sm={0} md={1} lg={1}>
134-
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
135-
</Column>
136-
<Column sm={0} md={0} lg={1}>
137-
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
138-
</Column>
139-
<Column sm={0} md={0} lg={1}>
140-
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
141-
</Column>
142-
<Column sm={0} md={0} lg={1}>
143-
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
144-
</Column>
145-
<Column sm={0} md={0} lg={1}>
146-
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
147-
</Column>
148-
</Grid>
149-
</Column>
150-
<Column sm={0} md={0} lg={3}>
151-
<p>Small: Span 0 of 4</p>
152-
<p>Medium: Span 0 of 8</p>
153-
<p>Large: Span 3 of 16</p>
154-
</Column>
155-
</Grid>
113+
<>
114+
<Grid>
115+
<Column sm={2} md={4} lg={3}>
116+
<p>Small: Span 2 of 4</p>
117+
<p>Medium: Span 4 of 8</p>
118+
<p>Large: Span 3 of 16</p>
119+
</Column>
120+
<Column sm={2} md={4} lg={10}>
121+
<p>Small: Span 2 of 4</p>
122+
<p>Medium: Span 4 of 8</p>
123+
<p>Large: Span 10 of 16</p>
124+
<Grid className="example">
125+
<Column sm={1} md={1} lg={2}>
126+
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
127+
</Column>
128+
<Column sm={1} md={1} lg={2}>
129+
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
130+
</Column>
131+
<Column sm={0} md={1} lg={1}>
132+
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
133+
</Column>
134+
<Column sm={0} md={1} lg={1}>
135+
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
136+
</Column>
137+
<Column sm={0} md={0} lg={1}>
138+
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
139+
</Column>
140+
<Column sm={0} md={0} lg={1}>
141+
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
142+
</Column>
143+
<Column sm={0} md={0} lg={1}>
144+
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
145+
</Column>
146+
<Column sm={0} md={0} lg={1}>
147+
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
148+
</Column>
149+
</Grid>
150+
</Column>
151+
<Column sm={0} md={0} lg={3}>
152+
<p>Small: Span 0 of 4</p>
153+
<p>Medium: Span 0 of 8</p>
154+
<p>Large: Span 3 of 16</p>
155+
</Column>
156+
</Grid>
157+
158+
<h5>Wide</h5>
159+
<Grid>
160+
<Column sm={4} md={4} lg={4} />
161+
<Column sm={4} md={4} lg={4} />
162+
<Column sm={4} md={4} lg={4} />
163+
<Column sm={4} md={4} lg={4} />
164+
<Column sm={4} md={8} lg={16}>
165+
<Grid>
166+
<Column sm={4} md={4} lg={4} />
167+
<Column sm={4} md={4} lg={4} />
168+
<Column sm={4} md={4} lg={4} />
169+
<Column sm={4} md={4} lg={4} />
170+
</Grid>
171+
</Column>
172+
</Grid>
173+
<h5>Narrow</h5>
174+
<Grid narrow>
175+
<Column sm={4} md={4} lg={4} />
176+
<Column sm={4} md={4} lg={4} />
177+
<Column sm={4} md={4} lg={4} />
178+
<Column sm={4} md={4} lg={4} />
179+
<Column sm={4} md={8} lg={16}>
180+
<Grid narrow>
181+
<Column sm={4} md={4} lg={4} />
182+
<Column sm={4} md={4} lg={4} />
183+
<Column sm={4} md={4} lg={4} />
184+
<Column sm={4} md={4} lg={4} />
185+
</Grid>
186+
</Column>
187+
</Grid>
188+
<h5>Condensed</h5>
189+
<Grid condensed>
190+
<Column sm={4} md={4} lg={4} />
191+
<Column sm={4} md={4} lg={4} />
192+
<Column sm={4} md={4} lg={4} />
193+
<Column sm={4} md={4} lg={4} />
194+
<Column sm={4} md={8} lg={16}>
195+
<Grid condensed>
196+
<Column sm={4} md={4} lg={4} />
197+
<Column sm={4} md={4} lg={4} />
198+
<Column sm={4} md={4} lg={4} />
199+
<Column sm={4} md={4} lg={4} />
200+
</Grid>
201+
</Column>
202+
</Grid>
203+
</>
156204
);
157205
};
158206

0 commit comments

Comments
 (0)