From 075244766704c8002efbbcc43faaf75563b14d23 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Jan 2023 14:19:30 -0800
Subject: [PATCH] feat(grid)!: replace `as` with `tag` prop

---
 COMPONENT_INDEX.md          | 26 ++++++++++-----------
 docs/src/COMPONENT_API.json | 16 ++++---------
 src/Grid/Grid.svelte        | 46 +++++++++++++------------------------
 types/Grid/Grid.svelte.d.ts |  9 ++++----
 4 files changed, 38 insertions(+), 59 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index fc22e2fe..01a034c9 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1542,22 +1542,22 @@ None.
 
 ### Props
 
-| Prop name     | Required | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                     |
-| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as            | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Grid let:props&gt;&lt;header {...props}&gt;...&lt;/header&gt;&lt;/Grid&gt;) |
-| condensed     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant                                                                                                                                                      |
-| narrow        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant                                                                                                                                                         |
-| fullWidth     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant                                                                                                                                                      |
-| noGutter      | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter                                                                                                                                                              |
-| noGutterLeft  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter                                                                                                                                                         |
-| noGutterRight | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter                                                                                                                                                        |
-| padding       | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns                                                                                                                                      |
+| Prop name     | Required | Kind             | Reactive | Type                 | Default value      | Description                                                |
+| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------------- |
+| tag           | No       | <code>let</code> | No       | <code>string</code>  | <code>"div"</code> | Specify the element tag                                    |
+| condensed     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant                 |
+| narrow        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant                    |
+| fullWidth     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant                 |
+| noGutter      | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter                         |
+| noGutterLeft  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter                    |
+| noGutterRight | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter                   |
+| padding       | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
 
 ### Slots
 
-| Slot name | Default | Props                                                           | Fallback |
-| :-------- | :------ | :-------------------------------------------------------------- | :------- |
-| --        | Yes     | <code>{ props: { class: string; [key: string]: any; } } </code> | --       |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
 
 ### Events
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index ce55e9ba..5b7a97fe 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4584,11 +4584,11 @@
       "filePath": "src/Grid/Grid.svelte",
       "props": [
         {
-          "name": "as",
+          "name": "tag",
           "kind": "let",
-          "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)",
-          "type": "boolean",
-          "value": "false",
+          "description": "Specify the element tag",
+          "type": "string",
+          "value": "\"div\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -4681,13 +4681,7 @@
         }
       ],
       "moduleExports": [],
-      "slots": [
-        {
-          "name": "__default__",
-          "default": true,
-          "slot_props": "{ props: { class: string; [key: string]: any; } }"
-        }
-      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index 113f91f6..18b5e6bc 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -1,14 +1,10 @@
 <script>
   /**
    * @restProps {div}
-   * @slot {{ props: { class: string; [key: string]: any; } }}
    */
 
-  /**
-   * 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>)
-   */
-  export let as = false;
+  /** Specify the element tag */
+  export let tag = "div";
 
   /** Set to `true` to use the condensed variant */
   export let condensed = false;
@@ -30,29 +26,19 @@
 
   /** Set to `true` to add top and bottom padding to all columns */
   export let padding = false;
-
-  $: props = {
-    ...$$restProps,
-    class: [
-      $$restProps.class,
-      "bx--grid",
-      condensed && "bx--grid--condensed",
-      narrow && "bx--grid--narrow",
-      fullWidth && "bx--grid--full-width",
-      noGutter && "bx--no-gutter",
-      noGutterLeft && "bx--no-gutter--left",
-      noGutterRight && "bx--no-gutter--right",
-      padding && "bx--row-padding",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  };
 </script>
 
-{#if as}
-  <slot props="{props}" />
-{:else}
-  <div {...props}>
-    <slot />
-  </div>
-{/if}
+<svelte:element
+  this="{tag}"
+  class:bx--grid="{true}"
+  class:bx--grid--condensed="{condensed}"
+  class:bx--grid--narrow="{narrow}"
+  class:bx--grid--full-width="{fullWidth}"
+  class:bx--no-gutter="{noGutter}"
+  class:bx--no-gutter--left="{noGutterLeft}"
+  class:bx--no-gutter--right="{noGutterRight}"
+  class:bx--row-padding="{padding}"
+  {...$$restProps}
+>
+  <slot />
+</svelte:element>
diff --git a/types/Grid/Grid.svelte.d.ts b/types/Grid/Grid.svelte.d.ts
index 106fa6fe..628db7f4 100644
--- a/types/Grid/Grid.svelte.d.ts
+++ b/types/Grid/Grid.svelte.d.ts
@@ -4,11 +4,10 @@ import type { SvelteComponentTyped } from "svelte";
 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>)
-   * @default false
+   * Specify the element tag
+   * @default "div"
    */
-  as?: boolean;
+  tag?: string;
 
   /**
    * Set to `true` to use the condensed variant
@@ -56,5 +55,5 @@ export interface GridProps
 export default class Grid extends SvelteComponentTyped<
   GridProps,
   {},
-  { default: { props: { class: string; [key: string]: any } } }
+  { default: {} }
 > {}