Change disclosure icon color with prop (#3926)

Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com>
Shopify · Jan 27, 2021 · 452210c · 452210c
1 parent 8b36453
commit 452210c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -23,6 +23,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Removed duplicate color definition from disclosure `Icon` in `Tabs` ([#3926](https://github.com/Shopify/polaris-react/pull/3926))
+
 ### Bug fixes
 
 - Fixed an accessibility issue where high contrast styles wouldn’t be applied to the `Tag` component ([#3810](https://github.com/Shopify/polaris-react/pull/3810))

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
@@ -201,7 +201,6 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
 }
 
 .DisclosureActivator {
-  @include recolor-icon(var(--p-icon-subdued));
   @include focus-ring;
   height: 100%;
   background-color: transparent;

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -125,10 +125,10 @@ class TabsInner extends PureComponent<CombinedProps, State> {
     const disclosureButtonContent = hasCustomDisclosure ? (
       <>
         {disclosureText}
-        <Icon source={CaretDownMinor} color="base" />
+        <Icon source={CaretDownMinor} color="subdued" />
       </>
     ) : (
-      <Icon source={HorizontalDotsMinor} />
+      <Icon source={HorizontalDotsMinor} color="subdued" />
     );
 
     const disclosureButton = (