From 68ba5c637af4a808d98cc071dc1eac6c935fe930 Mon Sep 17 00:00:00 2001 From: lgk-bsw Date: Thu, 21 Sep 2023 12:07:08 +0200 Subject: [PATCH] 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 --- dist/style.scss | 2 +- dist/styles/_general.scss | 7 ++++++- dist/styles/_layout.scss | 16 ++++++++++++++-- dist/styles/_status.scss | 8 ++------ dist/styles/mixins/_misc.scss | 27 +++++++++++++++++++++++---- package-lock.json | 4 ++-- package.json | 2 +- src/components/MenuItem.tsx | 27 +++++++++++++++++++-------- src/docs/data/docs.json | 2 +- src/docs/data/license-report.json | 2 +- src/docs/examples/MenuItem.tsx | 30 ++++++++++++++++++++++++++++++ 11 files changed, 100 insertions(+), 27 deletions(-) create mode 100644 src/docs/examples/MenuItem.tsx diff --git a/dist/style.scss b/dist/style.scss index e0360803..1cebd9de 100644 --- 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 index 815e9b79..8281bfda 100644 --- 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 index 31c1cec6..c82c9e36 100644 --- 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 index cb2f684e..25c0cfb3 100644 --- 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 index 1ed4bdd4..626ca077 100644 --- 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 index 5499a16f..88a2ffd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "blue-react", - "version": "9.1.0", + "version": "9.1.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "blue-react", - "version": "9.1.0", + "version": "9.1.2", "license": "LGPL-3.0-or-later", "dependencies": { "@popperjs/core": "^2.11.5", diff --git a/package.json b/package.json index f858f085..97731947 100644 --- 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 index 4345d776..43f9db2b 100644 --- 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 }, <> - - {icon} - + {props.icon !== undefined && ( + + {icon} + + )} {iconForActive && ( {iconForActive} )} - {props.label && {props.label}} + {props.label && ( + + {props.label} + + )} {props.children && ( )} diff --git a/src/docs/data/docs.json b/src/docs/data/docs.json index 1a317f2f..7e56d4f7 100644 --- a/src/docs/data/docs.json +++ b/src/docs/data/docs.json @@ -1 +1 @@ -{"src\\components\\ActionMenu.tsx":{"description":"The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.","displayName":"ActionMenu","methods":[],"props":{"hideToggleAction":{"required":false,"tsType":{"name":"boolean"},"description":"Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"toggleIcon":{"required":false,"tsType":{"name":"any"},"description":"Icon component for the toggle icon."},"className":{"required":false,"tsType":{"name":"string"},"description":""},"break":{"required":false,"tsType":{"name":"union","raw":"breakOption | \"none\"","elements":[{"name":"breakOption"},{"name":"literal","value":"\"none\""}]},"description":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Link } from \"react-router-dom\"\r\n\r\nexport default function ActionMenuExample() {\r\n const [isChecked, setIsChecked] = useState(false)\r\n const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n const style = {\r\n width: isChecked && window.innerWidth > 600 ? \"600px\" : \"\"\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n Open in full view\r\n {\" \"}\r\n \r\n Open in new tab\r\n \r\n
\r\n
\r\n