chore(SCSS): *BREAKING CHANGE* z-index name and order updated for cla…

…rity BREAKING CHANGE: change header, menu, panel-overlay, and overlay ISSUES CLOSED: #1377
GetTerminus · Apr 9, 2019 · 0b45bca · 0b45bca
1 parent 5b3f9e4
commit 0b45bca
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 15 deletions.
diff --git a/terminus-ui/input/src/input.component.scss b/terminus-ui/input/src/input.component.scss
@@ -156,5 +156,5 @@
 }
 
 .cdk-overlay-container {
-  z-index: z(panel-overlay);
+  z-index: z(attached-panel-overlay);
 }
diff --git a/terminus-ui/loading-overlay/src/loading-overlay.component.scss b/terminus-ui/loading-overlay/src/loading-overlay.component.scss
@@ -57,7 +57,7 @@ $duration: 1.4s;
     right: 0;
     top: 0;
     will-change: opacity;
-    z-index: z(panel-overlay);
+    z-index: z(attached-panel-overlay);
   }
 }
 

diff --git a/terminus-ui/scss/docs/z-index.md b/terminus-ui/scss/docs/z-index.md
@@ -18,20 +18,21 @@ of `z-index` values while at the same time guaranteeing that no two `z-index` va
   z-index: z(tooltip);
 }
 
-// Use the 'overlay' z-index value
+// Use the 'global-overlay' z-index value
 .bar {
-  z-index: z(overlay);
+  z-index: z(global-overlay);
 }
 ```
 
 ## Available z-index values
 
 (values are computed in ascending order - highest values at the top)
 
-- `overlay`,
+- `global-overlay`,
+- `global-header`,
 - `tooltip`,
-- `header`,
-- `menu`,
+- `attached-panel-overlay`,
+- `panel-header`,
 - `menu-trigger`,
 
 More `z-index` values will be added as needed.

diff --git a/terminus-ui/scss/helpers/_triangle.scss b/terminus-ui/scss/helpers/_triangle.scss
@@ -22,7 +22,7 @@
   height: 0;
   position: absolute;
   width: 0;
-  z-index: z('tooltip');
+  z-index: z(tooltip);
 
   @if not index(top right bottom left, $direction) {
     @error 'Direction must be either `top`, `right`, `bottom` or `left`.';

diff --git a/terminus-ui/scss/helpers/_z-index.scss b/terminus-ui/scss/helpers/_z-index.scss
@@ -7,12 +7,11 @@
  * @section Config
  */
 $z-layers: (
-  'overlay',
+  'global-overlay',
+  'global-header',
   'tooltip',
-  'header',
-  'panel-overlay',
+  'attached-panel-overlay',
   'panel-header',
-  'menu',
   'menu-trigger',
 );
 
@@ -25,7 +24,7 @@ $z-layers: (
  *  The name of the item that should have an associated z-index
  * @example
  *  z(tooltip);
- *  z(menu);
+ *  z(attached-panel-overlay);
  */
 @function z($name) {
   @if index($z-layers, $name) {

diff --git a/terminus-ui/select/src/option/option.component.scss b/terminus-ui/select/src/option/option.component.scss
@@ -53,7 +53,7 @@ $ts-select-item-height: 3em !default;
 .ts-select-panel {
   @include elevation-element(menu);
   background: color(pure);
-  z-index: z(menu);
+  z-index: z(attached-panel-overlay);
 
   .ts-optgroup-label,
   .ts-select-option:not(.ts-select-option--template) {

diff --git a/terminus-ui/validation-messages/src/validation-messages.component.scss b/terminus-ui/validation-messages/src/validation-messages.component.scss
@@ -16,7 +16,7 @@
   .c-validation-message {
     @include typography('caption');
     color: color(warn);
-    z-index: z('tooltip');
+    z-index: z(tooltip);
   }
 }