Added slots for Standardize props and events carbon-design-system#1621

SimpleProgrammingAU · Jan 14, 2024 · 84ea235 · 84ea235
1 parent d8d16a6
commit 84ea235
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 29 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -4219,7 +4219,7 @@ None.
 | :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty |
 | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
-| counter | No | <code>let</code> | No | --  | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
+| counter | No | <code>let</code> | No | <code>"char" &#124; "word"</code> | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
 | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
 | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
 | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
@@ -4242,26 +4242,28 @@ None.
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
-| :--------- | :------ | :---- | :------------------------ |
-| helperText | No | -- | <code>{helperText}</code> |
-| labelText | No | -- | <code>{labelText}</code> |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :------------------------- |
+| helperText | No | -- | <code>{helperText}</code> |
+| invalidText | No | -- | <code>{invalidText}</code> |
+| labelText | No | -- | <code>{labelText}</code> |
+| warnText | No | -- | <code>{warnText}</code> |
 
 ### Events
 
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click  | forwarded | --  |
-| mouseover | forwarded | --  |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| focus  | forwarded | -- |
-| blur  | forwarded | -- |
-| paste | forwarded | -- |
-| input | dispatched | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail  |
+| :--------- | :--------- | :-------------------------------------------- |
+| change | dispatched | <code>null &#124; number &#124; string</code> |
+| input | dispatched | <code>null &#124; number &#124; string</code> |
+| click | forwarded | --  |
+| mouseover | forwarded | --  |
+| mouseenter | forwarded | --  |
+| mouseleave | forwarded | --  |
+| keydown | forwarded | --  |
+| keyup | forwarded | --  |
+| focus | forwarded | --  |
+| blur  | forwarded | --  |
+| paste  | forwarded | --  |
 
 ## `TextInputSkeleton`
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -12701,6 +12701,7 @@
  "name": "counter",
  "kind": "let",
  "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
+ "type": "\"char\" | \"word\"",
  "isFunction": false,
  "isFunctionDeclaration": false,
  "isRequired": false,
@@ -12965,14 +12966,36 @@
  "fallback": "{helperText}",
  "slot_props": "{}"
  },
+ {
+ "name": "invalidText",
+ "default": false,
+ "fallback": "{invalidText}",
+ "slot_props": "{}"
+ },
  {
  "name": "labelText",
  "default": false,
  "fallback": "{labelText}",
  "slot_props": "{}"
+ },
+ {
+ "name": "warnText",
+ "default": false,
+ "fallback": "{warnText}",
+ "slot_props": "{}"
  }
  ],
  "events": [
+ {
+ "type": "dispatched",
+ "name": "change",
+ "detail": "null | number | string"
+ },
+ {
+ "type": "dispatched",
+ "name": "input",
+ "detail": "null | number | string"
+ },
  { "type": "forwarded", "name": "click", "element": "div" },
  { "type": "forwarded", "name": "mouseover", "element": "div" },
  { "type": "forwarded", "name": "mouseenter", "element": "div" },
@@ -12981,9 +13004,7 @@
  { "type": "forwarded", "name": "keyup", "element": "input" },
  { "type": "forwarded", "name": "focus", "element": "input" },
  { "type": "forwarded", "name": "blur", "element": "input" },
- { "type": "forwarded", "name": "paste", "element": "input" },
- { "type": "dispatched", "name": "input" },
- { "type": "dispatched", "name": "change" }
+ { "type": "forwarded", "name": "paste", "element": "input" }
  ],
  "typedefs": []
  },

diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
@@ -293,11 +293,15 @@
  {/if}
  {#if isFluid && !inline && invalid}
  <div class:bx--form-requirement="{true}" id="{errorId}">
- {invalidText}
+ <slot name="invalidText">
+ {invalidText}
+ </slot>
  </div>
  {/if}
  {#if isFluid && !inline && warn}
- <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+ <div class:bx--form-requirement="{true}" id="{warnId}">
+ <slot name="warnText">{warnText}</slot>
+ </div>
  {/if}
  </div>
  {#if !invalid && !warn && !isFluid && !inline && (helperText || $$slots.helperText)}
@@ -314,11 +318,15 @@
  {/if}
  {#if !isFluid && invalid}
  <div class:bx--form-requirement="{true}" id="{errorId}">
- {invalidText}
+ <slot name="invalidText">
+ {invalidText}
+ </slot>
  </div>
  {/if}
  {#if !isFluid && !invalid && warn}
- <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+ <div class:bx--form-requirement="{true}" id="{warnId}">
+ <slot name="warnText">{warnText}</slot>
+ </div>
  {/if}
  </div>
 </div>

diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts
@@ -5,7 +5,7 @@ export interface TextInputProps {
  * Set to "char" to enable display the character counter or "word" to display the word count.
  * @default undefined
  */
- counter?: undefined;
+ counter?: "char" | "word";
 
  /**
  * Set to `true` to disable the input
@@ -142,6 +142,8 @@ export interface TextInputProps {
 export default class TextInput extends SvelteComponentTyped<
  TextInputProps,
  {
+ change: CustomEvent<null | number | string>;
+ input: CustomEvent<null | number | string>;
  click: WindowEventMap["click"];
  mouseover: WindowEventMap["mouseover"];
  mouseenter: WindowEventMap["mouseenter"];
@@ -151,8 +153,6 @@ export default class TextInput extends SvelteComponentTyped<
  focus: WindowEventMap["focus"];
  blur: WindowEventMap["blur"];
  paste: DocumentAndElementEventHandlersEventMap["paste"];
- input: CustomEvent<any>;
- change: CustomEvent<any>;
  },
- { helperText: {}; labelText: {} }
+ { helperText: {}; invalidText: {}; labelText: {}; warnText: {} }
 > {}