SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(ui): добавить плотные контролы для viewer

Browse Source
This commit is contained in:
Codex
2026-08-30 13:28:20 +03:00
parent c8f4916423
commit d51d8bb7f6
8 changed files with 82 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/COMPONENTS.md
+4
View File
@@ -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
Трёхосевая верхняя панель:
package.json
+2 -1
View File
@@ -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",
packages/tokens/tokens.css
+2
View File
@@ -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;
packages/ui-core/styles.css
+20
View File
@@ -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);
packages/ui-react/src/Button.tsx
+1 -1
View File
@@ -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<HTMLButtonElement> {
packages/ui-react/src/SegmentedControl.tsx
+10 -2
View File
@@ -8,10 +8,13 @@ export interface SegmentedItem<T extends string> {
disabled?: boolean;
}
export type SegmentedControlSize = "default" | "dense";
export interface SegmentedControlProps<T extends string> {
value: T;
items: Array<SegmentedItem<T>>;
label: string;
size?: SegmentedControlSize;
className?: string;
onChange: (value: T) => void;
}
@@ -20,11 +23,17 @@ export function SegmentedControl<T extends string>({
value,
items,
label,
size = "default",
className,
onChange,
}: SegmentedControlProps<T>) {
return (
<div className={cn("nodedc-segmented", className)} role="tablist" aria-label={label}>
<div
className={cn("nodedc-segmented", className)}
role="tablist"
aria-label={label}
data-size={size === "default" ? undefined : size}
>
{items.map((item) => (
<button
key={item.value}
@@ -43,4 +52,3 @@ export function SegmentedControl<T extends string>({
</div>
);
}
registry/components.json
+6 -1
View File
@@ -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",
scripts/control-density-contract.test.mjs
+37
View File
@@ -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/);
});