mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(list)!: integrate OrderedList, UnorderedList with v11 (#1959)

Browse source
This commit is contained in:
Eric Liu 2024-04-21 13:15:44 -07:00 • committed by GitHub
commit 42e50261a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 71 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

39
COMPONENT_INDEX.md
View file

@ -2171,12 +2171,7 @@ None.
### Events ### Events
| Event name | Type | Detail | None.
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Loading` ## `Loading`
@ -2564,11 +2559,11 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- | | :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------------- |
| nested | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant | | native | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
| native | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles | | nested | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use expressive type styles |
### Slots ### Slots
@ -2578,12 +2573,7 @@ None.
### Events ### Events
| Event name | Type | Detail | None.
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `OutboundLink` ## `OutboundLink`
@ -4748,10 +4738,10 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- | | :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------------- |
| nested | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant | | nested | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use expressive type styles |
### Slots ### Slots
@ -4761,9 +4751,4 @@ None.
### Events ### Events
| Event name | Type | Detail | None.
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |

49
docs/src/COMPONENT_API.json
View file

@ -6306,12 +6306,7 @@
"props": [], "props": [],
"moduleExports": [], "moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [],
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" }
],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "li" } "rest_props": { "type": "Element", "name": "li" }
}, },
@ -7912,18 +7907,6 @@
"moduleName": "OrderedList", "moduleName": "OrderedList",
"filePath": "src/OrderedList/OrderedList.svelte", "filePath": "src/OrderedList/OrderedList.svelte",
"props": [ "props": [
{
"name": "nested",
"kind": "let",
"description": "Set to `true` to use the nested variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "native", "name": "native",
"kind": "let", "kind": "let",
@ -7936,10 +7919,22 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "nested",
"kind": "let",
"description": "Set to `true` to use the nested variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "expressive", "name": "expressive",
"kind": "let", "kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting", "description": "Set to `true` to use expressive type styles",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -7951,12 +7946,7 @@
], ],
"moduleExports": [], "moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [],
{ "type": "forwarded", "name": "click", "element": "ol" },
{ "type": "forwarded", "name": "mouseover", "element": "ol" },
{ "type": "forwarded", "name": "mouseenter", "element": "ol" },
{ "type": "forwarded", "name": "mouseleave", "element": "ol" }
],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "ol" } "rest_props": { "type": "Element", "name": "ol" }
}, },
@ -14770,7 +14760,7 @@
{ {
"name": "expressive", "name": "expressive",
"kind": "let", "kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting", "description": "Set to `true` to use expressive type styles",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -14782,12 +14772,7 @@
], ],
"moduleExports": [], "moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [],
{ "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "mouseover", "element": "ul" },
{ "type": "forwarded", "name": "mouseenter", "element": "ul" },
{ "type": "forwarded", "name": "mouseleave", "element": "ul" }
],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "ul" } "rest_props": { "type": "Element", "name": "ul" }
} }

11
src/ListItem/ListItem.svelte
View file

@ -1,12 +1,3 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <li class:bx--list__item="{true}" {...$$restProps}>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
class:bx--list__item="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<slot /> <slot />
</li> </li>

14
src/OrderedList/OrderedList.svelte
View file

@ -1,26 +1,22 @@
<script> <script>
/** Set to `true` to use the nested variant */ // @ts-check
export let nested = false;
/** Set to `true` to use native list styles */ /** Set to `true` to use native list styles */
export let native = false; export let native = false;
/** Set to `true` to use Carbon's expressive typesetting */ /** Set to `true` to use the nested variant */
export let nested = false;
/** Set to `true` to use expressive type styles */
export let expressive = false; export let expressive = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ol <ol
class:bx--list--ordered="{!native}" class:bx--list--ordered="{!native}"
class:bx--list--ordered--native="{native}" class:bx--list--ordered--native="{native}"
class:bx--list--nested="{nested}" class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}" class:bx--list--expressive="{expressive}"
{...$$restProps} {...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
> >
<slot /> <slot />
</ol> </ol>

10
src/UnorderedList/UnorderedList.svelte
View file

@ -1,22 +1,18 @@
<script> <script>
// @ts-check
/** Set to `true` to use the nested variant */ /** Set to `true` to use the nested variant */
export let nested = false; export let nested = false;
/** Set to `true` to use Carbon's expressive typesetting */ /** Set to `true` to use expressive type styles */
export let expressive = false; export let expressive = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul <ul
class:bx--list--unordered="{true}" class:bx--list--unordered="{true}"
class:bx--list--nested="{nested}" class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}" class:bx--list--expressive="{expressive}"
{...$$restProps} {...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
> >
<slot /> <slot />
</ul> </ul>

63
tests/OrderedList.test.svelte
View file

@ -1,57 +1,16 @@
<script lang="ts"> <script lang="ts">
import { OrderedList, ListItem, Link } from "../types"; import { OrderedList, ListItem } from "../types";
</script> </script>
<OrderedList> <OrderedList native expressive class="">
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem> <ListItem>Ordered list item</ListItem>
</OrderedList> <OrderedList nested>
<ListItem>Ordered list level 2</ListItem>
<OrderedList> <ListItem>
<ListItem> Ordered list level 3
<Link href="#">Ordered list item</Link> <OrderedList nested>
</ListItem> <ListItem>Ordered list level 3</ListItem>
<ListItem> </OrderedList>
<Link href="#">Ordered list item</Link> </ListItem>
</ListItem> </OrderedList>
<ListItem>
<Link href="#">Ordered list item</Link>
</ListItem>
</OrderedList>
<OrderedList>
<ListItem>
Ordered list level 1
<OrderedList nested>
<ListItem>Ordered list level 2</ListItem>
<ListItem>
Ordered list level 3
<OrderedList nested>
<ListItem>Ordered list level 3</ListItem>
<ListItem>Ordered list level 3</ListItem>
</OrderedList>
</ListItem>
</OrderedList>
</ListItem>
<ListItem>Ordered list level 1</ListItem>
<ListItem>Ordered list level 1</ListItem>
</OrderedList>
<OrderedList native>
<ListItem>
Ordered list level 1
<OrderedList nested>
<ListItem>Ordered list level 2</ListItem>
<ListItem>
Ordered list level 3
<OrderedList nested>
<ListItem>Ordered list level 3</ListItem>
<ListItem>Ordered list level 3</ListItem>
</OrderedList>
</ListItem>
</OrderedList>
</ListItem>
<ListItem>Ordered list level 1</ListItem>
<ListItem>Ordered list level 1</ListItem>
</OrderedList> </OrderedList>

45
tests/UnorderedList.test.svelte
View file

@ -1,39 +1,16 @@
<script lang="ts"> <script lang="ts">
import { UnorderedList, ListItem, Link } from "../types"; import { UnorderedList, ListItem } from "../types";
</script> </script>
<UnorderedList> <UnorderedList expressive class="">
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem> <ListItem>Unordered list item</ListItem>
</UnorderedList> <UnorderedList nested>
<ListItem>Unordered list level 2</ListItem>
<UnorderedList> <ListItem>
<ListItem> Unordered list level 3
<Link href="#">Unordered list item</Link> <UnorderedList nested>
</ListItem> <ListItem>Unordered list level 3</ListItem>
<ListItem> </UnorderedList>
<Link href="#">Unordered list item</Link> </ListItem>
</ListItem> </UnorderedList>
<ListItem>
<Link href="#">Unordered list item</Link>
</ListItem>
</UnorderedList>
<UnorderedList>
<ListItem>
Unordered list level 1
<UnorderedList nested>
<ListItem>Unordered list level 2</ListItem>
<ListItem>
Unordered list level 3
<UnorderedList nested>
<ListItem>Unordered list level 3</ListItem>
<ListItem>Unordered list level 3</ListItem>
</UnorderedList>
</ListItem>
</UnorderedList>
</ListItem>
<ListItem>Unordered list level 1</ListItem>
<ListItem>Unordered list level 1</ListItem>
</UnorderedList> </UnorderedList>

7
types/ListItem/ListItem.svelte.d.ts vendored
View file

@ -9,11 +9,6 @@ export interface ListItemProps extends RestProps {
export default class ListItem extends SvelteComponentTyped< export default class ListItem extends SvelteComponentTyped<
ListItemProps, ListItemProps,
{ Record<string, any>,
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} } { default: {} }
> {} > {}

21
types/OrderedList/OrderedList.svelte.d.ts vendored
View file

@ -4,12 +4,6 @@ import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["ol"]; type RestProps = SvelteHTMLElements["ol"];
export interface OrderedListProps extends RestProps { export interface OrderedListProps extends RestProps {
/**
* Set to `true` to use the nested variant
* @default false
*/
nested?: boolean;
/** /**
* Set to `true` to use native list styles * Set to `true` to use native list styles
* @default false * @default false
@ -17,7 +11,13 @@ export interface OrderedListProps extends RestProps {
native?: boolean; native?: boolean;
/** /**
* Set to `true` to use Carbon's expressive typesetting * Set to `true` to use the nested variant
* @default false
*/
nested?: boolean;
/**
* Set to `true` to use expressive type styles
* @default false * @default false
*/ */
expressive?: boolean; expressive?: boolean;
@ -27,11 +27,6 @@ export interface OrderedListProps extends RestProps {
export default class OrderedList extends SvelteComponentTyped< export default class OrderedList extends SvelteComponentTyped<
OrderedListProps, OrderedListProps,
{ Record<string, any>,
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} } { default: {} }
> {} > {}

9
types/UnorderedList/UnorderedList.svelte.d.ts vendored
View file

@ -11,7 +11,7 @@ export interface UnorderedListProps extends RestProps {
nested?: boolean; nested?: boolean;
/** /**
* Set to `true` to use Carbon's expressive typesetting * Set to `true` to use expressive type styles
* @default false * @default false
*/ */
expressive?: boolean; expressive?: boolean;
@ -21,11 +21,6 @@ export interface UnorderedListProps extends RestProps {
export default class UnorderedList extends SvelteComponentTyped< export default class UnorderedList extends SvelteComponentTyped<
UnorderedListProps, UnorderedListProps,
{ Record<string, any>,
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} } { default: {} }
> {} > {}