From ddb43ab46a6d63d2ec0a0117ca913ae35ecda79b Mon Sep 17 00:00:00 2001
From: Steven DeMartini <sjdemartini@users.noreply.github.com>
Date: Thu, 17 Aug 2023 12:52:45 -0700
Subject: [PATCH] Use matching icon colors in Select controls

This ensures that (in light mode) if a Select controls component renders
an icon for the current value (and for the MenuSelectTextAlign, for the
options too), it matches the color of the non-selected MenuButton
controls and the color of the select dropdown arrow.
---
 src/controls/MenuSelect.tsx          | 9 +++++++++
 src/controls/MenuSelectTextAlign.tsx | 9 +++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/controls/MenuSelect.tsx b/src/controls/MenuSelect.tsx
index f3ec8bb..e6e35c5 100644
--- a/src/controls/MenuSelect.tsx
+++ b/src/controls/MenuSelect.tsx
@@ -20,6 +20,15 @@ const useStyles = makeStyles({ name: { MenuSelect } })((theme) => {
       "&:not(:hover):not(.Mui-focused) .MuiOutlinedInput-notchedOutline": {
         borderWidth: 0,
       },
+
+      "& .MuiSvgIcon-root": {
+        // Ensure that if an icon is used as the `renderValue` result, it uses
+        // the same color as the default ToggleButton icon and the Select
+        // dropdown arrow icon
+        // https://github.com/mui/material-ui/blob/2cb9664b16d5a862a3796add7c8e3b088b47acb5/packages/mui-material/src/ToggleButton/ToggleButton.js#L60,
+        // https://github.com/mui/material-ui/blob/0b7beb93c9015da6e35c2a31510f679126cf0de1/packages/mui-material/src/NativeSelect/NativeSelectInput.js#L96,
+        color: theme.palette.action.active,
+      },
     },
 
     select: {
diff --git a/src/controls/MenuSelectTextAlign.tsx b/src/controls/MenuSelectTextAlign.tsx
index 477f9a2..3c99f98 100644
--- a/src/controls/MenuSelectTextAlign.tsx
+++ b/src/controls/MenuSelectTextAlign.tsx
@@ -76,7 +76,7 @@ export interface MenuSelectTextAlignProps
   emptyLabel?: React.ReactNode;
 }
 
-const useStyles = makeStyles({ name: { MenuSelectTextAlign } })({
+const useStyles = makeStyles({ name: { MenuSelectTextAlign } })((theme) => ({
   selectInput: {
     // We use a fixed width equal to the size of the menu button icon so that
     // the Select element won't change sizes even if we show the "blank"
@@ -101,8 +101,13 @@ const useStyles = makeStyles({ name: { MenuSelectTextAlign } })({
 
   menuButtonIcon: {
     fontSize: MENU_BUTTON_FONT_SIZE_DEFAULT,
+    // For consistency with toggle button default icon color and the Select
+    // dropdown arrow icon color
+    // https://github.com/mui/material-ui/blob/2cb9664b16d5a862a3796add7c8e3b088b47acb5/packages/mui-material/src/ToggleButton/ToggleButton.js#L60,
+    // https://github.com/mui/material-ui/blob/0b7beb93c9015da6e35c2a31510f679126cf0de1/packages/mui-material/src/NativeSelect/NativeSelectInput.js#L96
+    color: theme.palette.action.active,
   },
-});
+}));
 
 const DEFAULT_ALIGNMENT_OPTIONS: TextAlignSelectOption[] = [
   {