#3265 Fix microphone button styling regression (#3276)

* Fix microphone button styling regression * Update CHANGELOG.md
microsoft · Jun 24, 2020 · 0911f3d · 0911f3d
1 parent 1bb780c
commit 0911f3d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Resolves [#3182](https://github.com/microsoft/BotFramework-WebChat/issues/3182). Added stacked suggested actions height properties, by [@corinagum](https://github.com/corinagum), in PR [#3235](https://github.com/microsoft/BotFramework-WebChat/pull/3235)
 
+### Fixes
+
+-  Fixes [#3265](https://github.com/microsoft/BotFramework-WebChat/issues/3265). Fix styling specificity regression on microphone button, by [@corinagum](https://github.com/corinagum) in PR [#3276](https://github.com/microsoft/BotFramework-WebChat/pull/3276)
+
 ### Samples
 
 -  Resolves [#3218](https://github.com/microsoft/BotFramework-WebChat/issues/3218) and [#2811](https://github.com/microsoft/BotFramework-WebChat/issues/2811). Adds documentation on reconnecting to a conversation in minimizable sample, by [@corinagum](https://github.com/corinagum), in PR [#3239](https://github.com/microsoft/BotFramework-WebChat/pull/3239)

diff --git a/packages/component/src/Styles/StyleSet/MicrophoneButton.js b/packages/component/src/Styles/StyleSet/MicrophoneButton.js
@@ -1,10 +1,12 @@
 export default function createMicrophoneButtonStyle({ microphoneButtonColorOnDictate }) {
   return {
     // TODO: [P3] This path should not know anything about the DOM tree of <IconButton>
-    '&.dictating > button': {
-      '&, &:focus, &:hover': {
-        '& svg': {
-          fill: microphoneButtonColorOnDictate
+    '&.dictating > .webchat__icon-button': {
+      '&:not(:disabled):not([aria-disabled="true"])': {
+        '&, &:focus, &:hover': {
+          '& svg': {
+            fill: microphoneButtonColorOnDictate
+          }
         }
       }
     }