mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
chore: v11 TimePicker
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
This commit is contained in:
parent
9285c72a50
commit
b20fc59e75
6 changed files with 8 additions and 8 deletions
|
@ -4260,7 +4260,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | 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 |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "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 |
|
||||
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]|[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 |
|
||||
|
|
|
@ -13165,7 +13165,7 @@
|
|||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of the input",
|
||||
"type": "\"sm\" | \"xl\"",
|
||||
"type": "\"sm\" | \"lg\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
|
@ -33,9 +33,9 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
|||
</TimePickerSelect>
|
||||
</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">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the size of the input
|
||||
* @type {"sm" | "xl"}
|
||||
* @type {"sm" | "lg"}
|
||||
*/
|
||||
export let size = undefined;
|
||||
|
||||
|
@ -66,7 +66,7 @@
|
|||
class:bx--time-picker--light="{light}"
|
||||
class:bx--time-picker--invalid="{invalid}"
|
||||
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}"
|
||||
>
|
||||
<div class:bx--time-picker__input="{true}">
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePicker size="lg" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
|
|
2
types/TimePicker/TimePicker.svelte.d.ts
vendored
2
types/TimePicker/TimePicker.svelte.d.ts
vendored
|
@ -8,7 +8,7 @@ export interface TimePickerProps extends RestProps {
|
|||
* Specify the size of the input
|
||||
* @default undefined
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
size?: "sm" | "lg";
|
||||
|
||||
/**
|
||||
* Specify the input value
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue