Enhancement/disabled mode on button group (#379)

folkehelseinstituttet · Apr 18, 2024 · 54658ba · 54658ba
1 parent b99e889
commit 54658ba
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/src/bootstrap-theme/_dropdown.scss b/src/bootstrap-theme/_dropdown.scss
@@ -1,4 +1,25 @@
 .dropdown-menu {
-  box-shadow: var(--bs-dropdown-box-shadow);
-  width: 100%;
+    box-shadow: var(--bs-dropdown-box-shadow);
+}
+
+.dropdown-item {
+    &.disabled,
+    &[disabled] {
+        cursor: not-allowed;
+        pointer-events: initial;
+
+        [class*="icon-"] {
+            opacity: 0.4;
+        }
+    }
+
+    [class*="icon-"] {
+        margin-right: $fhi-core-space-1;
+        vertical-align: bottom;
+    }
+
+    &.active {
+        box-shadow: ($fhi-core-px * 6) 0 0 ($fhi-core-px * -1) $fhi-core-red-1
+            inset;
+    }
 }
diff --git a/src/bootstrap-theme/_variables.scss b/src/bootstrap-theme/_variables.scss
@@ -1245,8 +1245,8 @@ $dropdown-padding-y: 0;
 // $dropdown-font-size:                $font-size-base !default;
 // $dropdown-color:                    var(--#{$prefix}body-color) !default;
 // $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
-// $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
-// $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
+$dropdown-border-color: transparent;
+$dropdown-border-radius: 0;
 // $dropdown-border-width:             var(--#{$prefix}border-width) !default;
 // $dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 // $dropdown-divider-bg:               $dropdown-border-color !default;
@@ -1262,7 +1262,7 @@ $dropdown-link-active-bg: $fhi-core-grey-light-2;
 
 // $dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 
-// $dropdown-item-padding-y:           $spacer * .25 !default;
+$dropdown-item-padding-y: $fhi-core-space-2;
 // $dropdown-item-padding-x:           $spacer !default;
 
 // $dropdown-header-color:             $gray-600 !default;

diff --git a/src/fhi/blocks/_fhi-button-group.block.scss b/src/fhi/blocks/_fhi-button-group.block.scss
@@ -6,18 +6,23 @@
     &__btn {
         --bs-btn-border-radius: #{$fhi-core-px * 24};
         --bs-btn-active-border-color: #{$fhi-core-white};
+        --bs-btn-disabled-border-color: transparent;
 
         border: ($fhi-core-px * 2) solid transparent;
         border-radius: var(--bs-btn-border-radius) !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
         margin-left: 0 !important;
+        padding-right: $fhi-core-space-3;
+        padding-left: $fhi-core-space-3;
         text-align: left;
 
-        &.btn:hover:not(.active) {
+        &.btn:hover:not(.active):not([disabled]) {
             background-color: $fhi-core-grey-light-2;
         }
+
+        [class*="icon-"] {
+            margin-right: $fhi-core-space-1;
+            top: $fhi-core-px * -3;
+        }
     }
 
     &__btn.active,
@@ -32,9 +37,10 @@
         &:hover,
         &:focus {
             background-color: $fhi-core-grey-4;
+            color: $fhi-core-white;
             text-decoration: none;
 
-            &:not(.fhi-btn-group__split-btn-toggler) {
+            &:not(.fhi-btn-group__split-btn-toggler):not([disabled]) {
                 cursor: default;
             }
         }
@@ -51,6 +57,10 @@
         border-top-right-radius: 0 !important;
         border-bottom-right-radius: 0 !important;
         padding-right: $fhi-core-space-2 + $fhi-core-space-1;
+
+        &.active:focus-visible {
+            z-index: 2;
+        }
     }
 
     &__split-btn-toggler {
@@ -66,6 +76,7 @@
             @extend .icon-chevron-down;
             border: 0;
             height: $fhi-core-px * 16;
+            margin-top: $fhi-core-px * 3;
             width: $fhi-core-px * 16;
         }