fix(@clayui/css): Progress Bar sets a min-width on progress-group-addon to prevent resizing progress bar when numbers are changed to icons

fix(@clayui/css): Progress Bar adds Sass map `$progress-group-addon`

fixes #4024

Author: pat270

packages/clay-css/src/scss/components/_progress-bars.scss

@@ -85,17 +85,18 @@
 }
 
 .progress-group-addon {
-	font-size: $progress-group-addon-font-size;
-	font-weight: $progress-group-addon-font-weight;
-	margin-right: $progress-group-addon-spacer-x;
-	text-align: center;
+	@include clay-css($progress-group-addon);
 
 	&:first-child {
-		padding-left: 0;
+		$first-child: setter(map-get($progress-group-addon, first-child), ());
+
+		@include clay-css($first-child);
 	}
 
 	&:last-child {
-		padding-right: 0;
+		$last-child: setter(map-get($progress-group-addon, last-child), ());
+
+		@include clay-css($last-child);
 	}
 }
 

packages/clay-css/src/scss/variables/_progress-bars.scss

@@ -23,7 +23,25 @@ $progress-group-subtitle: () !default;
 
 $progress-group-addon-font-size: null !default;
 $progress-group-addon-font-weight: null !default;
-$progress-group-addon-spacer-x: 1rem !default;
+$progress-group-addon-spacer-x: 0.25rem !default;
+
+$progress-group-addon: () !default;
+$progress-group-addon: map-deep-merge(
+	(
+		font-size: $progress-group-addon-font-size,
+		font-weight: $progress-group-addon-font-weight,
+		margin-right: $progress-group-addon-spacer-x,
+		min-width: 2rem,
+		text-align: center,
+		first-child: (
+			padding-left: 0,
+		),
+		last-child: (
+			padding-right: 0,
+		),
+	),
+	$progress-group-addon
+);
 
 $progress-group-stacked-progress-margin-bottom: 0.25rem !default;
 $progress-group-stacked-progress-margin-top: 0.25rem !default;