Add padding prop to Grid component

docs/src/pages/components/Grid.svx

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

docs/src/pages/framed/Grid/PaddedGrid..svelte

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

src/Grid/Column.svelte

@@ -32,6 +32,9 @@
    */
   export let aspectRatio = undefined;
 
+  /** Set to `true` to add top and bottom padding this column */
+  export let padding = false;
+
   /**
    * Set the small breakpoint
    * @type {ColumnBreakpoint}
@@ -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(" "),

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(" "),

src/Grid/Row.svelte

@@ -25,6 +25,8 @@
   /** 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 +37,7 @@
       noGutter && "bx--no-gutter",
       noGutterLeft && "bx--no-gutter--left",
       noGutterRight && "bx--no-gutter--right",
+      padding && "bx--row-padding",
     ]
       .filter(Boolean)
       .join(" "),

tests/PaddedGrid.test.svelte

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

types/Grid/Column.d.ts

@@ -9,7 +9,8 @@ export interface ColumnSizeDescriptor {
 
 export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 
-export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface ColumnProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
@@ -40,6 +41,12 @@ export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
    */
   aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
 
+  /**
+   * Set to `true` to add top and bottom padding
+   * @default false
+   */
+  padding?: boolean;
+
   /**
    * Set the small breakpoint
    */

types/Grid/Grid.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
 
-export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface GridProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
@@ -43,6 +44,12 @@ export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameM
    * @default false
    */
   noGutterRight?: boolean;
+
+  /**
+   * Set to `true` to add top and bottom padding to all columns
+   * @default false
+   */
+  padding?: boolean;
 }
 
 export default class Grid {

types/Grid/Row.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
 
-export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface RowProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
@@ -37,6 +38,12 @@ export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMa
    * @default false
    */
   noGutterRight?: boolean;
+
+  /**
+   * Set to `true` to add top and bottom padding to all columns
+   * @default false
+   */
+  padding?: boolean;
 }
 
 export default class Row {