From 720f66e3f515e558397abf45d2fd66da970fb85a Mon Sep 17 00:00:00 2001 From: Aamir Khan Date: Mon, 17 Nov 2025 21:16:47 +0500 Subject: [PATCH 1/2] Add autoRows and autoColumns props --- src/lib/components/grid/Grid.tsx | 70 ++++++++++++++++++++++------- src/lib/components/grid/_index.scss | 28 ++++++++++++ 2 files changed, 83 insertions(+), 15 deletions(-) diff --git a/src/lib/components/grid/Grid.tsx b/src/lib/components/grid/Grid.tsx index c82c9613..9753aaee 100644 --- a/src/lib/components/grid/Grid.tsx +++ b/src/lib/components/grid/Grid.tsx @@ -12,15 +12,7 @@ type GridAlignItems = (typeof GRID_ALIGN_ITEMS)[number]; const GRID_JUSTIFY_ITEMS = ["start", "end", "center", "stretch"] as const; type GridJustifyItems = (typeof GRID_JUSTIFY_ITEMS)[number]; -const GRID_ALIGN_CONTENT = [ - "start", - "end", - "center", - "stretch", - "spaceAround", - "spaceBetween", - "spaceEvenly" -] as const; +const GRID_ALIGN_CONTENT = ["start", "end", "center", "stretch", "spaceAround", "spaceBetween", "spaceEvenly"] as const; type GridAlignContent = (typeof GRID_ALIGN_CONTENT)[number]; const GRID_JUSTIFY_CONTENT = [ @@ -75,6 +67,8 @@ type Props = { spacing?: FlexSpacing; templateColumns?: ResponsiveGridValue; templateRows?: string; + autoRows?: ResponsiveGridValue; + autoColumns?: ResponsiveGridValue; alignItems?: GridAlignItems; justifyItems?: GridJustifyItems; alignContent?: GridAlignContent; @@ -90,6 +84,8 @@ export const VuiGrid = ({ spacing = "m", templateColumns, templateRows, + autoRows, + autoColumns, alignItems, justifyItems, alignContent, @@ -99,10 +95,11 @@ export const VuiGrid = ({ className, ...rest }: Props) => { - const classes = classNames("vuiGridContainer", className); const isResponsiveTemplateColumns = templateColumns && typeof templateColumns === "object"; + const isResponsiveAutoRows = autoRows && typeof autoRows === "object"; + const isResponsiveAutoColumns = autoColumns && typeof autoColumns === "object"; const contentClasses = classNames( "vuiGrid", @@ -111,7 +108,9 @@ export const VuiGrid = ({ [`vuiGrid--columns${columns}`]: !templateColumns && columns, "vuiGrid--inline": inline, "vuiGrid--fullWidth": fullWidth, - "vuiGrid--responsive": isResponsiveTemplateColumns + "vuiGrid--responsive": isResponsiveTemplateColumns, + "vuiGrid--responsiveAutoRows": isResponsiveAutoRows, + "vuiGrid--responsiveAutoColumns": isResponsiveAutoColumns }, alignItems && alignItemsClassMap[alignItems], justifyItems && justifyItemsClassMap[justifyItems], @@ -148,12 +147,53 @@ export const VuiGrid = ({ gridStyle.gridTemplateRows = templateRows; } + if (autoRows) { + if (typeof autoRows === "string") { + gridStyle.gridAutoRows = autoRows; + } else { + // Implement cascading: each breakpoint inherits from the previous if not defined + const defaultValue = autoRows.default; + const smValue = autoRows.sm || defaultValue; + const mdValue = autoRows.md || smValue; + const lgValue = autoRows.lg || mdValue; + + if (smValue) { + gridStyle["--grid-auto-rows-sm"] = smValue; + } + if (mdValue) { + gridStyle["--grid-auto-rows-md"] = mdValue; + } + if (lgValue) { + gridStyle["--grid-auto-rows-lg"] = lgValue; + } + } + } + + if (autoColumns) { + if (typeof autoColumns === "string") { + gridStyle.gridAutoColumns = autoColumns; + } else { + // Implement cascading: each breakpoint inherits from the previous if not defined + const defaultValue = autoColumns.default; + const smValue = autoColumns.sm || defaultValue; + const mdValue = autoColumns.md || smValue; + const lgValue = autoColumns.lg || mdValue; + + if (smValue) { + gridStyle["--grid-auto-columns-sm"] = smValue; + } + if (mdValue) { + gridStyle["--grid-auto-columns-md"] = mdValue; + } + if (lgValue) { + gridStyle["--grid-auto-columns-lg"] = lgValue; + } + } + } + return (
-
0 ? gridStyle : undefined} - > +
0 ? gridStyle : undefined}> {children}
diff --git a/src/lib/components/grid/_index.scss b/src/lib/components/grid/_index.scss index 2584d5ac..3f2b2aaf 100644 --- a/src/lib/components/grid/_index.scss +++ b/src/lib/components/grid/_index.scss @@ -82,6 +82,34 @@ $spacing: ( } } +// Responsive grid auto rows using CSS custom properties +.vuiGrid--responsiveAutoRows { + // Small (applies from 0px up - default/mobile-first) + grid-auto-rows: var(--grid-auto-rows-sm); + + @container (width > 500px) { + grid-auto-rows: var(--grid-auto-rows-md); + } + + @container (width > 800px) { + grid-auto-rows: var(--grid-auto-rows-lg); + } +} + +// Responsive grid auto columns using CSS custom properties +.vuiGrid--responsiveAutoColumns { + // Small (applies from 0px up - default/mobile-first) + grid-auto-columns: var(--grid-auto-columns-sm); + + @container (width > 500px) { + grid-auto-columns: var(--grid-auto-columns-md); + } + + @container (width > 800px) { + grid-auto-columns: var(--grid-auto-columns-lg); + } +} + // Alignment - align-items .vuiGrid--alignItemsStart { align-items: start; From b114f9e10891ad3fab17f5d599c0f1d9f299f6a7 Mon Sep 17 00:00:00 2001 From: Aamir Khan Date: Tue, 18 Nov 2025 15:59:28 +0500 Subject: [PATCH 2/2] Add docs, remove autoColumns --- src/docs/pages/grid/GridAutoRows.tsx | 140 +++++++++++++++++++++++++++ src/docs/pages/grid/index.tsx | 7 ++ src/lib/components/grid/Grid.tsx | 28 +----- src/lib/components/grid/_index.scss | 14 --- 4 files changed, 148 insertions(+), 41 deletions(-) create mode 100644 src/docs/pages/grid/GridAutoRows.tsx diff --git a/src/docs/pages/grid/GridAutoRows.tsx b/src/docs/pages/grid/GridAutoRows.tsx new file mode 100644 index 00000000..01654713 --- /dev/null +++ b/src/docs/pages/grid/GridAutoRows.tsx @@ -0,0 +1,140 @@ +import { VuiGrid, VuiGridItem, VuiCard, VuiText, VuiSpacer, VuiTitle } from "../../../lib"; + +export const GridAutoRows = () => { + const longContent = ( + <> + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +

+ + + +

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. +

+ + + +

+ Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur + magni dolores eos qui ratione voluptatem sequi nesciunt. +

+ + + +

+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non + numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. +

+ + + ); + + return ( + <> + +

Grid with autoRows="200px"

+ + + + + +

+ This grid uses autoRows="200px" to set a fixed height of 200px for all implicitly created rows. Notice how all + rows have the same height regardless of content, and cards with long content become scrollable. This becomes + particularly relevant as the number of rows increases as the size of the container gets smaller. +

+ + + + + + + Card 1} body={longContent} /> + + + + Card 2} + body={ + +

Short content in this card.

+ + } + /> + + + + Card 3} body={longContent} /> + + + + + + +

Grid without autoRows

+ + + + + +

+ This grid has no autoRows value set. Notice how on larger containers, the cards have the same height (thanks + to templateRows="200px") but as the container gets smaller, the newly created rows don't adhere to a fixed + height. +

+ + + + + + + Card 1} body={longContent} /> + + + + Card 2} + body={ + +

Short content in this card.

+ + } + /> + + + + Card 3} body={longContent} /> + + + + ); +}; diff --git a/src/docs/pages/grid/index.tsx b/src/docs/pages/grid/index.tsx index 0bb6b450..e775b140 100644 --- a/src/docs/pages/grid/index.tsx +++ b/src/docs/pages/grid/index.tsx @@ -3,12 +3,14 @@ import { GridSpanning } from "./GridSpanning"; import { GridSimple } from "./GridSimple"; import { GridAlignment } from "./GridAlignment"; import { GridResponsive } from "./GridResponsive"; +import { GridAutoRows } from "./GridAutoRows"; const GridSource = require("!!raw-loader!./Grid"); const GridSpanningSource = require("!!raw-loader!./GridSpanning"); const GridSimpleSource = require("!!raw-loader!./GridSimple"); const GridAlignmentSource = require("!!raw-loader!./GridAlignment"); const GridResponsiveSource = require("!!raw-loader!./GridResponsive"); +const GridAutoRowsSource = require("!!raw-loader!./GridAutoRows"); export const grid = { name: "Grid", @@ -38,6 +40,11 @@ export const grid = { name: "Responsive columns", component: , source: GridResponsiveSource.default.toString() + }, + { + name: "Auto rows", + component: , + source: GridAutoRowsSource.default.toString() } ] }; diff --git a/src/lib/components/grid/Grid.tsx b/src/lib/components/grid/Grid.tsx index 9753aaee..44647694 100644 --- a/src/lib/components/grid/Grid.tsx +++ b/src/lib/components/grid/Grid.tsx @@ -68,7 +68,6 @@ type Props = { templateColumns?: ResponsiveGridValue; templateRows?: string; autoRows?: ResponsiveGridValue; - autoColumns?: ResponsiveGridValue; alignItems?: GridAlignItems; justifyItems?: GridJustifyItems; alignContent?: GridAlignContent; @@ -85,7 +84,6 @@ export const VuiGrid = ({ templateColumns, templateRows, autoRows, - autoColumns, alignItems, justifyItems, alignContent, @@ -99,7 +97,6 @@ export const VuiGrid = ({ const isResponsiveTemplateColumns = templateColumns && typeof templateColumns === "object"; const isResponsiveAutoRows = autoRows && typeof autoRows === "object"; - const isResponsiveAutoColumns = autoColumns && typeof autoColumns === "object"; const contentClasses = classNames( "vuiGrid", @@ -109,8 +106,7 @@ export const VuiGrid = ({ "vuiGrid--inline": inline, "vuiGrid--fullWidth": fullWidth, "vuiGrid--responsive": isResponsiveTemplateColumns, - "vuiGrid--responsiveAutoRows": isResponsiveAutoRows, - "vuiGrid--responsiveAutoColumns": isResponsiveAutoColumns + "vuiGrid--responsiveAutoRows": isResponsiveAutoRows }, alignItems && alignItemsClassMap[alignItems], justifyItems && justifyItemsClassMap[justifyItems], @@ -169,28 +165,6 @@ export const VuiGrid = ({ } } - if (autoColumns) { - if (typeof autoColumns === "string") { - gridStyle.gridAutoColumns = autoColumns; - } else { - // Implement cascading: each breakpoint inherits from the previous if not defined - const defaultValue = autoColumns.default; - const smValue = autoColumns.sm || defaultValue; - const mdValue = autoColumns.md || smValue; - const lgValue = autoColumns.lg || mdValue; - - if (smValue) { - gridStyle["--grid-auto-columns-sm"] = smValue; - } - if (mdValue) { - gridStyle["--grid-auto-columns-md"] = mdValue; - } - if (lgValue) { - gridStyle["--grid-auto-columns-lg"] = lgValue; - } - } - } - return (
0 ? gridStyle : undefined}> diff --git a/src/lib/components/grid/_index.scss b/src/lib/components/grid/_index.scss index 3f2b2aaf..6b00014d 100644 --- a/src/lib/components/grid/_index.scss +++ b/src/lib/components/grid/_index.scss @@ -96,20 +96,6 @@ $spacing: ( } } -// Responsive grid auto columns using CSS custom properties -.vuiGrid--responsiveAutoColumns { - // Small (applies from 0px up - default/mobile-first) - grid-auto-columns: var(--grid-auto-columns-sm); - - @container (width > 500px) { - grid-auto-columns: var(--grid-auto-columns-md); - } - - @container (width > 800px) { - grid-auto-columns: var(--grid-auto-columns-lg); - } -} - // Alignment - align-items .vuiGrid--alignItemsStart { align-items: start;