mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11: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
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.
## `Loading`
@ -2564,11 +2559,11 @@ None.
### Props
| 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 |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------------- |
| 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 expressive type styles |
### Slots
@ -2578,12 +2573,7 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.
## `OutboundLink`
@ -4748,10 +4738,10 @@ None.
### Props
| 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 |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| 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 |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use expressive type styles |
### Slots
@ -4761,9 +4751,4 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.

49
docs/src/COMPONENT_API.json
View file

@ -6306,12 +6306,7 @@
"props": [],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"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" }
],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
},
@ -7912,18 +7907,6 @@
"moduleName": "OrderedList",
"filePath": "src/OrderedList/OrderedList.svelte",
"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",
"kind": "let",
@ -7936,10 +7919,22 @@
"constant": 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",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"description": "Set to `true` to use expressive type styles",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -7951,12 +7946,7 @@
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"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" }
],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "ol" }
},
@ -14770,7 +14760,7 @@
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"description": "Set to `true` to use expressive type styles",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -14782,12 +14772,7 @@
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"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" }
],
"events": [],
"typedefs": [],
"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 -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
class:bx--list__item="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<li class:bx--list__item="{true}" {...$$restProps}>
<slot />
</li>

14
src/OrderedList/OrderedList.svelte
View file

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

10
src/UnorderedList/UnorderedList.svelte
View file

@ -1,22 +1,18 @@
<script>
// @ts-check
/** Set to `true` to use the nested variant */
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;
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul
class:bx--list--unordered="{true}"
class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<slot />
</ul>

63
tests/OrderedList.test.svelte
View file

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

45
tests/UnorderedList.test.svelte
View file

@ -1,39 +1,16 @@
<script lang="ts">
import { UnorderedList, ListItem, Link } from "../types";
import { UnorderedList, ListItem } from "../types";
</script>
<UnorderedList>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
<UnorderedList expressive class="">
<ListItem>Unordered list item</ListItem>
</UnorderedList>
<UnorderedList>
<ListItem>
<Link href="#">Unordered list item</Link>
</ListItem>
<ListItem>
<Link href="#">Unordered list item</Link>
</ListItem>
<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 nested>
<ListItem>Unordered list level 2</ListItem>
<ListItem>
Unordered list level 3
<UnorderedList nested>
<ListItem>Unordered list level 3</ListItem>
</UnorderedList>
</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<
ListItemProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
Record<string, any>,
{ 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"];
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
* @default false
@ -17,7 +11,13 @@ export interface OrderedListProps extends RestProps {
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
*/
expressive?: boolean;
@ -27,11 +27,6 @@ export interface OrderedListProps extends RestProps {
export default class OrderedList extends SvelteComponentTyped<
OrderedListProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
Record<string, any>,
{ default: {} }
> {}

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

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