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

chore: v11 TimePicker

Browse source 
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-31 22:33:42 +02:00 • committed by Enrico Sacchetti
commit b20fc59e75
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -4260,7 +4260,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | | :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text |
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element | | pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
| maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute | | maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute |

2
docs/src/COMPONENT_API.json
View file

@ -13165,7 +13165,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the input", "description": "Specify the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

4
docs/src/pages/components/TimePicker.svx
View file

@ -33,9 +33,9 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect> </TimePickerSelect>
</TimePicker> </TimePicker>
## Extra-large size ## Large size
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="lg" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="pm"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />

4
src/TimePicker/TimePicker.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the size of the input * Specify the size of the input
* @type {"sm" | "xl"} * @type {"sm" | "lg"}
*/ */
export let size = undefined; export let size = undefined;
@ -66,7 +66,7 @@
class:bx--time-picker--light="{light}" class:bx--time-picker--light="{light}"
class:bx--time-picker--invalid="{invalid}" class:bx--time-picker--invalid="{invalid}"
class:bx--time-picker--sm="{size === 'sm'}" class:bx--time-picker--sm="{size === 'sm'}"
class:bx--time-picker--xl="{size === 'xl'}" class:bx--time-picker--lg="{size === 'lg' || 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}">

2
tests/TimePicker.test.svelte
View file

@ -29,7 +29,7 @@
</TimePickerSelect> </TimePickerSelect>
</TimePicker> </TimePicker>
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="lg" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM"> <TimePickerSelect value="PM">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />

2
types/TimePicker/TimePicker.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface TimePickerProps extends RestProps {
* Specify the size of the input * Specify the size of the input
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Specify the input value * Specify the input value