Skip to content

Commit 6bfc7d6

Browse files
committed
Reduce Grid theming API in favour of global props
Keep only theming options related to other design tokens. Relates to #308.
1 parent 88e9644 commit 6bfc7d6

File tree

3 files changed

+9
-23
lines changed

3 files changed

+9
-23
lines changed

src/lib/components/Grid/README.mdx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ See [API](#api) for all available options.
6161

6262
## Columns
6363

64-
Unless the defaults are modified, stack is the default outcome of Grid. Use the
65-
`columns` option to organize your items into grid.
64+
Stack is the default outcome of Grid. Use the `columns` option to organize your
65+
items into grid.
6666

6767
<Playground>
6868
<Grid columns="1fr 1fr 1fr">
@@ -270,15 +270,8 @@ Wrapper for content that should span multiple rows or columns.
270270

271271
| Custom Property | Description |
272272
|------------------------------------------------------|--------------------------------------------------------------|
273-
| `--rui-Grid__columns` | Default columns layout |
274273
| `--rui-Grid__column-gap` | Default column gap |
275-
| `--rui-Grid__rows` | Default rows layout |
276274
| `--rui-Grid__row-gap` | Default row gap |
277-
| `--rui-Grid__align-content` | Default vertical alignment of the layout |
278-
| `--rui-Grid__align-items` | Default vertical alignment of grid items |
279-
| `--rui-Grid__justify-content` | Default horizontal alignment of the layout |
280-
| `--rui-Grid__justify-items` | Default horizontal alignment of grid items |
281-
| `--rui-Grid__auto-flow` | Default auto-flow algorithm |
282275

283276
[grid-layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
284277
[grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

src/lib/components/Grid/_theme.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
$responsive-properties: (
2-
columns: var(--rui-Grid__columns),
2+
columns: 1fr,
33
column-gap: var(--rui-Grid__column-gap),
4-
rows: var(--rui-Grid__rows),
4+
rows: auto,
55
row-gap: var(--rui-Grid__row-gap),
6-
auto-flow: var(--rui-Grid__auto-flow),
7-
align-content: var(--rui-Grid__align-content),
8-
align-items: var(--rui-Grid__align-items),
9-
justify-content: var(--rui-Grid__justify-content),
10-
justify-items: var(--rui-Grid__justify-items),
6+
auto-flow: initial,
7+
align-content: initial,
8+
align-items: initial,
9+
justify-content: initial,
10+
justify-items: initial,
1111
);

src/lib/theme.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,15 +200,8 @@
200200
// Grid
201201
// ====
202202

203-
--rui-Grid__columns: 1fr;
204203
--rui-Grid__column-gap: var(--rui-spacing-4);
205-
--rui-Grid__rows: auto;
206204
--rui-Grid__row-gap: var(--rui-spacing-4);
207-
--rui-Grid__auto-flow: initial;
208-
--rui-Grid__align-content: initial;
209-
--rui-Grid__align-items: initial;
210-
--rui-Grid__justify-content: initial;
211-
--rui-Grid__justify-items: initial;
212205

213206
//
214207
// Toolbar

0 commit comments

Comments
 (0)