@dhasdk/simple-ui 1.0.61 → 1.0.62

package/README.md

@@ -53,6 +53,8 @@ Tooltip
 
 ## Changelog
 
+1.0.62 - fixed 'checked' and 'indeterminate' prop usage for CheckBox, updated documentation for CheckBox re their usage w/ CheckBox and CheckBoxGroup
+
 1.0.61 - added **selectedId** prop to **`RadioGroup`** as well as updated documentation with the **RadioOptions** interface
 
 1.0.60 - added **classNameSvgLine** and **classNameIcon** props to **`CheckBox`** the former to share duties with and more focus **classNameSvg**. The latter allows for positioning of the checkbox icon if needed.
@@ -791,6 +793,8 @@ The **CheckBoxGroup** component can be optionally used with any number of **Chec
 
 **CheckBoxGroup** also takes three props that are directly passed down to **CheckBox**, allowing you to specify any of these values in one place instead of in each instance of **CheckBox**. These three props are all boolean values, described below. They are **`fill`**, **`icon`**, and **`marker`**.
 
+**Note:** Using **checked** or **indeterminate** on a **`CheckBox`** inside a **`CheckBoxGroup`** will only effect that CheckBox and will not have an effect on the child or parent CheckBoxes as is done when an individual CheckBox is manually clicked inside a CheckBoxGroup. This can for example place a CheckBox in a checked state leaving its children unchecked. If you wish to use **checked** or **indeterminate** on a CheckBox inside a CheckBoxGroup, it is up to the developer to manage the values for all CheckBoxes in that group on initial state.
+
 Used by itself, **CheckBox** behaves as a normal checkbox component and can be used individually or in groups. It also takes the same attributes that a normal **`html input type="checkbox"`** would.
 
 ### Props for CheckBoxGroup
@@ -817,6 +821,7 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | ariaLabel   | string   | Yes  | 'CheckBox Component' | The **aria-label** to assign to this CheckBox |
+| checked | boolean | Yes | **`false`** | if present, checkbox is initially displayed in a 'checked' state. See above note for more information |
 | className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. |
 | classNameIcon | string | Yes | **`''`** | CSS classes that will be applied to the custom icon (non html default) that is the checkbox, indeterminate checkbox, or blank checkbox.  Can be useful for positioning, etc. |
 | classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
@@ -827,6 +832,7 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBox component for testing purposes |
 | fill | boolean | Yes | {false} | specifies using the **fill** variant or not. If used, the checkbox itself will have a darker solid background. |
 | icon | boolean | Yes | {true} | When true (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
+| indeterminate | boolean | Yes | **`false`** | if present, checkbox is initially displayed in an 'indeterminate' state. See above note for more information |
 | marker | boolean | Yes | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
 | ...props	 | string | Yes | undefined  | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | ref | string | Yes | undefined | ref is exposed as a prop, and can be assigned and used on this component as normal |