fix: support hidden attribute on web components

nl-design-system · Sep 10, 2021 · 3586756 · 3586756
1 parent cc2d75c
commit 3586756
Show file tree

Hide file tree

Showing 27 changed files with 108 additions and 0 deletions.
diff --git a/components/article/stencil.scss b/components/article/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/badge-counter/stencil.scss b/components/badge-counter/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: inline-block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/badge-data/stencil.scss b/components/badge-data/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: inline-block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/badge-status/stencil.scss b/components/badge-status/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: inline-block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/breadcrumb/stencil.scss b/components/breadcrumb/stencil.scss
@@ -9,3 +9,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/button/stencil.scss b/components/button/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: inline-block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/document/stencil.scss b/components/document/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/form-field-checkbox/stencil.scss b/components/form-field-checkbox/stencil.scss
@@ -10,3 +10,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/form-field-description/stencil.scss b/components/form-field-description/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/form-field-textarea/stencil.scss b/components/form-field-textarea/stencil.scss
@@ -10,3 +10,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/form-field-textbox/stencil.scss b/components/form-field-textbox/stencil.scss
@@ -10,3 +10,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/form-toggle/stencil.scss b/components/form-toggle/stencil.scss
@@ -9,6 +9,10 @@
   display: inline-block;
 }
 
+:host([hidden]) {
+  display: none !important;
+}
+
 .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {
   @extend .utrecht-form-toggle--focus;
 }

diff --git a/components/heading-1/stencil.scss b/components/heading-1/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/heading-2/stencil.scss b/components/heading-2/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/heading-3/stencil.scss b/components/heading-3/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/heading-4/stencil.scss b/components/heading-4/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/heading-5/stencil.scss b/components/heading-5/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/heading-6/stencil.scss b/components/heading-6/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/heading/stencil.scss b/components/heading/stencil.scss
@@ -13,3 +13,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/html-content/stencil.scss b/components/html-content/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/icon/stencil.scss b/components/icon/stencil.scss
@@ -7,6 +7,10 @@
   display: inline-block;
 }
 
+:host([hidden]) {
+  display: none !important;
+}
+
 svg {
   color: var(--utrecht-icon-color, var(--utrecht-document-color, currentColor));
   height: var(--utrecht-icon-size, 100%);

diff --git a/components/logo/stencil.scss b/components/logo/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: inline;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/page-footer/stencil.scss b/components/page-footer/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/pagination/stencil.scss b/components/pagination/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/paragraph/stencil.scss b/components/paragraph/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/separator/stencil.scss b/components/separator/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/components/textbox/stencil.scss b/components/textbox/stencil.scss
@@ -8,3 +8,7 @@
 :host {
   display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}