From 7b0542007e2384e7b6a465fc15e8ff30c6a175bd Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Tue, 10 Dec 2024 15:56:54 +0100 Subject: [PATCH 1/3] Docs(web-react): Add more info about GridItem attributes #DS-1032 --- .../web-react/src/components/Grid/README.md | 32 ++++++++++++++++- .../components/Grid/static/GridExample.svg | 34 +++++++++++++++++++ 2 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 packages/web-react/src/components/Grid/static/GridExample.svg diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md index 00d3b1036f..41534a1528 100644 --- a/packages/web-react/src/components/Grid/README.md +++ b/packages/web-react/src/components/Grid/README.md @@ -128,6 +128,34 @@ component itself using the [`cols` prop](#api) and might not need to set columns listing with 3 columns is easier to set using `cols="3"` on the `Grid` component than setting `columnStart` and `columnEnd` on each `GridItem`. +### Grid Placement Props: `columnStart`, `columnEnd`, `rowStart`, `rowEnd` + +These props control the placement of grid items within a CSS Grid layout by specifying where the item starts and ends in rows and columns: + +- `columnStart`: Specifies the vertical grid line where the item begins. +- `columnEnd`: Specifies the vertical grid line where the item ends. The item spans up to, but does not include, this grid line. For example, if columnEnd is "3", the item ends at the line before the third column. +- `rowStart`: Specifies the horizontal grid line where the item begins. +- `rowEnd`: Specifies the horizontal grid line where the item ends. The item spans up to, but does not include, this grid line. For example, if rowEnd is "4", the item ends at the line before the fourth row. + +#### Grid Placement Example + +```jsx + + … + +``` + +Grid example + +_The image is taken from the [CSS Grid Layout Guide][css-tricks-grid]._ + +These props align with their respective CSS Grid properties, providing precise control over grid item placement. Learn more in the [MDN CSS Grid][grid-mdn] documentation. + Basic example usage: ```jsx @@ -179,8 +207,10 @@ If you need more control over the styling of a component, you can use [style pro and [escape hatches][readme-escape-hatches]. [alignment-dictionary]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment -[grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md +[css-tricks-grid]: https://css-tricks.com/snippets/css/complete-guide-grid/ [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword +[grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md +[grid-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props diff --git a/packages/web-react/src/components/Grid/static/GridExample.svg b/packages/web-react/src/components/Grid/static/GridExample.svg new file mode 100644 index 0000000000..e0f57772c8 --- /dev/null +++ b/packages/web-react/src/components/Grid/static/GridExample.svg @@ -0,0 +1,34 @@ + + 1 + + + 1 + + + 2 + + + 2 + + + 3 + + + 4 + + + 3 + + + GridItem + + + 4 + + + 5 + + + 6 + + \ No newline at end of file From ecc630c7a6d1593d272df8339e219992d381fca2 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Fri, 13 Dec 2024 09:33:10 +0100 Subject: [PATCH 2/3] Docs(web): Add more info about GridItem attributes #DS-1032 --- .../web/src/scss/components/Grid/README.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/web/src/scss/components/Grid/README.md b/packages/web/src/scss/components/Grid/README.md index 48a366e02f..c3798603eb 100644 --- a/packages/web/src/scss/components/Grid/README.md +++ b/packages/web/src/scss/components/Grid/README.md @@ -183,6 +183,37 @@ All nested Grid Items have their CSS variables firstly reset to the default valu This allows you to nest Grids with Grid Items and set their column values independently. Please note that every, even nested, Grid has 12 columns if not specified otherwise. +### Grid Placement Props: `--grid-item-column-start`, `--grid-item-column-end`, `--grid-item-row-start`, `--grid-item-row-end` + +These props control the placement of grid items within a CSS Grid layout by specifying where the item starts and ends in rows and columns: + +- `--grid-item-column-start`: Specifies the vertical grid line where the item begins. +- `--grid-item-column-end`: Specifies the vertical grid line where the item ends. The item spans up to, but does not include, this grid line. For example, if columnEnd is "3", the item ends at the line before the third column. +- `--grid-item-row-start`: Specifies the horizontal grid line where the item begins. +- `--grid-item-row-end`: Specifies the horizontal grid line where the item ends. The item spans up to, but does not include, this grid line. For example, if rowEnd is "4", the item ends at the line before the fourth row. + +#### Grid Placement Example + +```html +
+ … +
+``` + +Grid example + +_The image is taken from the [CSS Grid Layout Guide][css-tricks-grid]._ + +Learn more about grid placement in the [MDN CSS Grid][grid-mdn] documentation. + Basic Grid Item example: ```html @@ -309,3 +340,5 @@ variables. ``` [alignment-dictionary]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment +[css-tricks-grid]: https://css-tricks.com/snippets/css/complete-guide-grid/ +[grid-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout From 63c26f2713061f8debf56a040f0ab35b602af60f Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Fri, 13 Dec 2024 09:33:27 +0100 Subject: [PATCH 3/3] Docs(web-twig): Add more info about GridItem attributes #DS-1032 --- .../src/Resources/components/Grid/README.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md index 87a8109fe5..2e04fbd4d0 100644 --- a/packages/web-twig/src/Resources/components/Grid/README.md +++ b/packages/web-twig/src/Resources/components/Grid/README.md @@ -168,6 +168,34 @@ component itself using the [`cols` prop](#api) and might not need to set columns listing with 3 columns is easier to set using `cols="3"` on the `Grid` component than setting `columnStart` and `columnEnd` on each `GridItem`. +### Grid Placement Props: `columnStart`, `columnEnd`, `rowStart`, `rowEnd` + +These props control the placement of grid items within a CSS Grid layout by specifying where the item starts and ends in rows and columns: + +- `columnStart`: Specifies the vertical grid line where the item begins. +- `columnEnd`: Specifies the vertical grid line where the item ends. The item spans up to, but does not include, this grid line. For example, if columnEnd is "3", the item ends at the line before the third column. +- `rowStart`: Specifies the horizontal grid line where the item begins. +- `rowEnd`: Specifies the horizontal grid line where the item ends. The item spans up to, but does not include, this grid line. For example, if rowEnd is "4", the item ends at the line before the fourth row. + +#### Grid Placement Example + +```twig + + rowStart="1" + rowEnd="3" +> + … + +``` + +Grid example + +_The image is taken from the [CSS Grid Layout Guide][css-tricks-grid]._ + +These props align with their respective CSS Grid properties, providing precise control over grid item placement. Learn more in the [MDN CSS Grid][grid-mdn] documentation. + Basic example usage: ```twig @@ -231,9 +259,11 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. +[css-tricks-grid]: https://css-tricks.com/snippets/css/complete-guide-grid/ [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword [grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid +[grid-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches