feat(listbox): add listbox component styling (#193)

Author: mlmoravek

package-lock.json

@@ -0,0 +1,95 @@
+/* @docs */
+/* @docs */
+
+/* @bootstrap docs */
+// $list-group-color:                  var(--#{$prefix}body-color);
+// $list-group-bg:                     var(--#{$prefix}body-bg);
+// $list-group-border-color:           var(--#{$prefix}border-color);
+// $list-group-border-width:           var(--#{$prefix}border-width);
+// $list-group-border-radius:          var(--#{$prefix}border-radius);
+
+// $list-group-item-padding-y:         $spacer * .5;
+// $list-group-item-padding-x:         $spacer;
+// // fusv-disable
+// $list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
+// $list-group-item-color-scale:       40%; // Deprecated in v5.3.0
+// // fusv-enable
+
+// $list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
+// $list-group-active-color:           $component-active-color;
+// $list-group-active-bg:              $component-active-bg;
+// $list-group-active-border-color:    $list-group-active-bg;
+
+// $list-group-disabled-color:         var(--#{$prefix}secondary-color);
+// $list-group-disabled-bg:            $list-group-bg;
+
+// $list-group-action-color:           var(--#{$prefix}secondary-color);
+// $list-group-action-hover-color:     var(--#{$prefix}emphasis-color);
+
+// $list-group-action-active-color:    var(--#{$prefix}body-color);
+// $list-group-action-active-bg:       var(--#{$prefix}secondary-bg);
+/* @bootstrap docs */
+
+.listbox {
+    position: relative;
+    border: var(--#{$prefix}list-group-border-width) solid
+        var(--#{$prefix}list-group-border-color);
+
+    .list-group-item {
+        border-width: 0 0 var(--#{$prefix}list-group-border-width);
+    }
+
+    > .list-group-item:last-child {
+        border-bottom: unset;
+    }
+
+    .list-group-list {
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        position: relative;
+        border-radius: inherit;
+
+        &:not(:first-child) {
+            &,
+            > .list-group-item:first-child {
+                border-top-left-radius: unset;
+                border-top-right-radius: unset;
+            }
+        }
+
+        &:not(:last-child) {
+            &,
+            > .list-group-item:last-child {
+                border-bottom-left-radius: unset;
+                border-bottom-right-radius: unset;
+            }
+        }
+
+        &:last-child {
+            > .list-group-item:last-child {
+                border-bottom: unset;
+            }
+        }
+    }
+
+    &.selectable {
+        .list-group-list .list-group-item {
+            cursor: pointer;
+
+            &.focused,
+            &:hover {
+                &:not(.active) {
+                    color: var(--#{$prefix}list-group-action-hover-color);
+                    background-color: var(
+                        --#{$prefix}list-group-action-hover-bg
+                    );
+                }
+
+                &.active {
+                    filter: brightness(95%);
+                }
+            }
+        }
+    }
+}

src/assets/scss/components/_listbox.scss

@@ -22,6 +22,7 @@
 @import "components/field";
 @import "components/icon";
 @import "components/input";
+@import "components/listbox";
 @import "components/loading";
 @import "components/menu";
 @import "components/modal";

src/assets/scss/theme.scss

@@ -12,6 +12,7 @@ export default [
     "Field",
     "Icon",
     "Input",
+    "Listbox",
     "Loading",
     "Menu",
     "Modal",

src/components.ts

@@ -252,6 +252,22 @@ const bootstrapConfig: OrugaOptions = {
         iconRightClass: "icon-right",
         counterClass: "help counter",
     },
+    listbox: {
+        override: true,
+        rootClass: "listbox list-group",
+        selectableClass: "selectable",
+        filterableClass: "filterable",
+        disabledClass: "disabled",
+        headerClass: "list-group-header list-group-item",
+        filterClass: "list-group-filter list-group-item",
+        footerClass: "list-group-footer list-group-item",
+        emptyClass: "list-group-empty list-group-item",
+        listClass: "list-group-list",
+        itemClass: "list-group-item",
+        itemSelectedClass: "active",
+        itemFocusedClass: "focused",
+        itemDisabledClass: "disabled",
+    },
     loading: {
         override: true,
         rootClass: "loading",