From 12dfff70fa2e3cc69303b74e78946f556178f658 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 8 Jan 2023 14:28:58 -0800 Subject: [PATCH] feat(column)!: replace `as` with `tag` prop --- COMPONENT_INDEX.md | 32 ++++++++++++++--------------- docs/src/COMPONENT_API.json | 16 +++++---------- src/Grid/Column.svelte | 38 ++++++++++++++--------------------- types/Grid/Column.svelte.d.ts | 9 ++++----- 4 files changed, 40 insertions(+), 55 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b846ae43..b4abff4c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -612,25 +612,25 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | 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>) | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | -| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | -| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | -| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | -| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | -| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | -| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------- | +| tag | No | let | No | string | "div" | Specify the element tag | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | +| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | +| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | +| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | +| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | +| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | +| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------------ | :------- | -| -- | Yes | {props: { class: string; [key: string]: any; }} | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index eae3574b..3306cf40 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1294,11 +1294,11 @@ "filePath": "src/Grid/Column.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.,
...
)", - "type": "boolean", - "value": "false", + "description": "Specify the element tag", + "type": "string", + "value": "\"div\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -1421,13 +1421,7 @@ } ], "moduleExports": [], - "slots": [ - { - "name": "__default__", - "default": true, - "slot_props": "{props: { class: string; [key: string]: any; }}" - } - ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [], "typedefs": [ { diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte index aa1e0c21..22cb4d3d 100644 --- a/src/Grid/Column.svelte +++ b/src/Grid/Column.svelte @@ -4,18 +4,10 @@ * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint * @restProps {div} - * @slot {{props: { class: string; [key: string]: any; }}} */ - /** - * @slot {{ props?: { class: string; } }} - */ - - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.,
...
) - */ - export let as = false; + /** Specify the element tag */ + export let tag = "div"; /** Set to `true` to remove the gutter */ export let noGutter = false; @@ -98,22 +90,22 @@ class: [ $$restProps.class, columnClass, - !columnClass && "bx--col", - noGutter && "bx--no-gutter", - noGutterLeft && "bx--no-gutter--left", - noGutterRight && "bx--no-gutter--right", - aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`, - padding && "bx--col-padding", + aspectRatio && `bx--aspect-ratio--${aspectRatio}`, ] .filter(Boolean) .join(" "), }; -{#if as} - -{:else} -
- -
-{/if} + + + diff --git a/types/Grid/Column.svelte.d.ts b/types/Grid/Column.svelte.d.ts index 2950e900..74161e60 100644 --- a/types/Grid/Column.svelte.d.ts +++ b/types/Grid/Column.svelte.d.ts @@ -13,11 +13,10 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; export interface ColumnProps extends svelte.JSX.HTMLAttributes { /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.,
...
) - * @default false + * Specify the element tag + * @default "div" */ - as?: boolean; + tag?: string; /** * Set to `true` to remove the gutter @@ -83,5 +82,5 @@ export interface ColumnProps export default class Column extends SvelteComponentTyped< ColumnProps, {}, - { default: { props: { class: string; [key: string]: any } } } + { default: {} } > {}