@geotab/zenith 3.9.0-beta.3 → 3.9.0-beta.4

package/README.md

@@ -47,6 +47,35 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.9.0
+
+- Added basic SSR (server-side rendering) support
+- `Card` clickable title is now a `<button>` element for keyboard accessibility
+- Add `data-analytics-id` support to `Card` interactive sub-components (button, toggle)
+- `FiltersBar` active filters button now exposes `aria-label="Active filters: N"` for screen readers
+- `FiltersBar` now supports right-aligned components
+- `Table` first column visual update
+- Add nested subheader support to `Table`
+- Fix `Select` component keyboard accessibility issue
+- Fix `Tooltip` overlapping popup
+- Fix `Tooltip` `onBlur` crash causing Sentry NotFoundError on removeChild
+- `Calendar` accessibility improvements
+- Fix year dropdown scrolling to earliest year instead of selected year in `DateRange`
+- Add customizable legend values for `Chart`
+- Fix month labels in `Chart`
+- Fix last item obscured by action buttons in `GreatLakes Nav` edit mode
+- RTL (right-to-left) orientation based on language
+- Update font handling for Arabic language
+- Fix `TextInput` error message cutoff
+- Add `@rem` CSS variable as standard unit for rem-based spacing
+- Convert button and interactive control styles from `px` to `rem`
+- Edit file upload drag & drop behaviour
+- Fix field error integration in `FormField`
+
+### 3.8.1
+
+- Fix horizontal pie chart center text scaling and legend toggle
+
 ### 3.8.0
 
 - Create `FileUpload` component

package/dist/chart/pieChart/centerTextPlugin.js

@@ -6,7 +6,6 @@ const getCssVar = (el, name) => { var _a, _b; return (_b = (_a = zen_1.zen.getCo
 const centerTextPlugin = (centerText) => ({
     id: "zenithPieCenterText",
     afterDraw(chart) {
-        var _a;
         if (!centerText || centerText.value === undefined) {
             return;
         }
@@ -15,7 +14,7 @@ const centerTextPlugin = (centerText) => ({
         const centerX = left + width / 2;
         const centerY = top + height / 2;
         const css = (name) => getCssVar(chart.canvas, name);
-        const fontFamily = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, chart.canvas).fontFamily) || "Roboto";
+        const fontFamily = css("--main-font");
         const hasLabel = !!centerText.label;
         const meta = chart.getDatasetMeta(0);
         const controllerRadius = meta.controller.innerRadius;

package/dist/chart/pieChart.js

@@ -18,6 +18,7 @@ const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
 const utils_1 = require("../commonHelpers/utils");
+const zen_1 = require("../utils/zen");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
@@ -43,12 +44,18 @@ const PieChart = (_a) => {
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const legendId = (0, react_1.useId)();
     const tooltipId = (0, react_1.useId)();
+    const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        var _a;
+        const el = containerRef.current;
+        const styles = el ? (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el) : undefined;
+        const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
+        const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
         auto_1.Chart.defaults.font = {
-            family: "Roboto",
+            family: fontFamily,
             size: fontSize
         };
-        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+        auto_1.Chart.defaults.color = color;
     }, [fontSize, dark]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
@@ -91,6 +98,6 @@ const PieChart = (_a) => {
     const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const legendRight = isHorizontal;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
 };
 exports.PieChart = PieChart;

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,4 +1,5 @@
 @import "../common.less";
+@import "../typography/typography.less";
 
 @pill-min-width-default: 30px;
 @pill-max-width-default: 200px;
@@ -97,9 +98,9 @@
         }
     }
     &.zen-pill-new-content--drive {
-        .body-04-drive();
+        .body-04-mobile-drive();
     }
     &.zen-pill-new-content--drive-tablet {
-        .body-04-drive();
+        .body-04-tablet-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -1,4 +1,5 @@
-@import "../common.less";
+@import "../typography/typography.less";
+@import "../colors/colors.less";
 
 .zen-pill-content {
     .body-04();

package/dist/commonStyles/pillStyles/pillTextContent.less

@@ -12,9 +12,9 @@
         height: 20px;
     }
     &.zen-pill-text-content--drive {
-        .body-04-drive();
+        .body-04-mobile-drive();
     }
     &.zen-pill-text-content--drive-tablet {
-        .body-04-drive();
+        .body-04-tablet-drive();
     }
 }