Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stack partial #148

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Stack partial #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ea376a0
Stack partial
elad2412 Feb 15, 2024
57123e0
Stack partial
elad2412 Feb 15, 2024
7a63170
Remove unwanted utility class
elad2412 Feb 16, 2024
55544fc
Stack partial
elad2412 Feb 16, 2024
56b51af
Stack partial
elad2412 Feb 16, 2024
d7473b1
Stack
elad2412 Feb 28, 2024
c60ce07
Grid
elad2412 Feb 29, 2024
220a4d3
Grid
elad2412 Mar 2, 2024
3b94adc
Grid Stack partial
elad2412 Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/kitchensink/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1339,7 +1339,7 @@ <h4 class="upload-box-title">
</button>
</li>
<li class="upload-box-item">
<div class="upload-image is-finished u-margin-inline-end-16">
<div class="upload-image is-finished">
<div
class="progress"
style="--progress-value: 100"
Expand Down Expand Up @@ -1412,7 +1412,7 @@ <h4 class="upload-box-title">
</button>
</li>
<li class="upload-box-item">
<div class="upload-image is-finished u-margin-inline-end-16">
<div class="upload-image is-finished">
<div
class="progress"
style="--progress-value: 100"
Expand Down
2 changes: 1 addition & 1 deletion apps/pink/src/pages/components/upload-box.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ Upload Boxes consist of six components:
</button>
</li>
<li class="upload-box-item">
<div class="upload-image is-finished u-margin-inline-end-16">
<div class="upload-image is-finished">
<div
class="progress"
style="--progress-value:100"
Expand Down
93 changes: 93 additions & 0 deletions apps/pink/src/pages/layout/grid.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
title: Grid
description: Common grid stack layout partial
---

| Class | Type | |
| ----------- | --------------- | -------------------------------------- |
| `grid` | Grid Container | A class representing a grid container |

<Preview noFlex>
<div
class="grid"
data-columns="12"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</Preview>

## Defining spacing
The space injected between components.

| Property | attribute | Type | Default |
| --------------- | -------------------- | -------------------------------------------------------------- | -------------- |
| `gap` | data-grid-gap | ```none```,```xs```,```s```,```m```,```l```,```xl```,```xxl``` | ```m``` |

<Preview noFlex>
<div
class="grid"
data-grid-gap="s"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</Preview>

## 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``` |

<Preview noFlex>
<div
class="grid"
data-grid-item-min-width="80"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</Preview>



## 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

<Preview noFlex>
<div
class="grid"
data-grid-item-min-width="160"
data-grid-filling="fit"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</Preview>
218 changes: 218 additions & 0 deletions apps/pink/src/pages/layout/stack.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
---
title: Stack
description: Common stack layout partial
---

| Class | Type | |
| ----------- | --------------- | -------------------------------------- |
| `stack` | Stack Container | A class representing a stack container |

<Preview noFlex>
<div
class="stack"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</Preview>


## Direction
The direction of the stack.

| Property | attribute | Type | Default |
| --------------- | -------------------- | ------------------------------- | -------------- |
| `direction` | data-direction | ```vertical```,```horizontal``` | ```vertical``` |

<Preview noFlex>
<div
class="stack"
data-direction="horizontal"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</Preview>

## Defining spacing
The space injected between components.

| Property | attribute | Type | Default |
| --------------- | -------------------- | -------------------------------------------------------------- | -------------- |
| `gap` | data-gap | ```none```,```xs```,```s```,```m```,```l```,```xl```,```xxl``` | ```m``` |

<Preview noFlex>
<div
class="stack"
data-direction="horizontal"
data-gap="s"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</Preview>


## 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)``` |

<Preview noFlex>
<div
class="stack"
data-direction="horizontal"
style="--stack-gap:1.5rem"
>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</Preview>


## 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``` |

<Preview noFlex>
<div
class="stack"
data-direction="horizontal"
data-align-items="center"
>
<div class="box">content</div>
<div class="box">two line content.<br />All boxes aligned center</div>
<div class="box">content</div>
</div>
</Preview>

## 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``` |

<Preview noFlex>
<div
class="stack"
data-direction="horizontal"
data-justify-content="center"
>
<div class="box">content</div>
<div class="box">Main axis aligned center</div>
<div class="box">content</div>
</div>
</Preview>

## 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 | ```false```,```true``` | ```false``` |

<Preview noFlex>
<div
class="stack"
data-direction="horizontal"
data-wrap="true"
>
<div class="box">content</div>
<div class="box">long content</div>
<div class="box">content</div>
<div class="box">long content</div>
<div class="box">content</div>
<div class="box">long content</div>
<div class="box">content</div>
<div class="box">long content</div>
<div class="box">content</div>
</div>
</Preview>

# Usage Demos

## Grid Header examples (replacement for older partial)
<Preview noFlex>
<header
class="stack"
data-direction="horizontal"
data-align-items="center"
data-justify-content="space-between"
data-wrap="true"
>

<h2 class="heading-level-5 u-trim-1">Databases</h2>

<div
class="stack"
data-direction="horizontal"
data-wrap="true"
>

<button class="button is-secondary" type="button">
<span class="icon-view-boards u-opacity-50" aria-hidden="true" aria-label="columns"></span>
<span class="text is-only-desktop">Columns</span>
<span class="inline-tag">4</span>
</button>

<div class="toggle-button">
<ul class="toggle-button-list">
<li class="toggle-button-item">
<button class="toggle-button-element is-selected" aria-label="List View" type="button">
<span class="icon-view-list" aria-hidden="true"></span>
</button>
</li>
<li class="toggle-button-item">
<button class="toggle-button-element" aria-label="Grid View" type="button">
<span class="icon-view-grid" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
<button class="button is-full-width-in-stack-mobile" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Create database</span>
</button>
</div>

</header>
</Preview>

<Preview noFlex>
<div class="stack">
<h2 class="heading-level-5 u-trim-1">Messages</h2>
<div class="stack" data-direction="horizontal" data-justify-content="space-between" data-wrap="true">
<div class="input-text-wrapper is-with-end-button u-flex-basis-400">
<input placeholder="Search by message ID, description, type, or status" type="search" class="input-text" />
<span class="icon-search" aria-hidden="true"></span>
</div>
<div class="stack" data-direction="horizontal" data-wrap="true">
<div class="stack" data-direction="horizontal">
<button class="button is-secondary" type="button">
<span class="icon-filter u-opacity-50" aria-hidden="true"></span>
<span class="">Filters</span>
</button>
<button class="button is-secondary" type="button">
<span class="icon-view-boards u-opacity-50" aria-hidden="true" aria-label="columns"></span>
<span class="text">Columns</span>
<span class="inline-tag">6</span>
</button>
</div>
<button class="button is-full-width-in-stack-mobile" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Create message</span>
</button>
</div>
</div>
</div>
</Preview>
7 changes: 4 additions & 3 deletions packages/ui/src/6-elements/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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})) {
Expand Down
Loading