@sproutsocial/racine 8.6.2 → 8.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 8.6.3
+
+### Patch Changes
+
+- 777fcd7: Unset inverted icon color when menu item is hovered and active
+
 ## 8.6.2
 
 ### Patch Changes

package/__flow__/Listbox/__snapshots__/index.test.js.snap

@@ -413,6 +413,11 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
 .c6:hover {
   cursor: pointer;
 }
@@ -446,6 +451,11 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c4:focus .Icon-svg,
+.c4:hover .Icon-svg {
+  color: unset;
+}
+
 .c4:hover {
   cursor: pointer;
 }
@@ -698,6 +708,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
 .c7:hover {
   cursor: pointer;
 }
@@ -731,6 +746,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c5:focus .Icon-svg,
+.c5:hover .Icon-svg {
+  color: unset;
+}
+
 .c5:hover {
   cursor: pointer;
 }

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -47,6 +47,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
 .c7:hover {
   cursor: pointer;
 }
@@ -80,6 +85,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
 .c6:hover {
   cursor: pointer;
 }

package/__flow__/Menu/index.stories.js

@@ -5,6 +5,7 @@ import OverflowList from "../OverflowList";
 import Icon from "../Icon";
 import { names } from "./names";
 import Text from "../Text";
+import Box from "../Box";
 
 const fruit = ["Apple", "Banana", "Orange"];
 const maybeFruit = ["Tomato", "Cucumber", "Squash"];
@@ -207,19 +208,28 @@ export const MenuWithCheckboxes = (props) => {
 // Specifically testing that icons with a color inverse when active like the text does.
 export const MenuWithIcons = (props) => {
   return (
-    <Menu width="200px" {...props}>
-      <Menu.Item key="positive" onClick={() => alert("positive")}>
-        <Icon name="flat-positive-sentiment" mr={200} color="blue.600" />
-        Positive
-      </Menu.Item>
-      <Menu.Item key="negative" onClick={() => alert("negative")}>
-        <Icon name="flat-negative-sentiment" mr={200} color="red.500" />
-        Negative
-      </Menu.Item>
-      <Menu.Item key="neutral" onClick={() => alert("neutral")}>
-        <Icon name="flat-neutral-sentiment" mr={200} />
-        Neutral
-      </Menu.Item>
-    </Menu>
+    <Box
+      width="200px"
+      border={500}
+      borderRadius="outer"
+      borderColor="container.border.base"
+      boxShadow={300}
+      backgroundColor="container.background.base"
+    >
+      <Menu {...props}>
+        <Menu.Item key="positive" onClick={() => alert("positive")}>
+          <Icon name="flat-positive-sentiment" mr={200} color="icon.info" />
+          Positive
+        </Menu.Item>
+        <Menu.Item key="negative" onClick={() => alert("negative")}>
+          <Icon name="flat-negative-sentiment" mr={200} color="icon.error" />
+          Negative
+        </Menu.Item>
+        <Menu.Item key="neutral" onClick={() => alert("neutral")}>
+          <Icon name="flat-neutral-sentiment" mr={200} />
+          Neutral
+        </Menu.Item>
+      </Menu>
+    </Box>
   );
 };

package/__flow__/Menu/styles.js

@@ -62,6 +62,10 @@ export const MenuItemContainer = styled<
         color: ${(props) => props.theme.colors.text.body};
         background-color: ${(props) =>
           props.theme.colors.listItem.background.hover};
+
+        .Icon-svg {
+          color: unset;
+        }
       }
     `}
 

package/commonjs/Menu/styles.js

@@ -45,7 +45,7 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/lib/Menu/styles.js

@@ -31,7 +31,7 @@ export var MenuItemContainer = styled(Box).withConfig({
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.6.2",
+  "version": "8.6.3",
   "license": "MIT",
   "files": [
     "__flow__",