mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add padding prop to Grid component (#420)

Browse source 
* Add padding prop to Grid component

* Fix file name

* Build lib

* Typo

Co-authored-by: Richard O'flynn <richard.oflynn@brighter-software.co.uk>
This commit is contained in:
Richard O'flynn 2020-11-27 12:08:30 +00:00 • committed by GitHub
commit b597a64131
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 116 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -567,6 +567,7 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
| padding | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
| aspectRatio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | -- | Specify the aspect ratio of the column | | aspectRatio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | -- | Specify the aspect ratio of the column |
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint | | sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint |
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint | | md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint |
@ -1355,6 +1356,7 @@ None.
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
| padding | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
### Slots ### Slots
@ -2747,6 +2749,7 @@ None.
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
| padding | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
### Slots ### Slots

30
docs/src/COMPONENT_API.json
View file

@ -4661,6 +4661,16 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "padding",
"kind": "let",
"description": "Set to `true` to add top and bottom padding to all columns",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
} }
], ],
"slots": [ "slots": [
@ -4737,6 +4747,16 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "padding",
"kind": "let",
"description": "Set to `true` to add top and bottom padding to all columns",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
} }
], ],
"slots": [ "slots": [
@ -4794,6 +4814,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "padding",
"kind": "let",
"description": "Set to `true` to add top and bottom padding to the column",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "aspectRatio", "name": "aspectRatio",
"kind": "let", "kind": "let",

4
docs/src/pages/components/Grid.svx
View file

@ -33,3 +33,7 @@ components: ["Grid", "Row", "Column"]
### Aspect ratio columns ### Aspect ratio columns
<FileSource src="/framed/Grid/AspectRatioColumns" /> <FileSource src="/framed/Grid/AspectRatioColumns" />
### Padded columns
<FileSource src="/framed/Grid/PaddedGrid" />

29
docs/src/pages/framed/Grid/PaddedGrid.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid narrow padding>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>
<Grid narrow>
<Row padding>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
<Row>
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
Column
</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

4
src/Grid/Column.svelte
View file

@ -26,6 +26,9 @@
/** Set to `true` to remove the right gutter */ /** Set to `true` to remove the right gutter */
export let noGutterRight = false; export let noGutterRight = false;
/** Set to `true` to add top and bottom padding to the column */
export let padding = false;
/** /**
* Specify the aspect ratio of the column * Specify the aspect ratio of the column
* @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"}
@ -100,6 +103,7 @@
noGutterLeft && "bx--no-gutter--left", noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right", noGutterRight && "bx--no-gutter--right",
aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`, aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
padding && "bx--col-padding",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),

4
src/Grid/Grid.svelte
View file

@ -28,6 +28,9 @@
/** Set to `true` to remove the right gutter */ /** Set to `true` to remove the right gutter */
export let noGutterRight = false; export let noGutterRight = false;
/** Set to `true` to add top and bottom padding to all columns */
export let padding = false;
$: props = { $: props = {
...$$restProps, ...$$restProps,
class: [ class: [
@ -39,6 +42,7 @@
noGutter && "bx--no-gutter", noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left", noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right", noGutterRight && "bx--no-gutter--right",
padding && "bx--row-padding",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),

4
src/Grid/Row.svelte
View file

@ -25,6 +25,9 @@
/** Set to `true` to remove the right gutter */ /** Set to `true` to remove the right gutter */
export let noGutterRight = false; export let noGutterRight = false;
/** Set to `true` to add top and bottom padding to all columns */
export let padding = false;
$: props = { $: props = {
...$$restProps, ...$$restProps,
class: [ class: [
@ -35,6 +38,7 @@
noGutter && "bx--no-gutter", noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left", noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right", noGutterRight && "bx--no-gutter--right",
padding && "bx--row-padding",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),

20
tests/PaddedGrid.test.svelte Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid padding>
<Row padding>
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
Column
</Column>
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
Column
</Column>
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
Column
</Column>
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
Column
</Column>
</Row>
</Grid>

6
types/Grid/Column.d.ts vendored
View file

@ -35,6 +35,12 @@ export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
*/ */
noGutterRight?: boolean; noGutterRight?: boolean;
/**
* Set to `true` to add top and bottom padding to the column
* @default false
*/
padding?: boolean;
/** /**
* Specify the aspect ratio of the column * Specify the aspect ratio of the column
*/ */

6
types/Grid/Grid.d.ts vendored
View file

@ -43,6 +43,12 @@ export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameM
* @default false * @default false
*/ */
noGutterRight?: boolean; noGutterRight?: boolean;
/**
* Set to `true` to add top and bottom padding to all columns
* @default false
*/
padding?: boolean;
} }
export default class Grid { export default class Grid {

6
types/Grid/Row.d.ts vendored
View file

@ -37,6 +37,12 @@ export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMa
* @default false * @default false
*/ */
noGutterRight?: boolean; noGutterRight?: boolean;
/**
* Set to `true` to add top and bottom padding to all columns
* @default false
*/
padding?: boolean;
} }
export default class Row { export default class Row {