pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.43

package/COMPONENT-GOTCHAS.md

@@ -1098,14 +1098,32 @@ and submenu items. `disabled` is unchanged and still works independently.
 
 `TextTruncation.tsx`'s label used `overflow="hidden"` (both axes) with `lineHeight="1"`, so the line
 box was exactly font-size tall and any glyph descender got clipped flat — reported live on
-lfour.pixelizetech.com ("Legal Requests"). Fixed by splitting the axes: `overflowX="hidden"` (kept,
-needed for the ellipsis) and `overflowY="visible"`, which the browser computes as `auto` — no layout
-height change, descenders just aren't painted-over anymore. If you rolled your own workaround (extra
-line-height, padding-bottom) for this on a consumer's own nav text, it's no longer needed upstream.
+lfour.pixelizetech.com ("Legal Requests"). Fixed with `overflowX="hidden"` (kept, needed for the
+ellipsis) plus `overflowY="clip"` and `sx={{ overflowClipMargin: "3px" }}` — `clip` (unlike `hidden`
+paired with `visible`) never promotes the axis to `auto`, so the label does not become its own
+scroll container; the margin just lets the descender's ink bleed 3px past the box without changing
+its layout height. If you rolled your own workaround (extra line-height, padding-bottom) for this on
+a consumer's own nav text, it's no longer needed upstream.
 
 **Apply:** nothing to do — this was a rendering bug, not a prop. If you build another
-truncated-single-line label elsewhere in this library, split `overflowX`/`overflowY` the same way
-rather than a single `overflow="hidden"`.
+truncated-single-line label elsewhere in this library, use `overflow: clip` + `overflow-clip-margin`
+for the non-ellipsis axis — never pair `hidden` with a plain `visible` axis (CSS computes that to
+`auto`, turning every label into its own 1px-overflowing scroll container).
+
+### `SideBar` nav list showed a bare, unthemed scrollbar when items overflowed — fixed
+
+`SideBar.tsx`'s `#sidebar-scroll-container` used `Constants/Sidebar.ts`'s `FlexCss`, which only set
+the `::-webkit-scrollbar-*` pseudo-elements — never the standard `scrollbar-width`/`scrollbar-color`
+properties. Chromium honors the webkit pseudo-elements, but any engine that reads the standard
+properties first, or doesn't support the pseudo-elements at all, fell back to the browser's default
+scrollbar: a plain bar with no relation to the dark sidebar theme, showing up the moment a nav list
+(enough sections/items) overflowed the viewport. Fixed by switching to the already-written
+`cssForScrollBar(theme)` (same file), which sets `scrollbarWidth`/`scrollbarColor` **and** the
+webkit pseudo-elements, themed to `sidebar.background[500]` / `primary[500]`, hidden until hover.
+`FlexCss` is removed — `cssForScrollBar` is now the only scrollbar treatment the SideBar uses.
+
+**Apply:** nothing to do. If a nav list is long enough to scroll, the bar now stays invisible until
+hovered, in the sidebar's own colors, on every engine — not just Chromium.
 
 ### `KanbanBoard`'s `permissions.isViewable: false` hides everything, including header actions
 

package/dist/Components/SideBar/SideBar.js

@@ -242,7 +242,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                     }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav
                             ? OVERLAY_WIDTH
                             : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: `width 0.26s ${PANEL_EASE}`, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
-                                        ...Sidebar_1.FlexCss,
+                                        ...(0, Sidebar_1.cssForScrollBar)(theme),
                                         transition: "all 0.3s ease",
                                         // (a) larger touch targets for menu rows in overlay mode
                                         ...(overlay

package/dist/Components/SideBar/components/TextTruncation.js

@@ -24,8 +24,8 @@ const TruncatedTextWithTooltip = ({ children, ...props }) => {
         }
         return () => resizeObserver.disconnect();
     }, [children]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflowX: "hidden", 
-                    // overflowY stays visible — a tight lineHeight clips descenders (g/y/p) otherwise.
-                    overflowY: "visible", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflowX: "hidden", overflowY: "clip", 
+                    // clip (not auto) never becomes a scroll container; the margin lets descenders (g/y/p) bleed past it.
+                    sx: { overflowClipMargin: "3px" }, textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
 };
 exports.default = TruncatedTextWithTooltip;

package/dist/Constants/Sidebar.d.ts

@@ -1,40 +1,4 @@
 import type { CustomThemeProps } from "../Theme/themeProps";
+import { ScrollbarStyle } from "../Theme/tokens/builders/scrollbar";
 export declare const HEADER_HEIGHT = "4.3rem";
-export declare const FlexCss: {
-    "&::-webkit-scrollbar": {
-        width: string;
-    };
-    "&::-webkit-scrollbar-track": {
-        background: string;
-    };
-    "&::-webkit-scrollbar-thumb": {
-        background: string;
-        transition: string;
-    };
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: string;
-    };
-};
-export declare const cssForScrollBar: (theme: CustomThemeProps) => {
-    "&::-webkit-scrollbar": {
-        width: string;
-    };
-    "&::-webkit-scrollbar-track": {
-        background: string;
-    };
-    "&::-webkit-scrollbar-thumb": {
-        background: string;
-        borderRadius: string;
-    };
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: string;
-    };
-    "&:hover::-webkit-scrollbar-thumb:hover": {
-        background: string;
-    };
-    scrollbarWidth: string;
-    "&:hover": {
-        scrollbarWidth: string;
-        scrollbarColor: string;
-    };
-};
+export declare const cssForScrollBar: (theme: CustomThemeProps) => ScrollbarStyle;

package/dist/Constants/Sidebar.js

@@ -1,23 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
+exports.cssForScrollBar = exports.HEADER_HEIGHT = void 0;
 const scrollbar_1 = require("../Theme/tokens/builders/scrollbar");
 exports.HEADER_HEIGHT = "4.3rem";
-exports.FlexCss = {
-    "&::-webkit-scrollbar": {
-        width: scrollbar_1.SCROLLBAR_WIDTH,
-    },
-    "&::-webkit-scrollbar-track": {
-        background: "transparent",
-    },
-    "&::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        transition: "background 0.5s",
-    },
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: "var(--chakra-colors-primary-500, #718096)",
-    },
-};
 const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
         width: scrollbar_1.SCROLLBAR_WIDTH,

package/dist/esm/Components/SideBar/SideBar.js

@@ -4,7 +4,7 @@ import { Flex, Text, Image, Box, Skeleton, useBreakpointValue } from "@chakra-ui
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
-import { FlexCss, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
 import { ArrowLeftToLine, ArrowRightToLine, ChevronLeft, Maximize2, MoreVertical, PanelLeft, Plus, X } from "lucide-react";
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
 const Z_SCRIM = 1300;
@@ -236,7 +236,7 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
                     }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx(Box, { width: mobileNav
                             ? OVERLAY_WIDTH
                             : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: `width 0.26s ${PANEL_EASE}`, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
-                                        ...FlexCss,
+                                        ...cssForScrollBar(theme),
                                         transition: "all 0.3s ease",
                                         // (a) larger touch targets for menu rows in overlay mode
                                         ...(overlay

package/dist/esm/Components/SideBar/components/TextTruncation.js

@@ -22,8 +22,8 @@ const TruncatedTextWithTooltip = ({ children, ...props }) => {
         }
         return () => resizeObserver.disconnect();
     }, [children]);
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflowX: "hidden", 
-                    // overflowY stays visible — a tight lineHeight clips descenders (g/y/p) otherwise.
-                    overflowY: "visible", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), _jsx(Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflowX: "hidden", overflowY: "clip", 
+                    // clip (not auto) never becomes a scroll container; the margin lets descenders (g/y/p) bleed past it.
+                    sx: { overflowClipMargin: "3px" }, textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), _jsx(Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
 };
 export default TruncatedTextWithTooltip;

package/dist/esm/Constants/Sidebar.js

@@ -1,20 +1,5 @@
 import { SCROLLBAR_WIDTH } from "../Theme/tokens/builders/scrollbar.js";
 export const HEADER_HEIGHT = "4.3rem";
-export const FlexCss = {
-    "&::-webkit-scrollbar": {
-        width: SCROLLBAR_WIDTH,
-    },
-    "&::-webkit-scrollbar-track": {
-        background: "transparent",
-    },
-    "&::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        transition: "background 0.5s",
-    },
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: "var(--chakra-colors-primary-500, #718096)",
-    },
-};
 export const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
         width: SCROLLBAR_WIDTH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.42",
+  "version": "2.4.2-beta.43",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",