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.

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

Add grid and column to web components - proposal #18034

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
fix: story styles
  • Loading branch information
lee-chase committed Nov 11, 2024
commit 6bc2af3f06a92ebe5f5beb516d7a7ae50137b747
40 changes: 21 additions & 19 deletions packages/web-components/src/components/grid/grid-story.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

.sb-css-grid-container {
// Gutter modes
cds-grid::part(grid) {
.sb-grid::part(grid) {
background-color: $blue-20;
outline: 1px dashed $blue-40;
// row-gap: $spacing-05;
Expand All @@ -24,52 +24,53 @@
// }

// Narrow
cds-grid[narrow]::part(grid) {
.sb-grid[narrow]::part(grid) {
background-color: #d6f9f9;
outline: 1px dashed $green-40;
}

// Condensed
cds-grid[condensed]::part(grid) {
.sb-grid[condensed]::part(grid) {
background-color: $purple-10;
outline: 1px dashed $purple-40;
}

cds-sub-grid::part(grid) {
.sb-sub-grid::part(grid) {
position: relative;
background: #eef4ff;
/* stylelint-disable-next-line color-named */
outline: 1px solid black;
padding-block: 2rem;
}

cds-sub-grid::part(grid),
cds-sub-grid[mode='wide']::part(grid) {
.sb-sub-grid::part(grid),
.sb-sub-grid[mode='wide']::part(grid) {
--grid-mode-color: #97c1ff;
}

cds-rid[narrow]::part(grid),
cds-sub-grid[mode='narrow']::part(grid) {
.sb-grid[narrow]::part(grid),
.sb-sub-grid[mode='narrow']::part(grid) {
--grid-mode-color: #20d5d2;

background: $green-10;
}

cds-grid[condensed]::part(grid),
cds-sub-grid[mode='condensed']::part(grid) {
.sb-grid[condensed]::part(grid),
.sb-sub-grid[mode='condensed']::part(grid) {
--grid-mode-color: #bb8eff;

background: $purple-10;
}

cds-sub-grid[mode='narrow']::part(grid) {
.sb-sub-grid[mode='narrow']::part(grid) {
background: #d6f9f9;
}

cds-sub-grid[mode='condensed']::part(grid) {
.sb-sub-grid[mode='condensed']::part(grid) {
background: #f7f2ff;
}

cds-sub-grid::part(grid)::before {
.sb-sub-grid::part(grid)::before {
@include type-style('code-01');

position: absolute;
Expand All @@ -83,7 +84,7 @@
}

// // Column
cds-column {
.sb-column {
--border-color: #97c1ff;

background: $white;
Expand All @@ -92,17 +93,18 @@
min-block-size: 80px;
}

cds-sub-grid[mode='narrow']::part(grid) cds-column,
cds-grid[narrow]::part(grid) cds-column {
.sb-sub-grid[mode='narrow']::part(grid) .sb-column,
.sb-grid[narrow]::part(grid) .sb-column {
--border-color: #20d5d2;
}

cds-sub-grid[mode='condensed']::part(grid) cds-column,
cds-grid[condensed]::part(grid) cds-column {
.sb-sub-grid[mode='condensed']::part(grid) .sb-column,
.sb-grid[condensed]::part(grid) .sb-column {
--border-color: #bb8eff;
}
}

.cds--grid-part cds-column cds-grid::part(grid) {
.cds--grid-part .sb-column .sb-grid::part(grid) {
/* stylelint-disable-next-line color-named */
box-shadow: 0 0 5px black;
}
4 changes: 2 additions & 2 deletions packages/web-components/src/components/grid/grid.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ import '@carbon/web-components/es/components/grid/index.js';
### HTML

```html
<cds-grid
<cds-grid class="sb-grid"
><cds-col>1</cds-col><cds-col>1</cds-col><cds-col>1</cds-col>
</cds-grid>
```

## `<grid>` attributes, properties and events
## `<cds-grid>` attributes, properties and events

<ArgTypes of="cds-grid" />
111 changes: 61 additions & 50 deletions packages/web-components/src/components/grid/grid.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,14 @@ export const Default = {
},
render: ({ condensed, narrow, fullWidth }) =>
html`<cds-grid
class="sb-grid"
?condensed=${condensed}
?narrow=${narrow}
?full-width=${fullWidth}>
<cds-column sm="4"></cds-column>
<cds-column sm="4"></cds-column>
<cds-column sm="4"></cds-column>
<cds-column sm="4"></cds-column>
<cds-column class="sb-column" sm="4"></cds-column>
<cds-column class="sb-column" sm="4"></cds-column>
<cds-column class="sb-column" sm="4"></cds-column>
<cds-column class="sb-column" sm="4"></cds-column>
</cds-grid>
<style>
${styles}
Expand All @@ -62,33 +63,33 @@ export const MixedGutterModes = {
},
},
render: () =>
html`<cds-grid>
<cds-column sm="4" md="8">
<cds-sub-grid>
<cds-column sm="" ="4" md="8">
<cds-sub-grid narrow>
<cds-column>
html`<cds-grid class="sb-grid">
<cds-column class="sb-column" sm="4" md="8">
<cds-sub-grid class="sb-sub-grid">
<cds-column class="sb-column" sm="" ="4" md="8">
<cds-sub-grid class="sb-sub-grid" narrow>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column sm="4">
<cds-sub-grid>
<cds-column>Text</cds-column>
<cds-column>Text</cds-column>
<cds-column sm="2">
<cds-sub-grid condensed>
<cds-column>
<cds-column class="sb-column" sm="4">
<cds-sub-grid class="sb-sub-grid">
<cds-column class="sb-column">Text</cds-column>
<cds-column class="sb-column">Text</cds-column>
<cds-column class="sb-column" sm="2">
<cds-sub-grid class="sb-sub-grid" condensed>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
</cds-sub-grid>
Expand All @@ -100,22 +101,22 @@ export const MixedGutterModes = {
</cds-sub-grid>
</cds-column>
</cds-grid>
<cds-grid narrow>
<cds-column sm="4" md="8">
<cds-sub-grid wide>
<cds-column sm="4"></cds-column>
<cds-column sm="4">
<cds-sub-grid narrow>
<cds-column>
<cds-grid class="sb-grid" narrow>
<cds-column class="sb-column" sm="4" md="8">
<cds-sub-grid class="sb-sub-grid" wide>
<cds-column class="sb-column" sm="4"></cds-column>
<cds-column class="sb-column" sm="4">
<cds-sub-grid class="sb-sub-grid" narrow>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
<cds-column>
<cds-column class="sb-column">
<div>Text</div>
</cds-column>
</cds-sub-grid>
Expand All @@ -138,23 +139,32 @@ export const Offset = {
},
render: ({ condensed, narrow, fullWidth }) =>
html`<cds-grid
class="sb-grid"
?condensed=${condensed}
?narrow=${narrow}
?full-width=${fullWidth}>
<cds-column
class="sb-column"
sm="span:1 start:4"
md="span:2 start:7"
lg="span:4 start:13"></cds-column>
<cds-column
class="sb-column"
sm="span:2 start:3"
md="span:4 start:5"
lg="span:8 start:9"></cds-column>
<cds-column
class="sb-column"
sm="span:3 start:2"
md="span:6 start:3"
lg="span:12 start:5"></cds-column>
<cds-column sm="span:4" md="span:8" lg="span:16"></cds-column>
<cds-column
class="sb-column"
sm="span:4"
md="span:8"
lg="span:16"></cds-column>
<cds-column
class="sb-column"
sm="span:25% start:2"
md="span:50% start:3"
lg="span:75% start:5"></cds-column>
Expand All @@ -173,28 +183,28 @@ export const Responsive = {
},
},
render: ({ condensed, narrow, fullWidth }) =>
html`<cds-grid>
<cds-column sm="2" md="4" lg="6">
html`<cds-grid class="sb-grid">
<cds-column class="sb-column" sm="2" md="4" lg="6">
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 6 of 16</p>
</cds-column>
<cds-column sm="2" md="2" lg="3">
<cds-column class="sb-column" sm="2" md="2" lg="3">
<p>Small: Span 2 of 4</p>
<p>Medium: Span 2 of 8</p>
<p>Large: Span 3 of 16</p>
</cds-column>
<cds-column sm="0" md="2" lg="3">
<cds-column class="sb-column" sm="0" md="2" lg="3">
<p>Small: Span 0 of 4</p>
<p>Medium: Span 2 of 8</p>
<p>Large: Span 3 of 16</p>
</cds-column>
<cds-column sm="0" md="0" lg="4">
<cds-column class="sb-column" sm="0" md="0" lg="4">
<p>Small: Span 0 of 4</p>
<p>Medium: Span 0 of 8</p>
<p>Large: Span 4 of 16</p>
</cds-column>
<cds-column sm="25%" md="50%" lg="75%">
<cds-column class="sb-column" sm="25%" md="50%" lg="75%">
<p>Small: Span 25%</p>
<p>Medium: Span 50%</p>
<p>Large: Span 75%</p>
Expand All @@ -215,62 +225,63 @@ export const SubGrid = {
},
render: ({ condensed, narrow, fullWidth }) =>
html`<cds-grid
class="sb-grid"
?condensed=${condensed}
?narrow=${narrow}
?full-width=${fullWidth}>
<cds-column sm="2" md="4" lg="3">
<cds-column class="sb-column" sm="2" md="4" lg="3">
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 3 of 16</p>
</cds-column>
<cds-column sm="2" md="4" lg="10">
<cds-column class="sb-column" sm="2" md="4" lg="10">
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 10 of 16</p>
<cds-sub-grid>
<cds-column sm="1" md="1" lg="2">
<cds-sub-grid class="sb-sub-grid">
<cds-column class="sb-column" sm="1" md="1" lg="2">
<p>sm=1</p>
<p>md=1</p>
<p>lg=2</p>
</cds-column>
<cds-column sm="1" md="1" lg="2">
<cds-column class="sb-column" sm="1" md="1" lg="2">
<p>sm=1</p>
<p>md=1</p>
<p>lg=2</p>
</cds-column>
<cds-column sm="0" md="1" lg="1">
<cds-column class="sb-column" sm="0" md="1" lg="1">
<p>sm=0</p>
<p>md=1</p>
<p>lg=1</p>
</cds-column>
<cds-column sm="0" md="1" lg="1">
<cds-column class="sb-column" sm="0" md="1" lg="1">
<p>sm=0</p>
<p>md=1</p>
<p>lg=1</p>
</cds-column>
<cds-column sm="0" md="0" lg="1">
<cds-column class="sb-column" sm="0" md="0" lg="1">
<p>sm=0</p>
<p>md=0</p>
<p>lg=1</p>
</cds-column>
<cds-column sm="0" md="0" lg="1">
<cds-column class="sb-column" sm="0" md="0" lg="1">
<p>sm=0</p>
<p>md=0</p>
<p>lg=1</p>
</cds-column>
<cds-column sm="0" md="0" lg="1">
<cds-column class="sb-column" sm="0" md="0" lg="1">
<p>sm=0</p>
<p>md=0</p>
<p>lg=1</p>
</cds-column>
<cds-column sm="0" md="0" lg="1">
<cds-column class="sb-column" sm="0" md="0" lg="1">
<p>sm=0</p>
<p>md=0</p>
<p>lg=1</p>
</cds-column>
</cds-sub-grid>
</cds-column>
<cds-column sm="0" md="0" lg="3">
<cds-column class="sb-column" sm="0" md="0" lg="3">
<p>Small: Span 0 of 4</p>
<p>Medium: Span 0 of 8</p>
<p>Large: Span 3 of 16</p>
Expand Down
Loading