From 694b28a66d14b4d1d530f132ec1a9cd81796e0fd Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 10:19:37 -0400 Subject: [PATCH 1/8] Add top left/right border-radius to VideoThumbnail --- UNRELEASED.md | 2 ++ src/components/VideoThumbnail/VideoThumbnail.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index bf3d7fc7276..43e9c8aa12d 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,6 +12,8 @@ ### Bug fixes +- `VideoThumbnail` has top left and top right `border-radius` ([#](https://github.com/Shopify/polaris-react/pull/)) + ### Documentation ### Development workflow diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index 25f6067d447..e433c5908ec 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/src/components/VideoThumbnail/VideoThumbnail.scss @@ -10,6 +10,8 @@ $start-button-size: 60px; background-repeat: no-repeat; width: 100%; height: 100%; + border-top-left-radius: border-radius(); + border-top-right-radius: border-radius(); &.WithPlayer { position: absolute; From 54274a631ea26bed38f58dd682714e8302dab36d Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 10:23:49 -0400 Subject: [PATCH 2/8] Update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 43e9c8aa12d..c3c57f1e9d6 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,7 +12,7 @@ ### Bug fixes -- `VideoThumbnail` has top left and top right `border-radius` ([#](https://github.com/Shopify/polaris-react/pull/)) +- `VideoThumbnail` has top left and top right `border-radius` ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) ### Documentation From e765cb0f6a1a859fa2c7ca00138ff727b87ea822 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 10:25:14 -0400 Subject: [PATCH 3/8] Update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index c3c57f1e9d6..ce1b945c981 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,7 +12,7 @@ ### Bug fixes -- `VideoThumbnail` has top left and top right `border-radius` ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) +- `VideoThumbnail` add the top left and top right `border-radius` ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) ### Documentation From da09e693339b065616440952701b869cbc9d1211 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 11:19:04 -0400 Subject: [PATCH 4/8] `MediaThumbnail` add the correct `border-radius` to the container --- UNRELEASED.md | 2 +- src/components/MediaCard/MediaCard.scss | 17 +++++++++++++++-- .../VideoThumbnail/VideoThumbnail.scss | 2 -- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index ce1b945c981..79530abc0c5 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,7 +12,7 @@ ### Bug fixes -- `VideoThumbnail` add the top left and top right `border-radius` ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) +- `MediaThumbnail` add the correct `border-radius` to the container ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) ### Documentation diff --git a/src/components/MediaCard/MediaCard.scss b/src/components/MediaCard/MediaCard.scss index d05cd56164e..7944e9230e6 100644 --- a/src/components/MediaCard/MediaCard.scss +++ b/src/components/MediaCard/MediaCard.scss @@ -7,6 +7,7 @@ $portrait-breakpoint: 804px; width: 100%; display: flex; flex-flow: row wrap; + overflow: hidden; &.portrait { flex-flow: column nowrap; @@ -18,8 +19,20 @@ $portrait-breakpoint: 804px; } .MediaContainer { - &:not(.portrait) { - flex-basis: 40%; + overflow: hidden; + + @include breakpoint-after($portrait-breakpoint, inclusive) { + &.portrait { + border-top-left-radius: border-radius(); + border-top-right-radius: border-radius(); + } + + &:not(.portrait) { + flex-basis: 40%; + border-top-right-radius: 0; + border-top-left-radius: border-radius(); + border-bottom-left-radius: border-radius(); + } } } diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index e433c5908ec..25f6067d447 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/src/components/VideoThumbnail/VideoThumbnail.scss @@ -10,8 +10,6 @@ $start-button-size: 60px; background-repeat: no-repeat; width: 100%; height: 100%; - border-top-left-radius: border-radius(); - border-top-right-radius: border-radius(); &.WithPlayer { position: absolute; From 39306c05bfc907411fd1230f62e3dbab71b38501 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 11:22:56 -0400 Subject: [PATCH 5/8] Update MediaCard.scss --- src/components/MediaCard/MediaCard.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MediaCard/MediaCard.scss b/src/components/MediaCard/MediaCard.scss index 7944e9230e6..c32b8e68721 100644 --- a/src/components/MediaCard/MediaCard.scss +++ b/src/components/MediaCard/MediaCard.scss @@ -7,7 +7,6 @@ $portrait-breakpoint: 804px; width: 100%; display: flex; flex-flow: row wrap; - overflow: hidden; &.portrait { flex-flow: column nowrap; From af2f0a42a36647824325b2bb2e45e68ee9ef9252 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 11:24:52 -0400 Subject: [PATCH 6/8] Clean up scss --- src/components/MediaCard/MediaCard.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/MediaCard/MediaCard.scss b/src/components/MediaCard/MediaCard.scss index 7944e9230e6..0201a4594d3 100644 --- a/src/components/MediaCard/MediaCard.scss +++ b/src/components/MediaCard/MediaCard.scss @@ -21,6 +21,10 @@ $portrait-breakpoint: 804px; .MediaContainer { overflow: hidden; + &:not(.portrait) { + flex-basis: 40%; + } + @include breakpoint-after($portrait-breakpoint, inclusive) { &.portrait { border-top-left-radius: border-radius(); @@ -28,8 +32,6 @@ $portrait-breakpoint: 804px; } &:not(.portrait) { - flex-basis: 40%; - border-top-right-radius: 0; border-top-left-radius: border-radius(); border-bottom-left-radius: border-radius(); } From 555eab3994f4c5bb5cad047e903b1d01c12cf7b3 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 11:30:02 -0400 Subject: [PATCH 7/8] Update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 79530abc0c5..d71d858fa66 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,7 +12,7 @@ ### Bug fixes -- `MediaThumbnail` add the correct `border-radius` to the container ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) +- `MediaCard` add the correct `border-radius` to the container ([#2919](https://github.com/Shopify/polaris-react/pull/2919)) ### Documentation From 2dd0e0ddc3aa6613bfe59cf8f7b34587bf4060a2 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 15 Apr 2020 11:30:36 -0400 Subject: [PATCH 8/8] Update MediaCard.scss --- src/components/MediaCard/MediaCard.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MediaCard/MediaCard.scss b/src/components/MediaCard/MediaCard.scss index 9cac9265c27..3f68bb7366b 100644 --- a/src/components/MediaCard/MediaCard.scss +++ b/src/components/MediaCard/MediaCard.scss @@ -18,13 +18,13 @@ $portrait-breakpoint: 804px; } .MediaContainer { - overflow: hidden; - &:not(.portrait) { flex-basis: 40%; } @include breakpoint-after($portrait-breakpoint, inclusive) { + overflow: hidden; + &.portrait { border-top-left-radius: border-radius(); border-top-right-radius: border-radius();