mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(structured-list): add condensed, flush props

Browse source
This commit is contained in:
Eric Y Liu 2021-06-26 08:53:15 -07:00
commit 231416fedf
5 changed files with 130 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -3461,6 +3461,8 @@ None.
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- |
| selected | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected structured list row value |
| border | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| flush | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the list |
| selection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the selection variant |
### Slots

20
docs/src/COMPONENT_API.json
View file

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

88
docs/src/pages/components/StructuredList.svx
View file

@ -52,6 +52,94 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
</StructuredListBody>
</StructuredList>
### Condensed variant
<StructuredList condensed>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Column A</StructuredListCell>
<StructuredListCell head>Column B</StructuredListCell>
<StructuredListCell head>Column C</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
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.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
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.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
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.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
### Flush
<StructuredList flush>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Column A</StructuredListCell>
<StructuredListCell head>Column B</StructuredListCell>
<StructuredListCell head>Column C</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
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.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
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.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
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.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
### Selectable rows
<StructuredList selection selected="row-1-value">

8
src/StructuredList/StructuredList.svelte
View file

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

12
types/StructuredList/StructuredList.d.ts vendored
View file

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