From 772b130b9ffbc8eefcbd8471b3216226084b0d70 Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Fri, 17 Apr 2020 11:23:59 -0400 Subject: [PATCH 1/8] Update the background menu color when no theme is set. Currently displays white on white --- src/components/TopBar/components/Menu/Menu.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index 6961351e5b5..8d4e9272363 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -4,8 +4,8 @@ $activator-variables: ( min-width: rem(36px), border-left: 1px solid rgba(color('black'), 0.42), transition: background-color 0.1s, - focus-background-color: rgba(color('white'), 0.16), - hover-background-color: rgba(color('white'), 0.08), + focus-background-color: rgba(color('black'), 0.16), + hover-background-color: rgba(color('black'), 0.08), active-background-color: rgba(color('black'), 0.28), focus-opacity: 0.85, ); From 039c87f513eb45dcb4225070f81bd7c3a37cd5e3 Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Fri, 17 Apr 2020 13:12:41 -0400 Subject: [PATCH 2/8] Match colours from design --- src/components/TopBar/components/Menu/Menu.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index 8d4e9272363..52a8fd9dfa6 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -4,8 +4,8 @@ $activator-variables: ( min-width: rem(36px), border-left: 1px solid rgba(color('black'), 0.42), transition: background-color 0.1s, - focus-background-color: rgba(color('black'), 0.16), - hover-background-color: rgba(color('black'), 0.08), + focus-background-color: color('sky'), + hover-background-color: color('sky', 'light'), active-background-color: rgba(color('black'), 0.28), focus-opacity: 0.85, ); From 3ad372099a8b177f8031a7c306a47835452b7b30 Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Mon, 20 Apr 2020 13:54:52 -0400 Subject: [PATCH 3/8] Try and default the hover colour of the user menu to the theme --- src/components/TopBar/components/Menu/Menu.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index 52a8fd9dfa6..b532d6cca93 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -4,8 +4,7 @@ $activator-variables: ( min-width: rem(36px), border-left: 1px solid rgba(color('black'), 0.42), transition: background-color 0.1s, - focus-background-color: color('sky'), - hover-background-color: color('sky', 'light'), + focus-background-color: rgba(color('white'), 0.16), active-background-color: rgba(color('black'), 0.28), focus-opacity: 0.85, ); @@ -46,7 +45,10 @@ $activator-variables: ( } &:hover { - background-color: var(--p-surface-hovered, menu(hover-background-color)); + background-color: var( + --top-bar-background-lighter, + var(--p-surface-hovered, rgba(color('white'), 0.08)) + ); } &:active, From 91bac72f8f2a23be1278c570a635713b90c084f8 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 21 Apr 2020 10:46:22 -0400 Subject: [PATCH 4/8] Update themed topbar plus nav, adjust menu color --- src/components/TopBar/README.md | 9 ++++++--- src/components/TopBar/components/Menu/Menu.scss | 12 ++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/TopBar/README.md b/src/components/TopBar/README.md index 3419e638bed..3e75bf4613c 100644 --- a/src/components/TopBar/README.md +++ b/src/components/TopBar/README.md @@ -322,9 +322,11 @@ function TopBarExample() { const theme = { colors: { topBar: { - background: '#357997', - backgroundLighter: '#6192a9', - color: '#FFFFFF', + background: '#fff', + backgroundLighter: '#F4F6F8', + backgroundDarker: '#DFE3E8', + border: '#C4CDD5', + color: '#212B36', }, }, logo: { @@ -370,6 +372,7 @@ function TopBarExample() { onChange={handleSearchChange} value={searchValue} placeholder="Search" + showFocusBorder /> ); diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index b532d6cca93..8e822b20da6 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -2,10 +2,7 @@ $activator-variables: ( min-width: rem(36px), - border-left: 1px solid rgba(color('black'), 0.42), transition: background-color 0.1s, - focus-background-color: rgba(color('white'), 0.16), - active-background-color: rgba(color('black'), 0.28), focus-opacity: 0.85, ); @@ -38,8 +35,8 @@ $activator-variables: ( &:focus { @include focus-ring($style: 'focused'); background-color: var( - --p-override-transparent, - menu(focus-background-color) + --top-bar-background-lighter, + var(--p-override-transparent, rgba(color('white'), 0.16)) ); outline: none; } @@ -53,7 +50,10 @@ $activator-variables: ( &:active, &[aria-expanded='true'] { - background-color: var(--p-surface-pressed, menu(active-background-color)); + background-color: var( + --top-bar-background-darker, + var(--p-surface-pressed, rgba(color('black'), 0.28)) + ); outline: none; transition: none; From 7dd1ddf66620d068b6ce281b5aedb34d04c8e63c Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 21 Apr 2020 10:51:45 -0400 Subject: [PATCH 5/8] Add changelog --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index b44ed72e049..b5631bfd481 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -7,6 +7,7 @@ ### Enhancements - Removed `max-height` property from `Tooltip` ([#2908](https://github.com/Shopify/polaris-react/pull/2908)) +- Update `TopBar.Menu` to be properly themed in active, hover and focused state ([#2928](https://github.com/Shopify/polaris-react/pull/2928)) ### Bug fixes From f55b90a6d2bc4de3ff22636dcce25ff44062a162 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 21 Apr 2020 11:43:41 -0400 Subject: [PATCH 6/8] Add background darker from web --- src/utilities/custom-properties/custom-properties.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utilities/custom-properties/custom-properties.ts b/src/utilities/custom-properties/custom-properties.ts index 69df0a684c0..57f5aada4f7 100644 --- a/src/utilities/custom-properties/custom-properties.ts +++ b/src/utilities/custom-properties/custom-properties.ts @@ -11,6 +11,7 @@ export const nonDesignLangaugeCustomProperties = [ '--Polaris-RangeSlider-output-factor', '--top-bar-color', '--top-bar-background-lighter', + '--top-bar-background-darker', '--top-bar-border', '--p-frame-offset', ]; From fca372bb634d3088c032b1b46f4651db61e05531 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 21 Apr 2020 13:59:31 -0400 Subject: [PATCH 7/8] Remove --- src/utilities/custom-properties/custom-properties.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utilities/custom-properties/custom-properties.ts b/src/utilities/custom-properties/custom-properties.ts index 57f5aada4f7..69df0a684c0 100644 --- a/src/utilities/custom-properties/custom-properties.ts +++ b/src/utilities/custom-properties/custom-properties.ts @@ -11,7 +11,6 @@ export const nonDesignLangaugeCustomProperties = [ '--Polaris-RangeSlider-output-factor', '--top-bar-color', '--top-bar-background-lighter', - '--top-bar-background-darker', '--top-bar-border', '--p-frame-offset', ]; From 37a1aec72065a63b93dab7a223bcf28771b4b37c Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 21 Apr 2020 14:00:24 -0400 Subject: [PATCH 8/8] Add bg --- src/utilities/custom-properties/custom-properties.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utilities/custom-properties/custom-properties.ts b/src/utilities/custom-properties/custom-properties.ts index 69df0a684c0..57f5aada4f7 100644 --- a/src/utilities/custom-properties/custom-properties.ts +++ b/src/utilities/custom-properties/custom-properties.ts @@ -11,6 +11,7 @@ export const nonDesignLangaugeCustomProperties = [ '--Polaris-RangeSlider-output-factor', '--top-bar-color', '--top-bar-background-lighter', + '--top-bar-background-darker', '--top-bar-border', '--p-frame-offset', ];