From ea376a0af19ff5a90d88b4e7a10b3fe087ae403b Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 15 Feb 2024 14:29:17 +0800 Subject: [PATCH 1/9] Stack partial - Create common stack layout partial - _stack.scss - Add demo page stack.mdx --- apps/pink/src/pages/layout/stack.mdx | 140 +++++++++++++++++++++++++++ packages/ui/src/8-grids/_index.scss | 2 + packages/ui/src/8-grids/_stack.scss | 71 ++++++++++++++ 3 files changed, 213 insertions(+) create mode 100644 apps/pink/src/pages/layout/stack.mdx create mode 100644 packages/ui/src/8-grids/_stack.scss diff --git a/apps/pink/src/pages/layout/stack.mdx b/apps/pink/src/pages/layout/stack.mdx new file mode 100644 index 0000000000..b46e193ea6 --- /dev/null +++ b/apps/pink/src/pages/layout/stack.mdx @@ -0,0 +1,140 @@ +--- +title: Stack +description: Common stack layout partial +--- + +| Class | Type | | +| ----------- | --------------- | -------------------------------------- | +| `stack` | Stack Container | A class representing a stack container | + + +
+
1
+
2
+
3
+
+ + + +## Direction +The direction of the stack. + +| Property | attribute | Type | Default | +| --------------- | -------------------- | ------------------------------- | -------------- | +| `direction` | data-direction | ```vertical```,```horizontal``` | ```vertical``` | + + +
+
1
+
2
+
3
+
+ + +## Defining spacing +The space injected between components. + +| Property | attribute | Type | Default | +| --------------- | -------------------- | -------------------------------------------------------------- | -------------- | +| `gap` | data-gap | ```none```,```xs```,```s```,```m```,```l```,```xl```,```xxl``` | ```m``` | + + +
+
1
+
2
+
3
+
+ + + +## Defining custom spacing +Other options to define custom gap is using directly the CSS variable of gap + +| CSS Custom Property | Description | Default | +| ----------------------- | ------------------------------------------------------------------------ | ------------------------ | +| `--stack-gap` | Controls the spacing between items, using our spacing tokens | ```var(--stack-gap-m)``` | + + +
+
1
+
2
+
3
+
+ + + +## Align items +How to align the child items inside the stack. + +| Property | attribute | Type | Default | +| --------------- | -------------------- | ------------------------------------------------------------ | -------------- | +| `align-items` | data-align-items | ```streatch```,```start```,```end```,```center```,```text``` | ```streatch``` | + + +
+
content
+
two line content.
All boxes aligned center
+
content
+
+ + +## justify Content +How to justify the child items inside the stack. + +| Property | attribute | Type | Default | +| --------------------- | --------------------------- | -------------------------------------------------------------------------------------------- | -------------- | +| `justify-content` | data-djustify-content | ```start```,```end```,```center```,```space-evenly```,```space-around```,```space-between``` | ```start``` | + + +
+
content
+
two
line content. All boxes aligned center
+
content
+
+ + +## Wrap +Defines whether the Stack items are forced in a single line or can be flowed into multiple lines. + +| Property | attribute | Type | Default | +| --------------- | -------------------- | ------------------------------- | -------------- | +| `wrap` | data-wrap | ```nowrap```,```wrap``` | ```nowrap``` | + + +
+
content
+
long content
+
content
+
long content
+
content
+
long content
+
content
+
long content
+
content
+
+ \ No newline at end of file diff --git a/packages/ui/src/8-grids/_index.scss b/packages/ui/src/8-grids/_index.scss index c0e0e490da..fbf32f888d 100644 --- a/packages/ui/src/8-grids/_index.scss +++ b/packages/ui/src/8-grids/_index.scss @@ -1,3 +1,5 @@ +@forward "stack"; + @forward "grid-with-side"; @forward "grid-box"; @forward "grid-header"; diff --git a/packages/ui/src/8-grids/_stack.scss b/packages/ui/src/8-grids/_stack.scss new file mode 100644 index 0000000000..b8cafd8a87 --- /dev/null +++ b/packages/ui/src/8-grids/_stack.scss @@ -0,0 +1,71 @@ +@use '../abstract' as *; + +:root { + --stack-direction-vertical: column; + --stack-direction-horizontal: row; + + --stack-gap-none: 0; + --stack-gap-xs: #{pxToRem(4)}; + --stack-gap-s: #{pxToRem(8)}; + --stack-gap-m: #{pxToRem(16)}; + --stack-gap-l: #{pxToRem(24)}; + --stack-gap-xl: #{pxToRem(36)}; + --stack-gap-xxl: #{pxToRem(72)}; + + --stack-align-items-streach: streatch; + --stack-align-items-start: start; + --stack-align-items-end: end; + --stack-align-items-center: center; + --stack-align-items-text: baseline; + + --stack-wrap-nowrap: nowrap; + --stack-wrap-wrap: wrap; + + --stack-justify-content-start: start; + --stack-justify-content-end: end; + --stack-justify-content-center: center; + --stack-justify-content-space-evenly: space-evenly; + --stack-justify-content-space-around: space-around; + --stack-justify-content-space-between: space-between; +} + +.stack { + display: flex; + /* define initial values */ + flex-direction: var(--stack-direction, var(--stack-direction-vertical)); + gap: var(--stack-gap, var(--stack-gap-m)); + align-items: var(--stack-align-items, var(--stack-align-items-streach)); + justify-content: var(--stack-justify-content, var(--stack-justify-content-start)); + flex-wrap: var(--stack-wrap, var(--stack-wrap-nowrap)); + + /* direction type - vertical is default */ + &[data-direction="horizontal"] { --stack-direction: var(--stack-direction-horizontal); } + + /* gap - "m" (medium) is default (16px) */ + &[data-gap="none"] { --stack-gap:var(--stack-gap-none); } + &[data-gap="xs"] { --stack-gap:var(--stack-gap-xs); } + &[data-gap="s"] { --stack-gap:var(--stack-gap-s); } + &[data-gap="m"] { --stack-gap:var(--stack-gap-m); } + &[data-gap="l"] { --stack-gap:var(--stack-gap-l); } + &[data-gap="xl"] { --stack-gap:var(--stack-gap-xl); } + &[data-gap="xxl"] { --stack-gap:var(--stack-gap-xxl); } + + /* cross axis - stretch is the default value */ + &[data-align-items="streatch"] { --stack-align-items: var(--stack-align-items-streach); } + &[data-align-items="start"] { --stack-align-items: var(--stack-align-items-start); } + &[data-align-items="end"] { --stack-align-items: var(--stack-align-items-end); } + &[data-align-items="center"] { --stack-align-items: var(--stack-align-items-center); } + &[data-align-items="text"] { --stack-align-items: var(--stack-align-items-text); } + + /* */ + &[data-justify-content="start"] { --stack-justify-content: var(--stack-justify-content-start); } + &[data-justify-content="end"] { --stack-justify-content: var(--stack-justify-content-end); } + &[data-justify-content="center"] { --stack-justify-content: var(--stack-justify-content-center); } + &[data-justify-content="space-evenly"] { --stack-justify-content: var(--stack-justify-content-space-evenly); } + &[data-justify-content="space-around"] { --stack-justify-content: var(--stack-justify-content-space-around); } + &[data-justify-content="space-between"] { --stack-justify-content: var(--stack-justify-content-space-between); } + + /* wrap stack - default is false (unwrap) */ + &[data-wrap="false"] { --stack-wrap: var(--stack-wrap-nowrap); } + &[data-wrap="true"] { --stack-wrap: var(--stack-wrap-wrap); } +} \ No newline at end of file From 57123e07d9a8a3c943b8cb230a9a15d59c70a968 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 15 Feb 2024 14:40:36 +0800 Subject: [PATCH 2/9] Stack partial - small fixes --- apps/pink/src/pages/layout/stack.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pink/src/pages/layout/stack.mdx b/apps/pink/src/pages/layout/stack.mdx index b46e193ea6..7c317015be 100644 --- a/apps/pink/src/pages/layout/stack.mdx +++ b/apps/pink/src/pages/layout/stack.mdx @@ -119,7 +119,7 @@ Defines whether the Stack items are forced in a single line or can be flowed int | Property | attribute | Type | Default | | --------------- | -------------------- | ------------------------------- | -------------- | -| `wrap` | data-wrap | ```nowrap```,```wrap``` | ```nowrap``` | +| `wrap` | data-wrap | ```false```,```true``` | ```false``` |
Date: Fri, 16 Feb 2024 17:06:04 +0800 Subject: [PATCH 3/9] Remove unwanted utility class --- apps/kitchensink/index.html | 4 ++-- apps/pink/src/pages/components/upload-box.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/kitchensink/index.html b/apps/kitchensink/index.html index ed047e3c72..3749fb49a4 100644 --- a/apps/kitchensink/index.html +++ b/apps/kitchensink/index.html @@ -1339,7 +1339,7 @@

  • -
    +
  • -
    +
  • -
    +
    Date: Fri, 16 Feb 2024 17:06:54 +0800 Subject: [PATCH 4/9] Stack partial - Added grid-header example with stack layout --- apps/pink/src/pages/layout/stack.mdx | 49 +++++++++++++++++++++++++ packages/ui/src/6-elements/_button.scss | 7 ++-- packages/ui/src/8-grids/_stack.scss | 21 +++++++---- 3 files changed, 67 insertions(+), 10 deletions(-) diff --git a/apps/pink/src/pages/layout/stack.mdx b/apps/pink/src/pages/layout/stack.mdx index 7c317015be..9c9eb7423c 100644 --- a/apps/pink/src/pages/layout/stack.mdx +++ b/apps/pink/src/pages/layout/stack.mdx @@ -137,4 +137,53 @@ Defines whether the Stack items are forced in a single line or can be flowed int
    long content
    content
    + + +# Usage Demos + +## Grid Header example (replacement) + +
    + +

    Databases

    + +
    + + + +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    + +
    + +
    \ No newline at end of file diff --git a/packages/ui/src/6-elements/_button.scss b/packages/ui/src/6-elements/_button.scss index 929e10f2ab..7ae4bec382 100644 --- a/packages/ui/src/6-elements/_button.scss +++ b/packages/ui/src/6-elements/_button.scss @@ -38,7 +38,7 @@ /* End Light theme variables */ @include trim(); - display:flex; gap:pxToRem(8); align-items:center; inline-size:fit-content; block-size:var(--p-button-size); + display:flex; gap:pxToRem(8); justify-content:center; align-items:center; inline-size:fit-content; block-size:var(--p-button-size); padding-inline:var(--padding-horizontal); cursor:pointer; font-size:var(--p-font-size); font-weight:600; color:hsl(var(--p-text-color)); background-color:hsl(var(--p-button-color)); text-align:center; border:solid pxToRem(1) hsl(var(--p-border-color)); border-radius:var(--border-radius-xsmall); flex-shrink:0; @@ -61,8 +61,9 @@ $padding-horizontal:pxToRem(20); --padding-horizontal: #{$padding-horizontal}; } &.is-only-icon { aspect-ratio:1 / 1; padding:0; justify-content:center; align-items:center; border-radius:var(--border-radius-circular); } - &.is-full-width { inline-size:100%; justify-content:center; } - &.is-full-width-mobile { @media #{$break1} {inline-size:100%; justify-content:center; } } + &.is-full-width { inline-size:100%; } + &.is-full-width-mobile { @media #{$break1} { inline-size:100%; } } + &.is-full-width-in-stack-mobile { @media #{$break1} { flex-grow:1; } } /* default - PRIMARY */ &:is(:hover) { &:where(:not(#{$disabled})) { diff --git a/packages/ui/src/8-grids/_stack.scss b/packages/ui/src/8-grids/_stack.scss index b8cafd8a87..8840897300 100644 --- a/packages/ui/src/8-grids/_stack.scss +++ b/packages/ui/src/8-grids/_stack.scss @@ -1,9 +1,15 @@ @use '../abstract' as *; :root { + +} + +.stack { + --stack-direction: var(--stack-direction-vertical); /* default */ --stack-direction-vertical: column; --stack-direction-horizontal: row; + --stack-gap: var(--stack-gap-m); /* default */ --stack-gap-none: 0; --stack-gap-xs: #{pxToRem(4)}; --stack-gap-s: #{pxToRem(8)}; @@ -12,31 +18,32 @@ --stack-gap-xl: #{pxToRem(36)}; --stack-gap-xxl: #{pxToRem(72)}; + --stack-align-items: var(--stack-align-items-streach); /* default */ --stack-align-items-streach: streatch; --stack-align-items-start: start; --stack-align-items-end: end; --stack-align-items-center: center; --stack-align-items-text: baseline; + --stack-wrap: var(--stack-wrap-nowrap); /* default */ --stack-wrap-nowrap: nowrap; --stack-wrap-wrap: wrap; + --stack-justify-content: var(--stack-justify-content-start); /* default */ --stack-justify-content-start: start; --stack-justify-content-end: end; --stack-justify-content-center: center; --stack-justify-content-space-evenly: space-evenly; --stack-justify-content-space-around: space-around; --stack-justify-content-space-between: space-between; -} -.stack { display: flex; /* define initial values */ - flex-direction: var(--stack-direction, var(--stack-direction-vertical)); - gap: var(--stack-gap, var(--stack-gap-m)); - align-items: var(--stack-align-items, var(--stack-align-items-streach)); - justify-content: var(--stack-justify-content, var(--stack-justify-content-start)); - flex-wrap: var(--stack-wrap, var(--stack-wrap-nowrap)); + flex-direction: var(--stack-direction); + gap: var(--stack-gap); + align-items: var(--stack-align-items); + justify-content: var(--stack-justify-content); + flex-wrap: var(--stack-wrap); /* direction type - vertical is default */ &[data-direction="horizontal"] { --stack-direction: var(--stack-direction-horizontal); } From 56b51afa6d515770cb279463eece82d639bf697c Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 16 Feb 2024 18:13:53 +0800 Subject: [PATCH 5/9] Stack partial - Added grid-header second example with stack layout --- apps/pink/src/pages/layout/stack.mdx | 33 ++++++++++++++++++++++++++-- packages/ui/src/_9-utilities.scss | 1 + 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/apps/pink/src/pages/layout/stack.mdx b/apps/pink/src/pages/layout/stack.mdx index 9c9eb7423c..85c43724f2 100644 --- a/apps/pink/src/pages/layout/stack.mdx +++ b/apps/pink/src/pages/layout/stack.mdx @@ -109,7 +109,7 @@ How to justify the child items inside the stack. data-justify-content="center" >
    content
    -
    two
    line content. All boxes aligned center
    +
    Main axis aligned center
    content
    @@ -141,7 +141,7 @@ Defines whether the Stack items are forced in a single line or can be flowed int # Usage Demos -## Grid Header example (replacement) +## Grid Header examples (replacement for older partial)
    +     + + +
    +

    Messages

    +
    +
    + + +
    +
    +
    + + +
    + +
    +
    +
    \ No newline at end of file diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index 8c9187e149..8b818e07e2 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -170,6 +170,7 @@ .u-stretch { flex:1!important; } .u-flex-basis-140 { flex-basis:pxToRem(140)!important;} .u-flex-basis-250 { flex-basis:pxToRem(250)!important;} +.u-flex-basis-400 { flex-basis:pxToRem(400)!important;} .u-flex-basis-500 { flex-basis:pxToRem(500)!important;} .u-flex-basis-50-percent { flex-basis:50%!important; } .u-flex-basis-100-percent { flex-basis:100%!important; } From d7473b1bdaa0f5bf5ed85d378239aac0ccfff30d Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 28 Feb 2024 21:17:57 +0800 Subject: [PATCH 6/9] Stack - clear unnecessary stuff --- packages/ui/src/8-grids/_stack.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/ui/src/8-grids/_stack.scss b/packages/ui/src/8-grids/_stack.scss index 8840897300..7df6fc3430 100644 --- a/packages/ui/src/8-grids/_stack.scss +++ b/packages/ui/src/8-grids/_stack.scss @@ -1,9 +1,5 @@ @use '../abstract' as *; -:root { - -} - .stack { --stack-direction: var(--stack-direction-vertical); /* default */ --stack-direction-vertical: column; From c60ce072bee0ec7e53e12802d0abf3e7efa4bb16 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 29 Feb 2024 22:49:23 +0800 Subject: [PATCH 7/9] Grid - work in progress grid partial --- apps/pink/src/pages/layout/grid.mdx | 19 +++++++++ packages/ui/src/8-grids/_grid.scss | 60 +++++++++++++++++++++++++++++ packages/ui/src/8-grids/_index.scss | 2 + 3 files changed, 81 insertions(+) create mode 100644 apps/pink/src/pages/layout/grid.mdx create mode 100644 packages/ui/src/8-grids/_grid.scss diff --git a/apps/pink/src/pages/layout/grid.mdx b/apps/pink/src/pages/layout/grid.mdx new file mode 100644 index 0000000000..a51efc46df --- /dev/null +++ b/apps/pink/src/pages/layout/grid.mdx @@ -0,0 +1,19 @@ +--- +title: Grid +description: Common grid layout partial +--- + +| Class | Type | | +| ----------- | --------------- | -------------------------------------- | +| `grid` | Grid Container | A class representing a grid container | + + +
    +
    1
    +
    2
    +
    3
    +
    +     \ No newline at end of file diff --git a/packages/ui/src/8-grids/_grid.scss b/packages/ui/src/8-grids/_grid.scss new file mode 100644 index 0000000000..92fe59c51a --- /dev/null +++ b/packages/ui/src/8-grids/_grid.scss @@ -0,0 +1,60 @@ +@use '../abstract' as *; + +.grid { + --grid-columns: auto-fill; /* default */ + --grid-columns-1: 1; + --grid-columns-2: 2; + --grid-columns-3: 3; + --grid-columns-4: 4; + --grid-columns-5: 5; + --grid-columns-6: 6; + --grid-columns-7: 7; + --grid-columns-8: 8; + --grid-columns-9: 9; + --grid-columns-10: 10; + --grid-columns-11: 11; + --grid-columns-12: 12; + + --grid-gap: var(--grid-gap-m); /* default */ + --grid-gap-none: 0; + --grid-gap-xs: #{pxToRem(4)}; + --grid-gap-s: #{pxToRem(8)}; + --grid-gap-m: #{pxToRem(16)}; + --grid-gap-l: #{pxToRem(24)}; + --grid-gap-xl: #{pxToRem(36)}; + --grid-gap-xxl: #{pxToRem(72)}; + + --grid-column-min-width: #{pxToRem(160)}; + --grid-auto-row-min-height: #{pxToRem(160)}; + + display: grid; + grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-column-min-width), 1fr) ); + grid-auto-rows: var(--grid-auto-row-min-height); + gap: var(--grid-gap); + + /* columns */ + &[data-columns="1"] { --grid-columns:var(--grid-columns-1); } + &[data-columns="2"] { --grid-columns:var(--grid-columns-2); } + &[data-columns="3"] { --grid-columns:var(--grid-columns-3); } + &[data-columns="4"] { --grid-columns:var(--grid-columns-4); } + &[data-columns="5"] { --grid-columns:var(--grid-columns-5); } + &[data-columns="6"] { --grid-columns:var(--grid-columns-6); } + &[data-columns="7"] { --grid-columns:var(--grid-columns-7); } + &[data-columns="8"] { --grid-columns:var(--grid-columns-8); } + &[data-columns="9"] { --grid-columns:var(--grid-columns-9); } + &[data-columns="10"] { --grid-columns:var(--grid-columns-10); } + &[data-columns="11"] { --grid-columns:var(--grid-columns-11); } + &[data-columns="12"] { --grid-columns:var(--grid-columns-12); } + + /* gap - "m" (medium) is default (16px) */ + &[data-gap="none"] { --grid-gap:var(--grid-gap-none); } + &[data-gap="xs"] { --grid-gap:var(--grid-gap-xs); } + &[data-gap="s"] { --grid-gap:var(--grid-gap-s); } + &[data-gap="m"] { --grid-gap:var(--grid-gap-m); } + &[data-gap="l"] { --grid-gap:var(--grid-gap-l); } + &[data-gap="xl"] { --grid-gap:var(--grid-gap-xl); } + &[data-gap="xxl"] { --grid-gap:var(--grid-gap-xxl); } + + &[data-filling="fill"] { --grid-columns:auto-fill; } + &[data-filling="fit"] { --grid-columns:auto-fit; } +} \ No newline at end of file diff --git a/packages/ui/src/8-grids/_index.scss b/packages/ui/src/8-grids/_index.scss index fbf32f888d..ed9c945b51 100644 --- a/packages/ui/src/8-grids/_index.scss +++ b/packages/ui/src/8-grids/_index.scss @@ -1,4 +1,6 @@ +/* common stacks layout */ @forward "stack"; +@forward "grid"; @forward "grid-with-side"; @forward "grid-box"; From 220a4d334cf986dd04dc5d38053d1c4140294e79 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Sat, 2 Mar 2024 17:59:12 +0800 Subject: [PATCH 8/9] Grid - work in progress grid partial --- apps/pink/src/pages/layout/grid.mdx | 48 +++++++++++++++++++++++++++++ packages/ui/src/8-grids/_grid.scss | 36 ++++++---------------- 2 files changed, 57 insertions(+), 27 deletions(-) diff --git a/apps/pink/src/pages/layout/grid.mdx b/apps/pink/src/pages/layout/grid.mdx index a51efc46df..5d1e352bae 100644 --- a/apps/pink/src/pages/layout/grid.mdx +++ b/apps/pink/src/pages/layout/grid.mdx @@ -16,4 +16,52 @@ description: Common grid layout partial
    2
    3
    + + +## Defining spacing +The space injected between components. + +| Property | attribute | Type | Default | +| --------------- | -------------------- | -------------------------------------------------------------- | -------------- | +| `gap` | data-gap | ```none```,```xs```,```s```,```m```,```l```,```xl```,```xxl``` | ```m``` | + + +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    +
    6
    +
    7
    +
    8
    +
    9
    +
    +     + +## Defining (Minimum) Item Size +Default size is minimum of 160px + +| Property | attribute | | +| --------------------- | ------------------------ | ------------------------------------------------------------------------ | +| `grid-item-min-width` | data-grid-item-min-width | ```40```,```80```,```120```,```160```,```200```,```240``` ,```280``` | + + +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    +
    6
    +
    7
    +
    8
    +
    9
    +
    \ No newline at end of file diff --git a/packages/ui/src/8-grids/_grid.scss b/packages/ui/src/8-grids/_grid.scss index 92fe59c51a..d5b8010484 100644 --- a/packages/ui/src/8-grids/_grid.scss +++ b/packages/ui/src/8-grids/_grid.scss @@ -2,18 +2,6 @@ .grid { --grid-columns: auto-fill; /* default */ - --grid-columns-1: 1; - --grid-columns-2: 2; - --grid-columns-3: 3; - --grid-columns-4: 4; - --grid-columns-5: 5; - --grid-columns-6: 6; - --grid-columns-7: 7; - --grid-columns-8: 8; - --grid-columns-9: 9; - --grid-columns-10: 10; - --grid-columns-11: 11; - --grid-columns-12: 12; --grid-gap: var(--grid-gap-m); /* default */ --grid-gap-none: 0; @@ -25,27 +13,13 @@ --grid-gap-xxl: #{pxToRem(72)}; --grid-column-min-width: #{pxToRem(160)}; - --grid-auto-row-min-height: #{pxToRem(160)}; + --grid-auto-row-min-height: 1fr; display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-column-min-width), 1fr) ); grid-auto-rows: var(--grid-auto-row-min-height); gap: var(--grid-gap); - /* columns */ - &[data-columns="1"] { --grid-columns:var(--grid-columns-1); } - &[data-columns="2"] { --grid-columns:var(--grid-columns-2); } - &[data-columns="3"] { --grid-columns:var(--grid-columns-3); } - &[data-columns="4"] { --grid-columns:var(--grid-columns-4); } - &[data-columns="5"] { --grid-columns:var(--grid-columns-5); } - &[data-columns="6"] { --grid-columns:var(--grid-columns-6); } - &[data-columns="7"] { --grid-columns:var(--grid-columns-7); } - &[data-columns="8"] { --grid-columns:var(--grid-columns-8); } - &[data-columns="9"] { --grid-columns:var(--grid-columns-9); } - &[data-columns="10"] { --grid-columns:var(--grid-columns-10); } - &[data-columns="11"] { --grid-columns:var(--grid-columns-11); } - &[data-columns="12"] { --grid-columns:var(--grid-columns-12); } - /* gap - "m" (medium) is default (16px) */ &[data-gap="none"] { --grid-gap:var(--grid-gap-none); } &[data-gap="xs"] { --grid-gap:var(--grid-gap-xs); } @@ -55,6 +29,14 @@ &[data-gap="xl"] { --grid-gap:var(--grid-gap-xl); } &[data-gap="xxl"] { --grid-gap:var(--grid-gap-xxl); } + &[data-grid-item-min-width="40"] { --grid-column-min-width: #{pxToRem(40)}; } + &[data-grid-item-min-width="80"] { --grid-column-min-width: #{pxToRem(80)}; } + &[data-grid-item-min-width="120"] { --grid-column-min-width: #{pxToRem(120)}; } + &[data-grid-item-min-width="160"] { --grid-column-min-width: #{pxToRem(160)}; } + &[data-grid-item-min-width="200"] { --grid-column-min-width: #{pxToRem(200)}; } + &[data-grid-item-min-width="240"] { --grid-column-min-width: #{pxToRem(240)}; } + &[data-grid-item-min-width="280"] { --grid-column-min-width: #{pxToRem(280)}; } + &[data-filling="fill"] { --grid-columns:auto-fill; } &[data-filling="fit"] { --grid-columns:auto-fit; } } \ No newline at end of file From 3b94adcb02b27d3f47bb442f043bc8cbba9b6cfa Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 11 Mar 2024 14:31:28 +0100 Subject: [PATCH 9/9] Grid Stack partial --- apps/pink/src/pages/layout/grid.mdx | 32 ++++++++++++++++++++++++++--- packages/ui/src/8-grids/_grid.scss | 22 ++++++++++---------- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/apps/pink/src/pages/layout/grid.mdx b/apps/pink/src/pages/layout/grid.mdx index 5d1e352bae..0ca32b690b 100644 --- a/apps/pink/src/pages/layout/grid.mdx +++ b/apps/pink/src/pages/layout/grid.mdx @@ -1,6 +1,6 @@ --- title: Grid -description: Common grid layout partial +description: Common grid stack layout partial --- | Class | Type | | @@ -23,12 +23,12 @@ The space injected between components. | Property | attribute | Type | Default | | --------------- | -------------------- | -------------------------------------------------------------- | -------------- | -| `gap` | data-gap | ```none```,```xs```,```s```,```m```,```l```,```xl```,```xxl``` | ```m``` | +| `gap` | data-grid-gap | ```none```,```xs```,```s```,```m```,```l```,```xl```,```xxl``` | ```m``` |
    1
    2
    @@ -64,4 +64,30 @@ Default size is minimum of 160px
    8
    9
    +     + + + +## Columns Behavior +Behavior of columns when first row isn't full. +Default value is "fill" which put the max of columns that can fit in a row. + +The "fit" value will resize the items in a row to achieve full line. + +| Property | attribute | | +| --------------------- | ------------------------ | ------------------------------ | +| `grid-item-behavior` | data-grid-filling | ```fill```,```fit``` | + +Demo of fit value + + +
    +
    1
    +
    2
    +
    3
    +
    \ No newline at end of file diff --git a/packages/ui/src/8-grids/_grid.scss b/packages/ui/src/8-grids/_grid.scss index d5b8010484..24e8880f21 100644 --- a/packages/ui/src/8-grids/_grid.scss +++ b/packages/ui/src/8-grids/_grid.scss @@ -21,22 +21,22 @@ gap: var(--grid-gap); /* gap - "m" (medium) is default (16px) */ - &[data-gap="none"] { --grid-gap:var(--grid-gap-none); } - &[data-gap="xs"] { --grid-gap:var(--grid-gap-xs); } - &[data-gap="s"] { --grid-gap:var(--grid-gap-s); } - &[data-gap="m"] { --grid-gap:var(--grid-gap-m); } - &[data-gap="l"] { --grid-gap:var(--grid-gap-l); } - &[data-gap="xl"] { --grid-gap:var(--grid-gap-xl); } - &[data-gap="xxl"] { --grid-gap:var(--grid-gap-xxl); } + &[data-grid-gap="none"] { --grid-gap:var(--grid-gap-none); } + &[data-grid-gap="xs"] { --grid-gap:var(--grid-gap-xs); } + &[data-grid-gap="s"] { --grid-gap:var(--grid-gap-s); } + &[data-grid-gap="m"] { --grid-gap:var(--grid-gap-m); } + &[data-grid-gap="l"] { --grid-gap:var(--grid-gap-l); } + &[data-grid-gap="xl"] { --grid-gap:var(--grid-gap-xl); } + &[data-grid-gap="xxl"] { --grid-gap:var(--grid-gap-xxl); } - &[data-grid-item-min-width="40"] { --grid-column-min-width: #{pxToRem(40)}; } - &[data-grid-item-min-width="80"] { --grid-column-min-width: #{pxToRem(80)}; } + &[data-grid-item-min-width="40"] { --grid-column-min-width: #{pxToRem(40)}; } + &[data-grid-item-min-width="80"] { --grid-column-min-width: #{pxToRem(80)}; } &[data-grid-item-min-width="120"] { --grid-column-min-width: #{pxToRem(120)}; } &[data-grid-item-min-width="160"] { --grid-column-min-width: #{pxToRem(160)}; } &[data-grid-item-min-width="200"] { --grid-column-min-width: #{pxToRem(200)}; } &[data-grid-item-min-width="240"] { --grid-column-min-width: #{pxToRem(240)}; } &[data-grid-item-min-width="280"] { --grid-column-min-width: #{pxToRem(280)}; } - &[data-filling="fill"] { --grid-columns:auto-fill; } - &[data-filling="fit"] { --grid-columns:auto-fit; } + &[data-grid-filling="fill"] { --grid-columns:auto-fill; } + &[data-grid-filling="fit"] { --grid-columns:auto-fit; } } \ No newline at end of file