From 4b805bad42f019b277f410271e32d4e8049203b5 Mon Sep 17 00:00:00 2001 From: Alex Rock Ancelet Date: Wed, 4 Oct 2023 11:22:08 +0200 Subject: [PATCH] Make the 'helper text' feature more generic --- COMPONENT_INDEX.md | 25 ++++++++++- docs/src/COMPONENT_API.json | 58 ++++++++++++++++++++++++- src/ComboBox/ComboBox.svelte | 8 ++-- src/DatePicker/DatePickerInput.svelte | 8 ++-- src/Dropdown/Dropdown.svelte | 16 +++---- src/HelperText/HelperText.svelte | 19 ++++++++ src/HelperText/index.js | 1 + src/MultiSelect/MultiSelect.svelte | 8 ++-- src/NumberInput/NumberInput.svelte | 8 ++-- src/Select/Select.svelte | 15 +++---- src/TextArea/TextArea.svelte | 8 ++-- src/TextInput/PasswordInput.svelte | 18 +++----- src/TextInput/TextInput.svelte | 18 +++----- src/UIShell/Header.svelte | 1 - src/index.js | 1 + tests/HelperText.test.svelte | 11 +++++ types/HelperText/HelperText.svelte.d.ts | 32 ++++++++++++++ types/UIShell/Header.svelte.d.ts | 1 - types/index.d.ts | 1 + 19 files changed, 181 insertions(+), 76 deletions(-) create mode 100644 src/HelperText/HelperText.svelte create mode 100644 src/HelperText/index.js create mode 100644 tests/HelperText.test.svelte create mode 100644 types/HelperText/HelperText.svelte.d.ts diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 81a8ea4a22..6d33f6ccea 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 165 components exported from carbon-components-svelte@0.80.0. +> 166 components exported from carbon-components-svelte@0.80.0. ## Components @@ -63,6 +63,7 @@ - [`HeaderPanelLinks`](#headerpanellinks) - [`HeaderSearch`](#headersearch) - [`HeaderUtilities`](#headerutilities) +- [`HelperText`](#helpertext) - [`ImageLoader`](#imageloader) - [`InlineLoading`](#inlineloading) - [`InlineNotification`](#inlinenotification) @@ -1580,7 +1581,7 @@ None. | expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | | uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | | href | No | let | No | string | undefined | Specify the `href` attribute | -| company | No | let | No | string | undefined | Specify the company name.

Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | | platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | | persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | | expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | @@ -1866,6 +1867,26 @@ None. None. +## `HelperText` + +### Props + +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------- | +| helperText | No | let | No | string | "" | Specify the helper text as parameter | +| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant | +| inline | No | let | No | boolean | false | Set to `true` to use inline variant | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------ | +| -- | Yes | -- | {helperText} | + +### Events + +None. + ## `ImageLoader` ### Props diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index cf5a36521d..382d5294d6 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1,5 +1,5 @@ { - "total": 165, + "total": 166, "components": [ { "moduleName": "Accordion", @@ -4788,7 +4788,7 @@ { "name": "company", "kind": "let", - "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `...`)", + "description": "Specify the company name.\nAlternatively, use the named slot \"company\" (e.g., `...`)", "type": "string", "isFunction": false, "isFunctionDeclaration": false, @@ -5431,6 +5431,60 @@ "events": [], "typedefs": [] }, + { + "moduleName": "HelperText", + "filePath": "src/HelperText/HelperText.svelte", + "props": [ + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text as parameter", + "type": "string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` for the disabled variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{helperText}", + "slot_props": "{}" + } + ], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, { "moduleName": "ImageLoader", "filePath": "src/ImageLoader/ImageLoader.svelte", diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 0aee1350bb..f20c4350fc 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -117,6 +117,7 @@ import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte"; import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte"; import ListBoxSelection from "../ListBox/ListBoxSelection.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; const dispatch = createEventDispatcher(); @@ -415,11 +416,8 @@ {/if} {#if !invalid && helperText && !warn} -
+ {helperText} -
+ {/if} diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index ad4a3bd61a..4bf3dc5f8e 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -57,6 +57,7 @@ import Calendar from "../icons/Calendar.svelte"; import WarningFilled from "../icons/WarningFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; const { range, @@ -163,11 +164,8 @@
{warnText}
{/if} {#if !invalid && !warn && helperText} -
+ {helperText} -
+ {/if} diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index 8567d0c3b4..90bb1a0b27 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -107,6 +107,7 @@ ListBoxMenuIcon, ListBoxMenuItem, } from "../ListBox"; + import HelperText from "../HelperText/HelperText.svelte"; const dispatch = createEventDispatcher(); @@ -197,10 +198,10 @@ size="{size}" name="{name}" aria-label="{$$props['aria-label']}" - class="bx--dropdown - {direction === 'top' && 'bx--list-box--up'} - {invalid && 'bx--dropdown--invalid'} - {!invalid && warn && 'bx--dropdown--warning'} + class="bx--dropdown + {direction === 'top' && 'bx--list-box--up'} + {invalid && 'bx--dropdown--invalid'} + {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'} {size === 'sm' && 'bx--dropdown--sm'} {size === 'xl' && 'bx--dropdown--xl'} @@ -327,11 +328,8 @@ {/if} {#if !inline && !invalid && !warn && helperText} -
+ {helperText} -
+ {/if} diff --git a/src/HelperText/HelperText.svelte b/src/HelperText/HelperText.svelte new file mode 100644 index 0000000000..4fe3572f35 --- /dev/null +++ b/src/HelperText/HelperText.svelte @@ -0,0 +1,19 @@ + + +
+ {helperText} +
diff --git a/src/HelperText/index.js b/src/HelperText/index.js new file mode 100644 index 0000000000..585c2a7ce1 --- /dev/null +++ b/src/HelperText/index.js @@ -0,0 +1 @@ +export { default as HelperText } from "./HelperText.svelte"; diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 93aca0cd88..9d8ede2011 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -180,6 +180,7 @@ ListBoxMenuItem, ListBoxSelection, } from "../ListBox"; + import HelperText from "../HelperText/HelperText.svelte"; const dispatch = createEventDispatcher(); @@ -535,11 +536,8 @@ {/if} {#if !inline && !invalid && !warn && helperText} -
+ {helperText} -
+ {/if} diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 59009775e2..84c4a7dea8 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -105,6 +105,7 @@ import WarningFilled from "../icons/WarningFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import EditOff from "../icons/EditOff.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; const defaultTranslations = { [translationIds.increment]: "Increment number", @@ -260,12 +261,9 @@ {/if} {#if !error && !warn && helperText} -
+ {helperText} -
+ {/if} {#if error}
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte index d1a76f94fd..f7430b652e 100644 --- a/src/Select/Select.svelte +++ b/src/Select/Select.svelte @@ -68,6 +68,7 @@ import ChevronDown from "../icons/ChevronDown.svelte"; import WarningFilled from "../icons/WarningFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; const dispatch = createEventDispatcher(); const selectedValue = writable(selected); @@ -182,12 +183,9 @@ {/if}
{#if !invalid && !warn && helperText} -
+ {helperText} -
+ {/if} {/if} {#if !inline} @@ -225,12 +223,9 @@ {/if} {#if !invalid && helperText} -
+ {helperText} -
+ {/if} {#if invalid}
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte index 0e395931dd..978c299d92 100644 --- a/src/TextArea/TextArea.svelte +++ b/src/TextArea/TextArea.svelte @@ -54,6 +54,7 @@ export let ref = null; import WarningFilled from "../icons/WarningFilled.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; $: errorId = `error-${id}`; @@ -120,12 +121,9 @@ on:paste>
{#if !invalid && helperText} -
+ {helperText} -
+ {/if} {#if invalid}
{invalidText}
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte index 3c6103a781..6b54e02d1f 100644 --- a/src/TextInput/PasswordInput.svelte +++ b/src/TextInput/PasswordInput.svelte @@ -85,6 +85,7 @@ import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import View from "../icons/View.svelte"; import ViewOff from "../icons/ViewOff.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; const ctx = getContext("Form"); @@ -123,14 +124,9 @@ {#if !isFluid && helperText} -
{helperText} - {helperText} -
{/if} {/if} {#if !inline && (labelText || $$slots.labelText)} @@ -250,13 +246,9 @@ {/if} {#if !invalid && !warn && !isFluid && !inline && helperText} -
+ {helperText} -
+ {/if} {#if !isFluid && !invalid && warn}
{warnText}
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index 3ac15ae884..89a10095f7 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -74,6 +74,7 @@ import WarningFilled from "../icons/WarningFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import EditOff from "../icons/EditOff.svelte"; + import HelperText from "../HelperText/HelperText.svelte"; const ctx = getContext("Form"); const dispatch = createEventDispatcher(); @@ -133,13 +134,9 @@ {/if} {#if !isFluid && helperText} -
{helperText} - {helperText} -
{/if} {/if} @@ -228,14 +225,9 @@ {/if} {#if !invalid && !warn && !isFluid && !inline && helperText} -
{helperText} - {helperText} -
{/if} {#if !isFluid && invalid}
diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte index 3574f01ebd..99ed1ab554 100644 --- a/src/UIShell/Header.svelte +++ b/src/UIShell/Header.svelte @@ -19,7 +19,6 @@ /** * Specify the company name. - * * Alternatively, use the named slot "company" (e.g., `...`) * @type {string} */ diff --git a/src/index.js b/src/index.js index ea1a84cf46..6b7dd367df 100644 --- a/src/index.js +++ b/src/index.js @@ -56,6 +56,7 @@ export { FormGroup } from "./FormGroup"; export { FormItem } from "./FormItem"; export { FormLabel } from "./FormLabel"; export { Grid, Row, Column } from "./Grid"; +export { HelperText } from "./HelperText"; export { ImageLoader } from "./ImageLoader"; export { InlineLoading } from "./InlineLoading"; export { Link, OutboundLink } from "./Link"; diff --git a/tests/HelperText.test.svelte b/tests/HelperText.test.svelte new file mode 100644 index 0000000000..47bc928f7b --- /dev/null +++ b/tests/HelperText.test.svelte @@ -0,0 +1,11 @@ + + +Base helper + + + +Helper with disabled variant + +Helper with inline variant diff --git a/types/HelperText/HelperText.svelte.d.ts b/types/HelperText/HelperText.svelte.d.ts new file mode 100644 index 0000000000..b0105aaf48 --- /dev/null +++ b/types/HelperText/HelperText.svelte.d.ts @@ -0,0 +1,32 @@ +import type { SvelteComponentTyped } from "svelte"; +import type { SvelteHTMLElements } from "svelte/elements"; + +type RestProps = SvelteHTMLElements["div"]; + +export interface HelperTextProps extends RestProps { + /** + * Specify the helper text as parameter + * @default "" + */ + helperText?: string; + + /** + * Set to `true` for the disabled variant + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to use inline variant + * @default false + */ + inline?: boolean; + + [key: `data-${string}`]: any; +} + +export default class HelperText extends SvelteComponentTyped< + HelperTextProps, + Record, + { default: {} } +> {} diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts index f16a286280..a4a71ae17a 100644 --- a/types/UIShell/Header.svelte.d.ts +++ b/types/UIShell/Header.svelte.d.ts @@ -30,7 +30,6 @@ export interface HeaderProps extends RestProps { /** * Specify the company name. - * * Alternatively, use the named slot "company" (e.g., `...`) * @default undefined */ diff --git a/types/index.d.ts b/types/index.d.ts index 1174ce26c1..688494c510 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -62,6 +62,7 @@ export { default as FormLabel } from "./FormLabel/FormLabel.svelte"; export { default as Grid } from "./Grid/Grid.svelte"; export { default as Row } from "./Grid/Row.svelte"; export { default as Column } from "./Grid/Column.svelte"; +export { default as HelperText } from "./HelperText/HelperText.svelte"; export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte"; export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte"; export { default as Link } from "./Link/Link.svelte";