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

Standardize action and region loading states

Browse Source 
Keep progress inside the initiating Button/IconButton or centered within a
LoadingRegion without changing layout or unmounting live content. Document
ownership and completion/error behavior in the registry and living catalog.

Validation: qualified NET02 DG build/typecheck/registry/loading tests;
existing browser geometry, theme and error lifecycle acceptance. All eleven
committed files match the qualified source artifact byte for byte.
This commit is contained in:
Codex
2026-09-10 09:19:12 +03:00
parent b10fd5d645
commit 8c53f73ee5
11 changed files with 188 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/styles.css
+53
View File
@@ -108,6 +108,7 @@
}
.nodedc-button {
position: relative;
--nodedc-button-bg: var(--nodedc-glass-control-bg);
--nodedc-button-color: var(--nodedc-text-primary);
display: inline-flex;
@@ -236,6 +237,57 @@
place-items: center;
}
.nodedc-button__content {
display: inline-flex;
align-items: center;
justify-content: inherit;
gap: inherit;
min-width: 0;
}
.nodedc-button[data-loading="true"] > .nodedc-button__content,
.nodedc-icon-button[data-loading="true"] > :not(.nodedc-action-loading) {
opacity: 0;
}
.nodedc-action-loading {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
.nodedc-button[data-loading="true"],
.nodedc-icon-button[data-loading="true"] {
opacity: 1;
cursor: progress;
}
.nodedc-loading-region {
position: relative;
min-width: 0;
}
.nodedc-loading-region[aria-busy="true"] {
min-block-size: calc(var(--nodedc-control-height) * 2);
}
.nodedc-loading-region__status {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--nodedc-space-2);
padding: var(--nodedc-space-3);
color: var(--nodedc-text-secondary);
font-size: var(--nodedc-font-size-sm);
text-align: center;
pointer-events: none;
}
.nodedc-button__icon > svg {
width: 1rem;
height: 1rem;
@@ -267,6 +319,7 @@
}
.nodedc-icon-button {
position: relative;
display: inline-grid;
width: var(--nodedc-icon-button-size);
height: var(--nodedc-icon-button-size);