Add padding prop to Grid component (carbon-design-system#420)

* Add padding prop to Grid component * Fix file name * Build lib * Typo Co-authored-by: Richard O'flynn <[email protected]>
Mattchine · Nov 27, 2020 · b597a64 · b597a64
1 parent f4c940d
commit b597a64
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 0 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -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                                                                                                                                                                    |
 | 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                                                                                                                                                              |
+| 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                                                                                                                                                                |
 | sm            | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | --                 | Set the small 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                                                                                                                                                              |
 | 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                                                                                                                                                        |
+| padding       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns                                                                                                                                      |
 
 ### Slots
 
@@ -2747,6 +2749,7 @@ None.
 | 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                                                                                                                                                         |
 | 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
 

diff --git 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
@@ -33,3 +33,7 @@ components: ["Grid", "Row", "Column"]
 ### Aspect ratio columns
 
 <FileSource src="/framed/Grid/AspectRatioColumns" />
+
+### Padded columns
+
+<FileSource src="/framed/Grid/PaddedGrid" />
diff --git a/docs/src/pages/framed/Grid/PaddedGrid.svelte b/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>
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts
@@ -35,6 +35,12 @@ export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
    */
   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
    */

diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts
@@ -43,6 +43,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 {

diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts
@@ -37,6 +37,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 {