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

feat: support expressive styles for Button, UnorderedList, OrderedList

Browse source
This commit is contained in:
Eric Y Liu 2021-06-26 06:30:12 -07:00
commit 92ce3b405e
11 changed files with 114 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
COMPONENT_INDEX.md
View file

@ -351,6 +351,7 @@ None.
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
@ -2540,10 +2541,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| native | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| native | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots
@ -4563,9 +4565,10 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots

30
docs/src/COMPONENT_API.json
View file

@ -368,6 +368,16 @@
"constant": false,
"reactive": false
},
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "isSelected",
"kind": "let",
@ -6347,6 +6357,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -11490,6 +11510,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

18
docs/src/pages/components/Button.svx
View file

@ -106,6 +106,24 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button disabled>Disabled button</Button>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
Note: the expressive styles only apply to the default and `"xl"` size buttons.
<Button expressive size="xl">Primary</Button>
<Button expressive size="xl" kind="secondary">Secondary</Button>
<Button expressive size="xl" kind="tertiary">Tertiary</Button>
<Button expressive size="xl" kind="ghost">Ghost</Button>
<Button expressive size="xl" kind="danger">Danger</Button>
<br /><br />
<Button expressive>Primary</Button>
<Button expressive kind="secondary">Secondary</Button>
<Button expressive kind="tertiary">Tertiary</Button>
<Button expressive kind="ghost">Ghost</Button>
<Button expressive kind="danger">Danger</Button>
### Skeleton
<Button skeleton />

10
docs/src/pages/components/OrderedList.svx
View file

@ -69,4 +69,14 @@ Use the `native` attribute to enable default browser list styles. This is useful
</ListItem>
<ListItem>Ordered list level 1</ListItem>
<ListItem>Ordered list level 1</ListItem>
</OrderedList>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<OrderedList expressive>
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
</OrderedList>

10
docs/src/pages/components/UnorderedList.svx
View file

@ -47,4 +47,14 @@ components: ["UnorderedList", "ListItem"]
</ListItem>
<ListItem>Unordered list level 1</ListItem>
<ListItem>Unordered list level 1</ListItem>
</UnorderedList>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<UnorderedList expressive>
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
</UnorderedList>

10
src/Button/Button.svelte
View file

@ -17,6 +17,9 @@
*/
export let size = "default";
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
/**
* Set to `true` to enable the selected state for an icon-only, ghost button
*/
@ -98,6 +101,13 @@
...$$restProps,
class: [
"bx--btn",
expressive && "bx--btn--expressive",
((size === "small" && !expressive) ||
(size === "sm" && !expressive) ||
(size === "small" && !expressive)) &&
"bx--btn--sm",
(size === "field" && !expressive) ||
(size === "md" && !expressive && "bx--btn--md"),
size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm",
size === "xl" && "bx--btn--xl",

4
src/OrderedList/OrderedList.svelte
View file

@ -4,12 +4,16 @@
/** Set to `true` to use native list styles */
export let native = false;
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
</script>
<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

4
src/UnorderedList/UnorderedList.svelte
View file

@ -1,11 +1,15 @@
<script>
/** Set to `true` to use the nested variant */
export let nested = false;
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
</script>
<ul
class:bx--list--unordered="{true}"
class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}"
{...$$restProps}
on:click
on:mouseover

6
types/Button/Button.d.ts vendored
View file

@ -26,6 +26,12 @@ export interface ButtonProps
*/
size?: "default" | "field" | "small" | "xl";
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
/**
* Set to `true` to enable the selected state for an icon-only, ghost button
* @default false

6
types/OrderedList/OrderedList.d.ts vendored
View file

@ -14,6 +14,12 @@ export interface OrderedListProps
* @default false
*/
native?: boolean;
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
}
export default class OrderedList extends SvelteComponentTyped<

6
types/UnorderedList/UnorderedList.d.ts vendored
View file

@ -8,6 +8,12 @@ export interface UnorderedListProps
* @default false
*/
nested?: boolean;
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
}
export default class UnorderedList extends SvelteComponentTyped<