Skip to content

feat(ui5-checkbox): make component customizable - #13617

Merged
NakataCode merged 7 commits into
mainfrom
checkbox-fontsize
Aug 6, 2026
Merged

feat(ui5-checkbox): make component customizable#13617
NakataCode merged 7 commits into
mainfrom
checkbox-fontsize

Conversation

@NakataCode

@NakataCode NakataCode commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

The checkbox now scales proportionally when font-size is set on the host — the inner box, icon, indeterminate dot, and display-only icon are all sized in em so they follow the scale. A few internal changes were needed to make this work correctly: overflow: hidden moved to .ui5-checkbox-root, padding-block is now always applied, and compact density overrides were added for the hardcoded em values. Default rendering is pixel-identical to before.

Customization examples:

/* Scale the entire component by setting font-size on the host */
  .custom {
      font-size: 20px;
  }

  /* Reduce the padding around the box via the root part */
  .custom::part(root) {
      padding: 4px;
  }

  /* Fix the focus ring to hug the new bounds after padding override */
  .custom::part(root):focus::before,
  .custom::part(root):focus-visible::before {
      inset: 0;
  }

JIRA: BGSOFUIPIRIN-7002

@ui5-webcomponents-bot

ui5-webcomponents-bot commented Jun 1, 2026

Copy link
Copy Markdown
Collaborator

🧹 Preview deployment cleaned up: https://pr-13617--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview June 1, 2026 09:53 Inactive
@NakataCode
NakataCode temporarily deployed to netlify-preview June 2, 2026 08:55 — with GitHub Actions Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview June 2, 2026 09:02 Inactive
@NakataCode
NakataCode temporarily deployed to netlify-preview June 2, 2026 09:10 — with GitHub Actions Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview June 2, 2026 09:18 Inactive
@NakataCode
NakataCode temporarily deployed to netlify-preview June 2, 2026 11:54 — with GitHub Actions Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview June 2, 2026 12:01 Inactive
@yanaminkova
yanaminkova requested a review from dobrinyonkov June 15, 2026 07:55
Comment thread packages/main/src/themes/CheckBox.css
Comment thread packages/main/cypress/specs/CheckBox.cy.tsx Outdated
@NakataCode
NakataCode merged commit 4062bc7 into main Aug 6, 2026
13 checks passed
@NakataCode
NakataCode deleted the checkbox-fontsize branch August 6, 2026 09:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants