npm - @wallarm-org/design-system - Versions diffs - 4.3.2 → 4.3.3-rc-fix-WDS-192.1 - Mend

@wallarm-org/design-system 4.3.2 → 4.3.3-rc-fix-WDS-192.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/components/SimpleCharts/Chart/classes.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-const chartRootClasses = "group/chart relative flex flex-col w-full min-h-196 bg-bg-surface-1 border border-border-primary-light rounded-8 overflow-clip";
+const chartRootClasses = "group/chart relative flex flex-col w-full min-h-196 has-[[data-slot=column-chart]]:min-h-128 bg-bg-surface-1 border border-border-primary-light rounded-8 overflow-clip";
 const chartHeaderClasses = "flex items-center justify-between h-32 shrink-0 pl-12 pr-4 text-text-primary";
 const chartEmptyClasses = "flex flex-1 items-center justify-center px-12 py-24 text-center";
 const chartActionsVariants = cva('flex items-center gap-4 ml-auto', {

package/dist/components/SimpleCharts/ColumnChart/ColumnChartBody.d.ts CHANGED Viewed

@@ -3,7 +3,10 @@ export interface ColumnChartBodyProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     /** Plot slots — `<LineChartGrid>`, `<ColumnChartXAxis>`, `<LineChartYAxis>`, `<ColumnChartStack>`, `<LineChartTooltip>`. */
     children?: ReactNode;
-    /** Plot height passed to recharts' `<ResponsiveContainer>`. Defaults to the Figma 164px. */
+    /**
+     * Fixed plot height in pixels. Leave it unset to follow the card: the plot starts at the
+     * Figma 164px (card 220) and grows or shrinks with the `<Chart>` height, down to a 128px card.
+     */
     height?: number;
 }
 export declare const ColumnChartBody: FC<ColumnChartBodyProps>;

package/dist/components/SimpleCharts/ColumnChart/ColumnChartBody.js CHANGED Viewed

@@ -5,88 +5,93 @@ import { ComposedChart, ResponsiveContainer } from "recharts";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { LineChartDataContext } from "../LineChart/LineChartContext.js";
-import { columnChartBodyClasses } from "./classes.js";
-import { COLUMN_CARD_HEIGHT, COLUMN_DEFAULT_BODY_MARGIN, COLUMN_HEADER_HEIGHT } from "./constants.js";
-const DEFAULT_BODY_HEIGHT = COLUMN_CARD_HEIGHT - COLUMN_HEADER_HEIGHT;
+import { columnChartBodyClasses, columnChartBodyFillClasses, columnChartContainerFillClasses } from "./classes.js";
+import { COLUMN_DEFAULT_BODY_MARGIN } from "./constants.js";
 const ColumnChartBody = (t0)=>{
-    const $ = c(22);
+    const $ = c(24);
     let children;
     let className;
+    let height;
     let props;
     let ref;
-    let t1;
     if ($[0] !== t0) {
-        ({ height: t1, className, ref, children, ...props } = t0);
+        ({ height, className, ref, children, ...props } = t0);
         $[0] = t0;
         $[1] = children;
         $[2] = className;
-        $[3] = props;
-        $[4] = ref;
-        $[5] = t1;
+        $[3] = height;
+        $[4] = props;
+        $[5] = ref;
     } else {
         children = $[1];
         className = $[2];
-        props = $[3];
-        ref = $[4];
-        t1 = $[5];
+        height = $[3];
+        props = $[4];
+        ref = $[5];
     }
-    const height = void 0 === t1 ? DEFAULT_BODY_HEIGHT : t1;
     const testId = useTestId("body");
     const dataCtx = useContext(LineChartDataContext);
+    const fill = void 0 === height;
+    const t1 = fill && columnChartBodyFillClasses;
     let t2;
-    if ($[6] !== className) {
-        t2 = cn(columnChartBodyClasses, className);
+    if ($[6] !== className || $[7] !== t1) {
+        t2 = cn(columnChartBodyClasses, t1, className);
         $[6] = className;
-        $[7] = t2;
-    } else t2 = $[7];
-    let t3;
-    if ($[8] !== dataCtx?.data) {
-        t3 = dataCtx?.data ?? [];
-        $[8] = dataCtx?.data;
-        $[9] = t3;
-    } else t3 = $[9];
-    let t4;
-    if ($[10] !== children || $[11] !== t3) {
-        t4 = /*#__PURE__*/ jsx(ComposedChart, {
-            data: t3,
+        $[7] = t1;
+        $[8] = t2;
+    } else t2 = $[8];
+    const t3 = height ?? "100%";
+    const t4 = fill ? columnChartContainerFillClasses : void 0;
+    let t5;
+    if ($[9] !== dataCtx?.data) {
+        t5 = dataCtx?.data ?? [];
+        $[9] = dataCtx?.data;
+        $[10] = t5;
+    } else t5 = $[10];
+    let t6;
+    if ($[11] !== children || $[12] !== t5) {
+        t6 = /*#__PURE__*/ jsx(ComposedChart, {
+            data: t5,
             margin: COLUMN_DEFAULT_BODY_MARGIN,
             accessibilityLayer: false,
             children: children
         });
-        $[10] = children;
-        $[11] = t3;
-        $[12] = t4;
-    } else t4 = $[12];
-    let t5;
-    if ($[13] !== height || $[14] !== t4) {
-        t5 = /*#__PURE__*/ jsx(ResponsiveContainer, {
+        $[11] = children;
+        $[12] = t5;
+        $[13] = t6;
+    } else t6 = $[13];
+    let t7;
+    if ($[14] !== t3 || $[15] !== t4 || $[16] !== t6) {
+        t7 = /*#__PURE__*/ jsx(ResponsiveContainer, {
             width: "100%",
-            height: height,
-            children: t4
+            height: t3,
+            className: t4,
+            children: t6
         });
-        $[13] = height;
-        $[14] = t4;
-        $[15] = t5;
-    } else t5 = $[15];
-    let t6;
-    if ($[16] !== props || $[17] !== ref || $[18] !== t2 || $[19] !== t5 || $[20] !== testId) {
-        t6 = /*#__PURE__*/ jsx("div", {
+        $[14] = t3;
+        $[15] = t4;
+        $[16] = t6;
+        $[17] = t7;
+    } else t7 = $[17];
+    let t8;
+    if ($[18] !== props || $[19] !== ref || $[20] !== t2 || $[21] !== t7 || $[22] !== testId) {
+        t8 = /*#__PURE__*/ jsx("div", {
             ...props,
             ref: ref,
             "data-slot": "column-chart-body",
             "data-testid": testId,
             "aria-hidden": "true",
             className: t2,
-            children: t5
+            children: t7
         });
-        $[16] = props;
-        $[17] = ref;
-        $[18] = t2;
-        $[19] = t5;
-        $[20] = testId;
-        $[21] = t6;
-    } else t6 = $[21];
-    return t6;
+        $[18] = props;
+        $[19] = ref;
+        $[20] = t2;
+        $[21] = t7;
+        $[22] = testId;
+        $[23] = t8;
+    } else t8 = $[23];
+    return t8;
 };
 ColumnChartBody.displayName = "ColumnChartBody";
 export { ColumnChartBody };

package/dist/components/SimpleCharts/ColumnChart/ColumnChartXAxis.js CHANGED Viewed

@@ -22,6 +22,7 @@ const ColumnChartXAxis = (t0)=>{
             dataKey: t2,
             height: LINE_X_LABEL_HEIGHT,
             tickLine: false,
+            tickSize: 0,
             axisLine: AXIS_LINE_PROPS,
             tick: renderTick,
             tickFormatter: t3,

package/dist/components/SimpleCharts/ColumnChart/classes.d.ts CHANGED Viewed

@@ -1,2 +1,4 @@
-export { lineChartRootClasses as columnChartRootClasses } from '../LineChart/classes.js';
+export declare const columnChartRootClasses: string;
+export declare const columnChartBodyFillClasses = "basis-164";
+export declare const columnChartContainerFillClasses = "absolute inset-0";
 export declare const columnChartBodyClasses: string;

package/dist/components/SimpleCharts/ColumnChart/classes.js CHANGED Viewed

@@ -1,7 +1,13 @@
 import { lineChartBodyClasses, lineChartRootClasses } from "../LineChart/classes.js";
+const columnChartRootClasses = [
+    lineChartRootClasses,
+    'flex-1'
+].join(' ');
+const columnChartBodyFillClasses = 'basis-164';
+const columnChartContainerFillClasses = 'absolute inset-0';
 const columnChartBodyClasses = [
     lineChartBodyClasses,
     '[&_.recharts-bar]:animate-[ds-chart-fade-in_400ms_ease-out]',
     'motion-reduce:[&_.recharts-bar]:animate-none'
 ].join(' ');
-export { columnChartBodyClasses, lineChartRootClasses as columnChartRootClasses };
+export { columnChartBodyClasses, columnChartBodyFillClasses, columnChartContainerFillClasses, columnChartRootClasses };

package/dist/components/SimpleCharts/ColumnChart/constants.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { LINE_CARD_HEIGHT as COLUMN_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as COLUMN_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as COLUMN_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as COLUMN_INACTIVE_OPACITY, } from '../LineChart/constants.js';
+export { LINE_DEFAULT_BODY_MARGIN as COLUMN_DEFAULT_BODY_MARGIN, LINE_INACTIVE_OPACITY as COLUMN_INACTIVE_OPACITY, } from '../LineChart/constants.js';
 export declare const COLUMN_MAX_WIDTH = 32;
 export declare const COLUMN_MIN_WIDTH = 16;
 export declare const COLUMN_GAP = 22;

package/dist/components/SimpleCharts/ColumnChart/constants.js CHANGED Viewed

@@ -8,5 +8,5 @@ const COLUMN_RADIUS = [
     0,
     0
 ];
-export { LINE_CARD_HEIGHT as COLUMN_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as COLUMN_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as COLUMN_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as COLUMN_INACTIVE_OPACITY } from "../LineChart/constants.js";
+export { LINE_DEFAULT_BODY_MARGIN as COLUMN_DEFAULT_BODY_MARGIN, LINE_INACTIVE_OPACITY as COLUMN_INACTIVE_OPACITY } from "../LineChart/constants.js";
 export { COLUMN_GAP, COLUMN_MAX_WIDTH, COLUMN_MIN_WIDTH, COLUMN_PART_GAP, COLUMN_RADIUS };

package/dist/metadata/components.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
-  "version": "4.3.1",
-  "generatedAt": "2026-10-26T11:18:16.377Z",
+  "version": "4.3.2",
+  "generatedAt": "2026-10-28T09:00:51.747Z",
   "components": [
     {
       "name": "Accordion",
@@ -99964,8 +99964,7 @@
               "name": "height",
               "type": "number | undefined",
               "required": false,
-              "description": "Plot height passed to recharts' `<ResponsiveContainer>`. Defaults to the Figma 164px.",
-              "defaultValue": "DEFAULT_BODY_HEIGHT"
+              "description": "Fixed plot height in pixels. Leave it unset to follow the card: the plot starts at the\nFigma 164px (card 220) and grows or shrinks with the `<Chart>` height, down to a 128px card."
             },
             {
               "name": "defaultChecked",
@@ -110217,35 +110216,42 @@
           "name": "Default",
           "code": "import { Chart, ChartHeader, ChartTitle, useChartTimeFormatters, LineChartGrid, LineChartHoverPopoverDot, LineChartLegend, LineChartLegendItem, LineChartTooltip, LineChartYAxis, ColumnChart, ColumnChartBody, ColumnChartStack, ColumnChartXAxis } from '@wallarm-org/design-system/SimpleCharts';\nimport { formatFullNumber } from '@wallarm-org/design-system/utils/abbreviateNumber';\n\nexport const Default = () => {\n  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();\n  return (\n    <div className='w-800'>\n      <Chart>\n        <ChartHeader>\n          <ChartTitle>Findings by verdict</ChartTitle>\n        </ChartHeader>\n        <ColumnChart data={findings} series={verdicts} xKey='timestamp' data-testid='column-chart'>\n          <LineChartLegend>\n            {verdicts.map(s => (\n              <LineChartLegendItem key={s.key} seriesKey={s.key}>\n                <LineChartHoverPopoverDot color={s.color} />\n                <span className='text-xs font-mono text-text-primary'>{s.label}</span>\n                <span className='text-xs font-mono font-medium text-text-primary'>\n                  {formatFullNumber(findingsTotals[s.key] ?? 0)}\n                </span>\n              </LineChartLegendItem>\n            ))}\n          </LineChartLegend>\n          <ColumnChartBody>\n            <LineChartGrid />\n            <ColumnChartXAxis tickFormatter={formatDate} />\n            <LineChartYAxis tickFormatter={formatYTick} />\n            <ColumnChartStack />\n            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />\n          </ColumnChartBody>\n        </ColumnChart>\n      </Chart>\n    </div>\n  );\n};",
           "storyFile": "SimpleCharts/ColumnChart/ColumnChart.stories.tsx",
-          "storyTitle": "Data Display/SimpleCharts/ColumnChart",
+          "storyTitle": "Data Display/SimpleCharts/Vertical Stacked Columns Chart",
           "description": "Findings by verdict over a week: the legend carries each verdict and its total for the\nperiod, a column per day stacks the verdicts in legend order with the first on top. Hover a\ncolumn for the day's breakdown, or a legend item to fade the other verdicts out."
         },
         {
           "name": "AdaptiveWidth",
           "code": "import { Chart, ChartHeader, ChartTitle, useChartTimeFormatters, LineChartGrid, LineChartTooltip, LineChartYAxis, ColumnChart, ColumnChartBody, ColumnChartStack, ColumnChartXAxis } from '@wallarm-org/design-system/SimpleCharts';\n\nexport const AdaptiveWidth = () => {\n  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();\n  return (\n    <div className='flex gap-16'>\n      <div className='w-428'>\n        <Chart>\n          <ChartHeader>\n            <ChartTitle>7 days</ChartTitle>\n          </ChartHeader>\n          <ColumnChart\n            data={findings}\n            series={verdicts}\n            xKey='timestamp'\n            data-testid='column-chart-week'\n          >\n            <ColumnChartBody>\n              <LineChartGrid />\n              <ColumnChartXAxis tickFormatter={formatDate} />\n              <LineChartYAxis tickFormatter={formatYTick} />\n              <ColumnChartStack />\n              <LineChartTooltip xTickFormatter={formatDateWithTimezone} />\n            </ColumnChartBody>\n          </ColumnChart>\n        </Chart>\n      </div>\n      <div className='w-428'>\n        <Chart>\n          <ChartHeader>\n            <ChartTitle>14 days</ChartTitle>\n          </ChartHeader>\n          <ColumnChart\n            data={findings14}\n            series={verdicts}\n            xKey='timestamp'\n            data-testid='column-chart-two-weeks'\n          >\n            <ColumnChartBody>\n              <LineChartGrid />\n              <ColumnChartXAxis tickFormatter={formatDate} />\n              <LineChartYAxis tickFormatter={formatYTick} />\n              <ColumnChartStack />\n              <LineChartTooltip xTickFormatter={formatDateWithTimezone} />\n            </ColumnChartBody>\n          </ColumnChart>\n        </Chart>\n      </div>\n    </div>\n  );\n};",
           "storyFile": "SimpleCharts/ColumnChart/ColumnChart.stories.tsx",
-          "storyTitle": "Data Display/SimpleCharts/ColumnChart",
+          "storyTitle": "Data Display/SimpleCharts/Vertical Stacked Columns Chart",
           "description": "Column width follows the chart width and the number of steps: up to 32px, a fixed 22px\nbetween columns below that, and 16px at least. The same week in a narrow card keeps 32px\ncolumns; two weeks in it narrow them."
         },
+        {
+          "name": "CardHeight",
+          "code": "import { Chart, ChartHeader, ChartTitle, useChartTimeFormatters, LineChartGrid, LineChartHoverPopoverDot, LineChartLegend, LineChartLegendItem, LineChartTooltip, LineChartYAxis, ColumnChart, ColumnChartBody, ColumnChartStack, ColumnChartXAxis } from '@wallarm-org/design-system/SimpleCharts';\n\nexport const CardHeight = () => {\n  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();\n  return (\n    <div className='flex w-800 flex-col gap-16'>\n      <Chart className='h-128'>\n        <ChartHeader>\n          <ChartTitle>128px card</ChartTitle>\n        </ChartHeader>\n        <ColumnChart\n          data={findings}\n          series={verdicts}\n          xKey='timestamp'\n          data-testid='column-chart-min'\n        >\n          <LineChartLegend>\n            {verdicts.map(s => (\n              <LineChartLegendItem key={s.key} seriesKey={s.key}>\n                <LineChartHoverPopoverDot color={s.color} />\n                <span className='text-xs font-mono text-text-primary'>{s.label}</span>\n              </LineChartLegendItem>\n            ))}\n          </LineChartLegend>\n          <ColumnChartBody>\n            <LineChartGrid />\n            <ColumnChartXAxis tickFormatter={formatDate} />\n            <LineChartYAxis tickFormatter={formatYTick} />\n            <ColumnChartStack />\n            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />\n          </ColumnChartBody>\n        </ColumnChart>\n      </Chart>\n      <Chart className='h-320'>\n        <ChartHeader>\n          <ChartTitle>320px card</ChartTitle>\n        </ChartHeader>\n        <ColumnChart\n          data={findings}\n          series={verdicts}\n          xKey='timestamp'\n          data-testid='column-chart-tall'\n        >\n          <LineChartLegend>\n            {verdicts.map(s => (\n              <LineChartLegendItem key={s.key} seriesKey={s.key}>\n                <LineChartHoverPopoverDot color={s.color} />\n                <span className='text-xs font-mono text-text-primary'>{s.label}</span>\n              </LineChartLegendItem>\n            ))}\n          </LineChartLegend>\n          <ColumnChartBody>\n            <LineChartGrid />\n            <ColumnChartXAxis tickFormatter={formatDate} />\n            <LineChartYAxis tickFormatter={formatYTick} />\n            <ColumnChartStack />\n            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />\n          </ColumnChartBody>\n        </ColumnChart>\n      </Chart>\n    </div>\n  );\n};",
+          "storyFile": "SimpleCharts/ColumnChart/ColumnChart.stories.tsx",
+          "storyTitle": "Data Display/SimpleCharts/Vertical Stacked Columns Chart",
+          "description": "The plot follows the card height: set a height on `<Chart>` and the columns stretch or\nshrink with it. The card goes down to 128px — header, legend and a 72px plot."
+        },
         {
           "name": "ClickableLegend",
           "code": "import { type MouseEvent } from 'react';\nimport { Chart, ChartHeader, ChartTitle, useChartTimeFormatters, LineChartGrid, LineChartHoverPopoverDot, LineChartLegend, LineChartLegendItem, LineChartTooltip, LineChartYAxis, ColumnChart, ColumnChartBody, ColumnChartStack, ColumnChartXAxis } from '@wallarm-org/design-system/SimpleCharts';\nimport { formatFullNumber } from '@wallarm-org/design-system/utils/abbreviateNumber';\n\nexport const ClickableLegend = () => {\n  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();\n  const handleLegendClick = (event: MouseEvent<HTMLDivElement>) => {\n    openVerdict(event.currentTarget.dataset.key);\n  };\n  return (\n    <div className='w-800'>\n      <Chart>\n        <ChartHeader>\n          <ChartTitle>Click a verdict to open it</ChartTitle>\n        </ChartHeader>\n        <ColumnChart data={findings} series={verdicts} xKey='timestamp' data-testid='column-chart'>\n          <LineChartLegend>\n            {verdicts.map(s => (\n              <LineChartLegendItem key={s.key} seriesKey={s.key} onClick={handleLegendClick}>\n                <LineChartHoverPopoverDot color={s.color} />\n                <span className='text-xs font-mono text-text-primary'>{s.label}</span>\n                <span className='text-xs font-mono font-medium text-text-primary'>\n                  {formatFullNumber(findingsTotals[s.key] ?? 0)}\n                </span>\n              </LineChartLegendItem>\n            ))}\n          </LineChartLegend>\n          <ColumnChartBody>\n            <LineChartGrid />\n            <ColumnChartXAxis tickFormatter={formatDate} />\n            <LineChartYAxis tickFormatter={formatYTick} />\n            <ColumnChartStack />\n            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />\n          </ColumnChartBody>\n        </ColumnChart>\n      </Chart>\n    </div>\n  );\n};",
           "storyFile": "SimpleCharts/ColumnChart/ColumnChart.stories.tsx",
-          "storyTitle": "Data Display/SimpleCharts/ColumnChart",
+          "storyTitle": "Data Display/SimpleCharts/Vertical Stacked Columns Chart",
           "description": "Legend items become buttons when they get an `onClick` — here a verdict opens its list, as\non the Agentic Overview. The item's `data-key` carries the series key, so one handler serves\nevery item. Hover and keyboard focus fade the other verdicts out alike."
         },
         {
           "name": "Loading",
           "code": "import { Chart, ChartHeader, ChartTitle, LineChartEmpty, LineChartLegend, LineChartLegendItem } from '@wallarm-org/design-system/SimpleCharts';\nimport { Skeleton } from '@wallarm-org/design-system/Skeleton';\n\nexport const Loading = () => (\n  <div className='w-800'>\n    <Chart aria-busy='true' aria-live='polite'>\n      <ChartHeader>\n        <ChartTitle>Findings by verdict</ChartTitle>\n      </ChartHeader>\n      <LineChartLegend>\n        {verdicts.map(s => (\n          <LineChartLegendItem key={s.key} seriesKey={s.key}>\n            <Skeleton width='96px' height='16px' rounded={4} />\n          </LineChartLegendItem>\n        ))}\n      </LineChartLegend>\n      <LineChartEmpty />\n    </Chart>\n  </div>\n);",
           "storyFile": "SimpleCharts/ColumnChart/ColumnChart.stories.tsx",
-          "storyTitle": "Data Display/SimpleCharts/ColumnChart",
+          "storyTitle": "Data Display/SimpleCharts/Vertical Stacked Columns Chart",
           "description": "Loading: skeleton legend items over `LineChartEmpty`'s dashed plot frame."
         },
         {
           "name": "Empty",
           "code": "import { Chart, ChartHeader, ChartTitle, LineChartEmpty } from '@wallarm-org/design-system/SimpleCharts';\n\nexport const Empty = () => (\n  <div className='w-800'>\n    <Chart>\n      <ChartHeader>\n        <ChartTitle>Findings by verdict</ChartTitle>\n      </ChartHeader>\n      <LineChartEmpty>No findings in this period</LineChartEmpty>\n    </Chart>\n  </div>\n);",
           "storyFile": "SimpleCharts/ColumnChart/ColumnChart.stories.tsx",
-          "storyTitle": "Data Display/SimpleCharts/ColumnChart",
+          "storyTitle": "Data Display/SimpleCharts/Vertical Stacked Columns Chart",
           "description": "Empty: `LineChartEmpty` keeps the dashed plot frame and puts the message inside it."
         },
         {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "4.3.2",
+  "version": "4.3.3-rc-fix-WDS-192.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",