Skip to content

Commit 7fc7157

Browse files
PierstovalPierstoval
committed
Make the 'helper text' feature more generic
1 parent 06d81dd commit 7fc7157

19 files changed

+186
-75
lines changed

‎COMPONENT_INDEX.md

+23-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Component Index
22

3-
> 165 components exported from [email protected].
3+
> 166 components exported from [email protected].
44
55
## Components
66

@@ -63,6 +63,7 @@
6363
- [`HeaderPanelLinks`](#headerpanellinks)
6464
- [`HeaderSearch`](#headersearch)
6565
- [`HeaderUtilities`](#headerutilities)
66+
- [`HelperText`](#helpertext)
6667
- [`ImageLoader`](#imageloader)
6768
- [`InlineLoading`](#inlineloading)
6869
- [`InlineNotification`](#inlinenotification)
@@ -1580,7 +1581,7 @@ None.
15801581
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
15811582
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
15821583
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
1583-
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
1584+
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
15841585
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) |
15851586
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
15861587
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
@@ -1866,6 +1867,26 @@ None.
18661867

18671868
None.
18681869

1870+
## `HelperText`
1871+
1872+
### Props
1873+
1874+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
1875+
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------- |
1876+
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text as parameter |
1877+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant |
1878+
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline variant |
1879+
1880+
### Slots
1881+
1882+
| Slot name | Default | Props | Fallback |
1883+
| :-------- | :------ | :---- | :------------------------ |
1884+
| -- | Yes | -- | <code>{helperText}</code> |
1885+
1886+
### Events
1887+
1888+
None.
1889+
18691890
## `ImageLoader`
18701891

18711892
### Props

‎docs/src/COMPONENT_API.json

+55-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"total": 165,
2+
"total": 166,
33
"components": [
44
{
55
"moduleName": "Accordion",
@@ -5431,6 +5431,60 @@
54315431
"events": [],
54325432
"typedefs": []
54335433
},
5434+
{
5435+
"moduleName": "HelperText",
5436+
"filePath": "src/HelperText/HelperText.svelte",
5437+
"props": [
5438+
{
5439+
"name": "helperText",
5440+
"kind": "let",
5441+
"description": "Specify the helper text as parameter",
5442+
"type": "string",
5443+
"value": "\"\"",
5444+
"isFunction": false,
5445+
"isFunctionDeclaration": false,
5446+
"isRequired": false,
5447+
"constant": false,
5448+
"reactive": false
5449+
},
5450+
{
5451+
"name": "disabled",
5452+
"kind": "let",
5453+
"description": "Set to `true` for the disabled variant",
5454+
"type": "boolean",
5455+
"value": "false",
5456+
"isFunction": false,
5457+
"isFunctionDeclaration": false,
5458+
"isRequired": false,
5459+
"constant": false,
5460+
"reactive": false
5461+
},
5462+
{
5463+
"name": "inline",
5464+
"kind": "let",
5465+
"description": "Set to `true` to use inline variant",
5466+
"type": "boolean",
5467+
"value": "false",
5468+
"isFunction": false,
5469+
"isFunctionDeclaration": false,
5470+
"isRequired": false,
5471+
"constant": false,
5472+
"reactive": false
5473+
}
5474+
],
5475+
"moduleExports": [],
5476+
"slots": [
5477+
{
5478+
"name": "__default__",
5479+
"default": true,
5480+
"fallback": "{helperText}",
5481+
"slot_props": "{}"
5482+
}
5483+
],
5484+
"events": [],
5485+
"typedefs": [],
5486+
"rest_props": { "type": "Element", "name": "div" }
5487+
},
54345488
{
54355489
"moduleName": "ImageLoader",
54365490
"filePath": "src/ImageLoader/ImageLoader.svelte",

‎src/ComboBox/ComboBox.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
118118
import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
119119
import ListBoxSelection from "../ListBox/ListBoxSelection.svelte";
120+
import HelperText from "../HelperText/HelperText.svelte";
120121
121122
const dispatch = createEventDispatcher();
122123
@@ -415,11 +416,8 @@
415416
{/if}
416417
</ListBox>
417418
{#if !invalid && helperText && !warn}
418-
<div
419-
class:bx--form__helper-text="{true}"
420-
class:bx--form__helper-text--disabled="{disabled}"
421-
>
419+
<HelperText disabled="{disabled}">
422420
{helperText}
423-
</div>
421+
</HelperText>
424422
{/if}
425423
</div>

‎src/DatePicker/DatePickerInput.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
import Calendar from "../icons/Calendar.svelte";
5858
import WarningFilled from "../icons/WarningFilled.svelte";
5959
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
60+
import HelperText from "../HelperText/HelperText.svelte";
6061
6162
const {
6263
range,
@@ -163,11 +164,8 @@
163164
<div class:bx--form-requirement="{true}">{warnText}</div>
164165
{/if}
165166
{#if !invalid && !warn && helperText}
166-
<div
167-
class:bx--form__helper-text="{true}"
168-
class:bx--form__helper-text--disabled="{disabled}"
169-
>
167+
<HelperText disabled="{disabled}">
170168
{helperText}
171-
</div>
169+
</HelperText>
172170
{/if}
173171
</div>

‎src/Dropdown/Dropdown.svelte

+7-9
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
ListBoxMenuIcon,
108108
ListBoxMenuItem,
109109
} from "../ListBox";
110+
import HelperText from "../HelperText/HelperText.svelte";
110111
111112
const dispatch = createEventDispatcher();
112113
@@ -197,10 +198,10 @@
197198
size="{size}"
198199
name="{name}"
199200
aria-label="{$$props['aria-label']}"
200-
class="bx--dropdown
201-
{direction === 'top' && 'bx--list-box--up'}
202-
{invalid && 'bx--dropdown--invalid'}
203-
{!invalid && warn && 'bx--dropdown--warning'}
201+
class="bx--dropdown
202+
{direction === 'top' && 'bx--list-box--up'}
203+
{invalid && 'bx--dropdown--invalid'}
204+
{!invalid && warn && 'bx--dropdown--warning'}
204205
{open && 'bx--dropdown--open'}
205206
{size === 'sm' && 'bx--dropdown--sm'}
206207
{size === 'xl' && 'bx--dropdown--xl'}
@@ -327,11 +328,8 @@
327328
{/if}
328329
</ListBox>
329330
{#if !inline && !invalid && !warn && helperText}
330-
<div
331-
class:bx--form__helper-text="{true}"
332-
class:bx--form__helper-text--disabled="{disabled}"
333-
>
331+
<HelperText disabled="{disabled}">
334332
{helperText}
335-
</div>
333+
</HelperText>
336334
{/if}
337335
</div>

‎src/HelperText/HelperText.svelte

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script>
2+
/** Specify the helper text as parameter */
3+
export let helperText = "";
4+
5+
/** Set to `true` for the disabled variant */
6+
export let disabled = false;
7+
8+
/** Set to `true` to use inline variant */
9+
export let inline = false;
10+
</script>
11+
12+
<div
13+
class:bx--form__helper-text="{true}"
14+
class:bx--form__helper-text--disabled="{disabled}"
15+
class:bx--form__helper-text--inline="{inline}"
16+
{...$$restProps}
17+
>
18+
<slot>{helperText}</slot>
19+
</div>

‎src/HelperText/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as HelperText } from "./HelperText.svelte";

‎src/MultiSelect/MultiSelect.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@
180180
ListBoxMenuItem,
181181
ListBoxSelection,
182182
} from "../ListBox";
183+
import HelperText from "../HelperText/HelperText.svelte";
183184
184185
const dispatch = createEventDispatcher();
185186
@@ -535,11 +536,8 @@
535536
{/if}
536537
</ListBox>
537538
{#if !inline && !invalid && !warn && helperText}
538-
<div
539-
class:bx--form__helper-text="{true}"
540-
class:bx--form__helper-text--disabled="{disabled}"
541-
>
539+
<HelperText disabled="{disabled}">
542540
{helperText}
543-
</div>
541+
</HelperText>
544542
{/if}
545543
</div>

‎src/NumberInput/NumberInput.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
import WarningFilled from "../icons/WarningFilled.svelte";
106106
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
107107
import EditOff from "../icons/EditOff.svelte";
108+
import HelperText from "../HelperText/HelperText.svelte";
108109
109110
const defaultTranslations = {
110111
[translationIds.increment]: "Increment number",
@@ -260,12 +261,9 @@
260261
{/if}
261262
</div>
262263
{#if !error && !warn && helperText}
263-
<div
264-
class:bx--form__helper-text="{true}"
265-
class:bx--form__helper-text--disabled="{disabled}"
266-
>
264+
<HelperText disabled="{disabled}">
267265
{helperText}
268-
</div>
266+
</HelperText>
269267
{/if}
270268
{#if error}
271269
<div id="{errorId}" class:bx--form-requirement="{true}">

‎src/Select/Select.svelte

+5-10
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
import ChevronDown from "../icons/ChevronDown.svelte";
6969
import WarningFilled from "../icons/WarningFilled.svelte";
7070
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
71+
import HelperText from "../HelperText/HelperText.svelte";
7172
7273
const dispatch = createEventDispatcher();
7374
const selectedValue = writable(selected);
@@ -182,12 +183,9 @@
182183
{/if}
183184
</div>
184185
{#if !invalid && !warn && helperText}
185-
<div
186-
class:bx--form__helper-text="{true}"
187-
class:bx--form__helper-text--disabled="{disabled}"
188-
>
186+
<HelperText disabled="{disabled}">
189187
{helperText}
190-
</div>
188+
</HelperText>
191189
{/if}
192190
{/if}
193191
{#if !inline}
@@ -225,12 +223,9 @@
225223
{/if}
226224
</div>
227225
{#if !invalid && helperText}
228-
<div
229-
class:bx--form__helper-text="{true}"
230-
class:bx--form__helper-text--disabled="{disabled}"
231-
>
226+
<HelperText disabled="{disabled}">
232227
{helperText}
233-
</div>
228+
</HelperText>
234229
{/if}
235230
{#if invalid}
236231
<div id="{errorId}" class:bx--form-requirement="{true}">

‎src/TextArea/TextArea.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
export let ref = null;
5555
5656
import WarningFilled from "../icons/WarningFilled.svelte";
57+
import HelperText from "../HelperText/HelperText.svelte";
5758
5859
$: errorId = `error-${id}`;
5960
</script>
@@ -120,12 +121,9 @@
120121
on:paste></textarea>
121122
</div>
122123
{#if !invalid && helperText}
123-
<div
124-
class:bx--form__helper-text="{true}"
125-
class:bx--form__helper-text--disabled="{disabled}"
126-
>
124+
<HelperText disabled="{disabled}">
127125
{helperText}
128-
</div>
126+
</HelperText>
129127
{/if}
130128
{#if invalid}
131129
<div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>

‎src/TextInput/PasswordInput.svelte

+5-13
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
8686
import View from "../icons/View.svelte";
8787
import ViewOff from "../icons/ViewOff.svelte";
88+
import HelperText from "../HelperText/HelperText.svelte";
8889
8990
const ctx = getContext("Form");
9091
@@ -123,14 +124,9 @@
123124
</slot>
124125
</label>
125126
{#if !isFluid && helperText}
126-
<div
127-
id="{helperId}"
128-
class:bx--form__helper-text="{true}"
129-
class:bx--form__helper-text--disabled="{disabled}"
130-
class:bx--form__helper-text--inline="{inline}"
127+
<HelperText id="{helperId}" disabled="{disabled}" inline="{inline}"
128+
>{helperText}</HelperText
131129
>
132-
{helperText}
133-
</div>
134130
{/if}
135131
{/if}
136132
{#if !inline && (labelText || $$slots.labelText)}
@@ -250,13 +246,9 @@
250246
</div>
251247
{/if}
252248
{#if !invalid && !warn && !isFluid && !inline && helperText}
253-
<div
254-
class:bx--form__helper-text="{true}"
255-
class:bx--form__helper-text--disabled="{disabled}"
256-
class:bx--form__helper-text--inline="{inline}"
257-
>
249+
<HelperText disabled="{disabled}" inline="{inline}">
258250
{helperText}
259-
</div>
251+
</HelperText>
260252
{/if}
261253
{#if !isFluid && !invalid && warn}
262254
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>

0 commit comments

Comments
 (0)