@sproutsocial/racine 10.0.2-menuCSS.0 → 10.0.3-menuhotfix.0

package/__flow__/Listbox/index.test.js

@@ -165,6 +165,10 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox", () => {
+    it("should match snapshot", () => {
+      expect(render(<AsListbox />).baseElement).toMatchSnapshot();
+    });
+
     it("should render items with option role", async () => {
       const { findByText, queryByLabelText, queryByRole } = render(
         <AsListbox />
@@ -207,6 +211,10 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox multiselect", () => {
+    it("should match snapshot", () => {
+      expect(render(<AsListboxMultiselect />).baseElement).toMatchSnapshot();
+    });
+
     it("should render items with option role", async () => {
       const { queryByLabelText, queryByText, queryByRole } = render(
         <AsListboxMultiselect />
@@ -236,6 +244,10 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox with checkboxes", () => {
+    it("should match snapshot", () => {
+      expect(render(<AsListboxWithCheckboxes />).baseElement).toMatchSnapshot();
+    });
+
     it("should render items with checkbox role", async () => {
       const { queryByRole } = render(<AsListboxWithCheckboxes />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
@@ -255,6 +267,12 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox with filter input", () => {
+    it("should match snapshot", () => {
+      expect(
+        render(<AsListboxWithFilterInput />).baseElement
+      ).toMatchSnapshot();
+    });
+
     it("should allow filtering", async () => {
       const { queryByLabelText, queryAllByRole } = render(
         <AsListboxWithFilterInput />

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

@@ -1,7 +1,276 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Menu AsMenuButton should match snapshot 1`] = `
+exports[`Menu AsMenu should match snapshot 1`] = `
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 0px;
+  padding: 0px;
+  width: 200px;
+  overflow: hidden;
+}
+
+.c2 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  padding-left: 16px;
+  margin-top: -1px;
+  border-top: 1px solid;
+  border-color: #dee1e1;
+}
+
+.c4 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  padding: 8px;
+}
+
+.c5 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+}
+
+.c7 {
+  display: block;
+  width: 100%;
+  border-radius: 6px;
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  color: #364141;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  font-weight: 400;
+  padding: 6px 8px;
+  list-style-type: none;
+  outline: 0;
+  font-size: 13px;
+  line-height: 21.333333333333332px;
+}
+
+.c7:focus,
+.c7:hover {
+  color: #364141;
+  background-color: #f3f4f4;
+}
+
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
+.c7:hover {
+  cursor: pointer;
+}
+
+.c6 {
+  display: block;
+  width: 100%;
+  border-radius: 6px;
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  color: #364141;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  font-weight: 400;
+  padding: 6px 8px;
+  list-style-type: none;
+  outline: 0;
+  font-size: 13px;
+  line-height: 21.333333333333332px;
+  color: #FFFFFF;
+  background-color: #364141;
+}
+
+.c6 .Icon-svg {
+  color: #FFFFFF;
+}
+
+.c6:focus,
+.c6:hover {
+  color: #364141;
+  background-color: #f3f4f4;
+}
+
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
+.c6:hover {
+  cursor: pointer;
+}
+
+.c1 {
+  list-style-type: none;
+  outline: 0;
+}
+
 .c3 {
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin-top: 12px;
+  color: #273333;
+  font-size: 13px;
+  line-height: 21.333333333333332px;
+  font-weight: 600;
+}
+
+<body>
+  <div>
+    <ul
+      aria-activedescendant="MenuItem-1"
+      class="c0 c1"
+      overflow="hidden"
+      role="menu"
+      tabindex="0"
+      width="200px"
+    >
+      <div
+        class="c2"
+      >
+        <div
+          class="c3 "
+          color="text.headline"
+          data-qa-text="Fruit"
+          font-weight="600"
+        >
+          Fruit
+        </div>
+      </div>
+      <div
+        class="c4"
+        role="group"
+      >
+        <li
+          class="c5 c6"
+          data-qa-menu-item="Apple"
+          id="MenuItem-1"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Apple
+            </div>
+          </div>
+        </li>
+        <li
+          class="c5 c7"
+          data-qa-menu-item="Banana"
+          id="MenuItem-2"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Banana
+            </div>
+          </div>
+        </li>
+        <li
+          class="c5 c7"
+          data-qa-menu-item="Orange"
+          id="MenuItem-3"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Orange
+            </div>
+          </div>
+        </li>
+      </div>
+      <div
+        class="c2"
+      >
+        <div
+          class="c3 "
+          color="text.headline"
+          data-qa-text="Maybe Fruit"
+          font-weight="600"
+        >
+          Maybe Fruit
+        </div>
+      </div>
+      <div
+        class="c4"
+        role="group"
+      >
+        <li
+          class="c5 c7"
+          data-qa-menu-item="Tomato"
+          id="MenuItem-4"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Tomato
+            </div>
+          </div>
+        </li>
+        <li
+          class="c5 c7"
+          data-qa-menu-item="Cucumber"
+          id="MenuItem-5"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Cucumber
+            </div>
+          </div>
+        </li>
+        <li
+          class="c5 c7"
+          data-qa-menu-item="Squash"
+          id="MenuItem-6"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Squash
+            </div>
+          </div>
+        </li>
+      </div>
+    </ul>
+  </div>
+</body>
+`;
+
+exports[`Menu AsMenuButton should match snapshot 1`] = `
+<body>
+  .c3 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -87,8 +356,7 @@ html .c3 {
   display: inline-block;
 }
 
-<body>
-  <div>
+<div>
     <div
       class="c0"
     >
@@ -99,7 +367,7 @@ html .c3 {
         class="c1"
         data-qa-button=""
         data-qa-button-isdisabled="false"
-        id="MenuButton-7"
+        id="MenuButton-13"
         type="button"
       >
         <span

package/__flow__/Menu/index.js

@@ -287,7 +287,7 @@ export const MenuGroup = ({
         </Text>
       </Box>
     )}
-    <Box {...props} m={300} p={300} role="group">
+    <Box {...props} p={300} role="group">
       {children}
     </Box>
   </>

package/__flow__/Menu/index.test.js

@@ -54,6 +54,10 @@ describe("Menu", () => {
   });
 
   describe("AsMenu", () => {
+    it("should match snapshot", () => {
+      expect(render(<AsMenu />).baseElement).toMatchSnapshot();
+    });
+
     it("should render items with menuitem role", () => {
       const { queryByRole, queryByDataQaLabel } = render(<AsMenu />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.MENUITEM, {

package/__flow__/Menu/styles.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import Box from "../Box";
 import type { TypeMenuItemProps } from "./index.flow";
 import type { TypeTheme } from "../types/theme.flow";
-import { disabled, focusRing } from "../utils/mixins";
+import { disabled } from "../utils/mixins";
 
 export const MenuItemContainer = styled<
   typeof Box,
@@ -86,13 +86,5 @@ export const MenuItemContainer = styled<
 
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
-  &:focus {
-    ${focusRing}
-  }
-  &:not(:focus) {
-    & li:not(:hover) {
-      color: #364141;
-      background-color: transparent;
-    }
-  }
+  outline: 0;
 `;

package/commonjs/Menu/index.js

@@ -278,7 +278,6 @@ var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && _mixins.disabled
   }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
-    m: 300,
     p: 300,
     role: "group"
   }), children));

package/commonjs/Menu/styles.js

@@ -59,5 +59,5 @@ exports.MenuItemContainer = MenuItemContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;&:focus{", "}&:not(:focus){& li:not(:hover){color:#364141;background-color:transparent;}}"], _mixins.focusRing);
+})(["list-style-type:none;outline:0;"]);
 exports.MenuItemsContainer = MenuItemsContainer;

package/lib/Menu/index.js

@@ -245,7 +245,6 @@ export var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && disabled
   }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
-    m: 300,
     p: 300,
     role: "group"
   }), children));

package/lib/Menu/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import Box from "../Box";
-import { disabled, focusRing } from "../utils/mixins";
+import { disabled } from "../utils/mixins";
 export var MenuItemContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemContainer",
   componentId: "fjvae4-0"
@@ -44,4 +44,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;&:focus{", "}&:not(:focus){& li:not(:hover){color:#364141;background-color:transparent;}}"], focusRing);
+})(["list-style-type:none;outline:0;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "10.0.2-menuCSS.0",
+  "version": "10.0.3-menuhotfix.0",
   "license": "MIT",
   "files": [
     "__flow__",