From d51d8bb7f6a5bcca39b04bf0069b32135253daa2 Mon Sep 17 00:00:00 2001 From: Codex Date: Sun, 30 Aug 2026 13:28:20 +0300 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=BF=D0=BB=D0=BE=D1=82=D0=BD=D1=8B=D0=B5?= =?UTF-8?q?=20=D0=BA=D0=BE=D0=BD=D1=82=D1=80=D0=BE=D0=BB=D1=8B=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20viewer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/COMPONENTS.md | 4 +++ package.json | 3 +- packages/tokens/tokens.css | 2 ++ packages/ui-core/styles.css | 20 ++++++++++++ packages/ui-react/src/Button.tsx | 2 +- packages/ui-react/src/SegmentedControl.tsx | 12 +++++-- registry/components.json | 7 +++- scripts/control-density-contract.test.mjs | 37 ++++++++++++++++++++++ 8 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 scripts/control-density-contract.test.mjs diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md index d7300d3..d912f61 100644 --- a/docs/COMPONENTS.md +++ b/docs/COMPONENTS.md @@ -27,6 +27,8 @@ Button используется для всех текстовых действ Icon-only action по умолчанию круглый. Квадратная кнопка с маленьким радиусом допустима только как кнопка закрытия окна или плотный инструмент, где это зафиксировано контрактом. +`size="dense"` — каноническая плотность для текстовых layer/mode-действий внутри визуализатора. Она уменьшает площадь и подпись контрола, но не меняет hover, active, disabled и focus-состояния. В шапках приложения и обычных формах эта плотность не используется. + Переключаемый IconButton передаёт контролируемое состояние через `aria-pressed`. Активная поверхность и контраст принадлежат дизайн-системе; размер круга и glyph при переключении не меняются. ## ActivityIndicator @@ -174,6 +176,8 @@ Read-only link/copy окно из BIM Viewer. React-компонент испо Pill navigation для верхней панели и компактного переключения режимов. Active segment использует активную поверхность темы; это не обязательно основной accent приложения. +`size="dense"` применяется только в насыщенной панели слоёв или режимов непосредственно над viewer. Шапка приложения сохраняет default-геометрию; consumer не воспроизводит dense-отступы или шрифт локальным CSS. + ## AppHeader Трёхосевая верхняя панель: diff --git a/package.json b/package.json index 4ce5079..5ae5655 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "scripts": { "build": "npm run build --workspace @nodedc/ui-core && npm run build --workspace @nodedc/ui-dom && npm run build --workspace @nodedc/ui-react && npm run build --workspace @nodedc/page-patterns && npm run build --workspace @nodedc/map-cesium-react && npm run build --workspace @nodedc/ui-catalog", "build:packages": "npm run build --workspace @nodedc/ui-core && npm run build --workspace @nodedc/ui-dom && npm run build --workspace @nodedc/ui-react && npm run build --workspace @nodedc/page-patterns && npm run build --workspace @nodedc/map-cesium-react", - "check": "npm run build:packages && npm run typecheck --workspaces --if-present && npm run validate:registry && npm run test:spark-governance && npm run test:activity-indicator && npm run test:icon-contract && npm run test:toast-contract && npm run test:floating-position && npm run test:inspector-select && npm run test:range-control && npm run test:split-pane && npm run test:hgeozone-projection && npm run test:map-grid-lod && npm run test:map-filters && npm run test:map-object-layers && npm run test:map-inspector-overlay-state && npm run test:map-reference-stations && npm run test:map-search && npm run test:map-subject-card && npm run test:map-subject-detail-profile", + "check": "npm run build:packages && npm run typecheck --workspaces --if-present && npm run validate:registry && npm run test:spark-governance && npm run test:activity-indicator && npm run test:control-density && npm run test:icon-contract && npm run test:toast-contract && npm run test:floating-position && npm run test:inspector-select && npm run test:range-control && npm run test:split-pane && npm run test:hgeozone-projection && npm run test:map-grid-lod && npm run test:map-filters && npm run test:map-object-layers && npm run test:map-inspector-overlay-state && npm run test:map-reference-stations && npm run test:map-search && npm run test:map-subject-card && npm run test:map-subject-detail-profile", "dev": "npm run build:packages && npm run dev --workspace @nodedc/ui-catalog", "serve": "node server/catalog-server.mjs", "validate:registry": "node scripts/validate-registry.mjs", @@ -33,6 +33,7 @@ "test:map-cache-contract": "node --test scripts/map-cache-resource-contract.test.mjs", "test:spark-governance": "node --test scripts/spark-governance-contract.test.mjs", "test:activity-indicator": "node --test scripts/activity-indicator-contract.test.mjs", + "test:control-density": "node --test scripts/control-density-contract.test.mjs", "test:icon-contract": "node --test scripts/icon-contract.test.mjs", "test:toast-contract": "node --test scripts/toast-contract.test.mjs", "test:floating-position": "node --test scripts/floating-position-contract.test.mjs", diff --git a/packages/tokens/tokens.css b/packages/tokens/tokens.css index e70c435..13d3349 100644 --- a/packages/tokens/tokens.css +++ b/packages/tokens/tokens.css @@ -10,6 +10,7 @@ --nodedc-control-height: 2.875rem; --nodedc-control-height-compact: 2.375rem; + --nodedc-control-height-dense: 1.875rem; --nodedc-icon-button-size: 2.875rem; --nodedc-header-row-height: 3rem; --nodedc-header-pill-height: 3.45rem; @@ -61,6 +62,7 @@ --nodedc-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --nodedc-font-size-xs: 0.6875rem; + --nodedc-font-size-dense: 0.45rem; --nodedc-font-size-sm: 0.75rem; --nodedc-font-size-md: 0.8125rem; --nodedc-font-size-lg: 1rem; diff --git a/packages/ui-core/styles.css b/packages/ui-core/styles.css index 386173f..f086aa6 100644 --- a/packages/ui-core/styles.css +++ b/packages/ui-core/styles.css @@ -142,6 +142,13 @@ font-size: var(--nodedc-font-size-sm); } +.nodedc-button[data-size="dense"] { + min-height: var(--nodedc-control-height-dense); + border-radius: var(--nodedc-radius-control-compact); + padding-inline: 0.65rem; + font-size: var(--nodedc-font-size-dense); +} + .nodedc-button[data-width="full"] { width: 100%; } @@ -1039,6 +1046,19 @@ textarea.nodedc-field__control { color: var(--nodedc-glass-control-active-text); } +.nodedc-segmented[data-size="dense"] { + min-height: var(--nodedc-control-height-dense); + gap: 0.1rem; + padding: 0.16rem; +} + +.nodedc-segmented[data-size="dense"] .nodedc-segmented__item { + min-height: calc(var(--nodedc-control-height-dense) - 0.32rem); + gap: 0.25rem; + padding: 0.1rem 0.68rem; + font-size: var(--nodedc-font-size-dense); +} + .nodedc-header-shell { position: relative; z-index: var(--nodedc-layer-header); diff --git a/packages/ui-react/src/Button.tsx b/packages/ui-react/src/Button.tsx index 49a4962..326cda1 100644 --- a/packages/ui-react/src/Button.tsx +++ b/packages/ui-react/src/Button.tsx @@ -3,7 +3,7 @@ import { createAccentVariables, type RgbTuple } from "@nodedc/ui-core"; import { cn } from "./cn.js"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "accent"; -export type ButtonSize = "default" | "compact"; +export type ButtonSize = "default" | "compact" | "dense"; export type ButtonShape = "default" | "pill" | "rounded"; export interface ButtonProps extends ButtonHTMLAttributes { diff --git a/packages/ui-react/src/SegmentedControl.tsx b/packages/ui-react/src/SegmentedControl.tsx index 6cb27ac..a76f9fe 100644 --- a/packages/ui-react/src/SegmentedControl.tsx +++ b/packages/ui-react/src/SegmentedControl.tsx @@ -8,10 +8,13 @@ export interface SegmentedItem { disabled?: boolean; } +export type SegmentedControlSize = "default" | "dense"; + export interface SegmentedControlProps { value: T; items: Array>; label: string; + size?: SegmentedControlSize; className?: string; onChange: (value: T) => void; } @@ -20,11 +23,17 @@ export function SegmentedControl({ value, items, label, + size = "default", className, onChange, }: SegmentedControlProps) { return ( -
+
{items.map((item) => (
); } - diff --git a/registry/components.json b/registry/components.json index 6fe52c3..66dbe91 100644 --- a/registry/components.json +++ b/registry/components.json @@ -28,6 +28,7 @@ "domContract": ["nodedc-button", "nodedc-icon-button"], "summary": "Text and icon actions with shared sizing, states and computed accent contrast.", "variants": ["primary", "secondary", "ghost", "danger", "accent"], + "sizes": ["default", "compact", "dense"], "shapes": ["default", "pill", "rounded"], "rules": [ "Icon-only actions are circular by default.", @@ -237,7 +238,11 @@ "package": "@nodedc/ui-react", "exports": ["SegmentedControl"], "domContract": ["nodedc-segmented"], - "summary": "Pill navigation used in the shared top header and compact mode switches." + "summary": "Pill navigation used in the shared top header and compact mode switches.", + "sizes": ["default", "dense"], + "rules": [ + "Dense is reserved for high-density in-viewer layer and mode toolbars; application headers retain default geometry." + ] }, { "id": "app-header", diff --git a/scripts/control-density-contract.test.mjs b/scripts/control-density-contract.test.mjs new file mode 100644 index 0000000..5dd4bb5 --- /dev/null +++ b/scripts/control-density-contract.test.mjs @@ -0,0 +1,37 @@ +import assert from "node:assert/strict"; +import { readFile } from "node:fs/promises"; +import test from "node:test"; +import { createElement } from "react"; +import { renderToStaticMarkup } from "react-dom/server"; +import { Button, SegmentedControl } from "../packages/ui-react/dist/index.js"; + +test("dense viewer controls remain a public Button and SegmentedControl contract", async () => { + const button = renderToStaticMarkup(createElement(Button, { size: "dense" }, "Source points")); + const segmented = renderToStaticMarkup(createElement(SegmentedControl, { + size: "dense", + value: "source", + items: [{ label: "Source points", value: "source" }], + label: "Viewer layer", + onChange: () => {}, + })); + const [tokens, styles, registrySource, docs] = await Promise.all([ + readFile(new URL("../packages/tokens/tokens.css", import.meta.url), "utf8"), + readFile(new URL("../packages/ui-core/styles.css", import.meta.url), "utf8"), + readFile(new URL("../registry/components.json", import.meta.url), "utf8"), + readFile(new URL("../docs/COMPONENTS.md", import.meta.url), "utf8"), + ]); + const registry = JSON.parse(registrySource); + const buttonEntry = registry.components.find((component) => component.id === "button"); + const segmentedEntry = registry.components.find((component) => component.id === "segmented-control"); + + assert.match(button, /data-size="dense"/); + assert.match(segmented, /data-size="dense"/); + assert.ok(buttonEntry?.sizes.includes("dense")); + assert.ok(segmentedEntry?.sizes.includes("dense")); + assert.match(tokens, /--nodedc-control-height-dense: 1\.875rem/); + assert.match(tokens, /--nodedc-font-size-dense: 0\.45rem/); + assert.match(styles, /\.nodedc-button\[data-size="dense"\]/); + assert.match(styles, /\.nodedc-segmented\[data-size="dense"\]/); + assert.match(docs, /size="dense"/); + assert.match(docs, /viewer/); +});