@sproutsocial/racine 11.4.2-input-beta.0 → 11.6.1-input-beta.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 11.6.1
+
+### Patch Changes
+
+- eb27d01: Fix interact util in dark mode themes
+  - The `interact` util was located at a different location in the light and dark mode base theme objects. It was at the base level of the light theme and nested inside of `colors` for the dark theme.
+  - `interact` was seemingly available at the base level of the theme in both modes, because we spread the light theme as the basis of the dark theme. However, the `interact` util accessible at the base level of the theme would behave like light mode in either mode.
+  - The `interact` util located inside the `colors` object inside the dark mode theme object was not usable, due to only being defined in that location for dark mode, and has been removed.
+- eb27d01: Remove 'just-clone' dependency
+- eb27d01: Fix "navigation" colors in SproutTheme
+  - The "navigation" colors were not available in the theme due to being spread in incorrectly.
+- eb27d01: Improve theme types to be more accurate
+
+## 11.6.0
+
+### Minor Changes
+
+- 43adc28: Added a sprout theme to racine
+
+## 11.5.0
+
+### Minor Changes
+
+- fa8a45d: Dependency upgrades: upgraded severe vulnerabilities as well as storybook and jest suite fixes. Upgraded styled components from beta to stable v5.2.3.
+
 ## 11.4.1
 
 ### Patch Changes

package/__flow__/Button/index.js

@@ -84,4 +84,6 @@ const Button = ({
   );
 };
 
+Button.displayName = "Button";
+
 export default Button;

package/__flow__/Button/index.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -8,155 +7,140 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = () => (
-  <Button
-    appearance={text("appearance", "default")}
-    onClick={() => alert("Testing...")}
-  >
+export const defaultStory = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Default
   </Button>
 );
 
+defaultStory.args = { appearance: "default" };
+
 defaultStory.story = {
   name: "Default",
 };
 
-export const primary = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    onClick={() => alert("Testing...")}
-  >
+export const primary = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Primary Button
   </Button>
 );
 
+primary.args = { appearance: "primary" };
+
 primary.story = {
   name: "Primary",
 };
 
-export const secondary = () => (
-  <Button appearance={text("appearance", "secondary")}>Secondary Button</Button>
-);
+export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
+
+secondary.args = { appearance: "secondary" };
 
 secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = () => (
-  <Button appearance={text("appearance", "destructive")}>
-    Destructive Button
-  </Button>
+export const destructive = (args) => (
+  <Button {...args}>Destructive Button</Button>
 );
 
+destructive.args = { appearance: "destructive" };
 destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = () => (
-  <Button appearance={text("appearance", "placeholder")}>
-    Placeholder Button
-  </Button>
+export const placeholder = (args) => (
+  <Button {...args}>Placeholder Button</Button>
 );
 
+placeholder.args = { appearance: "placeholder" };
 placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    size={text("size", "large")}
-  >
-    Large Button
-  </Button>
-);
+export const largeButton = (args) => <Button {...args}>Large Button</Button>;
+largeButton.args = { size: "large", appearance: "primary" };
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = () => (
+export const pillButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")}>
+    <Button {...args}>
       <Icon name="reply" mr={350} />
       Pill Button
     </Button>
   </Box>
 );
-
+pillButton.args = { appearance: "pill" };
 pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = () => (
+export const pillIconOnlyButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")} ariaLabel="This is a label">
+    <Button {...args} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
     </Button>
   </Box>
 );
 
+pillIconOnlyButton.args = { appearance: "pill" };
 pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = () => (
-  <Button
-    appearance={text("appearance", "secondary")}
-    active={boolean("active", true)}
-  >
-    Active Button
-  </Button>
-);
+export const activeButton = (args) => <Button {...args}>Active Button</Button>;
 
+activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = () => (
-  <Button
-    href={text("href", "http://sproutsocial.style")}
-    external={boolean("external", true)}
-    appearance={text("appearance", "primary")}
-  >
-    Button using anchor element
-  </Button>
+export const buttonAsALink = (args) => (
+  <Button {...args}>Button using anchor element</Button>
 );
-
+buttonAsALink.args = {
+  appearance: "primary",
+  external: true,
+  href: "http://sproutsocial.style",
+};
 buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    disabled={text("disabled", "true")}
-  >
-    This Button is disabled
-  </Button>
+export const disabledButton = (args) => (
+  <Button {...args}>This Button is disabled</Button>
 );
-
+disabledButton.args = {
+  appearance: "primary",
+  disabled: true,
+};
 disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = () => (
-  <Button appearance={text("appearance", "primary")} width={number("width", 1)}>
-    Full-Width Button
-  </Button>
+export const fullWidthButton = (args) => (
+  <Button {...args}>Full-Width Button</Button>
 );
-
+fullWidthButton.args = {
+  appearance: "primary",
+  width: 1,
+};
 fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = () => (
-  <Button appearance={text("appearance", "secondary")}>
+export const withIcon = (args) => (
+  <Button {...args}>
     <Icon name="twitter" mr={350} />
     Secondary Button
   </Button>
 );
 
+withIcon.args = {
+  appearance: "secondary",
+};
 withIcon.story = {
   name: "With icon",
 };

package/__flow__/Button/styles.js

@@ -99,7 +99,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${LAYOUT}
   ${COMMON}
 `;
-
+Container.displayName = "Button-Container";
 export default Container;
 
 //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/EmptyState/index.test.js

@@ -105,7 +105,7 @@ describe("EmptyState", () => {
       <EmptyState
         media={
           <Image
-            alt="No assets matching your
 search or filters"
+            alt="No assets matching your
  search or filters"
             src="https://cl.ly/db498c7682df/download/analytics.svg"
             m={0}
           />

package/__flow__/Input/index.js

@@ -16,7 +16,7 @@ type TypeProps = {
   ariaLabel?: string,
   /** Attribute used to associate other elements that describe the Input, like an error */
   ariaDescribedby?: string,
-  /** Label for Input.ClearButton. Required when using <Input type="search"/> or <Input.ClearButton/>. */
+  /** Label for Input.ClearButton. Required when using Input.ClearButton. */
   clearButtonLabel?: string,
   /** Placeholder text for when value is undefined or empty */
   placeholder?: string,
@@ -52,8 +52,9 @@ type TypeProps = {
     | ((React.ElementRef<any> | HTMLElement) => void),
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  /** Input.ClearButton onClick callback. Required when using <Input type="search"/> or <Input.ClearButton/>.
-   The component handles returning focus to Input after onClear is called only. You must reset "value" yourself.*/
+  /** Input.ClearButton onClick callback. Required when using Input.ClearButton.
+   The component handles returning focus to Input after onClear is called.
+   For controlled Inputs, you must reset "value" yourself.*/
   onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
@@ -84,6 +85,7 @@ type TypeInputContext = $Shape<{
   onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
   clearButtonLabel: string,
+  isControlled: boolean,
   hasValue: boolean,
   size: "large" | "small" | "default",
 }>;
@@ -103,6 +105,7 @@ const ClearButton = () => {
     onClear,
     handleClear,
     clearButtonLabel,
+    isControlled,
     hasValue,
     size: inputSize,
   } = React.useContext(InputContext);
@@ -112,12 +115,9 @@ const ClearButton = () => {
     return null;
   }
 
-  // Log a warning and hide the button when no onClear callback is provided.
-  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
-  if (!onClear) {
-    console.warn(
-      "Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton."
-    );
+  // Hide the button when no onClear callback is provided to a controlled Input.
+  // For a controlled component, all the button would do without an onClear is focus the input.
+  if (isControlled && !onClear) {
     return null;
   }
 
@@ -162,7 +162,7 @@ class Input extends React.Component<TypeProps, TypeState> {
   constructor(props: TypeProps) {
     super(props);
     this.state = {
-      // tracking hasValue in state allows us to hide ClearButton when there is no value to clear
+      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
       // for both controlled and uncontrolled inputs.
       hasValue: !!props.value,
     };
@@ -178,7 +178,7 @@ class Input extends React.Component<TypeProps, TypeState> {
 
   static ClearButton = ClearButton;
 
-  // Define our own ref for focus management.
+  // Define our own ref for use in handleClear.
   // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
   inputRef = React.createRef<HTMLInputElement>();
 
@@ -186,8 +186,15 @@ class Input extends React.Component<TypeProps, TypeState> {
     this.props.onBlur?.(e);
 
   handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
-    this.inputRef?.current?.focus();
+    // If the component is uncontrolled, clear its value via ref.
+    if (typeof this.props.value !== "string") {
+      if (this.inputRef.current) {
+        this.inputRef.current.value = "";
+      }
+    }
+    this.inputRef.current?.focus();
     this.props.onClear?.(e);
+    this.updateState("");
   };
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -264,9 +271,9 @@ class Input extends React.Component<TypeProps, TypeState> {
       ) : (
         elemBefore
       );
-    // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    // Do not add a ClearButton if an elemAfter prop was passed.
     const elementAfter =
-      type === "search" && onClear && !elemAfter ? <ClearButton /> : elemAfter;
+      type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
 
     return (
       <Container
@@ -284,6 +291,7 @@ class Input extends React.Component<TypeProps, TypeState> {
           value={{
             handleClear: this.handleClear,
             hasValue: this.state.hasValue,
+            isControlled: typeof this.props.value === "string",
             clearButtonLabel,
             onClear,
             size,

package/__flow__/Input/styles.js

@@ -134,13 +134,13 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.before &&
     css`
-      left: ${props.theme.space[350]};
+      left: ${props.theme.space[300]};
     `};
 
   ${(props) =>
     props.after &&
     css`
-      right: ${props.isClearButton ? 0 : props.theme.space[350]};
+      right: ${props.isClearButton ? 0 : props.theme.space[300]};
     `};
 `;
 

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

@@ -14,12 +14,12 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c3,
+_:-ms-fullscreen .c2,
 html .c3 {
   width: 16px;
 }
 
-.pdf-page .c3 {
+.pdf-page .c2 {
   width: 16px;
 }
 

package/__flow__/ThemeProvider/index.js

@@ -3,10 +3,13 @@ import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import theme from "../themes/light/theme";
 
-import typeof { default as TypeTheme } from "../themes/light/theme";
+import type { TypeTheme, TypeSproutTheme } from "../types/theme.flow";
+
+// We can append additional themes types here
+type TypeAllThemes = TypeTheme | TypeSproutTheme;
 
 type TypeProps = $ReadOnly<{|
-  theme?: TypeTheme,
+  theme?: TypeAllThemes,
   children: React.Node,
 |}>;
 

package/__flow__/index.js

@@ -1,11 +1,15 @@
 // @flow
 export type { EnumIconNames } from "./EnumIconNames";
-export type { TypeTheme } from "./types/theme.flow";
+export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
 export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/setupTests.js

@@ -1,5 +1,5 @@
 import "mutationobserver-shim";
-import "jest-dom/extend-expect";
+import "@testing-library/jest-dom/extend-expect";
 import "jest-axe/extend-expect";
 import "babel-polyfill";
 import "jest-styled-components";

package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap

@@ -1,19 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`layout system props display 1`] = `
-.c0 {
-  display: -webkit-string;
-  display: string;
-}
-
-<div>
-  <div
-    class="c0"
-    display="string"
-  />
-</div>
-`;
-
 exports[`layout system props height 1`] = `
 .c0 {
   height: string;

package/__flow__/systemProps/tests/layout.test.js

@@ -10,15 +10,6 @@ describe("layout system props", () => {
     ${layoutSystemProps}
   `;
 
-  test("display", () => {
-    const { container } = render(
-      <>
-        <Component display="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
   test("height", () => {
     const { container } = render(
       <>

package/__flow__/themes/dark/theme.js

@@ -29,9 +29,6 @@ export const shadows = {
 
 const colors = {
   ...lightTheme.colors,
-  utils: {
-    interact: interact(MODE),
-  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000,
@@ -238,6 +235,9 @@ const colors = {
 
 const darkTheme = {
   ...lightTheme,
+  utils: {
+    interact: interact(MODE),
+  },
   colors,
   shadows,
   mode: MODE,

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,42 @@
+// @flow strict-local
+import baseDarkTheme from "../../../dark/theme";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
+
+export const navigation = {
+  main: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      overflowGradient: baseDarkTheme.colors.neutral[1100],
+    },
+  },
+  secondary: {
+    background: {
+      base: baseDarkTheme.colors.neutral[900],
+    },
+  },
+  text: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0],
+  },
+  icon: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0],
+  },
+  listItem: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      hover: baseDarkTheme.colors.neutral[1100],
+      selected: baseDarkTheme.colors.neutral[700],
+    },
+  },
+};
+
+const darkTheme: TypeSproutTheme = {
+  ...baseDarkTheme,
+  colors: {
+    ...baseDarkTheme.colors,
+    navigation,
+  },
+};
+
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,42 @@
+// @flow strict-local
+import baseLightTheme from "../../../light/theme";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
+
+export const navigation = {
+  main: {
+    background: {
+      base: baseLightTheme.colors.neutral[900],
+      overflowGradient: baseLightTheme.colors.neutral[1000],
+    },
+  },
+  secondary: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+    },
+  },
+  text: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0],
+  },
+  icon: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0],
+  },
+  listItem: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+      hover: baseLightTheme.colors.neutral[1000],
+      selected: baseLightTheme.colors.neutral[700],
+    },
+  },
+};
+
+const lightTheme: TypeSproutTheme = {
+  ...baseLightTheme,
+  colors: {
+    ...baseLightTheme.colors,
+    navigation,
+  },
+};
+
+export default lightTheme;

package/__flow__/types/theme.colors.flow.js

@@ -229,7 +229,14 @@ type TypeElevationColors = {|
   },
 |};
 
-type TypeDatavizColors = typeof datavizPalette;
+type TypeDatavizColors = {|
+  DATAVIZ_COLORS_MAP: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+  DATAVIZ_COLORS_LIST: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  dataviz: {
+    map: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+    list: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  },
+|};
 
 type TypeNetworkColors = {|
   network: {

package/__flow__/types/theme.flow.js

@@ -13,7 +13,10 @@ import {
 } from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
+import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
 
+export type TypeThemeUtils = {| interact: (color: string) => string |};
+export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
 export type TypeFontWeight = typeof fontWeights;
@@ -28,6 +31,8 @@ export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
+  mode: TypeThemeMode,
+  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -41,3 +46,12 @@ export type TypeTheme = {
   easing: TypeEasing,
   duration: TypeDuration,
 };
+
+// Extended themes
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    ...$Exact<TypeColor>,
+    navigation: typeof navigation,
+  |},
+};

package/commonjs/Button/index.js

@@ -65,5 +65,6 @@ var Button = function Button(_ref) {
   }, qa, rest), children);
 };
 
+Button.displayName = "Button";
 var _default = Button;
 exports.default = _default;

package/commonjs/Button/styles.js

@@ -60,6 +60,7 @@ var Container = _styledComponents.default.button.withConfig({
   return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
+Container.displayName = "Button-Container";
 var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
 
 exports.default = _default;