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(timepicker): support "sm", "xl" size variants

Browse source
This commit is contained in:
Eric Liu 2020-10-29 13:05:36 -07:00
commit 5a5587c115
5 changed files with 64 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -4987,6 +4987,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. |

40
docs/src/PUBLIC_API.json
View file

@ -14581,6 +14581,14 @@
"TimePicker": { "TimePicker": {
"moduleName": "TimePicker", "moduleName": "TimePicker",
"props": [ "props": [
[
"size",
{
"kind": "let",
"type": "\"sm\" | \"xl\"",
"description": "Specify the size of the input"
}
],
[ [
"value", "value",
{ {
@ -14721,8 +14729,8 @@
[ [
"click", "click",
{ {
"start": 1853, "start": 1965,
"end": 1861, "end": 1973,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -14732,8 +14740,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 1864, "start": 1976,
"end": 1876, "end": 1988,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -14743,8 +14751,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 1879, "start": 1991,
"end": 1892, "end": 2004,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -14754,8 +14762,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 1895, "start": 2007,
"end": 1908, "end": 2020,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -14765,8 +14773,8 @@
[ [
"change", "change",
{ {
"start": 2830, "start": 3036,
"end": 2839, "end": 3045,
"type": "EventHandler", "type": "EventHandler",
"name": "change", "name": "change",
"modifiers": [], "modifiers": [],
@ -14776,8 +14784,8 @@
[ [
"input", "input",
{ {
"start": 2848, "start": 3054,
"end": 2856, "end": 3062,
"type": "EventHandler", "type": "EventHandler",
"name": "input", "name": "input",
"modifiers": [], "modifiers": [],
@ -14787,8 +14795,8 @@
[ [
"focus", "focus",
{ {
"start": 2946, "start": 3152,
"end": 2954, "end": 3160,
"type": "EventHandler", "type": "EventHandler",
"name": "focus", "name": "focus",
"modifiers": [], "modifiers": [],
@ -14798,8 +14806,8 @@
[ [
"blur", "blur",
{ {
"start": 2963, "start": 3169,
"end": 2970, "end": 3176,
"type": "EventHandler", "type": "EventHandler",
"name": "blur", "name": "blur",
"modifiers": [], "modifiers": [],

26
docs/src/pages/components/TimePicker.svx
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>

8
src/TimePicker/TimePicker.svelte
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}">

5
types/index.d.ts vendored
View file

@ -4794,6 +4794,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 ""