Reduce Grid theming API in favour of global props

Keep only theming options related to other design tokens. Relates to #308.
react-ui-org · Jul 5, 2022 · 6bfc7d6 · 6bfc7d6
1 parent 88e9644
commit 6bfc7d6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 23 deletions.
diff --git a/src/lib/components/Grid/README.mdx b/src/lib/components/Grid/README.mdx
@@ -61,8 +61,8 @@ See [API](#api) for all available options.
 
 ## Columns
 
-Unless the defaults are modified, stack is the default outcome of Grid. Use the
-`columns` option to organize your items into grid.
+Stack is the default outcome of Grid. Use the `columns` option to organize your
+items into grid.
 
 <Playground>
   <Grid columns="1fr 1fr 1fr">
@@ -270,15 +270,8 @@ Wrapper for content that should span multiple rows or columns.
 
 | Custom Property                                      | Description                                                  |
 |------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Grid__columns`                                | Default columns layout                                       |
 | `--rui-Grid__column-gap`                             | Default column gap                                           |
-| `--rui-Grid__rows`                                   | Default rows layout                                          |
 | `--rui-Grid__row-gap`                                | Default row gap                                              |
-| `--rui-Grid__align-content`                          | Default vertical alignment of the layout                     |
-| `--rui-Grid__align-items`                            | Default vertical alignment of grid items                     |
-| `--rui-Grid__justify-content`                        | Default horizontal alignment of the layout                   |
-| `--rui-Grid__justify-items`                          | Default horizontal alignment of grid items                   |
-| `--rui-Grid__auto-flow`                              | Default auto-flow algorithm                                  |
 
 [grid-layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 [grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

diff --git a/src/lib/components/Grid/_theme.scss b/src/lib/components/Grid/_theme.scss
@@ -1,11 +1,11 @@
 $responsive-properties: (
-    columns: var(--rui-Grid__columns),
+    columns: 1fr,
     column-gap: var(--rui-Grid__column-gap),
-    rows: var(--rui-Grid__rows),
+    rows: auto,
     row-gap: var(--rui-Grid__row-gap),
-    auto-flow: var(--rui-Grid__auto-flow),
-    align-content: var(--rui-Grid__align-content),
-    align-items: var(--rui-Grid__align-items),
-    justify-content: var(--rui-Grid__justify-content),
-    justify-items: var(--rui-Grid__justify-items),
+    auto-flow: initial,
+    align-content: initial,
+    align-items: initial,
+    justify-content: initial,
+    justify-items: initial,
 );
diff --git a/src/lib/theme.scss b/src/lib/theme.scss
@@ -200,15 +200,8 @@
     // Grid
     // ====
 
-    --rui-Grid__columns: 1fr;
     --rui-Grid__column-gap: var(--rui-spacing-4);
-    --rui-Grid__rows: auto;
     --rui-Grid__row-gap: var(--rui-spacing-4);
-    --rui-Grid__auto-flow: initial;
-    --rui-Grid__align-content: initial;
-    --rui-Grid__align-items: initial;
-    --rui-Grid__justify-content: initial;
-    --rui-Grid__justify-items: initial;
 
     //
     // Toolbar