diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 4a1ab68e..c65b9d72 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -567,6 +567,7 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; | noGutter | let | No | boolean | false | Set to `true` to remove the gutter | | noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | | noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | | aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | | sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint | | md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint | @@ -1355,6 +1356,7 @@ None. | noGutter | let | No | boolean | false | Set to `true` to remove the gutter | | noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | | noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots @@ -2747,6 +2749,7 @@ None. | noGutter | let | No | boolean | false | Set to `true` to remove the gutter | | noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | | noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 453b3c84..59c3d84b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4661,6 +4661,16 @@ "isFunction": false, "constant": 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": [ @@ -4737,6 +4747,16 @@ "isFunction": false, "constant": 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": [ @@ -4794,6 +4814,16 @@ "constant": 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", "kind": "let", diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx index 0f28f3d0..9375fcda 100644 --- a/docs/src/pages/components/Grid.svx +++ b/docs/src/pages/components/Grid.svx @@ -33,3 +33,7 @@ components: ["Grid", "Row", "Column"] ### Aspect ratio columns + +### Padded columns + + diff --git a/docs/src/pages/framed/Grid/PaddedGrid.svelte b/docs/src/pages/framed/Grid/PaddedGrid.svelte new file mode 100644 index 00000000..5d3f8abd --- /dev/null +++ b/docs/src/pages/framed/Grid/PaddedGrid.svelte @@ -0,0 +1,29 @@ + + + + + Column + Column + Column + Column + + + + + + Column + Column + Column + Column + + + + Column + + Column + Column + Column + + diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte index f10d8bb8..aa1e0c21 100644 --- a/src/Grid/Column.svelte +++ b/src/Grid/Column.svelte @@ -26,6 +26,9 @@ /** Set to `true` to remove the right gutter */ 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 * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} @@ -100,6 +103,7 @@ noGutterLeft && "bx--no-gutter--left", noGutterRight && "bx--no-gutter--right", aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`, + padding && "bx--col-padding", ] .filter(Boolean) .join(" "), diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte index 6b5c17b7..113f91f6 100644 --- a/src/Grid/Grid.svelte +++ b/src/Grid/Grid.svelte @@ -28,6 +28,9 @@ /** Set to `true` to remove the right gutter */ export let noGutterRight = false; + /** Set to `true` to add top and bottom padding to all columns */ + export let padding = false; + $: props = { ...$$restProps, class: [ @@ -39,6 +42,7 @@ noGutter && "bx--no-gutter", noGutterLeft && "bx--no-gutter--left", noGutterRight && "bx--no-gutter--right", + padding && "bx--row-padding", ] .filter(Boolean) .join(" "), diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte index 990e3242..fc9058e9 100644 --- a/src/Grid/Row.svelte +++ b/src/Grid/Row.svelte @@ -25,6 +25,9 @@ /** Set to `true` to remove the right gutter */ export let noGutterRight = false; + /** Set to `true` to add top and bottom padding to all columns */ + export let padding = false; + $: props = { ...$$restProps, class: [ @@ -35,6 +38,7 @@ noGutter && "bx--no-gutter", noGutterLeft && "bx--no-gutter--left", noGutterRight && "bx--no-gutter--right", + padding && "bx--row-padding", ] .filter(Boolean) .join(" "), diff --git a/tests/PaddedGrid.test.svelte b/tests/PaddedGrid.test.svelte new file mode 100644 index 00000000..5b7a7c74 --- /dev/null +++ b/tests/PaddedGrid.test.svelte @@ -0,0 +1,20 @@ + + + + + + Column + + + Column + + + Column + + + Column + + + diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts index c785ba72..7f150dbc 100644 --- a/types/Grid/Column.d.ts +++ b/types/Grid/Column.d.ts @@ -35,6 +35,12 @@ export interface ColumnProps extends svelte.JSX.HTMLAttributes