@dhasdk/simple-ui 1.0.55 → 1.0.57

package/README.md

@@ -53,6 +53,11 @@ Tooltip
 
 ## Changelog
 
+1.0.57 - added **`className`** prop to **`ProgressBar`** to style the outer div that is the container
+for the ProgressBar component.
+
+1.0.56 - **`ProgressBar`** fix for z-level when **`showMarkers`** is false
+
 1.0.55 - added **`classNameLabel`** to **GroupCheckBox** and **CheckBox**, added remaining **`className...`** props to **ChecKBoxGroup**, added **`customIcons`** prop to both **CheckBox** and **CheckBoxGroup** components.
 
 1.0.54 - added **`showMarkers`** and **`classNameMarkerFalse`** to the **ProgressBar** component
@@ -1335,13 +1340,14 @@ Full list of props below
 | totalSteps  | **`number`**  | No  | **`undefined`**  | Total number of steps to be displayed in the progress bar.  |
 | currentStep  | **`number`**  | No  | **`undefined`**  | Current (active) step.  |
 | isStep  | **`boolean`**  | Yes  | **`true`**  | Controls whether steps inside the circle are displayed as numbers, or if false, displayed as checkmarks/dashes.  |
+| className | **`string`** | Yes | **`flex items-center w-full`** | Alternate CSS classes to apply to the <strong>div</strong> that is the container for the **ProgressBar** component. |
 | classNameArrowColor  | **`string`**  | Yes  | **`fill-[#305B25]`**  | Controls the color of the arrow that points from last completed step to current step.  |
 | classNameBorderColor  | **`string`**  | Yes  | **`border-[#305B25]`**  | Controls the color of the border around each completed step's circle.  |
 | classNameFillColor | **`string`**  | Yes  | **`bg-green-500`**, see notes for **showMarkers** below  | Controls the fill color of each completed step's circle.  |
 | classNameGradient  | **`string`**  | Yes  | **`from-[#305B25] to-[#5AAB46]`**  | Controls the colors used in the gradient for the bars between each completed step.  |
-| classNameMarkerFalse  | **`string`**  | Yes  | **`-z-10 -mx-[0.1em] w-full h-2 bg-gray-300 rounded-full`**  | The classNames applied to the base div that provides the background (shape and color) to the progress bar.  |
+| classNameMarkerFalse  | **`string`**  | Yes  | **`z-0 -mx-[0.1em] w-full h-2 bg-gray-300 rounded-full`**  | The classNames applied to the base div that provides the background (shape and color) to the progress bar.  |
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps ProgressBar for testing purposes |
-| showMarkers | boolean | Yes | true | Sets whether progress markers or checkboxes are displayed. If set to false, a single long bar w/o individual steps is presented, with the progress indicated by a 2nd bar overlaying the 1st. The overlaying progress bar styling can be changed via the **`classNameFillColor`** prop. Default values for **classNameFillColor** in this use case are **`z-0 -mx-[0.1em] h-2 bg-blue-300 rounded-full`** |
+| showMarkers | boolean | Yes | true | Sets whether progress markers or checkboxes are displayed. If set to false, a single long bar w/o individual steps is presented, with the progress indicated by a 2nd bar overlaying the 1st. The overlaying progress bar styling can be changed via the **`classNameFillColor`** prop. Default values for **classNameFillColor** in this use case is **`z-10 -mx-[0.1em] h-2 bg-blue-300 rounded-full`** |
 
 1. Base CSS Classes