Skip to content

Commit

Permalink
Update checkbox-group to use required field mixin (#125)
Browse files Browse the repository at this point in the history 
* Update checkbox-group to use required field mixin

* Update demos
  • Loading branch information
@web-padawan @limonte
web-padawan authored and limonte committed Sep 14, 2018
1 parent df62df2 commit 96d5b55
Show file tree
Hide file tree
Showing 11 changed files with 40 additions and 137 deletions.
4 changes: 2 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"polymer": "^2.0.0",
"vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
"vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
"vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0-beta1",
"vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0-beta1",
"vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.2.0",
"vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
"vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0"
},
"devDependencies": {
Expand Down
24 changes: 12 additions & 12 deletions demo/checkbox-group-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,29 +37,29 @@ <h3>Checkbox Group Disabled</h3>
<h3>Checkbox Group with Iron Form with same names</h3>
<vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form">
<template preserve-content>
<iron-form id="test-form">
<iron-form>
<form>
<vaadin-checkbox-group>
<vaadin-checkbox name="checkbox-group" value="1">1</vaadin-checkbox>
<vaadin-checkbox name="checkbox-group" value="2">2</vaadin-checkbox>
<vaadin-checkbox name="checkbox-group" value="3">3</vaadin-checkbox>
<vaadin-checkbox name="checkbox-group" value="4">4</vaadin-checkbox>
</vaadin-checkbox-group>
<vaadin-button id="submit-button">Submit</vaadin-button>
<vaadin-button>Submit</vaadin-button>
</form>
<div id="iron-form-output"></div>
<div id="form-output"></div>
</iron-form>
<script>
window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form', function(document) {
const testForm = document.getElementById('test-form');
const submitButton = document.getElementById('submit-button');
const testForm = document.querySelector('iron-form');
const submitButton = document.querySelector('vaadin-button');

submitButton.addEventListener('click', function(event) {
testForm.submit();
});

testForm.addEventListener('iron-form-submit', function(event) {
this.querySelector('#iron-form-output').innerHTML = JSON.stringify(event.detail);
document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
});
});
</script>
Expand All @@ -69,29 +69,29 @@ <h3>Checkbox Group with Iron Form with same names</h3>
<h3>Checkbox Group with Iron Form with different names</h3>
<vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form-with-custom-value">
<template preserve-content>
<iron-form id="test-form-custom-value">
<iron-form>
<form>
<vaadin-checkbox-group>
<vaadin-checkbox name="first-checkbox-group" value="1">1</vaadin-checkbox>
<vaadin-checkbox name="second-checkbox-group" value="2">2</vaadin-checkbox>
<vaadin-checkbox name="third-checkbox-group" value="3">3</vaadin-checkbox>
<vaadin-checkbox name="fourth-checkbox-group" value="4">4</vaadin-checkbox>
</vaadin-checkbox-group>
<vaadin-button id="submit-button-custom-value">Submit</vaadin-button>
<vaadin-button>Submit</vaadin-button>
</form>
<div id="iron-form-output-custom-value"></div>
<div id="form-output"></div>
</iron-form>
<script>
window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form-with-custom-value', function(document) {
const testForm = document.getElementById('test-form-custom-value');
const submitButton = document.getElementById('submit-button-custom-value');
const testForm = document.querySelector('iron-form');
const submitButton = document.querySelector('vaadin-button');

submitButton.addEventListener('click', function(event) {
testForm.submit();
});

testForm.addEventListener('iron-form-submit', function(event) {
this.querySelector('#iron-form-output-custom-value').innerHTML = JSON.stringify(event.detail);
document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
});
});
</script>
Expand Down
40 changes: 20 additions & 20 deletions demo/checkbox-group-validation-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,50 +9,50 @@
<h3>Checkbox Group with validation message</h3>
<vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-validation-message">
<template preserve-content>
<vaadin-checkbox-group required label="Preferred language of contact:" error-message="Please choose a language.">
<vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
<vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
<vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
</vaadin-checkbox-group>
<vaadin-button id="submit-button-validation-message">Validate</vaadin-button>
<script>
window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-validation-message', function(document) {
const checkboxGroup = document.querySelector('vaadin-checkbox-group');
const submitButton = document.getElementById('submit-button-validation-message');
<vaadin-checkbox-group required label="Preferred language of contact:" error-message="Please choose a language.">
<vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
<vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
<vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
</vaadin-checkbox-group>
<vaadin-button>Validate</vaadin-button>
<script>
window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-validation-message', function(document) {
const checkboxGroup = document.querySelector('vaadin-checkbox-group');
const submitButton = document.querySelector('vaadin-button');

submitButton.addEventListener('click', function(event) {
checkboxGroup.validate();
});
submitButton.addEventListener('click', function(event) {
checkboxGroup.validate();
});
</script>
});
</script>
</template>
</vaadin-demo-snippet>

<h3>Checkbox Group with Iron Form validation</h3>
<vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form-validation">
<template preserve-content>
<iron-form id="test-form-validation">
<iron-form>
<form>
<vaadin-checkbox-group required label="Preferred language of contact:">
<vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
<vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
<vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
</vaadin-checkbox-group>
<vaadin-button id="submit-button-validation">Submit</vaadin-button>
<vaadin-button>Submit</vaadin-button>
</form>
<div id="iron-form-output-validation"></div>
<div id="form-output"></div>
</iron-form>
<script>
window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form-validation', function(document) {
const testForm = document.getElementById('test-form-validation');
const submitButton = document.getElementById('submit-button-validation');
const testForm = document.querySelector('iron-form');
const submitButton = document.querySelector('vaadin-button');

submitButton.addEventListener('click', function(event) {
testForm.submit();
});

testForm.addEventListener('iron-form-submit', function(event) {
this.querySelector('#iron-form-output-validation').innerHTML = JSON.stringify(event.detail);
document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
});
});
</script>
Expand Down
Binary file modified test/visual/screens/vaadin-checkbox/group-tests-lumo/default/chrome.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/screens/vaadin-checkbox/group-tests-lumo/default/firefox.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/screens/vaadin-checkbox/validation-tests-material/error/chrome.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/screens/vaadin-checkbox/validation-tests-material/error/firefox.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 3 additions & 59 deletions theme/lumo/vaadin-checkbox-group-styles.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">

<dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
<template>
<style>
<style include="lumo-required-field">
:host {
color: var(--lumo-body-text-color);
font-size: var(--lumo-font-size-m);
Expand All @@ -18,71 +20,13 @@
align-items: center;
}

[part="label"] {
display: block;
}

/* Used for required and invalid indicators */
[part="label"]::after {
content: var(--lumo-required-field-indicator, "•");
transition: opacity 0.2s;
opacity: 0;
color: var(--lumo-primary-text-color);
position: absolute;
right: 0;
width: 1em;
text-align: center;
}

[part="error-message"] {
max-height: 0;
overflow: hidden;
font-size: var(--lumo-font-size-xs);
line-height: var(--lumo-line-height-xs);
color: var(--lumo-error-text-color);
will-change: max-height;
transition: 0.4s max-height;
}

:host([theme~="vertical"]) [part="group-field"] {
display: flex;
flex-direction: column;
}

:host([has-label])::before {
margin-top: calc(var(--lumo-font-size-s) * 1.5);
}

:host([has-label]) {
padding-top: var(--lumo-space-m);
}

[part="label"] {
align-self: flex-start;
color: var(--lumo-secondary-text-color);
font-weight: 500;
font-size: var(--lumo-font-size-s);
margin-left: calc(var(--lumo-border-radius) / 4);
transition: color 0.2s;
line-height: 1;
padding-bottom: 0.7em;
padding-right: 1em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
max-width: 100%;
box-sizing: border-box;
}

:host([invalid]) [part="label"]::after {
color: var(--lumo-error-text-color);
opacity: 1;
}

[part="error-message"][aria-hidden="false"] {
color: var(--lumo-error-text-color);
max-height: 5em;
}
</style>
</template>
Expand Down
47 changes: 3 additions & 44 deletions theme/material/vaadin-checkbox-group-styles.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">

<dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
<template>
<style>
<style include="material-required-field">
:host {
display: inline-flex;
position: relative;
Expand Down Expand Up @@ -41,49 +43,6 @@
color: var(--material-disabled-text-color);
-webkit-text-fill-color: var(--material-disabled-text-color);
}

[part="label"] {
display: block;
position: absolute;
top: 8px;
font-size: 1em;
line-height: 1;
height: 20px;
margin-bottom: -4px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
color: var(--material-secondary-text-color);
transform-origin: 0 75%;
transform: scale(0.75);
}

:host([invalid]) [part="label"] {
color: var(--material-error-text-color);
}

[part="error-message"] {
font-size: .75em;
line-height: 1;
color: var(--material-error-text-color);
margin-top: 6px;
}

:host(:not([invalid])) [part="error-message"] {
margin-top: 0;
max-height: 0;
overflow: hidden;
}

:host([invalid]) [part="error-message"] {
animation: reveal 0.2s;
}

@keyframes reveal {
0% {
opacity: 0;
}
}
</style>
</template>
</dom-module>

0 comments on commit 96d5b55

Please sign in to comment.