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

Make the 'helper text' feature more generic

Browse source
This commit is contained in:
Alex Rock Ancelet 2023-10-04 11:22:08 +02:00
commit 4b805bad42
No known key found for this signature in database
GPG key ID: 11649C042A79165A
19 changed files with 181 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

25
COMPONENT_INDEX.md
View file

@ -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 | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| 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;`) |
| 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;`) |
| 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;`) |
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| 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.
None.
## `HelperText`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------- |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text as parameter |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline variant |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------ |
| -- | Yes | -- | <code>{helperText}</code> |
### Events
None.
## `ImageLoader`
### Props

58
docs/src/COMPONENT_API.json
View file

@ -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., `<span slot=\"company\">...</span>`)",
"description": "Specify the company name.\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
"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",

8
src/ComboBox/ComboBox.svelte
View file

@ -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}
</ListBox>
{#if !invalid && helperText && !warn}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
</div>

8
src/DatePicker/DatePickerInput.svelte
View file

@ -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 @@
<div class:bx--form-requirement="{true}">{warnText}</div>
{/if}
{#if !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
</div>

16
src/Dropdown/Dropdown.svelte
View file

@ -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}
</ListBox>
{#if !inline && !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
</div>

19
src/HelperText/HelperText.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
/** Specify the helper text as parameter */
export let helperText = "";
/** Set to `true` for the disabled variant */
export let disabled = false;
/** Set to `true` to use inline variant */
export let inline = false;
</script>
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
{...$$restProps}
>
<slot>{helperText}</slot>
</div>

1
src/HelperText/index.js Normal file
View file

@ -0,0 +1 @@
export { default as HelperText } from "./HelperText.svelte";

8
src/MultiSelect/MultiSelect.svelte
View file

@ -180,6 +180,7 @@
ListBoxMenuItem,
ListBoxSelection,
} from "../ListBox";
import HelperText from "../HelperText/HelperText.svelte";
const dispatch = createEventDispatcher();
@ -535,11 +536,8 @@
{/if}
</ListBox>
{#if !inline && !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
</div>

8
src/NumberInput/NumberInput.svelte
View file

@ -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}
</div>
{#if !error && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
{#if error}
<div id="{errorId}" class:bx--form-requirement="{true}">

15
src/Select/Select.svelte
View file

@ -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}
</div>
{#if !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
{/if}
{#if !inline}
@ -225,12 +223,9 @@
{/if}
</div>
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
{#if invalid}
<div id="{errorId}" class:bx--form-requirement="{true}">

8
src/TextArea/TextArea.svelte
View file

@ -54,6 +54,7 @@
export let ref = null;
import WarningFilled from "../icons/WarningFilled.svelte";
import HelperText from "../HelperText/HelperText.svelte";
$: errorId = `error-${id}`;
</script>
@ -120,12 +121,9 @@
on:paste></textarea>
</div>
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
<HelperText disabled="{disabled}">
{helperText}
</div>
</HelperText>
{/if}
{#if invalid}
<div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>

18
src/TextInput/PasswordInput.svelte
View file

@ -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 @@
</slot>
</label>
{#if !isFluid && helperText}
<div
id="{helperId}"
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
<HelperText id="{helperId}" disabled="{disabled}" inline="{inline}"
>{helperText}</HelperText
>
{helperText}
</div>
{/if}
{/if}
{#if !inline && (labelText || $$slots.labelText)}
@ -250,13 +246,9 @@
</div>
{/if}
{#if !invalid && !warn && !isFluid && !inline && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
>
<HelperText disabled="{disabled}" inline="{inline}">
{helperText}
</div>
</HelperText>
{/if}
{#if !isFluid && !invalid && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>

18
src/TextInput/TextInput.svelte
View file

@ -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 @@
</label>
{/if}
{#if !isFluid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
<HelperText disabled="{disabled}" inline="{inline}"
>{helperText}</HelperText
>
{helperText}
</div>
{/if}
</div>
{/if}
@ -228,14 +225,9 @@
{/if}
</div>
{#if !invalid && !warn && !isFluid && !inline && helperText}
<div
id="{helperId}"
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
<HelperText disabled="{disabled}" inline="{inline}"
>{helperText}</HelperText
>
{helperText}
</div>
{/if}
{#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">

1
src/UIShell/Header.svelte
View file

@ -19,7 +19,6 @@
/**
* Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @type {string}
*/

1
src/index.js
View file

@ -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";

11
tests/HelperText.test.svelte Normal file
View file

@ -0,0 +1,11 @@
<script lang="ts">
import { HelperText } from "../types";
</script>
<HelperText>Base helper</HelperText>
<HelperText helperText="Helper text as parameter" />
<HelperText disabled="{true}">Helper with disabled variant</HelperText>
<HelperText inline="{true}">Helper with inline variant</HelperText>

32
types/HelperText/HelperText.svelte.d.ts vendored Normal file
View file

@ -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<string, any>,
{ default: {} }
> {}

1
types/UIShell/Header.svelte.d.ts vendored
View file

@ -30,7 +30,6 @@ export interface HeaderProps extends RestProps {
/**
* Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @default undefined
*/

1
types/index.d.ts vendored
View file

@ -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";