WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): normalize form field label sizing
Quality / quality (ubuntu-latest) (push) Failing after 9m53s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-25 15:25:24 +05:30
parent 26ec18c24b
commit 120889060a
19 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/ColorPicker.wrn
+2
View File
@@ -205,7 +205,9 @@ component ColorPicker {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/DatePicker.wrn
+2
View File
@@ -276,7 +276,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/FileInput.wrn
+2
View File
@@ -230,7 +230,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/FileUploadProgress.wrn
+2
View File
@@ -244,7 +244,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/InputGroup.wrn
+2
View File
@@ -243,7 +243,9 @@ component InputGroup {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/RangeSlider.wrn
+2
View File
@@ -365,7 +365,9 @@ component RangeSlider {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/StrongPassword.wrn
+2
View File
@@ -649,7 +649,9 @@ component StrongPassword {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/TimePicker.wrn
+2
View File
@@ -249,7 +249,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/TogglePassword.wrn
+2
View File
@@ -492,7 +492,9 @@ component TogglePassword {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/checkbox.wrn
+2
View File
@@ -360,7 +360,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/input.wrn
+2
View File
@@ -315,7 +315,9 @@ component Input {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/radio.wrn
+2
View File
@@ -221,7 +221,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/select.wrn
+2
View File
@@ -244,7 +244,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/switch.wrn
+2
View File
@@ -243,7 +243,9 @@ component Switch {
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/components/textarea.wrn
+2
View File
@@ -223,7 +223,9 @@ size: string = "default"
}
.wrn-next__field-heading label {
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.wrn-next__field-hint,
.wrn-next__field-help {
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.8.44",
"version": "0.8.45",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/test/ui.test.ts
+25 -6
View File
@@ -32,6 +32,19 @@ test("Textarea binds its value without rendering hydration markup as user conten
expect(source).not.toContain(">{value}</textarea>");
});
test("form field labels use a stable control-label size instead of inherited heading scale", () => {
const fieldComponents = uiComponentNames().filter((name) =>
readFileSync(uiComponentPath(name), "utf8").includes(".wrn-next__field-heading label"),
);
expect(fieldComponents.length).toBeGreaterThan(0);
for (const name of fieldComponents) {
const source = readFileSync(uiComponentPath(name), "utf8");
expect(source).toMatch(
/\.wrn-next__field-heading label\s*\{[^}]*font-size: 0\.8125rem;[^}]*line-height: 1\.35;/s,
);
}
});
test("global UI CSS stays below its migration ratchet", () => {
const css = uiCss();
// Component selectors belong to their owning .wrn files. Keep this asset to
@@ -2929,7 +2942,9 @@ test("mega menu renders column groups in an anchored panel", async () => {
expect(trigger.getAttribute("aria-expanded")).toBe("false");
expect(trigger.getAttribute("aria-haspopup")).toBe("true");
expect(trigger.getAttribute("aria-label")).toBe("Products");
expect(dom.querySelector(".wrn-mega__trigger-label")?.getAttribute("data-label")).toBe("Products");
expect(dom.querySelector(".wrn-mega__trigger-label")?.getAttribute("data-label")).toBe(
"Products",
);
const panel = dom.querySelector(".wrn-mega__panel") as HTMLElement;
expect(panel.getAttribute("data-wrn-anchored")).toBe("true");
@@ -2986,7 +3001,7 @@ test("catalog mega menu renders only the active rail category", async () => {
expect(dom.querySelector(".wrn-mega__link-icon--fallback svg")).not.toBeNull();
expect(dom.querySelectorAll(".wrn-mega__link-description")).toHaveLength(0);
expect(source).toContain("border-bottom: 1px solid var(--wrn-color-border)");
expect(source).toContain('.wrn-mega__rail-icon > span');
expect(source).toContain(".wrn-mega__rail-icon > span");
expect(source).toContain("color: currentColor !important");
});
@@ -3174,7 +3189,7 @@ test("mega menu keeps hover activation and click activation from cancelling each
expect(source).toContain("showPanel(sourceEvent)");
expect(source).not.toContain("function scheduleOpen");
expect(source).toContain('.wrn-mega__panel[data-show="false"] { display: none; }');
expect(source).toContain("style='{visible ? \"\" : \"display:none\"}'");
expect(source).toContain('style=\'{visible ? "" : "display:none"}\'');
expect(source).not.toContain("@focus='showPanel(event)'");
expect(source).toContain("max-height: calc(100dvh - 5.5rem)");
});
@@ -3185,14 +3200,18 @@ test("mega menu gives the pointer time to cross from its trigger into a floating
expect(source).toContain("@mouseleave='scheduleHide()'");
expect(source).toContain("@mouseenter='cancelScheduledHide()'");
expect(source).toContain("}, 220)");
expect(source).not.toContain('@mouseleave=\'hidePanel("pointer-leave")\'');
expect(source).not.toContain("@mouseleave='hidePanel(\"pointer-leave\")'");
});
test("navbar pins full-width mega panels to desktop viewport gutters", () => {
const source = readFileSync(uiComponentPath("Navbar"), "utf8");
expect(source).toMatch(/\.wrn-navbar__mega\[data-full-width="true"\] \.wrn-mega__panel \{[^}]*position: fixed/s);
expect(source).toMatch(
/\.wrn-navbar__mega\[data-full-width="true"\] \.wrn-mega__panel \{[^}]*position: fixed/s,
);
expect(source).toMatch(/right: 1rem;\s+left: 1rem;/s);
expect(source).toMatch(/data-collapse-at="1100px"[^}]+\.wrn-navbar__mega\[data-full-width="true"\][^}]+position: static/s);
expect(source).toMatch(
/data-collapse-at="1100px"[^}]+\.wrn-navbar__mega\[data-full-width="true"\][^}]+position: static/s,
);
});
test("stepper shows only the active step content and offers back, next and skip", async () => {