@dhasdk/simple-ui 1.0.63 → 1.0.65

package/README.md

@@ -53,6 +53,12 @@ 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
 
 1.0.62 - fixed 'checked' and 'indeterminate' prop usage for CheckBox, updated documentation for CheckBox re their usage w/ CheckBox and CheckBoxGroup
@@ -1030,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' |
@@ -1770,7 +1778,7 @@ Full list of props below
 | error   | boolean   | Yes      | false | if true a red border is applied to the outside of the select component indicating an error state. |
 | label | string   | Yes      | undefined | text used as the label for the input, i.e. 'Border Color' above |
 | options  | {{name: ..., value:...}, ...}   | Yes  | undefined | options is an array of objects, each with a **name** and an optional **value** property. If value is not present, name is used in the handler function. |
-| optionsLabel   | string   | Yes | undefined | appears as the label in the Select component, i.e. 'Choose a Color' above. Note, this is not the label above the component. |
+| optionsLabel   | ReactNode | Yes | 'Options' | appears as the label in the Select component, i.e. 'Choose a Color' or **`{<><strong>Required: </strong>Choose a Color</>}`** Note, this is not the label above the component. |
 | selected | string | Yes | undefined | The **value** or **name** inside the options array to pre-select or display. Is case sensitive. |
 | setSelectedOption | (string) => void | Yes  | undefined | calls the function passed in as **`setSelectedOption`** with the selected **value** if present, otherwise with **name** |
 | variant | string | Yes | undefined | The predefined variant of Select to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |