[MessageIndicator] Convert to use color system, improve contrast

Shopify · Nov 20, 2019 · c00a89f · c00a89f
1 parent 420e36b
commit c00a89f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -7,6 +7,9 @@
 - Added `external` prop to `ResourceList` ([#2408](https://github.com/Shopify/polaris-react/pull/2408))
 - Added `onMouseEnter` and `onTouchStart` props to `Button` ([#2409](https://github.com/Shopify/polaris-react/pull/2409))
 - Added `ariaHaspopup` prop to `Popover` ([#2248](https://github.com/Shopify/polaris-react/pull/2248))
+- Add `external` prop to `ResourceList` [#2408](https://github.com/Shopify/polaris-react/pull/2408)
+- Add `onMouseEnter` and `onTouchStart` props to `Button` ([#2409](https://github.com/Shopify/polaris-react/pull/2409))
+- Improved contrast of `MessageIndicator` with a border ([#2428](https://github.com/Shopify/polaris-react/pull/2428))
 
 ### Bug fixes
 

diff --git a/src/components/MessageIndicator/MessageIndicator.scss b/src/components/MessageIndicator/MessageIndicator.scss
@@ -1,6 +1,7 @@
 @import '../../styles/common';
 
-$indicator-size: rem(8px);
+$indicator-size: rem(12px);
+$indicator-position: rem(-3px);
 
 .MessageIndicatorWrapper {
   position: relative;
@@ -9,10 +10,11 @@ $indicator-size: rem(8px);
 .MessageIndicator {
   position: absolute;
   z-index: 1;
-  top: 0;
-  right: 0;
+  top: $indicator-position;
+  right: $indicator-position;
   width: $indicator-size;
   height: $indicator-size;
   border-radius: 100%;
-  background-color: color('teal');
+  background-color: var(--p-highlight-icon, color('teal'));
+  border: solid rem(2px) var(--p-surface-background, var(--top-bar-background));
 }