deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-02 05:52:46 +02:00
Code Issues Projects Releases Wiki Activity

[MAJOR] use attribute hidden (#691)

Browse source 
* use attribute hidden

* commit something to re-run tests
This commit is contained in:
Konstantin Vyatkin 2019-10-24 13:09:44 -04:00 committed by Josh Johnson
parent 9bb0c628b2
commit 7887c05249
12 changed files with 60 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CONTRIBUTING.md
View file

@ -5,7 +5,8 @@ In lieu of a formal styleguide, take care to maintain the existing coding style
| Task | Usage | | Task | Usage |
| -------------------- | ------------------------------------------------------------ | | -------------------- | ------------------------------------------------------------ |
| `npm run start` | Fire up local server for development | | `npm run start` | Fire up local server for development |
| `npm run test` | Run sequence of tests once | | `npm run test:unit` | Run sequence of unit tests once |
| `npm run test:e2e` | Run sequence of integration tests once |
| `npm run test:watch` | Fire up test server and re-test on file change | | `npm run test:watch` | Fire up test server and re-test on file change |
| `npm run js:build` | Compile Choices to an uglified JavaScript file | | `npm run js:build` | Compile Choices to an uglified JavaScript file |
| `npm run css:watch` | Watch SCSS files for changes. On a change, run build process | | `npm run css:watch` | Watch SCSS files for changes. On a change, run build process |

2
README.md
View file

@ -136,7 +136,6 @@ will be returned. If you target one element, that instance will be returned.
openState: 'is-open', openState: 'is-open',
disabledState: 'is-disabled', disabledState: 'is-disabled',
highlightedState: 'is-highlighted', highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped', flippedState: 'is-flipped',
loadingState: 'is-loading', loadingState: 'is-loading',
noResults: 'has-no-results', noResults: 'has-no-results',
@ -518,7 +517,6 @@ classNames: {
openState: 'is-open', openState: 'is-open',
disabledState: 'is-disabled', disabledState: 'is-disabled',
highlightedState: 'is-highlighted', highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped', flippedState: 'is-flipped',
selectedState: 'is-highlighted', selectedState: 'is-highlighted',
} }

6
cypress/integration/select-multiple.spec.js
View file

@ -79,7 +79,7 @@ describe('Choices - select multiple', () => {
it('updates the value of the original input', () => { it('updates the value of the original input', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.should($select => { .should($select => {
expect($select.val()).to.contain(selectedChoiceText); expect($select.val()).to.contain(selectedChoiceText);
}); });
@ -150,7 +150,7 @@ describe('Choices - select multiple', () => {
it('updates the value of the original input', () => { it('updates the value of the original input', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.should($select => { .should($select => {
const val = $select.val() || []; const val = $select.val() || [];
expect(val).to.not.contain(removedChoiceText); expect(val).to.not.contain(removedChoiceText);
@ -806,7 +806,7 @@ describe('Choices - select multiple', () => {
it('updates the value of the original input', () => { it('updates the value of the original input', () => {
cy.get('[data-test-hook=set-choice-by-value]') cy.get('[data-test-hook=set-choice-by-value]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.should($select => { .should($select => {
const val = $select.val() || []; const val = $select.val() || [];
expect(val).to.contain(dynamicallySelectedChoiceValue); expect(val).to.contain(dynamicallySelectedChoiceValue);

4
cypress/integration/select-one.spec.js
View file

@ -208,7 +208,7 @@ describe('Choices - select one', () => {
it('updates the value of the original input', () => { it('updates the value of the original input', () => {
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.should($select => { .should($select => {
const val = $select.val() || []; const val = $select.val() || [];
@ -818,7 +818,7 @@ describe('Choices - select one', () => {
it('updates the value of the original input', () => { it('updates the value of the original input', () => {
cy.get('[data-test-hook=set-choice-by-value]') cy.get('[data-test-hook=set-choice-by-value]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.should($select => { .should($select => {
const val = $select.val() || []; const val = $select.val() || [];
expect(val).to.contain(dynamicallySelectedChoiceValue); expect(val).to.contain(dynamicallySelectedChoiceValue);

4
cypress/integration/text.spec.js
View file

@ -29,7 +29,7 @@ describe('Choices - text element', () => {
.type('{enter}'); .type('{enter}');
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.should('have.value', textInput); .should('have.value', textInput);
}); });
@ -151,7 +151,7 @@ describe('Choices - text element', () => {
.click(); .click();
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__input.is-hidden') .find('.choices__input[hidden]')
.then($input => { .then($input => {
expect($input.val()).to.not.contain(textInput); expect($input.val()).to.not.contain(textInput);
}); });

6
src/scripts/components/wrapped-element.js
View file

@ -23,7 +23,7 @@ export default class WrappedElement {
conceal() { conceal() {
// Hide passed input // Hide passed input
this.element.classList.add(this.classNames.input); this.element.classList.add(this.classNames.input);
this.element.classList.add(this.classNames.hiddenState); this.element.hidden = true;
// Remove element from tab index // Remove element from tab index
this.element.tabIndex = '-1'; this.element.tabIndex = '-1';
@ -35,14 +35,13 @@ export default class WrappedElement {
this.element.setAttribute('data-choice-orig-style', origStyle); this.element.setAttribute('data-choice-orig-style', origStyle);
} }
this.element.setAttribute('aria-hidden', 'true');
this.element.setAttribute('data-choice', 'active'); this.element.setAttribute('data-choice', 'active');
} }
reveal() { reveal() {
// Reinstate passed element // Reinstate passed element
this.element.classList.remove(this.classNames.input); this.element.classList.remove(this.classNames.input);
this.element.classList.remove(this.classNames.hiddenState); this.element.hidden = false;
this.element.removeAttribute('tabindex'); this.element.removeAttribute('tabindex');
// Recover original styles if any // Recover original styles if any
@ -54,7 +53,6 @@ export default class WrappedElement {
} else { } else {
this.element.removeAttribute('style'); this.element.removeAttribute('style');
} }
this.element.removeAttribute('aria-hidden');
this.element.removeAttribute('data-choice'); this.element.removeAttribute('data-choice');
// Re-assign values - this is weird, I know // Re-assign values - this is weird, I know

9
src/scripts/components/wrapped-element.test.js
View file

@ -53,10 +53,7 @@ describe('components/wrappedElement', () => {
expect( expect(
instance.element.classList.contains(instance.classNames.input), instance.element.classList.contains(instance.classNames.input),
).to.equal(true); ).to.equal(true);
expect( expect(instance.element.hidden).to.be.true;
instance.element.classList.contains(instance.classNames.hiddenState),
).to.equal(true);
expect(instance.element.getAttribute('aria-hidden')).to.equal('true');
expect(instance.element.getAttribute('data-choice')).to.equal('active'); expect(instance.element.getAttribute('data-choice')).to.equal('active');
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal( expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(
originalStyling, originalStyling,
@ -78,9 +75,7 @@ describe('components/wrappedElement', () => {
expect( expect(
instance.element.classList.contains(instance.classNames.input), instance.element.classList.contains(instance.classNames.input),
).to.equal(false); ).to.equal(false);
expect( expect(instance.element.hidden).to.be.false;
instance.element.classList.contains(instance.classNames.hiddenState),
).to.equal(false);
expect(instance.element.getAttribute('style')).to.equal(originalStyling); expect(instance.element.getAttribute('style')).to.equal(originalStyling);
expect(instance.element.getAttribute('aria-hidden')).to.equal(null); expect(instance.element.getAttribute('aria-hidden')).to.equal(null);
expect(instance.element.getAttribute('data-choice')).to.equal(null); expect(instance.element.getAttribute('data-choice')).to.equal(null);

1
src/scripts/constants.js
View file

@ -22,7 +22,6 @@ export const DEFAULT_CLASSNAMES = {
openState: 'is-open', openState: 'is-open',
disabledState: 'is-disabled', disabledState: 'is-disabled',
highlightedState: 'is-highlighted', highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped', flippedState: 'is-flipped',
loadingState: 'is-loading', loadingState: 'is-loading',
noResults: 'has-no-results', noResults: 'has-no-results',

1
src/scripts/constants.test.js
View file

@ -35,7 +35,6 @@ describe('constants', () => {
'openState', 'openState',
'disabledState', 'disabledState',
'highlightedState', 'highlightedState',
'hiddenState',
'flippedState', 'flippedState',
'loadingState', 'loadingState',
'noResults', 'noResults',

16
src/styles/base.scss
View file

@ -12,13 +12,13 @@ $global-font-size-h6 : 14px;
* { * {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale;
} }
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: border-box box-sizing: border-box;
} }
html, html,
@ -30,10 +30,10 @@ body {
} }
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
color: #FFFFFF; color: #ffffff;
background-color: #333; background-color: #333;
overflow-x: hidden; overflow-x: hidden;
} }
@ -73,7 +73,7 @@ h6 {
a, a,
a:visited, a:visited,
a:focus { a:focus {
color: #FFFFFF; color: #ffffff;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
} }
@ -140,7 +140,7 @@ label + p {
} }
.section { .section {
background-color: #FFFFFF; background-color: #ffffff;
padding: $global-guttering; padding: $global-guttering;
color: #333; color: #333;
a, a,
@ -184,10 +184,6 @@ label + p {
text-align: center; text-align: center;
} }
.is-hidden {
display: none;
}
[data-test-hook] { [data-test-hook] {
margin-bottom: $global-guttering; margin-bottom: $global-guttering;
} }

54
src/styles/choices.scss
View file

@ -10,11 +10,11 @@ $choices-guttering: 24px !default;
$choices-border-radius: 2.5px !default; $choices-border-radius: 2.5px !default;
$choices-border-radius-item: 20px !default; $choices-border-radius-item: 20px !default;
$choices-bg-color: #f9f9f9 !default; $choices-bg-color: #f9f9f9 !default;
$choices-bg-color-disabled: #EAEAEA !default; $choices-bg-color-disabled: #eaeaea !default;
$choices-bg-color-dropdown: #FFFFFF !default; $choices-bg-color-dropdown: #ffffff !default;
$choices-text-color: #333333 !default; $choices-text-color: #333333 !default;
$choices-keyline-color: #DDDDDD !default; $choices-keyline-color: #dddddd !default;
$choices-primary-color: #00BCD4 !default; $choices-primary-color: #00bcd4 !default;
$choices-disabled-color: #eaeaea !default; $choices-disabled-color: #eaeaea !default;
$choices-highlight-color: $choices-primary-color !default; $choices-highlight-color: $choices-primary-color !default;
$choices-button-dimension: 8px !default; $choices-button-dimension: 8px !default;
@ -45,7 +45,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
} }
} }
.#{$choices-selector}[data-type*="select-one"] { .#{$choices-selector}[data-type*='select-one'] {
cursor: pointer; cursor: pointer;
.#{$choices-selector}__inner { .#{$choices-selector}__inner {
padding-bottom: 7.5px; padding-bottom: 7.5px;
@ -55,7 +55,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border-bottom: 1px solid $choices-keyline-color; border-bottom: 1px solid $choices-keyline-color;
background-color: #FFFFFF; background-color: #ffffff;
margin: 0; margin: 0;
} }
.#{$choices-selector}__button { .#{$choices-selector}__button {
@ -70,7 +70,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
height: 20px; height: 20px;
width: 20px; width: 20px;
border-radius: 10em; border-radius: 10em;
opacity: .5; opacity: 0.5;
&:hover, &:hover,
&:focus { &:focus {
opacity: 1; opacity: 1;
@ -80,7 +80,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
} }
} }
&:after { &:after {
content: ""; content: '';
height: 0; height: 0;
width: 0; width: 0;
border-style: solid; border-style: solid;
@ -96,7 +96,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
border-color: transparent transparent $choices-text-color transparent; border-color: transparent transparent $choices-text-color transparent;
margin-top: -7.5px; margin-top: -7.5px;
} }
&[dir="rtl"] { &[dir='rtl'] {
&:after { &:after {
left: 11.5px; left: 11.5px;
right: auto; right: auto;
@ -110,8 +110,8 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
} }
} }
.#{$choices-selector}[data-type*="select-multiple"], .#{$choices-selector}[data-type*='select-multiple'],
.#{$choices-selector}[data-type*="text"] { .#{$choices-selector}[data-type*='text'] {
.#{$choices-selector}__inner { .#{$choices-selector}__inner {
cursor: text; cursor: text;
} }
@ -128,7 +128,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
background-size: $choices-button-dimension; background-size: $choices-button-dimension;
width: $choices-button-dimension; width: $choices-button-dimension;
line-height: 1; line-height: 1;
opacity: .75; opacity: 0.75;
border-radius: 0; border-radius: 0;
&:hover, &:hover,
&:focus { &:focus {
@ -170,7 +170,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
display: inline-block; display: inline-block;
padding: 4px 16px 4px 4px; padding: 4px 16px 4px 4px;
width: 100%; width: 100%;
[dir="rtl"] & { [dir='rtl'] & {
padding-right: 4px; padding-right: 4px;
padding-left: 16px; padding-left: 16px;
} }
@ -192,12 +192,12 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
margin-bottom: 3.75px; margin-bottom: 3.75px;
background-color: $choices-primary-color; background-color: $choices-primary-color;
border: 1px solid darken($choices-primary-color, 5%); border: 1px solid darken($choices-primary-color, 5%);
color: #FFFFFF; color: #ffffff;
word-break: break-all; word-break: break-all;
&[data-deletable] { &[data-deletable] {
padding-right: 5px; padding-right: 5px;
} }
[dir="rtl"] & { [dir='rtl'] & {
margin-right: 0; margin-right: 0;
margin-left: 3.75px; margin-left: 3.75px;
} }
@ -236,7 +236,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
bottom: 100%; bottom: 100%;
margin-top: 0; margin-top: 0;
margin-bottom: -1px; margin-bottom: -1px;
border-radius: .25rem .25rem 0 0; border-radius: 0.25rem 0.25rem 0 0;
} }
.#{$choices-selector}__list { .#{$choices-selector}__list {
position: relative; position: relative;
@ -249,7 +249,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
position: relative; position: relative;
padding: 10px; padding: 10px;
font-size: $choices-font-size-md; font-size: $choices-font-size-md;
[dir="rtl"] & { [dir='rtl'] & {
text-align: right; text-align: right;
} }
} }
@ -265,7 +265,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
[dir="rtl"] & { [dir='rtl'] & {
text-align: right; text-align: right;
padding-left: 100px; padding-left: 100px;
padding-right: 10px; padding-right: 10px;
@ -276,9 +276,9 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
} }
} }
&.is-highlighted { &.is-highlighted {
background-color: mix(#000000, #FFFFFF, 5%); background-color: mix(#000000, #ffffff, 5%);
&:after { &:after {
opacity: .5; opacity: 0.5;
} }
} }
} }
@ -295,7 +295,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
.#{$choices-selector}__item--disabled { .#{$choices-selector}__item--disabled {
cursor: not-allowed; cursor: not-allowed;
user-select: none; user-select: none;
opacity: .5; opacity: 0.5;
} }
.#{$choices-selector}__heading { .#{$choices-selector}__heading {
@ -333,19 +333,21 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
&:focus { &:focus {
outline: 0; outline: 0;
} }
[dir="rtl"] & { [dir='rtl'] & {
padding-right: 2px; padding-right: 2px;
padding-left: 0; padding-left: 0;
} }
} }
.#{$choices-selector}__placeholder { .#{$choices-selector}__placeholder {
opacity: .5; opacity: 0.5;
} }
.#{$choices-selector}__input.is-hidden, .#{$choices-selector}__input[hidden],
.#{$choices-selector}[data-type*="select-one"] .#{$choices-selector}__input.is-hidden, .#{$choices-selector}[data-type*='select-one']
.#{$choices-selector}[data-type*="select-multiple"] .#{$choices-selector}__input.is-hidden { .#{$choices-selector}__input[hidden],
.#{$choices-selector}[data-type*='select-multiple']
.#{$choices-selector}__input[hidden] {
display: none; display: none;
} }

2
types/index.d.ts vendored
View file

@ -199,8 +199,6 @@ declare namespace Choices {
disabledState?: string; disabledState?: string;
/** @default 'is-highlighted' */ /** @default 'is-highlighted' */
highlightedState?: string; highlightedState?: string;
/** @default 'is-hidden' */
hiddenState?: string;
/** @default 'is-flipped' */ /** @default 'is-flipped' */
flippedState?: string; flippedState?: string;
/** @default 'is-loading' */ /** @default 'is-loading' */