mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Merge pull request #376 from IBM/0.23-size-variants
Add size variants for Link, TimePicker, OverflowMenu
This commit is contained in:
Eric Liu
GitHub
commit
5abd542bb8
11 changed files with 210 additions and 81 deletions
|
|
@ -2243,6 +2243,7 @@ import { Link } from "carbon-components-svelte";
|
|||
|
||||
| Prop name | Type | Default value | Description |
|
||||
| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ |
|
||||
| size | <code>"sm" | "lg"</code> | -- | Specify the size of the link. |
|
||||
| href | <code>string</code> | -- | Specify the href value. |
|
||||
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. |
|
||||
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the checkbox. |
|
||||
|
|
@ -3014,6 +3015,7 @@ import { OverflowMenu } from "carbon-components-svelte";
|
|||
|
||||
| Prop name | Type | Default value | Description |
|
||||
| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- |
|
||||
| size | <code>"sm" | "xl"</code> | -- | Specify the size of the overflow menu. |
|
||||
| direction | <code>"top" | "bottom"</code> | `"bottom"` | Specify the direction of the overflow menu relative to the button. |
|
||||
| open | <code>boolean</code> | `false` | Set to `true` to open the menu. |
|
||||
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
|
||||
|
|
@ -4986,6 +4988,7 @@ import { TimePicker } from "carbon-components-svelte";
|
|||
|
||||
| Prop name | Type | Default value | Description |
|
||||
| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
|
||||
| size | <code>"sm" | "xl"</code> | -- | Specify the size of the input. |
|
||||
| value | <code>string</code> | `""` | Specify the input value. |
|
||||
| type | <code>string</code> | `"text"` | Specify the input type. |
|
||||
| placeholder | <code>string</code> | `"hh=mm"` | Specify the input placeholder text. |
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
"@carbon/themes": "^10.20.0",
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"carbon-components": "^10.22.0",
|
||||
"carbon-components": "^10.23.0",
|
||||
"carbon-components-svelte": "../",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"mdsvex": "^0.8.8",
|
||||
|
|
|
|||
|
|
@ -6602,6 +6602,14 @@
|
|||
"Link": {
|
||||
"moduleName": "Link",
|
||||
"props": [
|
||||
[
|
||||
"size",
|
||||
{
|
||||
"kind": "let",
|
||||
"type": "\"sm\" | \"lg\"",
|
||||
"description": "Specify the size of the link"
|
||||
}
|
||||
],
|
||||
[
|
||||
"href",
|
||||
{
|
||||
|
|
@ -6662,8 +6670,8 @@
|
|||
[
|
||||
"click",
|
||||
{
|
||||
"start": 1308,
|
||||
"end": 1316,
|
||||
"start": 1500,
|
||||
"end": 1508,
|
||||
"type": "EventHandler",
|
||||
"name": "click",
|
||||
"modifiers": [],
|
||||
|
|
@ -6673,8 +6681,8 @@
|
|||
[
|
||||
"mouseover",
|
||||
{
|
||||
"start": 1321,
|
||||
"end": 1333,
|
||||
"start": 1513,
|
||||
"end": 1525,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseover",
|
||||
"modifiers": [],
|
||||
|
|
@ -6684,8 +6692,8 @@
|
|||
[
|
||||
"mouseenter",
|
||||
{
|
||||
"start": 1338,
|
||||
"end": 1351,
|
||||
"start": 1530,
|
||||
"end": 1543,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseenter",
|
||||
"modifiers": [],
|
||||
|
|
@ -6695,8 +6703,8 @@
|
|||
[
|
||||
"mouseleave",
|
||||
{
|
||||
"start": 1356,
|
||||
"end": 1369,
|
||||
"start": 1548,
|
||||
"end": 1561,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseleave",
|
||||
"modifiers": [],
|
||||
|
|
@ -8756,6 +8764,14 @@
|
|||
"OverflowMenu": {
|
||||
"moduleName": "OverflowMenu",
|
||||
"props": [
|
||||
[
|
||||
"size",
|
||||
{
|
||||
"kind": "let",
|
||||
"type": "\"sm\" | \"xl\"",
|
||||
"description": "Specify the size of the overflow menu"
|
||||
}
|
||||
],
|
||||
[
|
||||
"direction",
|
||||
{
|
||||
|
|
@ -8858,14 +8874,14 @@
|
|||
{
|
||||
"attributes": [
|
||||
{
|
||||
"start": 4805,
|
||||
"end": 4816,
|
||||
"start": 5113,
|
||||
"end": 5124,
|
||||
"type": "Attribute",
|
||||
"name": "name",
|
||||
"value": [
|
||||
{
|
||||
"start": 4811,
|
||||
"end": 4815,
|
||||
"start": 5119,
|
||||
"end": 5123,
|
||||
"type": "Text",
|
||||
"raw": "menu",
|
||||
"data": "menu"
|
||||
|
|
@ -8875,39 +8891,39 @@
|
|||
],
|
||||
"children": [
|
||||
{
|
||||
"start": 4817,
|
||||
"end": 4822,
|
||||
"start": 5125,
|
||||
"end": 5130,
|
||||
"type": "Text",
|
||||
"raw": "\n ",
|
||||
"data": "\n "
|
||||
},
|
||||
{
|
||||
"start": 4822,
|
||||
"end": 4985,
|
||||
"start": 5130,
|
||||
"end": 5293,
|
||||
"type": "InlineComponent",
|
||||
"name": "svelte:component",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 4866,
|
||||
"end": 4896,
|
||||
"start": 5174,
|
||||
"end": 5204,
|
||||
"type": "Attribute",
|
||||
"name": "aria-label",
|
||||
"value": [
|
||||
{
|
||||
"start": 4878,
|
||||
"end": 4895,
|
||||
"start": 5186,
|
||||
"end": 5203,
|
||||
"type": "MustacheTag",
|
||||
"expression": {
|
||||
"type": "Identifier",
|
||||
"start": 4879,
|
||||
"end": 4894,
|
||||
"start": 5187,
|
||||
"end": 5202,
|
||||
"loc": {
|
||||
"start": {
|
||||
"line": 206,
|
||||
"line": 216,
|
||||
"column": 19
|
||||
},
|
||||
"end": {
|
||||
"line": 206,
|
||||
"line": 216,
|
||||
"column": 34
|
||||
}
|
||||
},
|
||||
|
|
@ -8917,26 +8933,26 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"start": 4903,
|
||||
"end": 4928,
|
||||
"start": 5211,
|
||||
"end": 5236,
|
||||
"type": "Attribute",
|
||||
"name": "title",
|
||||
"value": [
|
||||
{
|
||||
"start": 4910,
|
||||
"end": 4927,
|
||||
"start": 5218,
|
||||
"end": 5235,
|
||||
"type": "MustacheTag",
|
||||
"expression": {
|
||||
"type": "Identifier",
|
||||
"start": 4911,
|
||||
"end": 4926,
|
||||
"start": 5219,
|
||||
"end": 5234,
|
||||
"loc": {
|
||||
"start": {
|
||||
"line": 207,
|
||||
"line": 217,
|
||||
"column": 14
|
||||
},
|
||||
"end": {
|
||||
"line": 207,
|
||||
"line": 217,
|
||||
"column": 29
|
||||
}
|
||||
},
|
||||
|
|
@ -8946,33 +8962,33 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"start": 4935,
|
||||
"end": 4978,
|
||||
"start": 5243,
|
||||
"end": 5286,
|
||||
"type": "Attribute",
|
||||
"name": "class",
|
||||
"value": [
|
||||
{
|
||||
"start": 4942,
|
||||
"end": 4967,
|
||||
"start": 5250,
|
||||
"end": 5275,
|
||||
"type": "Text",
|
||||
"raw": "bx--overflow-menu__icon ",
|
||||
"data": "bx--overflow-menu__icon "
|
||||
},
|
||||
{
|
||||
"start": 4966,
|
||||
"end": 4977,
|
||||
"start": 5274,
|
||||
"end": 5285,
|
||||
"type": "MustacheTag",
|
||||
"expression": {
|
||||
"type": "Identifier",
|
||||
"start": 4967,
|
||||
"end": 4976,
|
||||
"start": 5275,
|
||||
"end": 5284,
|
||||
"loc": {
|
||||
"start": {
|
||||
"line": 208,
|
||||
"line": 218,
|
||||
"column": 38
|
||||
},
|
||||
"end": {
|
||||
"line": 208,
|
||||
"line": 218,
|
||||
"column": 47
|
||||
}
|
||||
},
|
||||
|
|
@ -8985,15 +9001,15 @@
|
|||
"children": [],
|
||||
"expression": {
|
||||
"type": "Identifier",
|
||||
"start": 4853,
|
||||
"end": 4857,
|
||||
"start": 5161,
|
||||
"end": 5165,
|
||||
"loc": {
|
||||
"start": {
|
||||
"line": 205,
|
||||
"line": 215,
|
||||
"column": 13
|
||||
},
|
||||
"end": {
|
||||
"line": 205,
|
||||
"line": 215,
|
||||
"column": 17
|
||||
}
|
||||
},
|
||||
|
|
@ -9001,8 +9017,8 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"start": 4985,
|
||||
"end": 4988,
|
||||
"start": 5293,
|
||||
"end": 5296,
|
||||
"type": "Text",
|
||||
"raw": "\n ",
|
||||
"data": "\n "
|
||||
|
|
@ -9026,8 +9042,8 @@
|
|||
[
|
||||
"click",
|
||||
{
|
||||
"start": 4327,
|
||||
"end": 4335,
|
||||
"start": 4635,
|
||||
"end": 4643,
|
||||
"type": "EventHandler",
|
||||
"name": "click",
|
||||
"modifiers": [],
|
||||
|
|
@ -9037,8 +9053,8 @@
|
|||
[
|
||||
"mouseover",
|
||||
{
|
||||
"start": 4451,
|
||||
"end": 4463,
|
||||
"start": 4759,
|
||||
"end": 4771,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseover",
|
||||
"modifiers": [],
|
||||
|
|
@ -9048,8 +9064,8 @@
|
|||
[
|
||||
"mouseenter",
|
||||
{
|
||||
"start": 4466,
|
||||
"end": 4479,
|
||||
"start": 4774,
|
||||
"end": 4787,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseenter",
|
||||
"modifiers": [],
|
||||
|
|
@ -9059,8 +9075,8 @@
|
|||
[
|
||||
"mouseleave",
|
||||
{
|
||||
"start": 4482,
|
||||
"end": 4495,
|
||||
"start": 4790,
|
||||
"end": 4803,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseleave",
|
||||
"modifiers": [],
|
||||
|
|
@ -9070,8 +9086,8 @@
|
|||
[
|
||||
"keydown",
|
||||
{
|
||||
"start": 4498,
|
||||
"end": 4508,
|
||||
"start": 4806,
|
||||
"end": 4816,
|
||||
"type": "EventHandler",
|
||||
"name": "keydown",
|
||||
"modifiers": [],
|
||||
|
|
@ -14573,6 +14589,14 @@
|
|||
"TimePicker": {
|
||||
"moduleName": "TimePicker",
|
||||
"props": [
|
||||
[
|
||||
"size",
|
||||
{
|
||||
"kind": "let",
|
||||
"type": "\"sm\" | \"xl\"",
|
||||
"description": "Specify the size of the input"
|
||||
}
|
||||
],
|
||||
[
|
||||
"value",
|
||||
{
|
||||
|
|
@ -14713,8 +14737,8 @@
|
|||
[
|
||||
"click",
|
||||
{
|
||||
"start": 1853,
|
||||
"end": 1861,
|
||||
"start": 1964,
|
||||
"end": 1972,
|
||||
"type": "EventHandler",
|
||||
"name": "click",
|
||||
"modifiers": [],
|
||||
|
|
@ -14724,8 +14748,8 @@
|
|||
[
|
||||
"mouseover",
|
||||
{
|
||||
"start": 1864,
|
||||
"end": 1876,
|
||||
"start": 1975,
|
||||
"end": 1987,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseover",
|
||||
"modifiers": [],
|
||||
|
|
@ -14735,8 +14759,8 @@
|
|||
[
|
||||
"mouseenter",
|
||||
{
|
||||
"start": 1879,
|
||||
"end": 1892,
|
||||
"start": 1990,
|
||||
"end": 2003,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseenter",
|
||||
"modifiers": [],
|
||||
|
|
@ -14746,8 +14770,8 @@
|
|||
[
|
||||
"mouseleave",
|
||||
{
|
||||
"start": 1895,
|
||||
"end": 1908,
|
||||
"start": 2006,
|
||||
"end": 2019,
|
||||
"type": "EventHandler",
|
||||
"name": "mouseleave",
|
||||
"modifiers": [],
|
||||
|
|
@ -14757,8 +14781,8 @@
|
|||
[
|
||||
"change",
|
||||
{
|
||||
"start": 2830,
|
||||
"end": 2839,
|
||||
"start": 3037,
|
||||
"end": 3046,
|
||||
"type": "EventHandler",
|
||||
"name": "change",
|
||||
"modifiers": [],
|
||||
|
|
@ -14768,8 +14792,8 @@
|
|||
[
|
||||
"input",
|
||||
{
|
||||
"start": 2848,
|
||||
"end": 2856,
|
||||
"start": 3055,
|
||||
"end": 3063,
|
||||
"type": "EventHandler",
|
||||
"name": "input",
|
||||
"modifiers": [],
|
||||
|
|
@ -14779,8 +14803,8 @@
|
|||
[
|
||||
"focus",
|
||||
{
|
||||
"start": 2946,
|
||||
"end": 2954,
|
||||
"start": 3153,
|
||||
"end": 3161,
|
||||
"type": "EventHandler",
|
||||
"name": "focus",
|
||||
"modifiers": [],
|
||||
|
|
@ -14790,8 +14814,8 @@
|
|||
[
|
||||
"blur",
|
||||
{
|
||||
"start": 2963,
|
||||
"end": 2970,
|
||||
"start": 3170,
|
||||
"end": 3177,
|
||||
"type": "EventHandler",
|
||||
"name": "blur",
|
||||
"modifiers": [],
|
||||
|
|
|
|||
|
|
@ -24,6 +24,14 @@ You can override the `rel` attribute with a custom value.
|
|||
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
|
||||
</div>
|
||||
|
||||
### Large size
|
||||
|
||||
<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||
|
||||
### Small size
|
||||
|
||||
<Link size="sm" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||
|
||||
### Disabled
|
||||
|
||||
<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
|
|||
|
||||
<script>
|
||||
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -31,6 +32,22 @@ components: ["OverflowMenu", "OverflowMenuItem"]
|
|||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<OverflowMenu size="xl">
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Small size
|
||||
|
||||
<OverflowMenu size="sm">
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Custom primary focus
|
||||
|
||||
By default, the first overflow menu item is focused when opening the dropdown.
|
||||
|
|
@ -41,6 +58,14 @@ By default, the first overflow menu item is focused when opening the dropdown.
|
|||
<OverflowMenuItem primaryFocus danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Custom trigger icon
|
||||
|
||||
<OverflowMenu icon={Add16}>
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Custom trigger slot
|
||||
|
||||
<OverflowMenu style="width: auto;">
|
||||
|
|
|
|||
|
|
@ -33,6 +33,32 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
|||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
</TimePickerSelect>
|
||||
<TimePickerSelect value="PDT">
|
||||
<SelectItem value="pdt" text="PDT" />
|
||||
<SelectItem value="gmt" text="GMT" />
|
||||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
### Small size
|
||||
|
||||
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
</TimePickerSelect>
|
||||
<TimePickerSelect value="PDT">
|
||||
<SelectItem value="pdt" text="PDT" />
|
||||
<SelectItem value="gmt" text="GMT" />
|
||||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
### Disabled
|
||||
|
||||
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
|
||||
|
|
|
|||
|
|
@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
|
|||
integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
|
||||
|
||||
carbon-components-svelte@../:
|
||||
version "0.17.0"
|
||||
version "0.21.0"
|
||||
dependencies:
|
||||
carbon-icons-svelte "^10.17.0"
|
||||
flatpickr "4.6.3"
|
||||
|
||||
carbon-components@^10.22.0:
|
||||
version "10.22.0"
|
||||
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9"
|
||||
integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ==
|
||||
carbon-components@^10.23.0:
|
||||
version "10.23.0"
|
||||
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.0.tgz#56bdfffa95f518237a0bee2961b955c367a8b4c4"
|
||||
integrity sha512-Meq//PMtSnAwoMKr2BpiOmjAivpSzc1D2Q0r3mudkQsz9dhYOzBQAsfEfoh8WKbDiD7rHWUM2fNkw0yQl4dahA==
|
||||
dependencies:
|
||||
flatpickr "4.6.1"
|
||||
lodash.debounce "^4.0.8"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the size of the link
|
||||
* @type {"sm" | "lg"} [size]
|
||||
*/
|
||||
export let size = undefined;
|
||||
|
||||
/**
|
||||
* Specify the href value
|
||||
* @type {string} [href]
|
||||
|
|
@ -53,6 +59,8 @@
|
|||
class:bx--link--disabled="{disabled}"
|
||||
class:bx--link--inline="{inline}"
|
||||
class:bx--link--visited="{visited}"
|
||||
class:bx--link--sm="{size === 'sm'}"
|
||||
class:bx--link--lg="{size === 'lg'}"
|
||||
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
|
||||
href="{href}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the size of the overflow menu
|
||||
* @type {"sm" | "xl"} [size]
|
||||
*/
|
||||
export let size = undefined;
|
||||
|
||||
/**
|
||||
* Specify the direction of the overflow menu relative to the button
|
||||
* @type {"top" | "bottom"} [direction="bottom"]
|
||||
|
|
@ -131,6 +137,8 @@
|
|||
if (direction === "top") {
|
||||
menuRef.style.top = "auto";
|
||||
menuRef.style.bottom = height + "px";
|
||||
} else if (direction === "bottom") {
|
||||
menuRef.style.top = height + "px";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -149,7 +157,7 @@
|
|||
$: if ($items[$currentIndex]) {
|
||||
focusedId.set($items[$currentIndex].id);
|
||||
}
|
||||
$: dynamicPseudoWidth = `.bx--overflow-menu-options.bx--overflow-menu-options:after {
|
||||
$: dynamicPseudoWidth = `#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
|
||||
width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
|
||||
}`;
|
||||
$: styles = formatStyle(dynamicPseudoWidth);
|
||||
|
|
@ -177,6 +185,8 @@
|
|||
class:bx--overflow-menu="{true}"
|
||||
class:bx--overflow-menu--open="{open}"
|
||||
class:bx--overflow-menu--light="{light}"
|
||||
class:bx--overflow-menu--sm="{size === 'sm'}"
|
||||
class:bx--overflow-menu--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click="{({ target }) => {
|
||||
|
|
@ -219,6 +229,8 @@
|
|||
class:bx--overflow-menu--flip="{flipped}"
|
||||
class:bx--overflow-menu-options--open="{open}"
|
||||
class:bx--overflow-menu-options--light="{light}"
|
||||
class:bx--overflow-menu-options--sm="{size === 'sm'}"
|
||||
class:bx--overflow-menu-options--xl="{size === 'xl'}"
|
||||
class:menuOptionsClass
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the size of the input
|
||||
* @type {"sm" | "xl"} [size]
|
||||
*/
|
||||
export let size = undefined;
|
||||
|
||||
/**
|
||||
* Specify the input value
|
||||
* @type {string} [value=""]
|
||||
|
|
@ -95,6 +101,8 @@
|
|||
<div
|
||||
class:bx--time-picker="{true}"
|
||||
class:bx--time-picker--light="{light}"
|
||||
class:bx--time-picker--sm="{size === 'sm'}"
|
||||
class:bx--time-picker--xl="{size === 'xl'}"
|
||||
class:bx--select--light="{light}"
|
||||
>
|
||||
<div class:bx--time-picker__input="{true}">
|
||||
|
|
|
|||
15
types/index.d.ts
vendored
15
types/index.d.ts
vendored
|
|
@ -2014,6 +2014,11 @@ export class InlineNotification extends CarbonSvelteComponent {
|
|||
|
||||
export class Link extends CarbonSvelteComponent {
|
||||
$$prop_def: {
|
||||
/**
|
||||
* Specify the size of the link
|
||||
*/
|
||||
size?: "sm" | "lg";
|
||||
|
||||
/**
|
||||
* Specify the href value
|
||||
*/
|
||||
|
|
@ -2888,6 +2893,11 @@ export class OrderedList extends CarbonSvelteComponent {
|
|||
|
||||
export class OverflowMenu extends CarbonSvelteComponent {
|
||||
$$prop_def: {
|
||||
/**
|
||||
* Specify the size of the overflow menu
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Specify the direction of the overflow menu relative to the button
|
||||
* @default "bottom"
|
||||
|
|
@ -4789,6 +4799,11 @@ export class TileGroup extends CarbonSvelteComponent {
|
|||
|
||||
export class TimePicker extends CarbonSvelteComponent {
|
||||
$$prop_def: {
|
||||
/**
|
||||
* Specify the size of the input
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Specify the input value
|
||||
* @default ""
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue