Remove inline styling (#306)

* Remove inline styling (#279)

- Remove the JS styling to prevent CSP violations.
- Add "display: none;" CSS rule for the default class "is-hidden".

* Increase the specificity of the hidden class (#279)

* Include "is-hidden" class in utils section of base style sheet (#279)

* Add top level selector for hiding Choices inputs (#279)

src/scripts/dist/choices.js

@@ -1718,7 +1718,6 @@ var WrappedElement = function () {
         this.element.setAttribute('data-choice-orig-style', origStyle);
       }
 
-      this.element.setAttribute('style', 'display:none;');
       this.element.setAttribute('aria-hidden', 'true');
       this.element.setAttribute('data-choice', 'active');
     }

src/scripts/src/components/wrapped-element.js

@@ -33,7 +33,6 @@ export default class WrappedElement {
       this.element.setAttribute('data-choice-orig-style', origStyle);
     }
 
-    this.element.setAttribute('style', 'display:none;');
     this.element.setAttribute('aria-hidden', 'true');
     this.element.setAttribute('data-choice', 'active');
   }

src/scripts/src/components/wrapped-element.test.js

@@ -60,7 +60,6 @@ describe('components/wrappedElement', () => {
       expect(instance.element.tabIndex).to.equal(-1);
       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('style')).to.equal('display:none;');
       expect(instance.element.getAttribute('aria-hidden')).to.equal('true');
       expect(instance.element.getAttribute('data-choice')).to.equal('active');
       expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(originalStyling);

src/styles/css/base.css

@@ -150,4 +150,8 @@ h6, .h6 {
   text-align: center;
 }
 
+.is-hidden {
+  display: none;
+}
+
 /*=====  End of Section comment block  ======*/

src/styles/css/base.min.css

@@ -1 +1 @@
-*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}
+*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}.is-hidden{display:none}

src/styles/css/choices.css

@@ -356,4 +356,10 @@
   opacity: .5;
 }
 
+.choices__input.is-hidden,
+.choices[data-type*="select-one"] .choices__input.is-hidden,
+.choices[data-type*="select-multiple"] .choices__input.is-hidden {
+  display: none;
+}
+
 /*=====  End of Choices  ======*/

src/styles/scss/base.scss

@@ -121,5 +121,6 @@ h6, .h6 { font-size: $global-font-size-h6; }
 .zero-bottom {  margin-bottom: 0; }
 .zero-top {  margin-top: 0; }
 .text-center { text-align: center; }
+.is-hidden { display: none; }
 
 /*=====  End of Section comment block  ======*/

src/styles/scss/choices.scss

@@ -292,4 +292,10 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
 
 .#{$choices-selector}__placeholder { opacity: .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 {
+  display: none;
+}
+
 /*=====  End of Choices  ======*/