[MAJOR] use attribute hidden (#691)
* use attribute hidden * commit something to re-run tests
This commit is contained in:
parent
9bb0c628b2
commit
7887c05249
|
@ -5,7 +5,8 @@ In lieu of a formal styleguide, take care to maintain the existing coding style
|
|||
| 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',
|
||||
|
|
|
@ -12,13 +12,13 @@ $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;
|
||||
}
|
||||
|
@ -73,7 +73,7 @@ h6 {
|
|||
a,
|
||||
a:visited,
|
||||
a:focus {
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
@ -140,7 +140,7 @@ label + p {
|
|||
}
|
||||
|
||||
.section {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
padding: $global-guttering;
|
||||
color: #333;
|
||||
a,
|
||||
|
@ -184,10 +184,6 @@ label + p {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-test-hook] {
|
||||
margin-bottom: $global-guttering;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
@ -128,7 +128,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
|
|||
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,19 +333,21 @@ $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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 New Issue