From 5893c8e6426414cf907250f61694a86f39bd28d0 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 21 Jan 2020 15:52:01 -0800 Subject: [PATCH] feat(box-shadow): remove deprecated layer, use box-shadow mixin --- .../components/copy-button/_copy-button.scss | 3 +- .../_data-table-inline-edit-cell.scss | 5 +- .../components/date-picker/_date-picker.scss | 3 +- .../src/components/dropdown/_dropdown.scss | 7 +- .../src/components/list-box/_list-box.scss | 1 - .../src/components/modal/_modal.scss | 1 - .../notification/_inline-notification.scss | 1 - .../notification/_toast-notification.scss | 1 - .../overflow-menu/_overflow-menu.scss | 1 - .../src/components/slider/_slider.scss | 1 - .../components/src/components/tabs/_tabs.scss | 3 +- .../components/src/components/tile/_tile.scss | 1 - .../src/components/tooltip/_tooltip.scss | 7 +- .../src/globals/scss/_helper-mixins.scss | 17 +--- .../components/src/globals/scss/_layer.scss | 93 ------------------- .../components/src/globals/scss/_tooltip.scss | 4 +- .../components/src/globals/scss/styles.scss | 7 -- 17 files changed, 17 insertions(+), 139 deletions(-) delete mode 100644 packages/components/src/globals/scss/_layer.scss diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss index eeeaefe3fa14..e8254f0fadfe 100644 --- a/packages/components/src/components/copy-button/_copy-button.scss +++ b/packages/components/src/components/copy-button/_copy-button.scss @@ -8,7 +8,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/typography'; @import '../../globals/scss/helper-mixins'; -@import '../../globals/scss/layer'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/css--reset'; @import '../button/button'; @@ -36,7 +35,7 @@ } &:before { - @include layer('overlay'); + @include box-shadow; @include type-style('body-short-01'); top: 1.1rem; padding: $spacing-02; 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 125eff4e4254..ad1133cc8a77 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 @@ -7,7 +7,6 @@ @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; -@import '../../globals/scss/layer'; @import '../../globals/scss/layout'; @import '../../globals/scss/vars'; @@ -206,7 +205,7 @@ $size--edit-actions--height: 3rem; .#{$prefix}--data-table__edit-actions { - @include layer('overlay'); + @include box-shadow; display: flex; justify-content: flex-end; @@ -291,7 +290,7 @@ } .#{$prefix}--data-table__error-text { - @include layer('overlay'); + @include box-shadow; position: absolute; top: rem(-1px); diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss index 9dd6b4d3ef40..f60d2d9e2964 100644 --- a/packages/components/src/components/date-picker/_date-picker.scss +++ b/packages/components/src/components/date-picker/_date-picker.scss @@ -10,7 +10,6 @@ @import '../../globals/scss/css--reset'; @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; -@import '../../globals/scss/layer'; @import '../form/form'; @import 'flatpickr.scss'; @@ -157,7 +156,7 @@ .#{$prefix}--date-picker__calendar, .flatpickr-calendar.open { - @include layer('pop-out'); + @include box-shadow; background-color: $ui-01; display: flex; flex-direction: column; diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss index c6159cdf299d..17696a24d0ea 100644 --- a/packages/components/src/components/dropdown/_dropdown.scss +++ b/packages/components/src/components/dropdown/_dropdown.scss @@ -11,7 +11,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; -@import '../../globals/scss/layer'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/css--reset'; @import '../../globals/scss/layout'; @@ -119,7 +118,7 @@ } .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list { - @include layer('overlay'); + @include box-shadow; } .#{$prefix}--dropdown--light { @@ -167,7 +166,7 @@ .#{$prefix}--dropdown-list { @include reset; @include focus-outline('reset'); - @include layer('overlay'); + @include box-shadow; @include type-style('body-short-01'); background-color: $ui-01; display: flex; @@ -383,7 +382,7 @@ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-list { - @include layer('overlay'); + @include box-shadow; } .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-link { diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index 8bf5cd06abb5..e1ad6f7de048 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -13,7 +13,6 @@ @import '../../globals/scss/css--helpers'; @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/layout'; -@import '../../globals/scss/layer'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/css--reset'; diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss index c1b00f091700..7951a2b5bb3f 100644 --- a/packages/components/src/components/modal/_modal.scss +++ b/packages/components/src/components/modal/_modal.scss @@ -12,7 +12,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/layout'; -@import '../../globals/scss/layer'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/css--reset'; diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss index 4cd45362100f..757f715899a4 100644 --- a/packages/components/src/components/notification/_inline-notification.scss +++ b/packages/components/src/components/notification/_inline-notification.scss @@ -11,7 +11,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; -@import '../../globals/scss/layer'; @import '../../globals/scss/layout'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/css--reset'; diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss index 04ac912f8dff..dea871f671c3 100644 --- a/packages/components/src/components/notification/_toast-notification.scss +++ b/packages/components/src/components/notification/_toast-notification.scss @@ -10,7 +10,6 @@ //----------------------------- @import '../../globals/scss/vars'; -@import '../../globals/scss/layer'; @import '../../globals/scss/layout'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/helper-mixins'; diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss index 0497d0cfb46b..0d05d025f302 100644 --- a/packages/components/src/components/overflow-menu/_overflow-menu.scss +++ b/packages/components/src/components/overflow-menu/_overflow-menu.scss @@ -12,7 +12,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/css--reset'; -@import '../../globals/scss/layer'; @import '../../globals/scss/layout'; @import '../../globals/scss/typography'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss index 9a5c8fbb63a8..b1bad6ed745c 100644 --- a/packages/components/src/components/slider/_slider.scss +++ b/packages/components/src/components/slider/_slider.scss @@ -11,7 +11,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; -@import '../../globals/scss/layer'; @import '../../globals/scss/typography'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../form/form'; diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss index b36064cc451e..28acd46c55b9 100644 --- a/packages/components/src/components/tabs/_tabs.scss +++ b/packages/components/src/components/tabs/_tabs.scss @@ -11,7 +11,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; -@import '../../globals/scss/layer'; @import '../../globals/scss/layout'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @@ -104,7 +103,7 @@ } .#{$prefix}--tabs__nav { - @include layer('overlay'); + @include box-shadow; margin: 0; padding: 0; position: absolute; diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss index 4734f1b5d3b5..116e5ddc134c 100644 --- a/packages/components/src/components/tile/_tile.scss +++ b/packages/components/src/components/tile/_tile.scss @@ -11,7 +11,6 @@ @import '../../globals/scss/vars'; @import '../../globals/scss/helper-mixins'; -@import '../../globals/scss/layer'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/css--reset'; diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index a556a771f8d0..bcc73b6f5270 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -6,7 +6,6 @@ // @import '../../globals/scss/vars'; -@import '../../globals/scss/layer'; @import '../../globals/scss/helper-mixins'; @import '../../globals/scss/tooltip'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @@ -53,7 +52,7 @@ } &::after { - @include layer('overlay'); + @include box-shadow; min-width: rem(24px); max-width: rem(208px); height: rem(24px); @@ -164,7 +163,7 @@ .#{$prefix}--tooltip--definition__bottom, .#{$prefix}--tooltip--definition__top { - @include layer('overlay'); + @include box-shadow; position: absolute; z-index: 1; display: none; @@ -349,7 +348,7 @@ } .#{$prefix}--tooltip { - @include layer('overlay'); + @include box-shadow; @include reset; position: absolute; display: none; diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss index 013a909f1cd9..584fef7702fe 100644 --- a/packages/components/src/globals/scss/_helper-mixins.scss +++ b/packages/components/src/globals/scss/_helper-mixins.scss @@ -43,27 +43,18 @@ /// Adds placeholder text color /// @access public -/// @param {String} $size ['small'] - Size of box shadow /// @example @include placeholder-colors; /// @group global-helpers @mixin placeholder-colors { color: $text-03; } -/// Adds small or large box shadow +/// Adds box shadow /// @access public -/// @param {String} $size ['small'] - size of box shadow -/// @example @include box-shadow(); @include box-shadow('large'); +/// @example @include box-shadow; /// @group global-helpers -@mixin box-shadow($size: 'small') { - // Large - For dropdowns - @if ($size == 'large') { - box-shadow: 6px 6px 6px 0 $box-shadow; - } - - @if ($size == 'small') { - box-shadow: 0px 3px 3px 0 $box-shadow; - } +@mixin box-shadow { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /// Adds outline styles depending on specific type diff --git a/packages/components/src/globals/scss/_layer.scss b/packages/components/src/globals/scss/_layer.scss deleted file mode 100644 index 56f1004bea4f..000000000000 --- a/packages/components/src/globals/scss/_layer.scss +++ /dev/null @@ -1,93 +0,0 @@ -// -// Copyright IBM Corp. 2016, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -//------------------------------------------- -// 📑 Layer -// ------------------------------------------ -// -// Layer || Elevation -// ========================================== -// 0 - Base || 0 -// 1 - Flat || 1 -// 2 - Raised || 2 -// 3 - Overlay || 8 -// 4 - Pop-out || 24 -// ========================================== -// Custom: Left Nav || 16 -// Custom: Global Header || 12 -// - -// Box shadow variables - -/// Box shadow color -/// @access private -/// @type Value -/// @group global-layer -/// @example box-shadow: 0px 3px 3px 0 $box-shadow; -$box-shadow: rgba(0, 0, 0, 0.1); - -/// Raised box shadow -/// @access private -/// @type Value -/// @group global-layer -$box-shadow--raised: 0 1px 2px 0 $box-shadow; - -/// Overlay box shadow -/// @access private -/// @type Value -/// @group global-layer -$box-shadow--overlay: 0 4px 8px 0 $box-shadow; - -/// Sticky nav box shadow -/// @access private -/// @type Value -/// @group global-layer -$box-shadow--sticky-nav: 0 6px 12px 0 $box-shadow; - -/// Temporary nav box shadow -/// @access private -/// @type Value -/// @group global-layer -$box-shadow--temporary-nav: 0 8px 16px 0 $box-shadow; - -/// Pop out box shadow -/// @access private -/// @type Value -/// @group global-layer -$box-shadow--pop-out: 0 12px 24px 0 $box-shadow; - -// Layer box-shadow map - -/// Map of box shadows used in the `layer()` mixin -/// @access private -/// @type Map -/// @group global-layer -/// @example - @include layer('raised'); -$layer-shadows: ( - base: none, - flat: none, - raised: $box-shadow--raised, - overlay: $box-shadow--overlay, - pop-out: $box-shadow--pop-out, - temporary-nav: $box-shadow--temporary-nav, - sticky-nav: $box-shadow--sticky-nav, -); - -/// Layer mixin to set `box-shadow` -/// @access public -/// @param {String} $layer - A value from the `$layer-shadows` map -/// @group global-layer -/// @example - @include layer('raised'); -@mixin layer($layer) { - @if variable-exists('css--use-layer') == false or $css--use-layer == true { - @if map-has-key($layer-shadows, $layer) { - box-shadow: #{map-get($layer-shadows, $layer)}; - } @else { - @warn '#{$layer} is not a valid layer.'; - } - } -} diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss index 364acf719a85..a780e40418a0 100644 --- a/packages/components/src/globals/scss/_tooltip.scss +++ b/packages/components/src/globals/scss/_tooltip.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@import 'layer'; +@import 'helper-mixins'; // Tooltip // Tooltip caret visual styles @@ -26,7 +26,7 @@ /// @access public /// @group tooltip @mixin tooltip--content($tooltip-type: 'icon') { - @include layer('overlay'); + @include box-shadow; width: max-content; max-width: rem(208px); height: auto; diff --git a/packages/components/src/globals/scss/styles.scss b/packages/components/src/globals/scss/styles.scss index 5d47166fbb47..e32f78a08b6d 100644 --- a/packages/components/src/globals/scss/styles.scss +++ b/packages/components/src/globals/scss/styles.scss @@ -27,12 +27,6 @@ $css--helpers: true !default; /// @group feature-flags $css--body: true !default; -/// If true, the `layer()` mixin sets `box-shadow` values -/// @access public -/// @type Bool -/// @group feature-flags -$css--use-layer: true !default; - /// If true, include reset CSS /// @access public /// @type Bool @@ -73,7 +67,6 @@ $css--use-experimental-grid-fallback: false !default; @import 'theme'; @import 'mixins'; @import 'layout'; -@import 'layer'; @import 'spacing'; @import 'typography'; @import './vendor/@carbon/elements/scss/import-once/import-once';