Drop List layout in favour of default Grid layout (#382)

Author: adamkudrna

src/docs/contribute/composition.mdx

@@ -15,8 +15,8 @@ There are several types of composition approaches.
    outside their parent components.
 
    - **Mandatory subcomponents:** subcomponent must be used at least once in
-     order for the composition to work. E.g. `List` + `ListItem`, `Media` +
-     `MediaObject` + `MediaBody`, `Tabs` + `TabsItem`, etc.
+     order for the composition to work. E.g. `Media` + `MediaObject` +
+     `MediaBody`, `Tabs` + `TabsItem`, etc.
 
    - **Optional subcomponents:** optional subcomponents may be used to achieve
      special results. E.g. `FormLayout` + `FormLayoutCustomField` or `Grid` +

src/docs/customize/theming/overview.mdx

@@ -15,7 +15,7 @@ for two main reasons:
    a thing, but it's not necessary to go as far as for CSS-in-JS to make a UI
    customizable.
 
-2. Thanks to its JavaScript API, CSS custom properties are both **readable and
+2. Thanks to JavaScript API, CSS custom properties are both **readable and
    writable by JS**.
 
 ## Theming Options

src/docs/index.mdx

@@ -43,8 +43,8 @@ React UI consists of four building blocks:
    [Learn how to get started quickly.](/getting-started/installation)
 
 2. **Components:** reusable and themeable React components and layouts:
-   [buttons](/components/button), [cards](/components/card),
-   [lists](/components/list), and more.
+   [alerts](/components/alert), [buttons](/components/button),
+   [cards](/components/card), and more.
 
 3. **Theme:** a collection of CSS custom properties that define the visual
    appearance of the UI.

src/lib/components/FormLayout/README.mdx

@@ -75,10 +75,9 @@ there are longer validation messages or help texts.
 
 ## Vertical Layout
 
-Vertical FormLayout works similar to the [List](/components/list) layout
-except that no equivalent of ListItems is needed. It stacks the form fields
-vertically while it forces the vertical layout mode on them. To use this layout,
-simply wrap your form fields with the FormLayout component:
+Vertical FormLayout works similar to single-column [Grid](/components/grid)
+layout while it also forces vertical layout mode on form fields. To use this
+layout, simply wrap your form fields with the FormLayout component:
 
 <Playground>
   <FormLayout>

src/lib/components/Grid/Grid.scss

@@ -40,6 +40,11 @@
     justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2.
 }
 
+// stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
+.root > * {
+    margin-block: 0;
+}
+
 .span {
     $responsive-properties: (
         column-span: 1,
@@ -58,5 +63,6 @@ ol.root,
 ul.root {
     padding-left: 0;
     margin-left: 0;
+    list-style: none;
 }
 // stylelint-enable selector-no-qualifying-type

src/lib/components/Grid/README.mdx

@@ -27,10 +27,7 @@ import { Grid } from '@react-ui-org/react-ui';
 And use it:
 
 <Playground>
-  <Grid columns="1fr 1fr 1fr">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
+  <Grid>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
@@ -41,7 +38,7 @@ See [API](#api) for all available options.
 
 ## General Guidelines
 
-- This component implements native [CSS grid layout][grid-layout], the right CSS
+- This component implements native [CSS grid layout][grid-layout], a powerful
   tool for two-dimensional layouts. You may use any value accepted by
   [grid-template-columns], [grid-template-rows], [grid-column-gap],
   [grid-row-gap], [grid-auto-flow], [align-content], [align-items],
@@ -53,20 +50,22 @@ See [API](#api) for all available options.
   markup** like GridItem or Cell is necessary for your items. But it's there
   when you really need it—see [Advanced Layouts](#advanced-layouts).
 
+- For forms, use rather the [FormLayout](/components/form-layout) component
+  which is designed specifically for that purpose.
+
 - The Grid component is so powerful that it enables you to build even very
   advanced layouts **without** having to write **a single line of custom CSS.**
   See [Advanced Layouts](#advanced-layouts) for more.
 
-👉 The default layout has one column, auto-sized rows and gaps of
-[size 4](/foundation/spacing). Defaults for all Grid API options can be
-[customized](/customize/theming/overview) with CSS custom properties.
+👉 Vertical margin of items inside Grid is reset to zero.
 
-## Columns and Rows
+## Columns
 
-Use `columns` and `rows` to specify your grid layout.
+Unless the defaults are modified, stack is the default outcome of Grid. Use the
+`columns` option to organize your items into grid.
 
 <Playground>
-  <Grid columns="1fr 2fr" rows="auto 200px auto">
+  <Grid columns="1fr 1fr 1fr">
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
@@ -106,6 +105,21 @@ responsive layouts. Resize the playground to see it in action.
 👉 If you need your items to have **equal height** even with content of varying
 length, it may be necessary to set `height: 100%` on them.
 
+## Rows
+
+Use `columns` and `rows` to specify a more complicated grid layout.
+
+<Playground>
+  <Grid columns="1fr 2fr" rows="auto 200px auto">
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+  </Grid>
+</Playground>
+
 ## Gaps
 
 Both column and row gaps can be customized.
@@ -141,6 +155,25 @@ Individual items and the entire grid content can be aligned and along both axes.
   </Grid>
 </Playground>
 
+## Custom HTML Tag
+
+To render as list for example, just change the output `tag` to `ul` or `ol` and
+wrap your items with `<li>`.
+
+<Playground>
+  <Grid tag="ul">
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+  </Grid>
+</Playground>
+
 ## Media Queries
 
 If you need to build more complicated layouts, you have full control over the
@@ -253,7 +286,7 @@ Wrapper for content that should span multiple rows or columns.
 [grid-column-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
 [grid-row-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
 [grid-auto-flow]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
-[aling-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+[align-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 [align-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 [justify-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 [justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items