From eb45c69240a7c721a091f6029d350b59d838eddb Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Wed, 4 Feb 2026 16:50:49 +0200 Subject: [PATCH 1/6] feat(ui5-checkbox): enable font-size based scaling for standalone checkboxes --- packages/main/src/themes/CheckBox.css | 62 ++++++++++++++++++++++++--- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index 17a8b03cdba0..f51d6a0ed2d0 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -6,6 +6,17 @@ display: inline-block; } +:host(:not([text])) { + padding: 0.6875rem; + width: fit-content; + height: fit-content; + overflow: visible; + line-height: 0; + --_ui5_checkbox_inner_width_height: 1em; + --_ui5_checkbox_icon_size: 1em; + --_ui5_checkbox_partially_icon_size: .55em; +} + :host([required]) { vertical-align: middle; } @@ -121,15 +132,24 @@ display: inline-flex; align-items: center; max-width: 100%; - min-height: var(--_ui5_checkbox_width_height); - min-width: var(--_ui5_checkbox_width_height); - padding: 0 var(--_ui5_checkbox_wrapper_padding); box-sizing: border-box; outline: none; transition: var(--_ui5_checkbox_transition); border: var(--_ui5_checkbox_default_focus_border); border-radius: var(--_ui5_checkbox_border_radius); - box-sizing: border-box; +} + +:host(:not([text])) .ui5-checkbox-root { + width: 1em; + height: 1em; + padding: 0; +} + +:host([text]) .ui5-checkbox-root { + min-height: var(--_ui5_checkbox_width_height); + min-width: var(--_ui5_checkbox_width_height); + padding: 0.6875rem; + padding: 0 var(--_ui5_checkbox_wrapper_padding); } /* focused */ @@ -144,6 +164,12 @@ border-radius: var(--_ui5_checkbox_focus_border_radius); } +:host(:not([text])[desktop]) .ui5-checkbox-root:focus::before, +:host(:not([text])) .ui5-checkbox-root:focus-visible::before { + inset-inline: -0.425rem; + inset-block: -0.425rem; +} + :host([text]) .ui5-checkbox-root { padding-inline-end: var(--_ui5_checkbox_right_focus_distance); } @@ -242,6 +268,7 @@ .ui5-checkbox-icon { width: var(--_ui5_checkbox_icon_size); height: var(--_ui5_checkbox_icon_size); + font-size: var(--_ui5_checkbox_icon_size); color: currentColor; cursor: inherit; position: absolute; @@ -250,13 +277,36 @@ transform: translate(-50%, -50%); } +/* Override icon size for checkboxes without text to enable font-size scaling */ +:host(:not([text])) .ui5-checkbox-icon { + width: 1em; + height: 1em; + font-size: 1em; +} + /* Display only mode */ :host([display-only]) { cursor: default; } -:host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] { - color: var(--sapTextColor); +:host([display-only]:not([text])) { + width: var(--_ui5_checkbox_icon_size); + height: var(--_ui5_checkbox_icon_size); + padding: 0.6875rem; + overflow: visible; + line-height: 0; + font-size: 1rem; + --_ui5_checkbox_inner_width_height: 1em; + --_ui5_checkbox_icon_size: 1em; + --_ui5_checkbox_partially_icon_size: .55em; +} + + +/* Override icon size for display-only checkboxes without text to enable font-size scaling */ +:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] { + width: 1em; + height: 1em; + font-size: 1em; } :host([display-only]) .ui5-checkbox-display-only-icon-inner { From 3b55a3499a539117c79a09313cc713f34dbc27d7 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 9 Feb 2026 13:02:49 +0200 Subject: [PATCH 2/6] refactor: change how the standalone checkbox handle its own size before setting anything --- packages/main/src/themes/CheckBox.css | 32 ++++++++++----------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index f51d6a0ed2d0..013070492566 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -7,6 +7,7 @@ } :host(:not([text])) { + font-size: 1.375rem; padding: 0.6875rem; width: fit-content; height: fit-content; @@ -148,7 +149,6 @@ :host([text]) .ui5-checkbox-root { min-height: var(--_ui5_checkbox_width_height); min-width: var(--_ui5_checkbox_width_height); - padding: 0.6875rem; padding: 0 var(--_ui5_checkbox_wrapper_padding); } @@ -268,7 +268,6 @@ .ui5-checkbox-icon { width: var(--_ui5_checkbox_icon_size); height: var(--_ui5_checkbox_icon_size); - font-size: var(--_ui5_checkbox_icon_size); color: currentColor; cursor: inherit; position: absolute; @@ -277,11 +276,9 @@ transform: translate(-50%, -50%); } -/* Override icon size for checkboxes without text to enable font-size scaling */ :host(:not([text])) .ui5-checkbox-icon { - width: 1em; - height: 1em; - font-size: 1em; + width: 0.75em; + height: 0.75em; } /* Display only mode */ @@ -290,23 +287,13 @@ } :host([display-only]:not([text])) { - width: var(--_ui5_checkbox_icon_size); - height: var(--_ui5_checkbox_icon_size); - padding: 0.6875rem; - overflow: visible; - line-height: 0; font-size: 1rem; - --_ui5_checkbox_inner_width_height: 1em; - --_ui5_checkbox_icon_size: 1em; - --_ui5_checkbox_partially_icon_size: .55em; -} - - -/* Override icon size for display-only checkboxes without text to enable font-size scaling */ -:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] { width: 1em; height: 1em; - font-size: 1em; +} + +:host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] { + color: var(--sapTextColor); } :host([display-only]) .ui5-checkbox-display-only-icon-inner { @@ -318,3 +305,8 @@ align-items: center; justify-content: center; } + +:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] { + width: 1em; + height: 1em; +} From e839cee5cf406dd38f58e00c4007fc8fb96d1f39 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Thu, 5 Mar 2026 11:49:23 +0200 Subject: [PATCH 3/6] fix: adress comments --- packages/main/cypress/specs/CheckBox.cy.tsx | 69 +++++++++++++++++++++ packages/main/src/themes/CheckBox.css | 7 ++- packages/main/test/pages/CheckBox.html | 32 ++++++++++ 3 files changed, 105 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/CheckBox.cy.tsx b/packages/main/cypress/specs/CheckBox.cy.tsx index c8db82a08613..f1ed8e96ee4d 100644 --- a/packages/main/cypress/specs/CheckBox.cy.tsx +++ b/packages/main/cypress/specs/CheckBox.cy.tsx @@ -367,6 +367,75 @@ describe("CheckBox general interaction", () => { .find("ui5-icon") .should("have.attr", "name", "tri-state"); }); + + it("tests font-size based scaling for standalone checkboxes", () => { + cy.mount( +
+ + + +
+ ); + + let smallInnerWidth: number; + let smallInnerHeight: number; + let largeInnerWidth: number; + let largeInnerHeight: number; + let smallIconWidth: number; + let smallIconHeight: number; + let largeIconWidth: number; + let largeIconHeight: number; + + // Measure small checkbox (12px) + cy.get("[ui5-checkbox]").eq(0) + .shadow() + .find(".ui5-checkbox-inner") + .then($inner => { + smallInnerWidth = $inner[0].offsetWidth; + smallInnerHeight = $inner[0].offsetHeight; + }); + + cy.get("[ui5-checkbox]").eq(0) + .shadow() + .find(".ui5-checkbox-icon") + .then($icon => { + smallIconWidth = $icon[0].offsetWidth; + smallIconHeight = $icon[0].offsetHeight; + }); + + // Measure large checkbox (48px) + cy.get("[ui5-checkbox]").eq(1) + .shadow() + .find(".ui5-checkbox-inner") + .then($inner => { + largeInnerWidth = $inner[0].offsetWidth; + largeInnerHeight = $inner[0].offsetHeight; + }); + + cy.get("[ui5-checkbox]").eq(1) + .shadow() + .find(".ui5-checkbox-icon") + .then($icon => { + largeIconWidth = $icon[0].offsetWidth; + largeIconHeight = $icon[0].offsetHeight; + + // Perform assertions after all measurements are captured + // 48px checkbox should be ~4x larger than 12px checkbox + expect(largeInnerWidth).to.be.closeTo(smallInnerWidth * 4, 2); + expect(largeInnerHeight).to.be.closeTo(smallInnerHeight * 4, 2); + expect(largeIconWidth).to.be.closeTo(smallIconWidth * 4, 2); + expect(largeIconHeight).to.be.closeTo(smallIconHeight * 4, 2); + }); + + // Verify indeterminate state (tri-state box) scales as well + cy.get("[ui5-checkbox]").eq(2) + .shadow() + .find(".ui5-checkbox-inner") + .then($inner => { + expect($inner[0].offsetWidth).to.be.greaterThan(smallInnerWidth * 3); + expect($inner[0].offsetHeight).to.be.greaterThan(smallInnerHeight * 3); + }); + }); }); describe("Accessibility", () => { diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index 013070492566..9b11202deeb7 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -8,7 +8,7 @@ :host(:not([text])) { font-size: 1.375rem; - padding: 0.6875rem; + padding: var(--_ui5_checkbox_wrapper_padding); width: fit-content; height: fit-content; overflow: visible; @@ -166,8 +166,9 @@ :host(:not([text])[desktop]) .ui5-checkbox-root:focus::before, :host(:not([text])) .ui5-checkbox-root:focus-visible::before { - inset-inline: -0.425rem; - inset-block: -0.425rem; + /* Fixed focus outline gap (proportional to text checkbox focus position): -0.425rem / 0.3125rem ≈ -1.36 */ + inset-inline: calc(var(--_ui5_checkbox_focus_position) * -1.36); + inset-block: calc(var(--_ui5_checkbox_focus_position) * -1.36); } :host([text]) .ui5-checkbox-root { diff --git a/packages/main/test/pages/CheckBox.html b/packages/main/test/pages/CheckBox.html index 4a4fb9f660b9..55fcdd15d564 100644 --- a/packages/main/test/pages/CheckBox.html +++ b/packages/main/test/pages/CheckBox.html @@ -106,6 +106,38 @@ +

+ Font-size based scaling (standalone checkboxes only) + + + + + + + + + + +

+ Font-size scaling with display-only + + + + + + + +

+ Font-size scaling with padding: 0 +
+ + + + + + +
+