Merge pull request #376 from IBM/0.23-size-variants

Add size variants for Link, TimePicker, OverflowMenu
This commit is contained in:
Eric Liu 2020-10-29 13:24:34 -07:00 committed by GitHub
commit 5abd542bb8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 210 additions and 81 deletions

View file

@ -2243,6 +2243,7 @@ import { Link } from "carbon-components-svelte";
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ | | :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ |
| size | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link. |
| href | <code>string</code> | -- | Specify the href value. | | href | <code>string</code> | -- | Specify the href value. |
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. | | 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. | | 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 | | Prop name | Type | Default value | Description |
| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- | | :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- |
| size | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu. |
| direction | <code>"top" &#124; "bottom"</code> | `"bottom"` | Specify the direction of the overflow menu relative to the button. | | direction | <code>"top" &#124; "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. | | 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. | | 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 | | Prop name | Type | Default value | Description |
| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | | :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
| size | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the input. |
| value | <code>string</code> | `""` | Specify the input value. | | value | <code>string</code> | `""` | Specify the input value. |
| type | <code>string</code> | `"text"` | Specify the input type. | | type | <code>string</code> | `"text"` | Specify the input type. |
| placeholder | <code>string</code> | `"hh=mm"` | Specify the input placeholder text. | | placeholder | <code>string</code> | `"hh=mm"` | Specify the input placeholder text. |

View file

@ -12,7 +12,7 @@
"@carbon/themes": "^10.20.0", "@carbon/themes": "^10.20.0",
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"carbon-components": "^10.22.0", "carbon-components": "^10.23.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8", "mdsvex": "^0.8.8",

View file

@ -6602,6 +6602,14 @@
"Link": { "Link": {
"moduleName": "Link", "moduleName": "Link",
"props": [ "props": [
[
"size",
{
"kind": "let",
"type": "\"sm\" | \"lg\"",
"description": "Specify the size of the link"
}
],
[ [
"href", "href",
{ {
@ -6662,8 +6670,8 @@
[ [
"click", "click",
{ {
"start": 1308, "start": 1500,
"end": 1316, "end": 1508,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -6673,8 +6681,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 1321, "start": 1513,
"end": 1333, "end": 1525,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -6684,8 +6692,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 1338, "start": 1530,
"end": 1351, "end": 1543,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -6695,8 +6703,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 1356, "start": 1548,
"end": 1369, "end": 1561,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -8756,6 +8764,14 @@
"OverflowMenu": { "OverflowMenu": {
"moduleName": "OverflowMenu", "moduleName": "OverflowMenu",
"props": [ "props": [
[
"size",
{
"kind": "let",
"type": "\"sm\" | \"xl\"",
"description": "Specify the size of the overflow menu"
}
],
[ [
"direction", "direction",
{ {
@ -8858,14 +8874,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 4805, "start": 5113,
"end": 4816, "end": 5124,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 4811, "start": 5119,
"end": 4815, "end": 5123,
"type": "Text", "type": "Text",
"raw": "menu", "raw": "menu",
"data": "menu" "data": "menu"
@ -8875,39 +8891,39 @@
], ],
"children": [ "children": [
{ {
"start": 4817, "start": 5125,
"end": 4822, "end": 5130,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
}, },
{ {
"start": 4822, "start": 5130,
"end": 4985, "end": 5293,
"type": "InlineComponent", "type": "InlineComponent",
"name": "svelte:component", "name": "svelte:component",
"attributes": [ "attributes": [
{ {
"start": 4866, "start": 5174,
"end": 4896, "end": 5204,
"type": "Attribute", "type": "Attribute",
"name": "aria-label", "name": "aria-label",
"value": [ "value": [
{ {
"start": 4878, "start": 5186,
"end": 4895, "end": 5203,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 4879, "start": 5187,
"end": 4894, "end": 5202,
"loc": { "loc": {
"start": { "start": {
"line": 206, "line": 216,
"column": 19 "column": 19
}, },
"end": { "end": {
"line": 206, "line": 216,
"column": 34 "column": 34
} }
}, },
@ -8917,26 +8933,26 @@
] ]
}, },
{ {
"start": 4903, "start": 5211,
"end": 4928, "end": 5236,
"type": "Attribute", "type": "Attribute",
"name": "title", "name": "title",
"value": [ "value": [
{ {
"start": 4910, "start": 5218,
"end": 4927, "end": 5235,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 4911, "start": 5219,
"end": 4926, "end": 5234,
"loc": { "loc": {
"start": { "start": {
"line": 207, "line": 217,
"column": 14 "column": 14
}, },
"end": { "end": {
"line": 207, "line": 217,
"column": 29 "column": 29
} }
}, },
@ -8946,33 +8962,33 @@
] ]
}, },
{ {
"start": 4935, "start": 5243,
"end": 4978, "end": 5286,
"type": "Attribute", "type": "Attribute",
"name": "class", "name": "class",
"value": [ "value": [
{ {
"start": 4942, "start": 5250,
"end": 4967, "end": 5275,
"type": "Text", "type": "Text",
"raw": "bx--overflow-menu__icon ", "raw": "bx--overflow-menu__icon ",
"data": "bx--overflow-menu__icon " "data": "bx--overflow-menu__icon "
}, },
{ {
"start": 4966, "start": 5274,
"end": 4977, "end": 5285,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 4967, "start": 5275,
"end": 4976, "end": 5284,
"loc": { "loc": {
"start": { "start": {
"line": 208, "line": 218,
"column": 38 "column": 38
}, },
"end": { "end": {
"line": 208, "line": 218,
"column": 47 "column": 47
} }
}, },
@ -8985,15 +9001,15 @@
"children": [], "children": [],
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 4853, "start": 5161,
"end": 4857, "end": 5165,
"loc": { "loc": {
"start": { "start": {
"line": 205, "line": 215,
"column": 13 "column": 13
}, },
"end": { "end": {
"line": 205, "line": 215,
"column": 17 "column": 17
} }
}, },
@ -9001,8 +9017,8 @@
} }
}, },
{ {
"start": 4985, "start": 5293,
"end": 4988, "end": 5296,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
@ -9026,8 +9042,8 @@
[ [
"click", "click",
{ {
"start": 4327, "start": 4635,
"end": 4335, "end": 4643,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -9037,8 +9053,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 4451, "start": 4759,
"end": 4463, "end": 4771,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -9048,8 +9064,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 4466, "start": 4774,
"end": 4479, "end": 4787,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -9059,8 +9075,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 4482, "start": 4790,
"end": 4495, "end": 4803,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -9070,8 +9086,8 @@
[ [
"keydown", "keydown",
{ {
"start": 4498, "start": 4806,
"end": 4508, "end": 4816,
"type": "EventHandler", "type": "EventHandler",
"name": "keydown", "name": "keydown",
"modifiers": [], "modifiers": [],
@ -14573,6 +14589,14 @@
"TimePicker": { "TimePicker": {
"moduleName": "TimePicker", "moduleName": "TimePicker",
"props": [ "props": [
[
"size",
{
"kind": "let",
"type": "\"sm\" | \"xl\"",
"description": "Specify the size of the input"
}
],
[ [
"value", "value",
{ {
@ -14713,8 +14737,8 @@
[ [
"click", "click",
{ {
"start": 1853, "start": 1964,
"end": 1861, "end": 1972,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -14724,8 +14748,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 1864, "start": 1975,
"end": 1876, "end": 1987,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -14735,8 +14759,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 1879, "start": 1990,
"end": 1892, "end": 2003,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -14746,8 +14770,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 1895, "start": 2006,
"end": 1908, "end": 2019,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -14757,8 +14781,8 @@
[ [
"change", "change",
{ {
"start": 2830, "start": 3037,
"end": 2839, "end": 3046,
"type": "EventHandler", "type": "EventHandler",
"name": "change", "name": "change",
"modifiers": [], "modifiers": [],
@ -14768,8 +14792,8 @@
[ [
"input", "input",
{ {
"start": 2848, "start": 3055,
"end": 2856, "end": 3063,
"type": "EventHandler", "type": "EventHandler",
"name": "input", "name": "input",
"modifiers": [], "modifiers": [],
@ -14779,8 +14803,8 @@
[ [
"focus", "focus",
{ {
"start": 2946, "start": 3153,
"end": 2954, "end": 3161,
"type": "EventHandler", "type": "EventHandler",
"name": "focus", "name": "focus",
"modifiers": [], "modifiers": [],
@ -14790,8 +14814,8 @@
[ [
"blur", "blur",
{ {
"start": 2963, "start": 3170,
"end": 2970, "end": 3177,
"type": "EventHandler", "type": "EventHandler",
"name": "blur", "name": "blur",
"modifiers": [], "modifiers": [],

View file

@ -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>. <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
</div> </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 ### Disabled
<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link> <Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

View file

@ -4,6 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script> <script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte"; import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -31,6 +32,22 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />
</OverflowMenu> </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 ### Custom primary focus
By default, the first overflow menu item is focused when opening the dropdown. 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" /> <OverflowMenuItem primaryFocus danger text="Delete service" />
</OverflowMenu> </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 ### Custom trigger slot
<OverflowMenu style="width: auto;"> <OverflowMenu style="width: auto;">

View file

@ -33,6 +33,32 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect> </TimePickerSelect>
</TimePicker> </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 ### Disabled
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled> <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>

View file

@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug== integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.17.0" version "0.21.0"
dependencies: dependencies:
carbon-icons-svelte "^10.17.0" carbon-icons-svelte "^10.17.0"
flatpickr "4.6.3" flatpickr "4.6.3"
carbon-components@^10.22.0: carbon-components@^10.23.0:
version "10.22.0" version "10.23.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.0.tgz#56bdfffa95f518237a0bee2961b955c367a8b4c4"
integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ== integrity sha512-Meq//PMtSnAwoMKr2BpiOmjAivpSzc1D2Q0r3mudkQsz9dhYOzBQAsfEfoh8WKbDiD7rHWUM2fNkw0yQl4dahA==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"

View file

@ -1,4 +1,10 @@
<script> <script>
/**
* Specify the size of the link
* @type {"sm" | "lg"} [size]
*/
export let size = undefined;
/** /**
* Specify the href value * Specify the href value
* @type {string} [href] * @type {string} [href]
@ -53,6 +59,8 @@
class:bx--link--disabled="{disabled}" class:bx--link--disabled="{disabled}"
class:bx--link--inline="{inline}" class:bx--link--inline="{inline}"
class:bx--link--visited="{visited}" class:bx--link--visited="{visited}"
class:bx--link--sm="{size === 'sm'}"
class:bx--link--lg="{size === 'lg'}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
href="{href}" href="{href}"
{...$$restProps} {...$$restProps}

View file

@ -1,4 +1,10 @@
<script> <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 * Specify the direction of the overflow menu relative to the button
* @type {"top" | "bottom"} [direction="bottom"] * @type {"top" | "bottom"} [direction="bottom"]
@ -131,6 +137,8 @@
if (direction === "top") { if (direction === "top") {
menuRef.style.top = "auto"; menuRef.style.top = "auto";
menuRef.style.bottom = height + "px"; menuRef.style.bottom = height + "px";
} else if (direction === "bottom") {
menuRef.style.top = height + "px";
} }
} }
@ -149,7 +157,7 @@
$: if ($items[$currentIndex]) { $: if ($items[$currentIndex]) {
focusedId.set($items[$currentIndex].id); 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"}; width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
}`; }`;
$: styles = formatStyle(dynamicPseudoWidth); $: styles = formatStyle(dynamicPseudoWidth);
@ -177,6 +185,8 @@
class:bx--overflow-menu="{true}" class:bx--overflow-menu="{true}"
class:bx--overflow-menu--open="{open}" class:bx--overflow-menu--open="{open}"
class:bx--overflow-menu--light="{light}" class:bx--overflow-menu--light="{light}"
class:bx--overflow-menu--sm="{size === 'sm'}"
class:bx--overflow-menu--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click="{({ target }) => { on:click="{({ target }) => {
@ -219,6 +229,8 @@
class:bx--overflow-menu--flip="{flipped}" class:bx--overflow-menu--flip="{flipped}"
class:bx--overflow-menu-options--open="{open}" class:bx--overflow-menu-options--open="{open}"
class:bx--overflow-menu-options--light="{light}" 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 class:menuOptionsClass
> >
<slot /> <slot />

View file

@ -1,4 +1,10 @@
<script> <script>
/**
* Specify the size of the input
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/** /**
* Specify the input value * Specify the input value
* @type {string} [value=""] * @type {string} [value=""]
@ -95,6 +101,8 @@
<div <div
class:bx--time-picker="{true}" class:bx--time-picker="{true}"
class:bx--time-picker--light="{light}" 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}" class:bx--select--light="{light}"
> >
<div class:bx--time-picker__input="{true}"> <div class:bx--time-picker__input="{true}">

15
types/index.d.ts vendored
View file

@ -2014,6 +2014,11 @@ export class InlineNotification extends CarbonSvelteComponent {
export class Link extends CarbonSvelteComponent { export class Link extends CarbonSvelteComponent {
$$prop_def: { $$prop_def: {
/**
* Specify the size of the link
*/
size?: "sm" | "lg";
/** /**
* Specify the href value * Specify the href value
*/ */
@ -2888,6 +2893,11 @@ export class OrderedList extends CarbonSvelteComponent {
export class OverflowMenu extends CarbonSvelteComponent { export class OverflowMenu extends CarbonSvelteComponent {
$$prop_def: { $$prop_def: {
/**
* Specify the size of the overflow menu
*/
size?: "sm" | "xl";
/** /**
* Specify the direction of the overflow menu relative to the button * Specify the direction of the overflow menu relative to the button
* @default "bottom" * @default "bottom"
@ -4789,6 +4799,11 @@ export class TileGroup extends CarbonSvelteComponent {
export class TimePicker extends CarbonSvelteComponent { export class TimePicker extends CarbonSvelteComponent {
$$prop_def: { $$prop_def: {
/**
* Specify the size of the input
*/
size?: "sm" | "xl";
/** /**
* Specify the input value * Specify the input value
* @default "" * @default ""