Better CSS var support for custom scrollbar mixin

* Mixin was renamed to `blue-custom-scrollbar()` and params have changed! * Old `@mixin custom-scrollbar()` is marked as deprecated
bruegmann · Sep 21, 2023 · 68ba5c6 · 68ba5c6
1 parent ef0eec4
commit 68ba5c6
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 27 deletions.
diff --git a/dist/style.scss b/dist/style.scss
@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.1.0-alpha2 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.1.2-alpha2 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 

diff --git a/dist/styles/_general.scss b/dist/styles/_general.scss
@@ -1,4 +1,9 @@
-@include custom-scrollbar($scrollbar-thumb-color, transparent, false);
+@include blue-custom-scrollbar(
+    transparent,
+    rgba($scrollbar-thumb-color, 0.5),
+    rgba($scrollbar-thumb-color, 0.6),
+    rgba($scrollbar-thumb-color, 0.7)
+);
 
 * {
     scrollbar-width: thin;

diff --git a/dist/styles/_layout.scss b/dist/styles/_layout.scss
@@ -114,7 +114,13 @@
 .blue-normal-scrollbar,
 .modal-body,
 .blue-page {
-    @include custom-scrollbar($body-color, $body-bg, 0.3rem);
+    @include blue-custom-scrollbar(
+        var(--bs-body-bg, #{$body-bg}),
+        var(--bs-tertiary-color, #{$body-color}),
+        var(--bs-secondary-color, #{$body-color}),
+        var(--bs-body-color, #{$body-color}),
+        0.3rem
+    );
 }
 
 .blue-page {
@@ -203,7 +209,13 @@
 }
 
 .blue-sidebar {
-    @include custom-scrollbar($sidebar-color, var(--blue-sidebar-bg), 0.3rem);
+    @include blue-custom-scrollbar(
+        var(--blue-sidebar-bg),
+        rgba($sidebar-color, 0.5),
+        rgba($sidebar-color, 0.6),
+        rgba($sidebar-color, 0.7),
+        0.3rem
+    );
     overflow-y: auto;
 }
 

diff --git a/dist/styles/_status.scss b/dist/styles/_status.scss
@@ -15,7 +15,7 @@
 }
 
 .blue-status-alert {
-    @include custom-scrollbar(white, rgba(black, 0.5), 0.3rem);
+    @extend .blue-normal-scrollbar;
 
     &:after {
         content: "";
@@ -26,11 +26,7 @@
         top: 50%;
         left: 0;
         pointer-events: none;
-        background-image: radial-gradient(
-            circle,
-            rgba(black, 0.7) 10%,
-            transparent 10.01%
-        );
+        background-image: radial-gradient(circle, rgba(black, 0.7) 10%, transparent 10.01%);
         background-repeat: no-repeat;
         background-position: 50%;
         animation: alert-in 1s;

diff --git a/dist/styles/mixins/_misc.scss b/dist/styles/mixins/_misc.scss
@@ -1,13 +1,32 @@
+/**
+@deprecated Will be removed in a future version. Please use `blue-custom-scrollbar` instead!
+*/
 @mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
+    @include blue-custom-scrollbar(
+        $bg-color,
+        rgba($thumb-color, 0.5),
+        rgba($thumb-color, 0.6),
+        rgba($thumb-color, 0.7),
+        $track-border-radius
+    );
+}
+
+@mixin blue-custom-scrollbar(
+    $bg-color,
+    $thumb-color,
+    $thumb-color-hover: $thumb-color,
+    $thumb-color-focus: $thumb-color,
+    $track-border-radius: 0
+) {
     ::-webkit-scrollbar-thumb {
-        background-color: rgba($thumb-color, 0.5);
-        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.2), inset 0 -1px 0 rgba($thumb-color, 0.17);
+        background-color: $thumb-color;
+        box-shadow: inset 1px 1px 0 rgba(white, 0.2), inset 0 -1px 0 rgba(white, 0.17);
     }
     ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba($thumb-color, 0.6);
+        background-color: $thumb-color-hover;
     }
     ::-webkit-scrollbar-thumb:active {
-        background-color: rgba($thumb-color, 0.7);
+        background-color: $thumb-color-focus;
     }
 
     ::-webkit-scrollbar-track {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.1.0",
+    "version": "9.1.2",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -43,6 +43,11 @@ export interface MenuItemProps {
      */
     label?: any
 
+    /**
+     * Addition to class name of label wrapper element
+     */
+    labelClassName?: string
+
     /**
      * Should be set as active.
      */
@@ -260,19 +265,25 @@ export default function MenuItem(props: MenuItemProps) {
                     type: props.type
                 },
                 <>
-                    <span
-                        className={clsx("blue-menu-item-icon", props.iconClassName, {
-                            hasIconForActive: iconForActive
-                        })}
-                    >
-                        {icon}
-                    </span>
+                    {props.icon !== undefined && (
+                        <span
+                            className={clsx("blue-menu-item-icon", props.iconClassName, {
+                                hasIconForActive: iconForActive
+                            })}
+                        >
+                            {icon}
+                        </span>
+                    )}
                     {iconForActive && (
                         <span className={clsx("blue-menu-item-icon iconForActive", props.iconClassName)}>
                             {iconForActive}
                         </span>
                     )}
-                    {props.label && <span className="blue-menu-item-label text-truncate">{props.label}</span>}
+                    {props.label && (
+                        <span className={clsx("blue-menu-item-label text-truncate", props.labelClassName)}>
+                            {props.label}
+                        </span>
+                    )}
                     {props.children && (
                         <Caret open={showDropdown} mirrored className="blue-menu-item-dropdown-caret mt-2" />
                     )}

diff --git a/src/docs/data/docs.json b/src/docs/data/docs.json
diff --git a/src/docs/data/license-report.json b/src/docs/data/license-report.json
diff --git a/src/docs/examples/MenuItem.tsx b/src/docs/examples/MenuItem.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react"
+import MenuItem from "../../components/MenuItem"
+import SidebarMenu from "../../components/SidebarMenu"
+
+export default function MenuItemExample() {
+    const [navigationSource, setNavigationSource] = useState<"user" | "default">("default")
+
+    return (
+        <div className="bg-primary position-relative">
+            <SidebarMenu sidebarClass="position-static shadow-none overflow-visible" menuClass="overflow-visible">
+                <div className="blue-sidebar-visible-on-open blue-sidebar-menu-horizontal-on-open">
+                    <MenuItem
+                        label="Default"
+                        labelClassName="text-center w-100"
+                        onClick={() => setNavigationSource("default")}
+                        isActive={navigationSource === "default"}
+                    />
+
+                    <MenuItem
+                        label="User"
+                        labelClassName="text-center w-100"
+                        onClick={() => setNavigationSource("user")}
+                        isActive={navigationSource === "user"}
+                    />
+                </div>
+            </SidebarMenu>
+            <p className="p-3 bg-body">Resize the browser to see how the sidebar and its items behave.</p>
+        </div>
+    )
+}