Support centered SettingsCard result messages
This commit is contained in:
@@ -1425,6 +1425,7 @@ export function CatalogApp() {
|
|||||||
<li><ResourceRow icon={<Icon name="camera" />} title="Подготовка камеры" metadata="Проверка потоков" progress={{label:"Подготовка камеры",value:0.8}} aria-busy="true" actions={<IconButton label="Просмотр недоступен" disabled><Icon name="eye" /></IconButton>} /></li>
|
<li><ResourceRow icon={<Icon name="camera" />} title="Подготовка камеры" metadata="Проверка потоков" progress={{label:"Подготовка камеры",value:0.8}} aria-busy="true" actions={<IconButton label="Просмотр недоступен" disabled><Icon name="eye" /></IconButton>} /></li>
|
||||||
</ResourceList>
|
</ResourceList>
|
||||||
<SettingsCard title="Устройства не обнаружены" description="Подключите устройство, чтобы оно появилось в списке." />
|
<SettingsCard title="Устройства не обнаружены" description="Подключите устройство, чтобы оно появилось в списке." />
|
||||||
|
<SettingsCard align="center" role="status" title="Настройки применены" description="Проверьте подключение устройства." />
|
||||||
</Preview>
|
</Preview>
|
||||||
<Preview title="Оконные действия" note="круг `46 px`" className="catalog-preview--compact">
|
<Preview title="Оконные действия" note="круг `46 px`" className="catalog-preview--compact">
|
||||||
<div className="catalog-window-actions-demo">
|
<div className="catalog-window-actions-demo">
|
||||||
|
|||||||
@@ -246,6 +246,11 @@ setup-команды, сохранение, API и права принадлеж
|
|||||||
|
|
||||||
`SettingsCard` фиксирует нейтральную структуру админской группы: eyebrow/title/description/actions/body. `Switch` покрывает компактное включение/видимость внутри таких групп. Данные секции, сохранение и права остаются в consumer.
|
`SettingsCard` фиксирует нейтральную структуру админской группы: eyebrow/title/description/actions/body. `Switch` покрывает компактное включение/видимость внутри таких групп. Данные секции, сохранение и права остаются в consumer.
|
||||||
|
|
||||||
|
Для компактных сообщений о результате и пустых состояний `SettingsCard align="center"`
|
||||||
|
центрирует содержимое по горизонтали и вертикали. Пустой body не создаёт
|
||||||
|
асимметричный нижний отступ. Обычные группы настроек сохраняют `align="start"`;
|
||||||
|
вариант не задаёт высоту и не меняет токены темы.
|
||||||
|
|
||||||
## AdminNavigationPanel
|
## AdminNavigationPanel
|
||||||
|
|
||||||
Левая выезжающая панель Hub/Launcher. Библиотека владеет оболочкой `352 px`, радиусом `21.6 px`, внутренними отступами, full-bleed context/navigation pills, круглыми icon surfaces и анимацией появления. Приложение передаёт workspace/company, маршруты, active id и footer identity.
|
Левая выезжающая панель Hub/Launcher. Библиотека владеет оболочкой `352 px`, радиусом `21.6 px`, внутренними отступами, full-bleed context/navigation pills, круглыми icon surfaces и анимацией появления. Приложение передаёт workspace/company, маршруты, active id и footer identity.
|
||||||
|
|||||||
@@ -608,6 +608,21 @@ textarea.nodedc-field__control {
|
|||||||
gap: 0.8rem;
|
gap: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nodedc-settings-card[data-align="center"] {
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodedc-settings-card[data-align="center"] > .nodedc-settings-card__head {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodedc-settings-card[data-align="center"] > .nodedc-settings-card__body {
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.nodedc-switch {
|
.nodedc-switch {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
|||||||
@@ -6,11 +6,12 @@ export interface SettingsCardProps extends Omit<HTMLAttributes<HTMLElement>, "ti
|
|||||||
title: ReactNode;
|
title: ReactNode;
|
||||||
description?: ReactNode;
|
description?: ReactNode;
|
||||||
actions?: ReactNode;
|
actions?: ReactNode;
|
||||||
|
align?: "start" | "center";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SettingsCard({ eyebrow, title, description, actions, children, className, ...props }: SettingsCardProps) {
|
export function SettingsCard({ eyebrow, title, description, actions, children, align = "start", className, ...props }: SettingsCardProps) {
|
||||||
return (
|
return (
|
||||||
<section className={cn("nodedc-settings-card", className)} {...props}>
|
<section className={cn("nodedc-settings-card", className)} data-align={align === "center" ? "center" : undefined} {...props}>
|
||||||
<header className="nodedc-settings-card__head">
|
<header className="nodedc-settings-card__head">
|
||||||
<div className="nodedc-settings-card__titles">
|
<div className="nodedc-settings-card__titles">
|
||||||
{eyebrow ? <span>{eyebrow}</span> : null}
|
{eyebrow ? <span>{eyebrow}</span> : null}
|
||||||
@@ -19,7 +20,7 @@ export function SettingsCard({ eyebrow, title, description, actions, children, c
|
|||||||
</div>
|
</div>
|
||||||
{actions ? <div className="nodedc-settings-card__actions">{actions}</div> : null}
|
{actions ? <div className="nodedc-settings-card__actions">{actions}</div> : null}
|
||||||
</header>
|
</header>
|
||||||
<div className="nodedc-settings-card__body">{children}</div>
|
{align === "center" && (children === undefined || children === null || children === false) ? null : <div className="nodedc-settings-card__body">{children}</div>}
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -445,6 +445,7 @@
|
|||||||
"summary": "Neutral administration group with title metadata, actions, content and a compact binary switch.",
|
"summary": "Neutral administration group with title metadata, actions, content and a compact binary switch.",
|
||||||
"rules": [
|
"rules": [
|
||||||
"The card owns grouping geometry but not product form schemas.",
|
"The card owns grouping geometry but not product form schemas.",
|
||||||
|
"Use align=center for compact result or empty messages: center the content on both axes and omit an empty body. The default start layout remains unchanged.",
|
||||||
"Section and empty-state titles use the compact md token; descriptions use sm. Page/window title sizes and browser heading defaults are forbidden inside cards.",
|
"Section and empty-state titles use the compact md token; descriptions use sm. Page/window title sizes and browser heading defaults are forbidden inside cards.",
|
||||||
"Use Switch for compact visibility/enable states; use Checker for the Engine inspector treatment."
|
"Use Switch for compact visibility/enable states; use Checker for the Engine inspector treatment."
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user