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 | | 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 | | 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 | | 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 | | 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 | | 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", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set 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/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" /> <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>
## Extra-large size ## Large size
<DatePicker> <DatePicker>
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" /> <DatePickerInput size="lg" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>
## Small size ## Small size

4
src/DatePicker/DatePickerInput.svelte
View file

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

2
tests/DatePicker.test.svelte
View file

@ -39,7 +39,7 @@
<DatePicker> <DatePicker>
<DatePickerInput <DatePickerInput
size="xl" size="lg"
labelText="Date of birth" labelText="Date of birth"
placeholder="mm/dd/yyyy" 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 * Set the size of the input
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Specify the input type * Specify the input type