mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-19 14:06:33 +02:00
[MAJOR] use attribute hidden (#691)
* use attribute hidden * commit something to re-run tests
This commit is contained in:
parent
9bb0c628b2
commit
7887c05249
|
@ -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 |
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -35,7 +35,6 @@ describe('constants', () => {
|
|||
'openState',
|
||||
'disabledState',
|
||||
'highlightedState',
|
||||
'hiddenState',
|
||||
'flippedState',
|
||||
'loadingState',
|
||||
'noResults',
|
||||
|
|
|
@ -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 ======*/
|
||||
/*===== End of Section comment block ======*/
|
||||
|
|
|
@ -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 ======*/
|
||||
/*===== End of Choices ======*/
|
||||
|
|
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
|
@ -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' */
|
||||
|
|
Loading…
Reference in a new issue