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: {} }
 > {}