@dhasdk/simple-ui 1.0.59 → 1.0.60

package/README.md

@@ -53,6 +53,8 @@ Tooltip
 
 ## Changelog
 
+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.
+
 1.0.59 - added **method** property to the **RadioOption** type for RadioGroup, allowing user to pass in a callback method for checked/unchecked state changes
 
 1.0.58 - removed console.log statement from **`RadioGroup`** component
@@ -793,11 +795,13 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| bridgePraent   | boolean   | Yes      | {false} | When true, the lines that denote the relationships between parent CheckBoxes and their children are extended at the root level to match root level CheckBoxes to one another. In the above examples, compare 'Multi-Level' and 'bridgeParent' to see the differences. |
+| bridgeParent   | boolean   | Yes      | {false} | When true, the lines that denote the relationships between parent CheckBoxes and their children are extended at the root level to match root level CheckBoxes to one another. In the above examples, compare 'Multi-Level' and 'bridgeParent' to see the differences. |
 | className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. Passed to all child CheckBox components.|
+| 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. Passed to all child CheckBox components.|
 | classNameLabel | string | Yes | **`'inline-flex items-center gap-1 text-base md:text-lg'`** | alternate css classes to add/change styling of the **label** html element used by this **CheckBox**. Passed to all child CheckBox components.|
-| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. Passed to all child CheckBox components. |
+| classNameSvg | string | Yes | **`'w-4 h-7'`**, if icon is true add **`ms-1`** | This prop is applied to the global SVG itself, and is more appropriate for size and positioning |
+| classNameSvgLine | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. Passed to all child CheckBox components. |
 | customIcons | map | Yes | default icons | A list of custom icons to use for checked, unchecked, and indeterminate states. See Custom Icons usage code example below. |
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBoxGroup 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. |
@@ -812,9 +816,11 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | ----------- | -------- | -------- | -------- | ----------- |
 | ariaLabel   | string   | Yes  | 'CheckBox Component' | The **aria-label** to assign to this CheckBox |
 | 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. |
 | classNameLabel | string | Yes | **`'inline-flex items-center gap-1 text-base md:text-lg'`** | alternate css classes to add/change styling of the **label** html element used by this **CheckBox**. |
-| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. 
+| classNameSvg | string | Yes | **`'w-4 h-7'`**, if icon is true add **`ms-1`** | This prop is applied to the global SVG itself, and is more appropriate for size and positioning |
+| classNameSvgLine | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. 
 | customIcons | map | Yes | default icons | A list of custom icons to use for checked, unchecked, and indeterminate states. See Custom Icons usage code example below. |
 | 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. |