Skip to content

Commit

Permalink
Box shadow atomic class fix for IE 11 to Edge 18 (#612)
Browse files Browse the repository at this point in the history 
* Add rule for ie/edge box shadows

* Update tests, add stylelint comments

* Update source order

* Update packages/thumbprint-atomic/CHANGELOG.md

Co-Authored-By: Daniel O’Connor <doconnor@thumbtack.com>

Co-authored-by: Daniel O’Connor <daniel@danoc.me>
  • Loading branch information
@danoc
Tom Genoni and danoc committed Jan 9, 2020
1 parent b126af5 commit 0e7b83c
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/thumbprint-atomic/CHANGELOG.md
View file
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Added

- [Patch] Adding IE/Edge selectors to `box-shadow` to bring visual parity with modern browsers. (#476)

## 4.0.0 - 2019-12-13

### Removed
Expand Down
64 changes: 64 additions & 0 deletions packages/thumbprint-atomic/__snapshots__/test.js.snap
View file
Expand Up @@ -200,15 +200,31 @@ exports[`compiles correctly 1`] = `
.shadow-100 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.shadow-100,
_:-ms-lang(x) {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15) !important;
}
.shadow-200 {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.shadow-200,
_:-ms-lang(x) {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;
}
.shadow-300 {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15) !important;
}
.shadow-300,
_:-ms-lang(x) {
box-shadow: 0 1px 14px rgba(0, 0, 0, 0.22) !important;
}
.shadow-400 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
.shadow-400,
_:-ms-lang(x) {
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25) !important;
}
.color-inherit {
color: inherit !important;
}
Expand Down Expand Up @@ -1806,15 +1822,31 @@ exports[`compiles correctly 1`] = `
.s_shadow-100 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.s_shadow-100,
_:-ms-lang(x) {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15) !important;
}
.s_shadow-200 {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.s_shadow-200,
_:-ms-lang(x) {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;
}
.s_shadow-300 {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15) !important;
}
.s_shadow-300,
_:-ms-lang(x) {
box-shadow: 0 1px 14px rgba(0, 0, 0, 0.22) !important;
}
.s_shadow-400 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
.s_shadow-400,
_:-ms-lang(x) {
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25) !important;
}
.s_top0 {
top: 0 !important;
}
Expand Down Expand Up @@ -3215,15 +3247,31 @@ exports[`compiles correctly 1`] = `
.m_shadow-100 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.m_shadow-100,
_:-ms-lang(x) {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15) !important;
}
.m_shadow-200 {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.m_shadow-200,
_:-ms-lang(x) {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;
}
.m_shadow-300 {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15) !important;
}
.m_shadow-300,
_:-ms-lang(x) {
box-shadow: 0 1px 14px rgba(0, 0, 0, 0.22) !important;
}
.m_shadow-400 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
.m_shadow-400,
_:-ms-lang(x) {
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25) !important;
}
.m_top0 {
top: 0 !important;
}
Expand Down Expand Up @@ -4624,15 +4672,31 @@ exports[`compiles correctly 1`] = `
.l_shadow-100 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.l_shadow-100,
_:-ms-lang(x) {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15) !important;
}
.l_shadow-200 {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.l_shadow-200,
_:-ms-lang(x) {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;
}
.l_shadow-300 {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15) !important;
}
.l_shadow-300,
_:-ms-lang(x) {
box-shadow: 0 1px 14px rgba(0, 0, 0, 0.22) !important;
}
.l_shadow-400 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
.l_shadow-400,
_:-ms-lang(x) {
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25) !important;
}
.l_top0 {
top: 0 !important;
}
Expand Down
126 changes: 126 additions & 0 deletions packages/thumbprint-atomic/src/packages/box-shadow.scss
View file
@@ -1,6 +1,20 @@
@import '~@thumbtack/thumbprint-tokens/dist/scss/_index';
@import '~@thumbtack/thumbprint-scss/mixins';

// Box shadows in IE 11 through Edge 18 render ~50% lighter than expected. The following box-shadow
// values provide close visual parity between IE/Edge and modern browsers.

$ie-edge-shadow: (
100: 0px 1px 8px rgba(0, 0, 0, 0.15) !important,
200: 0px 1px 10px rgba(0, 0, 0, 0.2) !important,
300: 0px 1px 14px rgba(0, 0, 0, 0.22) !important,
400: 0px 1px 20px rgba(0, 0, 0, 0.25) !important,
);

// The `_:-ms-lang(x)` selector below is a CSS hack that invalidates the entire rule-set for all
// browsers except for IE 11 through Edge 18. Edge browsers above 18 and all other browsers will
// only parse the "normal" rule-sets. https://www.w3.org/TR/css-syntax-3/#style-rule

.shadow-none {
box-shadow: none !important;
}
Expand All @@ -9,18 +23,46 @@
box-shadow: $tp-shadow__100 !important;
}

/* stylelint-disable selector-type-no-unknown */
.shadow-100,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 100);
}
/* stylelint-enable */

.shadow-200 {
box-shadow: $tp-shadow__200 !important;
}

/* stylelint-disable selector-type-no-unknown */
.shadow-200,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 200);
}
/* stylelint-enable */

.shadow-300 {
box-shadow: $tp-shadow__300 !important;
}

/* stylelint-disable selector-type-no-unknown */
.shadow-300,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 300);
}
/* stylelint-enable */

.shadow-400 {
box-shadow: $tp-shadow__400 !important;
}

/* stylelint-disable selector-type-no-unknown */
.shadow-400,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 400);
}
/* stylelint-enable */

@include tp-respond-above($tp-breakpoint__small) {
.s_shadow-none {
box-shadow: none !important;
Expand All @@ -30,17 +72,45 @@
box-shadow: $tp-shadow__100 !important;
}

/* stylelint-disable selector-type-no-unknown */
.s_shadow-100,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 100);
}
/* stylelint-enable */

.s_shadow-200 {
box-shadow: $tp-shadow__200 !important;
}

/* stylelint-disable selector-type-no-unknown */
.s_shadow-200,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 200);
}
/* stylelint-enable */

.s_shadow-300 {
box-shadow: $tp-shadow__300 !important;
}

/* stylelint-disable selector-type-no-unknown */
.s_shadow-300,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 300);
}
/* stylelint-enable */

.s_shadow-400 {
box-shadow: $tp-shadow__400 !important;
}

/* stylelint-disable selector-type-no-unknown */
.s_shadow-400,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 400);
}
/* stylelint-enable */
}

@include tp-respond-above($tp-breakpoint__medium) {
Expand All @@ -52,17 +122,45 @@
box-shadow: $tp-shadow__100 !important;
}

/* stylelint-disable selector-type-no-unknown */
.m_shadow-100,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 100);
}
/* stylelint-enable */

.m_shadow-200 {
box-shadow: $tp-shadow__200 !important;
}

/* stylelint-disable selector-type-no-unknown */
.m_shadow-200,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 200);
}
/* stylelint-enable */

.m_shadow-300 {
box-shadow: $tp-shadow__300 !important;
}

/* stylelint-disable selector-type-no-unknown */
.m_shadow-300,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 300);
}
/* stylelint-enable */

.m_shadow-400 {
box-shadow: $tp-shadow__400 !important;
}

/* stylelint-disable selector-type-no-unknown */
.m_shadow-400,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 400);
}
/* stylelint-enable */
}

@include tp-respond-above($tp-breakpoint__large) {
Expand All @@ -74,15 +172,43 @@
box-shadow: $tp-shadow__100 !important;
}

/* stylelint-disable selector-type-no-unknown */
.l_shadow-100,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 100);
}
/* stylelint-enable */

.l_shadow-200 {
box-shadow: $tp-shadow__200 !important;
}

/* stylelint-disable selector-type-no-unknown */
.l_shadow-200,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 200);
}
/* stylelint-enable */

.l_shadow-300 {
box-shadow: $tp-shadow__300 !important;
}

/* stylelint-disable selector-type-no-unknown */
.l_shadow-300,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 300);
}
/* stylelint-enable */

.l_shadow-400 {
box-shadow: $tp-shadow__400 !important;
}

/* stylelint-disable selector-type-no-unknown */
.l_shadow-400,
_:-ms-lang(x) {
box-shadow: map-get($ie-edge-shadow, 400);
}
/* stylelint-enable */
}

0 comments on commit 0e7b83c

Please sign in to comment.