fix(hide/show): fix show-when/hide-when

fixes #15813
ionic-team · Oct 2, 2018 · fd01308 · fd01308
1 parent c6bfda0
commit fd01308
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 28 deletions.
diff --git a/core/src/components/hide-when/hide-when.scss b/core/src/components/hide-when/hide-when.scss
@@ -1,8 +1,7 @@
-ion-hide-when.show-content {
+:host {
   display: block;
 }
 
-ion-hide-when.hide-content {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
+:host(.hide-content) {
+  display: none;
 }
diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx
@@ -5,7 +5,8 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-hide-when',
-  styleUrl: './hide-when.scss'
+  styleUrl: './hide-when.scss',
+  shadow: true
 })
 export class HideWhen implements ComponentInterface, DisplayWhen {
 
@@ -61,9 +62,12 @@ export class HideWhen implements ComponentInterface, DisplayWhen {
   hostData() {
     return {
       class: {
-        'show-content': !this.passesTest,
         'hide-content': this.passesTest
       }
     };
   }
+
+  render() {
+    return <slot></slot>;
+  }
 }
diff --git a/core/src/components/hide-when/test/basic/index.html b/core/src/components/hide-when/test/basic/index.html
@@ -21,15 +21,15 @@
     <ion-content padding>
 
       <h2>Mode Tests</h2>
-      <ion-hide-when mode="md, ios">
+      <ion-hide-when modes="md, ios">
         <div>Hides on MD, iOS</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="md">
+      <ion-hide-when modes="md">
         <div>Hides on MD only</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="ios">
+      <ion-hide-when modes="ios">
         <div>Hides on iOS only</div>
       </ion-hide-when>
 

diff --git a/core/src/components/hide-when/test/preview/index.html b/core/src/components/hide-when/test/preview/index.html
@@ -21,15 +21,15 @@
     <ion-content padding fullscreen>
 
       <h2>Mode Tests</h2>
-      <ion-hide-when mode="md, ios">
+      <ion-hide-when modes="md, ios">
         <div>Hides on MD, iOS</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="md">
+      <ion-hide-when modes="md">
         <div>Hides on MD only</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="ios">
+      <ion-hide-when modes="ios">
         <div>Hides on iOS only</div>
       </ion-hide-when>
 

diff --git a/core/src/components/hide-when/usage/javascript.md b/core/src/components/hide-when/usage/javascript.md
@@ -2,15 +2,15 @@
 <ion-content padding>
 
   <h2>Mode Tests</h2>
-  <ion-hide-when mode="md, ios">
+  <ion-hide-when modes="md, ios">
     <div>Hides on MD, iOS</div>
   </ion-hide-when>
 
-  <ion-hide-when mode="md">
+  <ion-hide-when modes="md">
     <div>Hides on MD only</div>
   </ion-hide-when>
 
-  <ion-hide-when mode="ios">
+  <ion-hide-when modes="ios">
     <div>Hides on iOS only</div>
   </ion-hide-when>
 

diff --git a/core/src/components/show-when/show-when.scss b/core/src/components/show-when/show-when.scss
@@ -1,8 +1,7 @@
-ion-show-when.show-content {
-  display: block;
+:host {
+  display: none;
 }
 
-ion-show-when.hide-content {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
+:host(.show-content) {
+  display: block;
 }
diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx
@@ -5,7 +5,8 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-show-when',
-  styleUrl: 'show-when.scss'
+  styleUrl: 'show-when.scss',
+  shadow: true
 })
 export class ShowWhen implements ComponentInterface, DisplayWhen {
 
@@ -63,9 +64,11 @@ export class ShowWhen implements ComponentInterface, DisplayWhen {
     return {
       class: {
         'show-content': this.passesTest,
-        'hide-content': !this.passesTest
       }
     };
   }
 
+  render() {
+    return <slot></slot>;
+  }
 }
diff --git a/core/src/components/show-when/test/basic/index.html b/core/src/components/show-when/test/basic/index.html
@@ -21,15 +21,15 @@
     <ion-content padding>
 
       <h2>Mode Tests</h2>
-      <ion-show-when mode="md, ios">
+      <ion-show-when modes="md, ios">
         <div>Shows on MD, iOS</div>
       </ion-show-when>
 
-      <ion-show-when mode="md">
+      <ion-show-when modes="md">
         <div>Shows on MD only</div>
       </ion-show-when>
 
-      <ion-show-when mode="ios">
+      <ion-show-when modes="ios">
         <div>Shows on iOS only</div>
       </ion-show-when>
 

diff --git a/core/src/components/show-when/test/preview/index.html b/core/src/components/show-when/test/preview/index.html
@@ -21,15 +21,15 @@
     <ion-content padding fullscreen>
 
       <h2>Mode Tests</h2>
-      <ion-show-when mode="md, ios">
+      <ion-show-when modes="md, ios">
         <div>Shows on MD, iOS</div>
       </ion-show-when>
 
-      <ion-show-when mode="md">
+      <ion-show-when modes="md">
         <div>Shows on MD only</div>
       </ion-show-when>
 
-      <ion-show-when mode="ios">
+      <ion-show-when modes="ios">
         <div>Shows on iOS only</div>
       </ion-show-when>