fix #1357: buttons group not active (#1358)

src/pages/_includes/forms/form-elements-4.html

@@ -3,47 +3,32 @@
 {% include parts/form/selectgroup-payments.html %}
 {% include parts/form/selectgroup-project-manager.html %}
 
-
 <div class="mb-3">
 	<label class="form-label">Buttons group</label>
-	<div class="btn-group w-100">
+	{% include ui/button-group.html items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
-		<button type="button" class="btn">1 min</button>
-		<button type="button" class="btn btn-primary">5 min</button>
-		<button type="button" class="btn">10 min</button>
-		<button type="button" class="btn">30 min</button>
-	</div>
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Buttons group with dropdown</label>
-	<div class="btn-group w-100">
+	{% include ui/button-group.html items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %}
-		<button type="button" class="btn">Option 1</button>
+</div>
-		<button type="button" class="btn btn-primary">Option 2</button>
+
-		<div class="btn-group" role="group">
+<div class="row">
-			<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<div class="col">
-				Other
+		<div class="mb-3">
-			</button>
+			<label class="form-label">Vertical buttons group</label>
-			<div class="dropdown-menu dropdown-menu-end">
+			{% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%}
-				<a class="dropdown-item" href="#">
+		</div>
-					Option 4
+	</div>
-				</a>
+	<div class="col">
-				<a class="dropdown-item" href="#">
+		<div class="mb-3">
-					Option 5
+			<label class="form-label">Vertical with dropdown</label>
-				</a>
+			{% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
-				<a class="dropdown-item" href="#">
-					Option 6
-				</a>
-			</div>
 		</div>
 	</div>
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Toolbar</label>
-	<div class="btn-group w-100">
+	{% include ui/button-group.html icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
-		{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
-		{% for icon in icons %}
-		{% include ui/button.html  icon=icon icon-only=true %}
-		{% endfor %}
-	</div>
 </div>

src/pages/_includes/ui/button-group.html

@@ -0,0 +1,44 @@
+{% assign items = include.items | split: ',' %}
+{% assign icons = include.icons | split: ',' %}
+
+{% assign id = include.id %}
+
+<div class="btn-group{% if include.vertical %}-vertical{% endif %}{% if include.fluid %} w-100{% endif %}"role="group">
+
+	{% for item in items %}
+	{% if include.radio %}
+	<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
+	{% endif %}
+	<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }}</{% if include.radio %}label{% else %}button{% endif %}>
+	{% endfor %}
+
+	{% for icon in icons %}
+	{% if include.radio %}
+	<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
+	{% endif %}
+	<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} class="btn btn-icon{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{% include ui/icon.html icon=icon %}</{% if include.radio %}label{% else %}button{% endif %}>
+	{% endfor %}
+
+	{% if include.dropdown %}
+	<div class="btn-group" role="group">
+		{% if include.radio %}
+		<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-dropdown" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
+		{% endif %}
+		<{% if include.radio %}label for="btn-radio-{{ id }}-dropdown"{% else %}button{% endif %} class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			Other
+		</{% if include.radio %}label{% else %}button{% endif %}>
+		{% include ui/dropdown-menu.html %}
+		<div class="dropdown-menu dropdown-menu-end">
+			<a class="dropdown-item" href="#">
+				Option 4
+			</a>
+			<a class="dropdown-item" href="#">
+				Option 5
+			</a>
+			<a class="dropdown-item" href="#">
+				Option 6dropdown-menu
+			</a>
+		</div>
+	</div>
+	{% endif %}
+</div>

src/pages/_includes/ui/dropdown-menu.html

@@ -1,6 +1,5 @@
 <div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.menu %}
-
 		{% assign menu = include.menu | split: ',' %}
 
 		{% for item in menu %}

src/scss/_core.scss

@@ -17,6 +17,7 @@
 @import "ui/badges";
 @import "ui/breadcrumbs";
 @import "ui/buttons";
+@import "ui/button-group";
 @import "ui/calendars";
 @import "ui/carousel";
 @import "ui/cards";

src/scss/_variables.scss

@@ -183,7 +183,9 @@ $border-color-light-translucent: rgba($text-muted, $border-light-opacity) !defau
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: var(--#{$prefix}gray-100) !default;
+$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
+$active-color: var(--#{$prefix}primary) !default;
+$active-border-color: var(--#{$prefix}primary) !default;
 
 $hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
 

src/scss/ui/_button-group.scss

@@ -0,0 +1,14 @@
+.btn-group,
+.btn-group-vertical {
+  > .btn-check:checked + .btn,
+  > .btn:active,
+  > .btn.active {
+    z-index: 5;
+  }
+
+  > .btn-check:focus + .btn,
+  > .btn:hover,
+  > .btn:focus {
+    z-index: 1;
+  }
+}

src/scss/ui/_buttons.scss

@@ -6,9 +6,12 @@
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
   --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-bg};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
 
   display: inline-flex;
   align-items: center;
@@ -38,6 +41,12 @@
   .badge {
     top: auto;
   }
+
+  .btn-check + &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
+  }
 }
 
 .btn-link {

src/scss/ui/forms/_form-selectgroup.scss

@@ -94,9 +94,9 @@ Select group
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
-  color: var(--#{$prefix}primary);
+  color: #{$active-color};
-  background: rgba(var(--#{$prefix}primary-rgb), .04);
+  background: #{$active-bg};
-  border-color: var(--#{$prefix}primary);
+  border-color: #{$active-border-color};
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {