@dhasdk/simple-ui 1.0.64 → 1.0.65

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+1.0.65 - changed **label** on **`Input`** component to a **`ReactNode`** type. Also updated **aria-label** 
+handling logic to compensate (dev can enter **aria-label** manually, if not present and label is of 
+type string, will use **label** as the **aria-label**).
+
 1.0.64 - changed **optionsLabel** prop in **`Select`** to a ReactNode from string value
 
 1.0.63 - added **selected** prop to the **`Select`** component
@@ -1032,12 +1036,14 @@ A reference can also be created and passed to the input component, and the compo
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the input element for testing purposes |
 | dataTestIdLabel | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that contains the Label value for testing purposes |
 | insetLabel | boolean | Yes | false | indicates whether the label is inset into the border or resides above the input component |
-| label | string | Yes  | '' | string value of label, blank for no label |
+| label | ReactNode | Yes  | '' | Can be a String or ReactNode, allows formatting inside the label. The
+**`aria-label`** value can be specified separately, or taken from **label** if of type string. aria-label is 
+undefined otherwise. |
 | labelBaseColor  | string | Yes  |  | Use if the page or input color is not white, this will help to blend the label background to the surrounding area, color is a string hex value, i.e. **#fefefe** |
 | error | boolean | Yes | false | boolean prop indicating if the current input is in an error state. if true, applies visual error formatting to the input component. |
 | mask | string | Yes | undefined | a text string used to define an input mask. using the provided mask, input will format the users input into the formatted mask. In the case that the user adds invalid input, it is ignored. Non letter/number characters are also automatically entered if a valid following character type is added instead. # represents an individual number character, and @ represents a letter. All other values are themselves. |
 | placeHolder  | string | Yes  | Yes  |  | sets the placeholder text inside the input element |
-| ...props | string | Yes |  | takes additional props that are not specifically defined in the component, i.e. aria-label |
+| ...props | string | Yes |  | takes additional props that are not specifically defined in the component, i.e. aria-label. Note, if **aria-label** is not specically set, will be derived from **label** if of type string |
 | required  | boolean | Yes  |  | if specified, a red asterisk is prepended to the label, and the required attribute is set to true |
 | textShadow  | boolean | Yes  | false  | indicates whether a drop shadow should be applied or not to the label text, and if used, utilizes the **labelBaseColor** above. |
 | variant  | string | Yes  |   | The predefined variant of Badge to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |