@dhasdk/simple-ui 1.0.64 → 1.0.66

package/README.md

@@ -53,6 +53,12 @@ Tooltip
 
 ## Changelog
 
+1.0.66 - added **`inline`** prop to **`RadioGroup`**, allows for a flex-row layout of RadioGroup items as opposed to the default flex-column layout
+
+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 +1038,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' |
@@ -1431,6 +1439,7 @@ Full list of props below
 | classNameInput  | **`string`**  | Yes | see below  | a group of alternate css classes that can be specified by the developer for use in the input element of the component.  | 
 | classNameLabel  | **`string`**  | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the label element of the component.  | 
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
+| inline | boolean | Yes | false | If **`true`**, the radio group is layed out in a flex-row instead of a flex-column. |
 | method | (id: string, value: string) => void  | Yes | undefined | A callback method that is called anytime a radio item is clicked on. The value **`method={(id, value) => console.log("id/value: " + id + "/" + value)}`** might print something like **id/value: 2/value-2** |
 | options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
 | selectedId  | **`string`**  | Yes |  | A string value matching one of the passed in **`id`** values in the options array. This **`selectedId`** will be pre-selected. |
@@ -1439,11 +1448,21 @@ Full list of props below
 
 - label:
   
-  **`flex items-center gap-1 cursor-pointer border border-black disabled ? opacity-50 cursor-not-allowed`**
+```tsx
+twMerge(
+    "flex items-center gap-1 cursor-pointer",
+    inline ? "mr-4 mb-1" : "mb-2",
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    classNameLabel
+  )
+```
 
 - input:
 
-  **`appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content checked:bg-black checked:p-[2.5px] checked:border-black`**
+```tsx
+  appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content 
+  checked:bg-black checked:p-[2.5px] checked:border-black
+```
 
 
 2. Options interface