@sproutsocial/racine 9.1.0-beta-pr-1290.0 → 9.1.1-theme-extension.1

package/CHANGELOG.md

@@ -1,33 +1,5 @@
 # Change Log
 
-## 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
-
-- 1cf97da: Remove font weight rule from Breadcrumbs styles
-
-## 8.7.0
-
-### Minor Changes
-
-- bcfb6eb: Export themes as scss variables
-
 ## 8.6.3
 
 ### Patch Changes

package/__flow__/Breadcrumb/styles.js

@@ -42,6 +42,11 @@ const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
     font-weight: bold;
   }
 
+  li:not(:last-child) a,
+  li:not(:last-child) button {
+    font-weight: normal;
+  }
+
   li:not(:last-child)::after {
     content: "/";
     color: ${(props) => props.theme.colors.text.body};

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.low : "none"};
+      props.appearance === "placeholder" ? props.theme.shadows[100] : "none"};
   }
 
   &:active {

package/__flow__/Card/index.stories.js

@@ -15,6 +15,7 @@ export const AsButton = () => (
     px={400}
     py={350}
     ariaLabel="Click to do something"
+    bg="container.background.error.hover"
   >
     This is an interactive Card.
   </Card>

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.low};
+    box-shadow: ${(props) => props.theme.shadows[100]};
     transition: opacity ${(props) => props.theme.duration.medium}
       ${(props) => props.theme.easing.ease_inout};
   }

package/__flow__/CustomThemeProvider/index.js

@@ -0,0 +1,17 @@
+// @flow strict-local
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+
+import typeof { default as TypeTheme } from "../themes/default/theme";
+
+type TypeProps = {|
+  // Not sure how to type acceptance of a custom function to override theme
+  theme?: TypeTheme | ((customTheme: TypeTheme) => ?TypeTheme),
+  children: React.Node,
+|};
+
+const CustomThemeProvider = (props: TypeProps) => (
+  <ThemeProvider theme={props.theme} {...props} />
+);
+
+export default CustomThemeProvider;

package/__flow__/Drawer/index.stories.js

@@ -51,7 +51,7 @@ const DrawerComponent = ({ direction, offset }) => {
         padding={300}
       >
         <Button onClick={onOpen}>
-          <Icon color="icon.inverse" name="notifications" />
+          <Icon color="neutral.0" name="notifications" />
         </Button>
       </Box>
       <Drawer
@@ -105,10 +105,10 @@ const NectarDrawerComponent = ({ direction, offset }) => {
         <Button
           onClick={isNotificationsOpen ? closeNotifications : openNotifications}
         >
-          <Icon color="icon.base" name="notifications" />
+          <Icon color="neutral.800" name="notifications" />
         </Button>
         <Button onClick={isPoplarOpen ? closePoplar : openPoplar} mt={400}>
-          <Icon color="icon.base" name="link" />
+          <Icon color="neutral.800" 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.high};
+  box-shadow: ${(props) => props.theme.shadows[400]};
   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.low};
+  box-shadow: ${(props) => props.theme.shadows[100]};
   padding: 0 ${(props) => props.theme.space[200]};
   min-width: 20px;
   justify-content: center;

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

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

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

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

package/__flow__/Menu/index.js

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

package/__flow__/Menu/index.stories.js

@@ -213,7 +213,7 @@ export const MenuWithIcons = (props) => {
       border={500}
       borderRadius="outer"
       borderColor="container.border.base"
-      boxShadow="medium"
+      boxShadow={300}
       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 { TypeMenuItemProps } from "./index.flow";
+import type { TypeMenuGroupProps, TypeMenuItemProps } from "./index.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import { disabled } from "../utils/mixins";
 
@@ -84,7 +84,24 @@ 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/__snapshots__/index.test.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal should render properly 1`] = `
+.c0__Overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background-color: rgba(22,32,32,0.68);
+  opacity: 0;
+  will-change: opacity;
+  -webkit-transition: opacity .3s cubic-bezier(.4,0,.2,1);
+  transition: opacity .3s cubic-bezier(.4,0,.2,1);
+  z-index: 6;
+}
+
+.c0__Overlay.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.c0__Overlay.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.c0__Content {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background: #FFFFFF;
+  border-radius: 6px;
+  box-shadow: 0px 8px 16px rgba(39,51,51,.24);
+  -webkit-filter: blur(0);
+  filter: blur(0);
+  color: #364141;
+  outline: none;
+  max-width: calc(100vw - 64px);
+  max-height: calc(100vh - 64px);
+  width: 800px;
+  background-color: #c1c1f7;
+}
+
+@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
+  .c0__Content {
+    height: calc(100vh - 64px);
+  }
+}
+
+<div
+  class="ReactModal__Overlay ReactModal__Overlay--after-open styles__Container-sc-9lom4g-0__Overlay c0 c0__Overlay"
+>
+  <div
+    aria-label="Label"
+    aria-modal="true"
+    class="ReactModal__Content ReactModal__Content--after-open styles__Container-sc-9lom4g-0__Content c0 c0__Content"
+    data-qa-modal=""
+    data-qa-modal-isopen="true"
+    role="dialog"
+    tabindex="-1"
+  >
+    ajdsfljasdlfjlasdjf
+  </div>
+</div>
+`;

package/__flow__/Modal/index.test.js

@@ -7,6 +7,22 @@ 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.medium};
+    box-shadow: ${(props) => props.theme.shadows[300]};
     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="medium"
+    boxShadow={300}
     p={400}
     m={300}
     {...rest}

package/__flow__/ThemeProvider/index.js

@@ -5,10 +5,10 @@ import theme from "../themes/default/theme";
 
 import typeof { default as TypeTheme } from "../themes/default/theme";
 
-type TypeProps = $ReadOnly<{|
+type TypeProps = {|
   theme?: TypeTheme,
   children: React.Node,
-|}>;
+|};
 
 const ThemeProvider = (props: TypeProps) => (
   <BaseThemeProvider {...props} theme={props.theme || theme} />