diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a9667da46..da7759231 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,11 +1,12 @@ -# Contributions +# Contributions In lieu of a formal styleguide, take care to maintain the existing coding style ensuring there are no linting errors. Add unit tests for any new or changed functionality. Lint and test your code using the npm scripts below: ### NPM tasks | Task | Usage | | -------------------- | ------------------------------------------------------------ | | `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 js:build` | Compile Choices to an uglified JavaScript file | | `npm run css:watch` | Watch SCSS files for changes. On a change, run build process | diff --git a/README.md b/README.md index 4ca875a29..553aa5939 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,6 @@ will be returned. If you target one element, that instance will be returned. openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', - hiddenState: 'is-hidden', flippedState: 'is-flipped', loadingState: 'is-loading', noResults: 'has-no-results', @@ -518,7 +517,6 @@ classNames: { openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', - hiddenState: 'is-hidden', flippedState: 'is-flipped', selectedState: 'is-highlighted', } diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index bd45b98ce..73970f0f7 100644 --- a/cypress/integration/select-multiple.spec.js +++ b/cypress/integration/select-multiple.spec.js @@ -79,7 +79,7 @@ describe('Choices - select multiple', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=basic]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { expect($select.val()).to.contain(selectedChoiceText); }); @@ -150,7 +150,7 @@ describe('Choices - select multiple', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=basic]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; expect(val).to.not.contain(removedChoiceText); @@ -806,7 +806,7 @@ describe('Choices - select multiple', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=set-choice-by-value]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; expect(val).to.contain(dynamicallySelectedChoiceValue); diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js index dfbcdf5d0..4c640c845 100644 --- a/cypress/integration/select-one.spec.js +++ b/cypress/integration/select-one.spec.js @@ -208,7 +208,7 @@ describe('Choices - select one', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=remove-button]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; @@ -818,7 +818,7 @@ describe('Choices - select one', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=set-choice-by-value]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; expect(val).to.contain(dynamicallySelectedChoiceValue); diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js index a74afc8f3..0b3348d21 100644 --- a/cypress/integration/text.spec.js +++ b/cypress/integration/text.spec.js @@ -29,7 +29,7 @@ describe('Choices - text element', () => { .type('{enter}'); cy.get('[data-test-hook=basic]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should('have.value', textInput); }); @@ -151,7 +151,7 @@ describe('Choices - text element', () => { .click(); cy.get('[data-test-hook=remove-button]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .then($input => { expect($input.val()).to.not.contain(textInput); }); diff --git a/src/scripts/components/wrapped-element.js b/src/scripts/components/wrapped-element.js index a185be767..04b258866 100644 --- a/src/scripts/components/wrapped-element.js +++ b/src/scripts/components/wrapped-element.js @@ -23,7 +23,7 @@ export default class WrappedElement { conceal() { // Hide passed input this.element.classList.add(this.classNames.input); - this.element.classList.add(this.classNames.hiddenState); + this.element.hidden = true; // Remove element from tab index this.element.tabIndex = '-1'; @@ -35,14 +35,13 @@ export default class WrappedElement { this.element.setAttribute('data-choice-orig-style', origStyle); } - this.element.setAttribute('aria-hidden', 'true'); this.element.setAttribute('data-choice', 'active'); } reveal() { // Reinstate passed element this.element.classList.remove(this.classNames.input); - this.element.classList.remove(this.classNames.hiddenState); + this.element.hidden = false; this.element.removeAttribute('tabindex'); // Recover original styles if any @@ -54,7 +53,6 @@ export default class WrappedElement { } else { this.element.removeAttribute('style'); } - this.element.removeAttribute('aria-hidden'); this.element.removeAttribute('data-choice'); // Re-assign values - this is weird, I know diff --git a/src/scripts/components/wrapped-element.test.js b/src/scripts/components/wrapped-element.test.js index bf2b99f60..e04c8cc35 100644 --- a/src/scripts/components/wrapped-element.test.js +++ b/src/scripts/components/wrapped-element.test.js @@ -53,10 +53,7 @@ describe('components/wrappedElement', () => { expect( instance.element.classList.contains(instance.classNames.input), ).to.equal(true); - expect( - instance.element.classList.contains(instance.classNames.hiddenState), - ).to.equal(true); - expect(instance.element.getAttribute('aria-hidden')).to.equal('true'); + expect(instance.element.hidden).to.be.true; expect(instance.element.getAttribute('data-choice')).to.equal('active'); expect(instance.element.getAttribute('data-choice-orig-style')).to.equal( originalStyling, @@ -78,9 +75,7 @@ describe('components/wrappedElement', () => { expect( instance.element.classList.contains(instance.classNames.input), ).to.equal(false); - expect( - instance.element.classList.contains(instance.classNames.hiddenState), - ).to.equal(false); + expect(instance.element.hidden).to.be.false; expect(instance.element.getAttribute('style')).to.equal(originalStyling); expect(instance.element.getAttribute('aria-hidden')).to.equal(null); expect(instance.element.getAttribute('data-choice')).to.equal(null); diff --git a/src/scripts/constants.js b/src/scripts/constants.js index 13a720da5..dd8192cc1 100644 --- a/src/scripts/constants.js +++ b/src/scripts/constants.js @@ -22,7 +22,6 @@ export const DEFAULT_CLASSNAMES = { openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', - hiddenState: 'is-hidden', flippedState: 'is-flipped', loadingState: 'is-loading', noResults: 'has-no-results', diff --git a/src/scripts/constants.test.js b/src/scripts/constants.test.js index 89623dc0c..9061f2074 100644 --- a/src/scripts/constants.test.js +++ b/src/scripts/constants.test.js @@ -35,7 +35,6 @@ describe('constants', () => { 'openState', 'disabledState', 'highlightedState', - 'hiddenState', 'flippedState', 'loadingState', 'noResults', diff --git a/src/styles/base.scss b/src/styles/base.scss index d649a2ed7..f293e6985 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -2,23 +2,23 @@ = Generic styling = =============================================*/ -$global-guttering : 24px; -$global-font-size-h1 : 32px; -$global-font-size-h2 : 24px; -$global-font-size-h3 : 20px; -$global-font-size-h4 : 18px; -$global-font-size-h5 : 16px; -$global-font-size-h6 : 14px; +$global-guttering: 24px; +$global-font-size-h1: 32px; +$global-font-size-h2: 24px; +$global-font-size-h3: 20px; +$global-font-size-h4: 18px; +$global-font-size-h5: 16px; +$global-font-size-h6: 14px; * { -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale + -moz-osx-font-smoothing: grayscale; } *, *:before, *:after { - box-sizing: border-box + box-sizing: border-box; } html, @@ -30,10 +30,10 @@ 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; line-height: 1.4; - color: #FFFFFF; + color: #ffffff; background-color: #333; overflow-x: hidden; } @@ -52,7 +52,7 @@ p { hr { display: block; - margin: $global-guttering*1.25 0; + margin: $global-guttering * 1.25 0; border: 0; border-bottom: 1px solid #eaeaea; height: 1px; @@ -73,7 +73,7 @@ h6 { a, a:visited, a:focus { - color: #FFFFFF; + color: #ffffff; text-decoration: none; font-weight: 600; } @@ -133,14 +133,14 @@ label + p { display: block; margin: auto; max-width: 40em; - padding: $global-guttering*2; + padding: $global-guttering * 2; @media (max-width: 620px) { padding: 0; } } .section { - background-color: #FFFFFF; + background-color: #ffffff; padding: $global-guttering; color: #333; a, @@ -184,12 +184,8 @@ label + p { text-align: center; } -.is-hidden { - display: none; -} - [data-test-hook] { margin-bottom: $global-guttering; } -/*===== End of Section comment block ======*/ \ No newline at end of file +/*===== End of Section comment block ======*/ diff --git a/src/styles/choices.scss b/src/styles/choices.scss index ca6d9c55a..f7a6d229f 100644 --- a/src/styles/choices.scss +++ b/src/styles/choices.scss @@ -10,11 +10,11 @@ $choices-guttering: 24px !default; $choices-border-radius: 2.5px !default; $choices-border-radius-item: 20px !default; $choices-bg-color: #f9f9f9 !default; -$choices-bg-color-disabled: #EAEAEA !default; -$choices-bg-color-dropdown: #FFFFFF !default; +$choices-bg-color-disabled: #eaeaea !default; +$choices-bg-color-dropdown: #ffffff !default; $choices-text-color: #333333 !default; -$choices-keyline-color: #DDDDDD !default; -$choices-primary-color: #00BCD4 !default; +$choices-keyline-color: #dddddd !default; +$choices-primary-color: #00bcd4 !default; $choices-disabled-color: #eaeaea !default; $choices-highlight-color: $choices-primary-color !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; .#{$choices-selector}__inner { padding-bottom: 7.5px; @@ -55,7 +55,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI width: 100%; padding: 10px; border-bottom: 1px solid $choices-keyline-color; - background-color: #FFFFFF; + background-color: #ffffff; margin: 0; } .#{$choices-selector}__button { @@ -70,7 +70,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI height: 20px; width: 20px; border-radius: 10em; - opacity: .5; + opacity: 0.5; &:hover, &:focus { opacity: 1; @@ -80,7 +80,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI } } &:after { - content: ""; + content: ''; height: 0; width: 0; 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; margin-top: -7.5px; } - &[dir="rtl"] { + &[dir='rtl'] { &:after { left: 11.5px; 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*="text"] { +.#{$choices-selector}[data-type*='select-multiple'], +.#{$choices-selector}[data-type*='text'] { .#{$choices-selector}__inner { cursor: text; } @@ -122,13 +122,13 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI margin-right: -$choices-button-offset/2; margin-bottom: 0; margin-left: $choices-button-offset; - padding-left: $choices-button-offset*2; + padding-left: $choices-button-offset * 2; border-left: 1px solid darken($choices-primary-color, 10%); background-image: $choices-icon-cross; background-size: $choices-button-dimension; width: $choices-button-dimension; line-height: 1; - opacity: .75; + opacity: 0.75; border-radius: 0; &:hover, &:focus { @@ -170,7 +170,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI display: inline-block; padding: 4px 16px 4px 4px; width: 100%; - [dir="rtl"] & { + [dir='rtl'] & { padding-right: 4px; padding-left: 16px; } @@ -192,12 +192,12 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI margin-bottom: 3.75px; background-color: $choices-primary-color; border: 1px solid darken($choices-primary-color, 5%); - color: #FFFFFF; + color: #ffffff; word-break: break-all; &[data-deletable] { padding-right: 5px; } - [dir="rtl"] & { + [dir='rtl'] & { margin-right: 0; margin-left: 3.75px; } @@ -236,7 +236,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI bottom: 100%; margin-top: 0; margin-bottom: -1px; - border-radius: .25rem .25rem 0 0; + border-radius: 0.25rem 0.25rem 0 0; } .#{$choices-selector}__list { position: relative; @@ -249,7 +249,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI position: relative; padding: 10px; font-size: $choices-font-size-md; - [dir="rtl"] & { + [dir='rtl'] & { text-align: right; } } @@ -265,7 +265,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI top: 50%; transform: translateY(-50%); } - [dir="rtl"] & { + [dir='rtl'] & { text-align: right; padding-left: 100px; padding-right: 10px; @@ -276,9 +276,9 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI } } &.is-highlighted { - background-color: mix(#000000, #FFFFFF, 5%); + background-color: mix(#000000, #ffffff, 5%); &: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 { cursor: not-allowed; user-select: none; - opacity: .5; + opacity: 0.5; } .#{$choices-selector}__heading { @@ -333,20 +333,22 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI &:focus { outline: 0; } - [dir="rtl"] & { + [dir='rtl'] & { padding-right: 2px; padding-left: 0; } } .#{$choices-selector}__placeholder { - opacity: .5; + opacity: 0.5; } -.#{$choices-selector}__input.is-hidden, -.#{$choices-selector}[data-type*="select-one"] .#{$choices-selector}__input.is-hidden, -.#{$choices-selector}[data-type*="select-multiple"] .#{$choices-selector}__input.is-hidden { +.#{$choices-selector}__input[hidden], +.#{$choices-selector}[data-type*='select-one'] + .#{$choices-selector}__input[hidden], +.#{$choices-selector}[data-type*='select-multiple'] + .#{$choices-selector}__input[hidden] { display: none; } -/*===== End of Choices ======*/ \ No newline at end of file +/*===== End of Choices ======*/ diff --git a/types/index.d.ts b/types/index.d.ts index 4a257ecbf..49c6964d3 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -199,8 +199,6 @@ declare namespace Choices { disabledState?: string; /** @default 'is-highlighted' */ highlightedState?: string; - /** @default 'is-hidden' */ - hiddenState?: string; /** @default 'is-flipped' */ flippedState?: string; /** @default 'is-loading' */