diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 92cd5ed9..e2fd91f0 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3461,6 +3461,8 @@ None. | :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- | | selected | let | Yes | string | -- | Specify the selected structured list row value | | border | let | No | boolean | false | Set to `true` to use the bordered variant | +| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | +| flush | let | No | boolean | false | Set to `true` to flush the list | | selection | let | No | boolean | false | Set to `true` to use the selection variant | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index dd36608f..117368d0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -9022,6 +9022,26 @@ "constant": false, "reactive": false }, + { + "name": "condensed", + "kind": "let", + "description": "Set to `true` to use the condensed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "flush", + "kind": "let", + "description": "Set to `true` to flush the list", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "selection", "kind": "let", diff --git a/docs/src/pages/components/StructuredList.svx b/docs/src/pages/components/StructuredList.svx index 3c856535..56a8c2df 100644 --- a/docs/src/pages/components/StructuredList.svx +++ b/docs/src/pages/components/StructuredList.svx @@ -52,6 +52,94 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " +### Condensed variant + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + + +### Flush + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + + ### Selectable rows diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte index 919b9fbd..a075205b 100644 --- a/src/StructuredList/StructuredList.svelte +++ b/src/StructuredList/StructuredList.svelte @@ -8,6 +8,12 @@ /** Set to `true` to use the bordered variant */ export let border = false; + /** Set to `true` to use the condensed variant */ + export let condensed = false; + + /** Set to `true` to flush the list */ + export let flush = false; + /** Set to `true` to use the selection variant */ export let selection = false; @@ -33,6 +39,8 @@ class:bx--structured-list="{true}" class:bx--structured-list--border="{border}" class:bx--structured-list--selection="{selection}" + class:bx--structured-list--condensed="{condensed}" + class:bx--structured-list--flush="{flush}" {...$$restProps} on:click on:mouseover diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts index e405578f..e18d31bb 100644 --- a/types/StructuredList/StructuredList.d.ts +++ b/types/StructuredList/StructuredList.d.ts @@ -14,6 +14,18 @@ export interface StructuredListProps */ border?: boolean; + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to flush the list + * @default false + */ + flush?: boolean; + /** * Set to `true` to use the selection variant * @default false