Skip to content

refactor!: Checkbox, Checkbox Group and Radio Button Group base styles #9154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: base-styles
Choose a base branch
from
+965 −329
Open

refactor!: Checkbox, Checkbox Group and Radio Button Group base styles #9154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f1c8de3
refactor!: Checkbox, Checkbox Group and Radio Button Group base styles
jouni May 14, 2025
5f85602
fix: parametrize group gap custom property
jouni May 14, 2025
6a6c7ab
remove redundant custom property
jouni May 14, 2025
a9f8e67
fix readonly border styles
jouni May 14, 2025
1ae7d07
visual tests for base checkbox
jouni May 14, 2025
c644724
visual tests for base checkbox-group
jouni May 14, 2025
858bc73
visual tests for radio-button and radio-group
jouni May 14, 2025
6e95df1
remove test element from dev page
jouni May 19, 2025
bf15c60
fix lint error
jouni May 19, 2025
e79c99f
fix required indicator layout
jouni May 19, 2025
45d4872
Update checkbox.test.js
jouni May 20, 2025
f9e9a41
Update component-tooltip.test.js
jouni May 20, 2025
046b2ae
Revert "Update component-tooltip.test.js"
jouni May 20, 2025
db7fcaf
Fix checkbox-group with tooltip to not have zero height
jouni May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 103 additions & 58 deletions dev/checkbox-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -8,68 +8,113 @@
<script type="module" src="./common.js"></script>

<script type="module">
import '@vaadin/checkbox-group';
import '@vaadin/tooltip';
import '@vaadin/checkbox-group/src/vaadin-lit-checkbox-group.js';
</script>

<style>
label img {
height: 1lh;
padding: 2px;
box-sizing: border-box;
vertical-align: top;
}
</style>
</head>

<body>
<vaadin-checkbox-group label="Preferred language of contact:">
<vaadin-checkbox value="en" label="English"></vaadin-checkbox>
<vaadin-checkbox value="fr" label="Français"></vaadin-checkbox>
<vaadin-checkbox value="de" label="Deutsch"></vaadin-checkbox>
<vaadin-tooltip slot="tooltip" text="If not selected, English is used"></vaadin-tooltip>
</vaadin-checkbox-group>
<section>
<h2>Plain Text Labels</h2>
<vaadin-checkbox-group label="Options">
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
<vaadin-checkbox value="2" label="Option Two"></vaadin-checkbox>
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
</vaadin-checkbox-group>
</section>

<section>
<h2>Horizontal</h2>
<vaadin-checkbox-group label="Options" theme="horizontal">
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
<vaadin-checkbox value="2" label="Option Two"></vaadin-checkbox>
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
</vaadin-checkbox-group>
</section>

<section>
<h2>Read Only &amp; Disabled</h2>
<vaadin-checkbox-group label="Options" readonly>
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
<vaadin-checkbox value="2" label="Option Two" indeterminate></vaadin-checkbox>
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
</vaadin-checkbox-group>

<vaadin-checkbox-group label="Options" disabled>
<vaadin-checkbox value="1" label="Option One" checked></vaadin-checkbox>
<vaadin-checkbox value="2" label="Option Two" indeterminate></vaadin-checkbox>
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
</vaadin-checkbox-group>
</section>

<br />
<br />
<section>
<h2>Bells &amp; Whistles</h2>
<vaadin-checkbox-group
theme="helper-above-field"
label="Payment Methods"
helper-text="Choose which payment methods you would like to enable."
required
error-message="Choose one or more payment methods."
invalid
>
<vaadin-checkbox value="1" helper-text="Expiry date:12/2026">
<label slot="label">
<img
src="data:image/png;base64,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"
alt="Visa"
/>
<span>**** **** **** 1234</span>
</label>
</vaadin-checkbox>
<vaadin-checkbox value="2" helper-text="Expiry date:11/2026">
<label slot="label">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAAwCAMAAACIXLyeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABsUExURUdwTOwAG/mIIPifG+wAG+wAG/eeG+sAG/tFJ/leIO0AHO0AHPqgHfieG/eeG+wAG/mgHfieG/ifG/ifG+wAG/ieG/mgHOwAG/tOCusAG/eeG/9fAP5rBfmXGPYxDf15C/IcE/pECP5VA/qLE2jxkIMAAAAZdFJOUwBsIZPfsu/wCRQ7Vy/gx8w/tWp9hqVZmOTex8qZAAABoklEQVRIx62XWXLDIBBEEWLXvhvkJE5y/ztG3mLZQgOU6V9VvaJpBNMIvUpkEyVcc1LRXonXr3k7lAUzrCiHViKXZEL1Wpxmq6/1wMxaZYdBWM/1RiS5LXEszVbDLlAkFtgFqM4ubbBFLLV7xpXe1SQ7sytWW2iKa0CHDwOo3dASCKa/5yPISwNpcxBPOWku3tov5m7awoNw5pGHqCDaab7rC8Ix7LdxP/+4GbQ73BcHWv180Bx28yuuBxc3r/UL4Zrrj+q9OK80vHfOuXuXw0f9YvUItwgKwiuMLMSrw22H0OSfqzPbMnDrHDiGEAnDgVkYiYKScOEw0jFxeejqju/gTsFmo0YhYh+UPu4xjvyTRb4CIl9QYW7d12e8yz33eBf9c729jILEeRhx1Gf7MfVEGSqkFLepV3rZdeWA69pr9PQZyManAS+LOi4uPP7OMNttR21w/w5gCqOtowD59qJl+79qbu8pGQFqCm52ltaJoN5T3VtZbQOmYM8TGeXPFU+t62JaPA+IHqVRqJ5W5Nw/p0Rtq9aYNksDLcomHS0u/wCadzZdj+ddpQAAAABJRU5ErkJggg=="
alt="Mastercard"
/>
<span>**** **** **** 7890</span>
</label>
</vaadin-checkbox>
<vaadin-checkbox value="3" helper-text="Expiry date:10/2026">
<label slot="label">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURRV70wBvz/////D3/CaF10eX3Xq05pPC69bp+KfO7zuR21ih4Ap10rza82iq41FJ1oUAAAABdFJOU/2D6lbHAAABpUlEQVQ4y2OQwQ5EGASxA4FRCRIkBFx8XFxEXKDAkcUFyPdxcRBgkFXSVFJKUoICCyDWBEEBBqesJtW1uqtVVy2vWlqUqbsrKcqo65FVpwBDhdQjHT5VFp3cGwnTzy7rCb8pldQo2QiUMPM4rPPA5onO6r0JM88uK1DSimRqXACSMNjJrjPnSYlOWG4iY9GyEqXGlycbGwKBEjWhC3Rmi5cAjUoxebSs8cWDUK9GS0GgRJiSyZW7HLNUGNhLNTy3a671VGqYYLQBKKF0SwnJrcZKSqlKSrog54Y6Lg2FgoDQ0IUuLgeBXgwNITcQHxsbG9tdNkYGFmCJ5N277xVZz4uKtd6dfHv35rZ3l+ueQSTEynslQ0zCYhqfec8pL2Z91+r3EiIhndZUyKFSNLGxdvectGSxGVo7L0MkRHc3XXRWETzWeHDFnN2bpq6ZsZUbIiHZYcHmrVKs1HjbeU5Hk7HpY+MUiISgYOmmnpLizMampRMFJQQFugSPgyVAEahhpKQsp6QMChpjI2VjZbDEsrS0tISwtDyp8tJyKHg1mj9IkMABWAD0UMnWDyQ8pAAAAABJRU5ErkJggg=="
alt="American Express"
/>
<span>**** **** **** 5432</span>
</label>
</vaadin-checkbox>
</vaadin-checkbox-group>
</section>

<vaadin-checkbox-group theme="vertical" label="Payment methods">
<vaadin-checkbox value="1">
<label slot="label">
<div>
<vaadin-horizontal-layout theme="spacing">
<img
src="data:image/png;base64,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"
alt="Visa"
style="height: 1em"
/>
<span>**** **** **** 1234</span>
</vaadin-horizontal-layout>
<div>Expiry date:12/2026</div>
</div>
</label>
</vaadin-checkbox>
<vaadin-checkbox value="2" checked>
<label slot="label">
<div>
<vaadin-horizontal-layout theme="spacing">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAAwCAMAAACIXLyeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABsUExURUdwTOwAG/mIIPifG+wAG+wAG/eeG+sAG/tFJ/leIO0AHO0AHPqgHfieG/eeG+wAG/mgHfieG/ifG/ifG+wAG/ieG/mgHOwAG/tOCusAG/eeG/9fAP5rBfmXGPYxDf15C/IcE/pECP5VA/qLE2jxkIMAAAAZdFJOUwBsIZPfsu/wCRQ7Vy/gx8w/tWp9hqVZmOTex8qZAAABoklEQVRIx62XWXLDIBBEEWLXvhvkJE5y/ztG3mLZQgOU6V9VvaJpBNMIvUpkEyVcc1LRXonXr3k7lAUzrCiHViKXZEL1Wpxmq6/1wMxaZYdBWM/1RiS5LXEszVbDLlAkFtgFqM4ubbBFLLV7xpXe1SQ7sytWW2iKa0CHDwOo3dASCKa/5yPISwNpcxBPOWku3tov5m7awoNw5pGHqCDaab7rC8Ix7LdxP/+4GbQ73BcHWv180Bx28yuuBxc3r/UL4Zrrj+q9OK80vHfOuXuXw0f9YvUItwgKwiuMLMSrw22H0OSfqzPbMnDrHDiGEAnDgVkYiYKScOEw0jFxeejqju/gTsFmo0YhYh+UPu4xjvyTRb4CIl9QYW7d12e8yz33eBf9c729jILEeRhx1Gf7MfVEGSqkFLepV3rZdeWA69pr9PQZyManAS+LOi4uPP7OMNttR21w/w5gCqOtowD59qJl+79qbu8pGQFqCm52ltaJoN5T3VtZbQOmYM8TGeXPFU+t62JaPA+IHqVRqJ5W5Nw/p0Rtq9aYNksDLcomHS0u/wCadzZdj+ddpQAAAABJRU5ErkJggg=="
alt="Mastercard"
style="height: 1em"
/>
<span>**** **** **** 7890</span>
</vaadin-horizontal-layout>
<div>Expiry date:11/2026</div>
</div>
</label>
</vaadin-checkbox>
<vaadin-checkbox value="3">
<label slot="label">
<div>
<vaadin-horizontal-layout theme="spacing">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURRV70wBvz/////D3/CaF10eX3Xq05pPC69bp+KfO7zuR21ih4Ap10rza82iq41FJ1oUAAAABdFJOU/2D6lbHAAABpUlEQVQ4y2OQwQ5EGASxA4FRCRIkBFx8XFxEXKDAkcUFyPdxcRBgkFXSVFJKUoICCyDWBEEBBqesJtW1uqtVVy2vWlqUqbsrKcqo65FVpwBDhdQjHT5VFp3cGwnTzy7rCb8pldQo2QiUMPM4rPPA5onO6r0JM88uK1DSimRqXACSMNjJrjPnSYlOWG4iY9GyEqXGlycbGwKBEjWhC3Rmi5cAjUoxebSs8cWDUK9GS0GgRJiSyZW7HLNUGNhLNTy3a671VGqYYLQBKKF0SwnJrcZKSqlKSrog54Y6Lg2FgoDQ0IUuLgeBXgwNITcQHxsbG9tdNkYGFmCJ5N277xVZz4uKtd6dfHv35rZ3l+ueQSTEynslQ0zCYhqfec8pL2Z91+r3EiIhndZUyKFSNLGxdvectGSxGVo7L0MkRHc3XXRWETzWeHDFnN2bpq6ZsZUbIiHZYcHmrVKs1HjbeU5Hk7HpY+MUiISgYOmmnpLizMampRMFJQQFugSPgyVAEahhpKQsp6QMChpjI2VjZbDEsrS0tISwtDyp8tJyKHg1mj9IkMABWAD0UMnWDyQ8pAAAAABJRU5ErkJggg=="
alt="American Express"
style="height: 1em"
/>
<span>**** **** **** 5432</span>
</vaadin-horizontal-layout>
<div>Expiry date:10/2026</div>
</div>
</label>
</vaadin-checkbox>
</vaadin-checkbox-group>
<section>
<h2>Content &amp; Layout Variations</h2>
<p>Resize the field to test how content flows.</p>
<vaadin-checkbox-group
label="A very long label for this field"
helper-text="If the label wasn't enough to tell what options you should choose, then this long description should be."
error-message="In case you didn't select any of the options in this required field, this error message is here to let you know that you really should select at least one option."
required
invalid
theme="horizontal"
style="resize: horizontal; overflow: hidden; padding: 1px"
>
<vaadin-checkbox value="1" label="Option One"></vaadin-checkbox>
<vaadin-checkbox value="2" label="Option Two"></vaadin-checkbox>
<vaadin-checkbox value="3" label="Option Three"></vaadin-checkbox>
<vaadin-checkbox value="4" label="Option Four"></vaadin-checkbox>
<vaadin-checkbox value="5" label="Option Five"></vaadin-checkbox>
<vaadin-checkbox value="6" label="Option Six"></vaadin-checkbox>
<vaadin-checkbox value="7" label="Option Seven"></vaadin-checkbox>
</vaadin-checkbox-group>
</section>
</body>
</html>
38 changes: 31 additions & 7 deletions dev/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -8,15 +8,39 @@
<script type="module" src="./common.js"></script>

<script type="module">
import '@vaadin/checkbox';
import '@vaadin/tooltip';
import '@vaadin/checkbox/src/vaadin-lit-checkbox.js';
import '@vaadin/icon/src/vaadin-lit-icon.js';
import '@vaadin/icons';
</script>
</head>

<body>
<vaadin-checkbox>
<label slot="label">I accept <a href="http://vaadin.com">the terms and conditions</a></label>
<vaadin-tooltip slot="tooltip" text="Please read first"></vaadin-tooltip>
</vaadin-checkbox>
<section>
<h2>Label &amp; Description</h2>
<vaadin-checkbox label="Checked" checked></vaadin-checkbox>
<vaadin-checkbox label="Indeterminate" indeterminate></vaadin-checkbox>
<vaadin-checkbox label="Unchecked"></vaadin-checkbox>
</section>

<section>
<h2>All Features</h2>
<vaadin-checkbox
label="Label"
helper-text="Description"
required
error-message="You have to check me."
invalid
></vaadin-checkbox>
</section>

<section>
<h2>Complex Label</h2>
<vaadin-checkbox>
<label slot="label">
<vaadin-icon icon="vaadin:file"></vaadin-icon>
I accept <a href="http://vaadin.com">the terms and conditions</a>
</label>
</vaadin-checkbox>
</section>
</body>
</html>
12 changes: 12 additions & 0 deletions dev/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,17 @@ addGlobalThemeStyles(
margin: 2em 0 1.25em;
text-box: cap alphabetic;
}

section {
display: flex;
flex-wrap: wrap;
gap: 1lh 1.5lh;
margin: 2lh 0;
}

section > :is(h1, h2, h3, h4, h5, h6, p) {
width: 100%;
margin: 0;
}
`,
);
Loading
Loading