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 DatePicker

Browse source 
For better compatibility with existing codebases size xl is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-27 16:10:35 +02:00 • committed by Enrico Sacchetti
commit 6203e1d699
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

@ -1082,7 +1082,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| type | No | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value |

2
docs/src/COMPONENT_API.json
View file

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

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

@ -63,10 +63,10 @@ By default, the "simple" date picker does not have a dropdown calendar.
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
## Extra-large size
## Large size
<DatePicker>
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
<DatePickerInput size="lg" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
## Small size

4
src/DatePicker/DatePickerInput.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Set the size of the input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -117,7 +117,7 @@
class:bx--date-picker__input="{true}"
class:bx--date-picker__input--invalid="{invalid}"
class:bx--date-picker__input--sm="{size === 'sm'}"
class:bx--date-picker__input--xl="{size === 'xl'}"
class:bx--date-picker__input--lg="{size === 'lg' || size === 'xl'}"
on:input
on:input="{({ target }) => {
updateValue({ type: 'input', value: target.value });

2
tests/DatePicker.test.svelte
View file

@ -39,7 +39,7 @@
<DatePicker>
<DatePickerInput
size="xl"
size="lg"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>

2
types/DatePicker/DatePickerInput.svelte.d.ts vendored
View file

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