chore(components): change vibility style (#5552)

This change addresses a common known problem of `visibility:visible` style; If an element with `visibility:hidden` has a child element with `visibility:visible`, the child element will be visible even though in most cases it's expected that the entire content (including the child element) is hidden. Refs #5545.
carbon-design-system · Mar 18, 2020 · 698f23f · 698f23f
1 parent 496f36c
commit 698f23f
Show file tree

Hide file tree

Showing 13 changed files with 13 additions and 13 deletions.
diff --git a/packages/components/src/components/accordion/_keyframes.scss b/packages/components/src/components/accordion/_keyframes.scss
@@ -1,6 +1,6 @@
 @mixin content-visible {
   height: 100%;
-  visibility: visible;
+  visibility: inherit;
   opacity: 1;
 }
 

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -538,7 +538,7 @@
     .#{$prefix}--toolbar-search-container-active
       .#{$prefix}--search
       .#{$prefix}--search-input {
-      visibility: visible;
+      visibility: inherit;
     }
 
     .#{$prefix}--toolbar-search-container-active

diff --git a/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss b/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
@@ -21,7 +21,7 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
-  visibility: visible;
+  visibility: inherit;
   white-space: nowrap;
 }
 

diff --git a/packages/components/src/components/date-picker/_flatpickr.scss b/packages/components/src/components/date-picker/_flatpickr.scss
@@ -33,7 +33,7 @@
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   overflow: visible;
   max-height: 640px;
 }

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -40,7 +40,7 @@
       visibility 0ms linear $duration--moderate-02;
 
     &.is-visible {
-      visibility: visible;
+      visibility: inherit;
       opacity: 1;
       background-color: $overlay-01;
       transition: background-color $duration--slow-02

diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -90,7 +90,7 @@
   //OVERFLOW STYLING
   .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip,
   .#{$prefix}--progress-label-overflow:focus ~ .#{$prefix}--tooltip {
-    visibility: visible;
+    visibility: inherit;
   }
 
   .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret {

diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
@@ -160,7 +160,7 @@
       outline $duration--fast-02 motion(standard, productive),
       border $duration--fast-02 motion(standard, productive);
     cursor: pointer;
-    visibility: visible;
+    visibility: inherit;
     opacity: 1;
     height: rem(40px);
     width: rem(40px);

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -137,7 +137,7 @@
     }
 
     .#{$prefix}--tile-content__below-the-fold {
-      visibility: visible;
+      visibility: inherit;
       opacity: 1;
       transition: opacity $duration--fast-02 motion(standard, productive),
         visibility $duration--fast-02 motion(standard, productive);

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -310,7 +310,7 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
-    visibility: visible;
+    visibility: inherit;
     white-space: nowrap;
   }
 

diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -52,7 +52,7 @@
   .#{$prefix}--side-nav--fixed &,
   .#{$prefix}--side-nav--expanded & {
     @if $visibility == true {
-      visibility: visible;
+      visibility: inherit;
     }
     @if $opacity == true {
       opacity: 1;

diff --git a/packages/components/src/globals/scss/_css--helpers.scss b/packages/components/src/globals/scss/_css--helpers.scss
@@ -24,7 +24,7 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
-    visibility: visible;
+    visibility: inherit;
     white-space: nowrap;
   }
 

diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss
@@ -118,7 +118,7 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
-  visibility: visible;
+  visibility: inherit;
   white-space: nowrap;
 }
 

diff --git a/packages/components/src/globals/scss/_keyframes.scss b/packages/components/src/globals/scss/_keyframes.scss
@@ -6,7 +6,7 @@
 //
 
 @mixin content-visible {
-  visibility: visible;
+  visibility: inherit;
   opacity: 1;
 }