From 698f23f9dc3b9246057b68ebf19b17910fa88e30 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 11 Mar 2020 07:35:49 +0900
Subject: [PATCH] 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.
---
 packages/components/src/components/accordion/_keyframes.scss    | 2 +-
 .../src/components/data-table/_data-table-action.scss           | 2 +-
 .../src/components/data-table/_data-table-inline-edit-cell.scss | 2 +-
 packages/components/src/components/date-picker/_flatpickr.scss  | 2 +-
 packages/components/src/components/modal/_modal.scss            | 2 +-
 .../src/components/progress-indicator/_progress-indicator.scss  | 2 +-
 packages/components/src/components/search/_search.scss          | 2 +-
 packages/components/src/components/tile/_tile.scss              | 2 +-
 packages/components/src/components/ui-shell/_header.scss        | 2 +-
 packages/components/src/components/ui-shell/_side-nav.scss      | 2 +-
 packages/components/src/globals/scss/_css--helpers.scss         | 2 +-
 packages/components/src/globals/scss/_helper-mixins.scss        | 2 +-
 packages/components/src/globals/scss/_keyframes.scss            | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/accordion/_keyframes.scss b/packages/components/src/components/accordion/_keyframes.scss
index 9768bb3c9b2f..3fed18e95c90 100644
--- 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
index 6a30283b2575..a6f7d71c417d 100644
--- 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
index 0065ace2678f..533a9d06905e 100644
--- 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
index 1157f0c3d50c..aa99e9438f81 100644
--- 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
index c178ee1848e5..32310f76c263 100644
--- 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
index 58f152d6847e..459a0815f4d7 100644
--- 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
index 2a95ec8d5431..35adc82664c3 100644
--- 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
index 116e5ddc134c..a1af5f21fce5 100644
--- 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
index 319d37704e52..f1974afaec06 100644
--- 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
index 397b8286b358..eba704e2604d 100644
--- 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
index 72a463909137..2b4cd3caa81b 100644
--- 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
index 584fef7702fe..2ae46289dd4c 100644
--- 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
index 0f72e4703810..4cf7b4eaa175 100644
--- 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;
 }