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

feat(date-picker): add helperText prop

Browse source 
Ref: 4b5b5fdf8
This commit is contained in:
Eric Y Liu 2021-07-22 16:44:52 -07:00
commit d0f6ee9b51
6 changed files with 41 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -1090,6 +1090,7 @@ None.
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
| pattern | <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 |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the calendar icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |

11
docs/src/COMPONENT_API.json
View file

@ -2734,6 +2734,17 @@
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
"description": "Specify the helper text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "iconDescription",
"kind": "let",

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

@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### With helper text
<DatePicker>
<DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
</DatePicker>
### Hidden label
<DatePicker>

13
src/DatePicker/DatePickerInput.svelte
View file

@ -17,6 +17,9 @@
/** Set to `true` to disable the input */
export let disabled = false;
/** Specify the helper text */
export let helperText = "";
/** Specify the ARIA label for the calendar icon */
export let iconDescription = "";
@ -50,7 +53,7 @@
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext, onMount } from "svelte";
import { getContext } from "svelte";
import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@ -161,4 +164,12 @@
{#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div>
{/if}
{#if helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}
</div>

6
tests/DatePicker.test.svelte
View file

@ -7,7 +7,11 @@
console.log(e.detail);
}}"
>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
<DatePickerInput
labelText="Date of birth"
helperText="Example: 01/12/1990"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker>

6
types/DatePicker/DatePickerInput.d.ts vendored
View file

@ -32,6 +32,12 @@ export interface DatePickerInputProps
*/
disabled?: boolean;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the ARIA label for the calendar icon
* @default ""