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

package/COMPONENT-GOTCHAS.md

@@ -1094,6 +1094,19 @@ and submenu items. `disabled` is unchanged and still works independently.
 **Apply:** `locked: true` alone now prevents interaction; you no longer need to also set
 `disabled: true`.
 
+### `SideBar` menu-item labels clipped the bottom of descenders (g/y/p/q/j) — fixed
+
+`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.
+
+**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"`.
+
 ### `KanbanBoard`'s `permissions.isViewable: false` hides everything, including header actions
 
 Not just the columns — the select/edit/create header bar disappears too, since the whole component

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

@@ -24,6 +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", overflow: "hidden", 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 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 })] }));
 };
 exports.default = TruncatedTextWithTooltip;

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

@@ -22,6 +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", overflow: "hidden", 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 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 })] }));
 };
 export default TruncatedTextWithTooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.41",
+  "version": "2.4.2-beta.42",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",
@@ -53,7 +53,8 @@
     "format:check": "prettier --check .",
     "format": "prettier --write .",
     "test:coverage": "jest --coverage",
-    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "prepare": "husky"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -105,6 +106,9 @@
       "**/?(*.)+(spec|test).[jt]s?(x)"
     ]
   },
+  "lint-staged": {
+    "**/*Props.{ts,tsx}": "eslint"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -150,9 +154,11 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "framer-motion": "^10.18.0",
     "globals": "^17.6.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^17.5.1",
     "postcss": "^8.5.4",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",