@sproutsocial/racine 8.8.0-dar35-beta.1 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 9.0.1
+
+### Patch Changes
+
+- 52052ae: Update MenuGroupContainer so that it takes system props instead of css styling
+- 2fc4f88: Adds a `palette` prop to Token and uses the proper accessible color tokens
+- 7a87944: Update @storybook/react to resolve a vulnerability in one of its sub-dependencies (immer)
+
+## 9.0.0
+
+### Major Changes
+
+- a71802f: convert shadow tokens to semantic tokens
+
+## 8.8.0
+
+### Minor Changes
+
+- 2746920: Add SCSS themed mixin and functions
+
+### Patch Changes
+
+- 69ddb8e: Replace instances of Icon colors with semantic names
+
 ## 8.7.1
 
 ### Patch Changes

package/__flow__/Button/styles.js

@@ -51,7 +51,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       props.theme.colors.button[props.appearance].background.hover};
     text-decoration: none;
     box-shadow: ${(props) =>
-      props.appearance === "placeholder" ? props.theme.shadows[100] : "none"};
+      props.appearance === "placeholder" ? props.theme.shadows.low : "none"};
   }
 
   &:active {

package/__flow__/Card/styles.js

@@ -19,7 +19,7 @@ const Container = styled<typeof Box, *>(Box)`
     width: 100%;
     height: 100%;
     opacity: 0;
-    box-shadow: ${(props) => props.theme.shadows[100]};
+    box-shadow: ${(props) => props.theme.shadows.low};
     transition: opacity ${(props) => props.theme.duration.medium}
       ${(props) => props.theme.easing.ease_inout};
   }

package/__flow__/Drawer/index.stories.js

@@ -51,7 +51,7 @@ const DrawerComponent = ({ direction, offset }) => {
         padding={300}
       >
         <Button onClick={onOpen}>
-          <Icon color="neutral.0" name="notifications" />
+          <Icon color="icon.inverse" name="notifications" />
         </Button>
       </Box>
       <Drawer
@@ -105,10 +105,10 @@ const NectarDrawerComponent = ({ direction, offset }) => {
         <Button
           onClick={isNotificationsOpen ? closeNotifications : openNotifications}
         >
-          <Icon color="neutral.800" name="notifications" />
+          <Icon color="icon.base" name="notifications" />
         </Button>
         <Button onClick={isPoplarOpen ? closePoplar : openPoplar} mt={400}>
-          <Icon color="neutral.800" name="link" />
+          <Icon color="icon.base" name="link" />
         </Button>
       </Box>
       <Drawer

package/__flow__/Drawer/styles.js

@@ -17,7 +17,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   height: 100%;
   width: ${(props) => props.width}px;
   background-color: ${(props) => props.theme.colors.container.background.base};
-  box-shadow: ${(props) => props.theme.shadows[400]};
+  box-shadow: ${(props) => props.theme.shadows.high};
   filter: blur(0);
 
   ${(props) => css`

package/__flow__/KeyboardKey/styles.js

@@ -10,7 +10,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
   background-color: ${(props) => props.theme.colors.container.background.base};
   border: 1px solid ${(props) => props.theme.colors.container.border.base};
   border-radius: ${(props) => props.theme.radii[500]};
-  box-shadow: ${(props) => props.theme.shadows[100]};
+  box-shadow: ${(props) => props.theme.shadows.low};
   padding: 0 ${(props) => props.theme.space[200]};
   min-width: 20px;
   justify-content: center;

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

@@ -388,6 +388,13 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 .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;
+  margin: 8px;
+  padding: 8px;
+}
+
+.c3 {
+  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;
 }
 
 .c6 {
@@ -460,10 +467,6 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c3 {
-  padding: 8px;
-}
-
 .c1 {
   list-style-type: none;
   outline: 0;
@@ -558,12 +561,12 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
       width="200px"
     >
       <div
-        class="c2 c3"
+        class="c2"
         role="group"
       >
         <li
           aria-checked="false"
-          class="c2 c4"
+          class="c3 c4"
           data-qa-menu-item="Apple"
           data-value="Apple"
           id="MenuItem-28"
@@ -597,7 +600,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c6"
+          class="c3 c6"
           data-qa-menu-item="Banana"
           data-value="Banana"
           id="MenuItem-29"
@@ -631,7 +634,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c6"
+          class="c3 c6"
           data-qa-menu-item="Orange"
           data-value="Orange"
           id="MenuItem-30"
@@ -683,6 +686,13 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 .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;
+  margin: 8px;
+  padding: 8px;
+}
+
+.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;
 }
 
 .c7 {
@@ -755,10 +765,6 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c3 {
-  padding: 8px;
-}
-
 .c1 {
   list-style-type: none;
   outline: 0;
@@ -780,12 +786,12 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   margin-right: 8px;
 }
 
-.c4 {
+.c3 {
   box-sizing: border-box;
   position: relative;
 }
 
-.c4 input {
+.c3 input {
   box-sizing: border-box;
   width: 100%;
   border: 1px solid transparent;
@@ -806,34 +812,34 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   font-size: 13px;
 }
 
-.c4 input::-ms-clear {
+.c3 input::-ms-clear {
   display: none;
 }
 
-.c4 input::-webkit-search-cancel-button {
+.c3 input::-webkit-search-cancel-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4 input:focus {
+.c3 input:focus {
   box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
   outline: none;
 }
 
-.c4 input:focus::-moz-focus-inner {
+.c3 input:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c4 input:not(output):not(:focus):-moz-ui-invalid {
+.c3 input:not(output):not(:focus):-moz-ui-invalid {
   box-shadow: none;
 }
 
-.c4 input:placeholder {
+.c3 input:placeholder {
   color: #6e797a;
 }
 
-.c4 input {
+.c3 input {
   border: 1px solid #b0b6b7;
 }
 
@@ -910,11 +916,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
       width="200px"
     >
       <div
-        class="c2 c3"
+        class="c2"
         role="group"
       >
         <div
-          class="c4"
+          class="c3"
         >
           <input
             aria-invalid="false"
@@ -931,7 +937,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </div>
         <li
           aria-checked="false"
-          class="c2 c5"
+          class="c4 c5"
           data-qa-menu-item="Apple"
           data-value="Apple"
           id="MenuItem-34"
@@ -965,7 +971,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Banana"
           data-value="Banana"
           id="MenuItem-35"
@@ -999,7 +1005,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Orange"
           data-value="Orange"
           id="MenuItem-36"
@@ -1033,7 +1039,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Tomato"
           data-value="Tomato"
           id="MenuItem-37"
@@ -1067,7 +1073,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Cucumber"
           data-value="Cucumber"
           id="MenuItem-38"
@@ -1101,7 +1107,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Squash"
           data-value="Squash"
           id="MenuItem-39"
@@ -1135,7 +1141,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Cantaloupe"
           data-value="Cantaloupe"
           id="MenuItem-40"
@@ -1169,7 +1175,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Jackalope"
           data-value="Jackalope"
           id="MenuItem-41"
@@ -1203,7 +1209,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Lingonberry"
           data-value="Lingonberry"
           id="MenuItem-42"
@@ -1237,7 +1243,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Dingleberry"
           data-value="Dingleberry"
           id="MenuItem-43"
@@ -1271,7 +1277,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
         </li>
         <li
           aria-checked="false"
-          class="c2 c7"
+          class="c4 c7"
           data-qa-menu-item="Kaffir Lime"
           data-value="Kaffir Lime"
           id="MenuItem-44"

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

@@ -22,6 +22,13 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 .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 {
@@ -94,10 +101,6 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c5 {
-  padding: 8px;
-}
-
 .c1 {
   list-style-type: none;
   outline: 0;
@@ -138,11 +141,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c4 c5"
+        class="c4"
         role="group"
       >
         <li
-          class="c4 c6"
+          class="c5 c6"
           data-qa-menu-item="Apple"
           id="MenuItem-1"
           role="menuitem"
@@ -159,7 +162,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Banana"
           id="MenuItem-2"
           role="menuitem"
@@ -176,7 +179,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Orange"
           id="MenuItem-3"
           role="menuitem"
@@ -206,11 +209,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c4 c5"
+        class="c4"
         role="group"
       >
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Tomato"
           id="MenuItem-4"
           role="menuitem"
@@ -227,7 +230,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Cucumber"
           id="MenuItem-5"
           role="menuitem"
@@ -244,7 +247,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
           </div>
         </li>
         <li
-          class="c4 c7"
+          class="c5 c7"
           data-qa-menu-item="Squash"
           id="MenuItem-6"
           role="menuitem"

package/__flow__/Menu/index.js

@@ -10,11 +10,7 @@ import {
   useState,
 } from "react";
 import uniqueId from "lodash.uniqueid";
-import {
-  MenuGroupContainer,
-  MenuItemContainer,
-  MenuItemsContainer,
-} from "./styles";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 
 import Box from "../Box";
@@ -291,9 +287,9 @@ export const MenuGroup = ({
         </Text>
       </Box>
     )}
-    <MenuGroupContainer {...props} role="group">
+    <Box {...props} m={300} p={300} role="group">
       {children}
-    </MenuGroupContainer>
+    </Box>
   </>
 );
 

package/__flow__/Menu/index.stories.js

@@ -213,7 +213,7 @@ export const MenuWithIcons = (props) => {
       border={500}
       borderRadius="outer"
       borderColor="container.border.base"
-      boxShadow={300}
+      boxShadow="medium"
       backgroundColor="container.background.base"
     >
       <Menu {...props}>

package/__flow__/Menu/styles.js

@@ -1,7 +1,7 @@
 // @flow
 import styled, { css } from "styled-components";
 import Box from "../Box";
-import type { TypeMenuGroupProps, TypeMenuItemProps } from "./index.flow";
+import type { TypeMenuItemProps } from "./index.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import { disabled } from "../utils/mixins";
 
@@ -84,24 +84,7 @@ export const MenuItemContainer = styled<
   ${(props) => props.disabled && disabled}
 `;
 
-export const MenuGroupContainer = styled<
-  typeof Box,
-  TypeTheme,
-  TypeMenuGroupProps
->(Box)`
-  ${(props) =>
-    props.appearance === "flush"
-      ? css`
-          margin: 0 -${(props) => props.theme.space[300]};
-        `
-      : css`
-          padding: ${(props) => props.theme.space[300]};
-        `};
-`;
-
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
   outline: 0;
 `;
-
-export default MenuGroupContainer;

package/__flow__/Modal/index.test.js

@@ -7,22 +7,6 @@ import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
 afterEach(() => cleanup());
 
 describe("Modal", () => {
-  it("should render properly", () => {
-    // Use baseElement since it renders in a Portal
-    const { baseElement } = render(
-      <Modal
-        isOpen={true}
-        label="Label"
-        bg={COLOR_PURPLE_300}
-        onClose={() => {}}
-        closeButtonLabel="Close this dialog"
-      >
-        ajdsfljasdlfjlasdjf
-      </Modal>
-    );
-    expect(baseElement.querySelector(".ReactModal__Overlay")).toMatchSnapshot();
-  });
-
   it("renders a custom background color", () => {
     // Use baseElement since it renders in a Portal
     const { baseElement } = render(

package/__flow__/Modal/styles.js

@@ -84,7 +84,7 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAd
     flex-direction: column;
     background: ${(props) => props.theme.colors.container.background.base};
     border-radius: ${(props) => props.theme.radii[500]};
-    box-shadow: ${(props) => props.theme.shadows[300]};
+    box-shadow: ${(props) => props.theme.shadows.medium};
     filter: blur(0);
     color: ${(props) => props.theme.colors.text.body};
 

package/__flow__/Popout/index.js

@@ -395,7 +395,7 @@ Popout.Content = ({ children, ...rest }: TypePopoutContentProps) => (
     border={500}
     borderColor="container.border.base"
     borderRadius="outer"
-    boxShadow={300}
+    boxShadow="medium"
     p={400}
     m={300}
     {...rest}

package/__flow__/Token/index.js

@@ -15,6 +15,7 @@ export type TypeProps = {
   valid?: boolean,
   /** Indicates whether the token is disabled */
   disabled?: boolean,
+  palette?: "neutral" | "blue",
 };
 
 const Token = ({
@@ -24,6 +25,7 @@ const Token = ({
   qa,
   valid = true,
   disabled = false,
+  palette = "neutral",
   ...rest
 }: TypeProps) => {
   const textContainer = useTextContent("");
@@ -32,8 +34,9 @@ const Token = ({
     <Container
       ref={textContainer}
       valid={valid}
-      as={closeable || onClick ? "button" : "div"}
+      palette={palette}
       type={closeable || onClick ? "button" : undefined}
+      as={closeable || onClick ? "button" : "div"}
       closeable={closeable || onClick}
       disabled={disabled}
       onClick={onClick}

package/__flow__/Token/index.stories.js

@@ -80,3 +80,14 @@ export const staticWithIcon = () => (
 staticWithIcon.story = {
   name: "Static with icon",
 };
+
+export const bluePalette = () => (
+  <Token palette="blue" closeable={boolean("closeable", false)}>
+    <Icon size="mini" name="twitter" pr={300} />
+    <span>I'm blue</span>
+  </Token>
+);
+
+bluePalette.story = {
+  name: "Palette Variation",
+};