@sproutsocial/racine 11.0.0-mixin-beta.0 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 11.0.1
+
+### Patch Changes
+
+- 82a6a89: Adjusted styling of selected state to be less confusing for users based on org wide feedback
+
+## 11.0.0
+
+### Major Changes
+
+- 3f25fab: Remove themed mixin in favor of functions only
+
+  - Changes in 10.0.0 made the mixin unnecessary
+  - The functions that were created for use with the mixin can now be used standalone for the same purpose.
+  - Migration requires removal of all `@include themed` mixin calls. The code inside can stay the same. For example:
+
+  ```scss
+  @include themed {
+    color: colors("text.body");
+  }
+  ```
+
+  becomes
+
+  ```scss
+  color: colors("text.body");
+  ```
+
+### Patch Changes
+
+- f28456b: Add overlay theme object
+- a3ed9eb: Patches Menu Group margin issue
+
 ## 10.0.0
 
 ### Major Changes

package/__flow__/Listbox/index.test.js

@@ -165,10 +165,6 @@ 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 />
@@ -211,10 +207,6 @@ 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 />
@@ -244,10 +236,6 @@ 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, {
@@ -267,12 +255,6 @@ 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,277 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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;
-  margin: 8px;
-  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 {
+.c3 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -357,7 +87,8 @@ html .c3 {
   display: inline-block;
 }
 
-<div>
+<body>
+  <div>
     <div
       class="c0"
     >
@@ -368,7 +99,7 @@ html .c3 {
         class="c1"
         data-qa-button=""
         data-qa-button-isdisabled="false"
-        id="MenuButton-13"
+        id="MenuButton-7"
         type="button"
       >
         <span

package/__flow__/Menu/index.js

@@ -85,7 +85,6 @@ export const MenuItem = ({
   selected,
   disabled,
   indeterminate,
-  active,
   label: labelProp,
   ...props
 }: TypeMenuItemProps) => {
@@ -121,6 +120,7 @@ export const MenuItem = ({
   const isHidden = filteredItems && !filteredItems.includes(index);
   const isFocused = index === selectionIndex;
   selectCallbacks.current[index] = onClick;
+  const [keyPressed, setKeyPressed] = useState(false);
 
   const isCheckboxOrRadio = [
     MENU_ITEM_ROLES.CHECKBOX,
@@ -150,6 +150,14 @@ export const MenuItem = ({
     }
   }, [ref, isCheckboxOrRadio]);
 
+  useEffect(() => {
+    if (filteredItems) {
+      setKeyPressed(true);
+    } else if (selectionIndex !== 0) {
+      setKeyPressed(true);
+    }
+  }, [selectionIndex, filteredItems]);
+
   const handleClick = useCallback(
     (e: SyntheticEvent<HTMLButtonElement>) => {
       menuRef.current?.focus();
@@ -210,7 +218,7 @@ export const MenuItem = ({
     <MenuItemContainer
       data-qa-menu-item={label}
       {...props}
-      active={active || isFocused}
+      active={isFocused && keyPressed}
       id={id}
       aria-label={labelProp}
       value={valueProp}
@@ -287,7 +295,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.stories.js

@@ -7,7 +7,7 @@ import { names } from "./names";
 import Text from "../Text";
 import Box from "../Box";
 
-const fruit = ["Apple", "Banana", "Orange"];
+const fruit = ["Apple", "Banana", "Blueberry", "Orange"];
 const maybeFruit = ["Tomato", "Cucumber", "Squash"];
 
 export default {
@@ -233,3 +233,21 @@ export const MenuWithIcons = (props) => {
     </Box>
   );
 };
+
+export const MenuWithFilter = (props) => {
+  return (
+    <Box
+      width="200px"
+      border={500}
+      borderRadius="outer"
+      borderColor="container.border.base"
+      boxShadow="medium"
+      backgroundColor="container.background.base"
+    >
+      <Menu {...props}>
+        <Menu.FilterInput placeholder="filter contents..." m={300} />
+        <BaseContents />
+      </Menu>
+    </Box>
+  );
+};

package/__flow__/Menu/index.test.js

@@ -54,10 +54,6 @@ 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 } from "../utils/mixins";
+import { disabled, focusRing } from "../utils/mixins";
 
 export const MenuItemContainer = styled<
   typeof Box,
@@ -35,6 +35,13 @@ export const MenuItemContainer = styled<
     ${props.theme.typography[200]};
   `};
 
+  ${(props) =>
+    props.selected &&
+    !props.isCheckboxOrRadio &&
+    css`
+      font-weight: ${(props) => props.theme.fontWeights.semibold};
+    `}
+
   ${(props) =>
     props.active &&
     !props.disabled &&
@@ -48,13 +55,6 @@ export const MenuItemContainer = styled<
     `}
 
   ${(props) =>
-    props.selected &&
-    !props.isCheckboxOrRadio &&
-    css`
-      font-weight: ${(props) => props.theme.fontWeights.semibold};
-    `}
-
-		${(props) =>
     !props.disabled &&
     css`
       &:focus,
@@ -86,5 +86,7 @@ export const MenuItemContainer = styled<
 
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
-  outline: 0;
+  &:focus {
+    ${focusRing}
+  }
 `;

package/commonjs/Menu/index.js

@@ -91,9 +91,8 @@ var MenuItem = function MenuItem(_ref) {
       selected = _ref.selected,
       disabled = _ref.disabled,
       indeterminate = _ref.indeterminate,
-      active = _ref.active,
       labelProp = _ref.label,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "active", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "label"]);
 
   var _useContext = (0, React.useContext)(_hooks2.MenuContext),
       menuRole = _useContext.role,
@@ -131,6 +130,11 @@ var MenuItem = function MenuItem(_ref) {
   var isHidden = filteredItems && !filteredItems.includes(index);
   var isFocused = index === selectionIndex;
   selectCallbacks.current[index] = onClick;
+
+  var _useState = (0, React.useState)(false),
+      keyPressed = _useState[0],
+      setKeyPressed = _useState[1];
+
   var isCheckboxOrRadio = [_constants.MENU_ITEM_ROLES.CHECKBOX, _constants.MENU_ITEM_ROLES.RADIO].includes(itemRole);
   var interactive = onClick || onKeyPress || [_constants.MENU_ITEM_ROLES.OPTION, _constants.MENU_ITEM_ROLES.MENUITEM, _constants.MENU_ITEM_ROLES.CHECKBOX, _constants.MENU_ITEM_ROLES.RADIO].includes(itemRole);
   /**
@@ -148,6 +152,13 @@ var MenuItem = function MenuItem(_ref) {
       }
     }
   }, [ref, isCheckboxOrRadio]);
+  (0, React.useEffect)(function () {
+    if (filteredItems) {
+      setKeyPressed(true);
+    } else if (selectionIndex !== 0) {
+      setKeyPressed(true);
+    }
+  }, [selectionIndex, filteredItems]);
   var handleClick = (0, React.useCallback)(function (e) {
     var _menuRef$current;
 
@@ -198,7 +209,7 @@ var MenuItem = function MenuItem(_ref) {
   return /*#__PURE__*/React.createElement(_styles.MenuItemContainer, _extends({
     "data-qa-menu-item": label
   }, props, {
-    active: active || isFocused,
+    active: isFocused && keyPressed,
     id: id,
     "aria-label": labelProp,
     value: valueProp,
@@ -278,7 +289,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));
@@ -371,14 +381,14 @@ var Menu = function Menu(_ref4) {
       descendants = _useDescendants[0],
       setDescendants = _useDescendants[1];
 
-  var _useState = (0, React.useState)({
+  var _useState2 = (0, React.useState)({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
     isFilterInputFocused: false
   }),
-      state = _useState[0],
-      setState = _useState[1];
+      state = _useState2[0],
+      setState = _useState2[1];
 
   var selectCallbacks = (0, React.useRef)([]);
   var menuRef = (0, React.useRef)(null);
@@ -437,9 +447,9 @@ var MenuButton = function MenuButton(_ref5) {
       placement = _ref5$placement === void 0 ? "bottom" : _ref5$placement,
       props = _objectWithoutPropertiesLoose(_ref5, ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement"]);
 
-  var _useState2 = (0, React.useState)(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState3 = (0, React.useState)(false),
+      isOpen = _useState3[0],
+      setIsOpen = _useState3[1];
 
   var closePopout = (0, React.useCallback)(function () {
     return setIsOpen(false);

package/commonjs/Menu/styles.js

@@ -34,16 +34,16 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   return "6px " + props.theme.space[300];
 }, function (props) {
   return (0, _styledComponents.css)(["", ";"], props.theme.typography[200]);
+}, function (props) {
+  return props.selected && !props.isCheckboxOrRadio && (0, _styledComponents.css)(["font-weight:", ";"], function (props) {
+    return props.theme.fontWeights.semibold;
+  });
 }, function (props) {
   return props.active && !props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";.Icon-svg{color:", ";}"], function (props) {
     return props.theme.colors.text.inverse;
   }, props.theme.colors.listItem.background.selected, function (props) {
     return props.theme.colors.text.inverse;
   });
-}, function (props) {
-  return props.selected && !props.isCheckboxOrRadio && (0, _styledComponents.css)(["font-weight:", ";"], function (props) {
-    return props.theme.fontWeights.semibold;
-  });
 }, 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;
@@ -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;outline:0;"]);
+})(["list-style-type:none;&:focus{", "}"], _mixins.focusRing);
 exports.MenuItemsContainer = MenuItemsContainer;