@sproutsocial/racine 12.15.0 → 12.16.1

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # Change Log
 
+## 12.16.1
+
+### Patch Changes
+
+- 3cb36bf: This change fixes a bug where "px" was being appended to a number value when users were already including a pixel value. This was causing incorrect css syntax i.e. "16pxpx"
+
+## 12.16.0
+
+### Minor Changes
+
+- b2c4834: The `aria-label` and `aria-labelledby` props were added to the `TypeListboxButtonProps` flow type for the `ListboxButton` component
+- 8b80526: Updated Indicator color to support theming
+  - Indicator's color was previously hard-coded to teal.600
+  - We are now using a semantic theme value, "icon.info", so that the color of Indicator can reflect the current theme.
+  - Please note that "icon.info" currently resolves to a blue color in all bundled themes. Thus, unless you override the color, all Indicators currently in use will change from teal to blue.
+  - Support for overriding the Indicator color via the `color` system prop was added.
+- b2c4834: The `checked` and `indeterminate` props on the `Checkbox` component are now optional
+- 57cb24f: **Deprecation Notice:**
+
+  The `default` appearance for the `Button` component has been **deprecated** in favor of `unstyled`. To migrate, change all `Button` components which use the `default` appearance to use `unstyled` instead. Support for the `default` option will be removed in a future version.
+
+  The following components that use the `Button` component or its types must also be migrated to use `unstyled` instead of `default` for the `appearance`:
+
+  - `ListboxButton`
+  - `LoaderButton`
+  - `MenuButton`
+  - `Message.Button`
+  - `ModalCloseButton`
+
+- b2c4834: The following components now export their prop flow types:
+  - Loader
+  - Icon
+  - Numeral
+  - PartnerLogo
+  - Popout
+  - SpotIllustration
+  - Switch
+- b2c4834: The `ItemComponent` and `getItemProps` props on the `OverflowList` component are now optional
+- 8a70eff: We've made some enhancements to the Partner Logo component! The Partner Logo component API now closely aligns with the Icon component.
+
+  - Added support for different logo types ie. `wordmark` or `lockup`
+  - Added support for predefined sizes. ie. `mini`, `small`, `medium`, `large`, and `jumbo`.
+  - The partner Logo now has a fixed width by default.
+
+- 5613a5c: A new Advocacy icon has been added to the icon library
+
+### Patch Changes
+
+- 56fa0b9: Updated Icon component to accept `size="small"` prop to closer align to the `PartnerLogo` component
+
 ## 12.15.0
 
 ### Minor Changes

package/__flow__/Avatar/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Avatar from "./index";
 

package/__flow__/Avatar/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/Badge/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Badge from "./index";
 import Box from "../Box";

package/__flow__/Badge/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Badge from "./";
 import { render } from "../utils/react-testing-library";

package/__flow__/Banner/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 import Banner from "./index";

package/__flow__/Banner/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Banner from "./";
 import { render } from "../utils/react-testing-library";

package/__flow__/Box/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { useRef } from "react";
 import { css } from "styled-components";
 import { text } from "@storybook/addon-knobs";

package/__flow__/Box/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import Box from "./";

package/__flow__/Breadcrumb/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Breadcrumb from "./index";
 import Menu from "../Menu";

package/__flow__/Breadcrumb/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/Button/index.js

@@ -2,6 +2,12 @@
 import * as React from "react";
 import Container from "./styles";
 
+/**
+ * @deprecated
+ * Use "unstyled" appearance instead of "default"
+ */
+type EnumDeprecatedAppearance = "default";
+
 export type TypeProps = {
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
@@ -12,9 +18,9 @@ export type TypeProps = {
     | "secondary"
     | "pill"
     | "destructive"
-    | "default"
     | "unstyled"
-    | "placeholder",
+    | "placeholder"
+    | EnumDeprecatedAppearance,
   /** Set the button to display in its active state */
   active?: boolean,
   /** Disables user action and applies a disabled style on the button */
@@ -55,8 +61,13 @@ const Button = ({
     );
   }
 
-  // plans to properly deprecate captured in DS-1096
+  /** "default" is @deprecated in favor of "unstyled"  */
   const appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+  if (appearance === "default") {
+    console.warn(
+      "Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead."
+    );
+  }
 
   return (
     <Container

package/__flow__/Button/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import Button from "./index";
+import Button, { type TypeProps } from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
 
@@ -7,19 +8,19 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = (args) => (
+export const defaultStory = (args: TypeProps) => (
   <Button {...args} onClick={() => alert("Testing...")}>
-    Default
+    Unstyled
   </Button>
 );
 
-defaultStory.args = { appearance: "default" };
+defaultStory.args = { appearance: "unstyled" };
 
 defaultStory.story = {
-  name: "Default",
+  name: "Unstyled",
 };
 
-export const primary = (args) => (
+export const primary = (args: TypeProps) => (
   <Button {...args} onClick={() => alert("Testing...")}>
     Primary Button
   </Button>
@@ -31,7 +32,9 @@ primary.story = {
   name: "Primary",
 };
 
-export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
+export const secondary = (args: TypeProps) => (
+  <Button {...args}>Secondary Button</Button>
+);
 
 secondary.args = { appearance: "secondary" };
 
@@ -39,7 +42,7 @@ secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = (args) => (
+export const destructive = (args: TypeProps) => (
   <Button {...args}>Destructive Button</Button>
 );
 
@@ -48,7 +51,7 @@ destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = (args) => (
+export const placeholder = (args: TypeProps) => (
   <Button {...args}>Placeholder Button</Button>
 );
 
@@ -57,14 +60,16 @@ placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = (args) => <Button {...args}>Large Button</Button>;
+export const largeButton = (args: TypeProps) => (
+  <Button {...args}>Large Button</Button>
+);
 largeButton.args = { size: "large", appearance: "primary" };
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = (args) => (
+export const pillButton = (args: TypeProps) => (
   <Box bg="container.background.base" p={400}>
     <Button {...args}>
       <Icon name="reply" mr={350} />
@@ -77,7 +82,7 @@ pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = (args) => (
+export const pillIconOnlyButton = (args: TypeProps) => (
   <Box bg="container.background.base" p={400}>
     <Button {...args} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
@@ -90,14 +95,16 @@ pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = (args) => <Button {...args}>Active Button</Button>;
+export const activeButton = (args: TypeProps) => (
+  <Button {...args}>Active Button</Button>
+);
 
 activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = (args) => (
+export const buttonAsALink = (args: TypeProps) => (
   <Button {...args}>Button using anchor element</Button>
 );
 buttonAsALink.args = {
@@ -109,7 +116,7 @@ buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = (args) => (
+export const disabledButton = (args: TypeProps) => (
   <Button {...args}>This Button is disabled</Button>
 );
 disabledButton.args = {
@@ -120,7 +127,7 @@ disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = (args) => (
+export const fullWidthButton = (args: TypeProps) => (
   <Button {...args}>Full-Width Button</Button>
 );
 fullWidthButton.args = {
@@ -131,7 +138,7 @@ fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = (args) => (
+export const withIcon = (args: TypeProps) => (
   <Button {...args}>
     <Icon name="twitter" mr={350} />
     Secondary Button

package/__flow__/CharacterCounter/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { number, text } from "@storybook/addon-knobs";
 

package/__flow__/CharacterCounter/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/ChartLegend/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import ChartLegend from "./index";
 

package/__flow__/ChartLegend/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/Checkbox/index.js

@@ -19,8 +19,8 @@ export type TypeProps = {
   /** Label used to describe the input (if not used with an accompanying visual label) */
   ariaLabel?: string,
   labelProps?: Object,
-  checked: boolean,
-  indeterminate: boolean,
+  checked?: boolean,
+  indeterminate?: boolean,
   disabled?: boolean,
   onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
   appearance?: "pill" | "default",
@@ -39,14 +39,14 @@ export default class Checkbox extends React.Component<TypeProps> {
   };
 
   componentDidUpdate(prevProps: TypeProps) {
-    if (prevProps.indeterminate !== this.props.indeterminate && this.el) {
-      this.el.indeterminate = this.props.indeterminate;
+    if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
+      this.el.indeterminate = !!this.props.indeterminate;
     }
   }
 
   componentDidMount() {
     if (this.el) {
-      this.el.indeterminate = this.props.indeterminate;
+      this.el.indeterminate = !!this.props.indeterminate;
     }
   }
 

package/__flow__/Checkbox/index.stories.js

@@ -1,22 +1,23 @@
+// @flow
 import React from "react";
 import { action } from "@storybook/addon-actions";
 
-import Checkbox from "./";
+import Checkbox, { type TypeProps } from "./";
 
 export default {
   title: "Checkbox",
   component: Checkbox,
 };
 
-export const Checked = (args) => <Checkbox {...args} />;
+export const Checked = (args: TypeProps) => <Checkbox {...args} />;
 
 Checked.args = { checked: true };
 
-export const Unchecked = (args) => <Checkbox {...args} />;
+export const Unchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 Unchecked.args = { checked: false };
 
-export const PillChecked = (args) => <Checkbox {...args} />;
+export const PillChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 PillChecked.args = {
   checked: true,
@@ -27,7 +28,7 @@ PillChecked.story = {
   name: "Pill/Checked",
 };
 
-export const PillUnchecked = (args) => <Checkbox {...args} />;
+export const PillUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 PillUnchecked.args = {
   checked: false,
@@ -38,7 +39,7 @@ PillUnchecked.story = {
   name: "Pill/Unchecked",
 };
 
-export const DisabledChecked = (args) => <Checkbox {...args} />;
+export const DisabledChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 DisabledChecked.args = {
   checked: true,
@@ -49,7 +50,7 @@ DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const DisabledUnchecked = (args) => <Checkbox {...args} />;
+export const DisabledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 DisabledUnchecked.args = {
   checked: false,
@@ -60,7 +61,7 @@ DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const IndeterminateChecked = (args) => <Checkbox {...args} />;
+export const IndeterminateChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 IndeterminateChecked.args = {
   checked: true,
@@ -71,7 +72,9 @@ IndeterminateChecked.story = {
   name: "Indeterminate/Checked",
 };
 
-export const IndeterminateUnchecked = (args) => <Checkbox {...args} />;
+export const IndeterminateUnchecked = (args: TypeProps) => (
+  <Checkbox {...args} />
+);
 
 IndeterminateUnchecked.args = {
   checked: false,
@@ -82,7 +85,7 @@ IndeterminateUnchecked.story = {
   name: "Indeterminate/Unchecked",
 };
 
-export const LabelledChecked = (args) => <Checkbox {...args} />;
+export const LabelledChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledChecked.args = {
   checked: true,
@@ -93,7 +96,7 @@ LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = (args) => <Checkbox {...args} />;
+export const LabelledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledUnchecked.args = {
   checked: false,
@@ -104,7 +107,7 @@ LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = (args) => <Checkbox {...args} />;
+export const LabelledDisabled = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledDisabled.args = {
   checked: true,
@@ -116,7 +119,9 @@ LabelledDisabled.story = {
   name: "Labelled/Disabled",
 };
 
-export const InputPropsOnMouseOver = (args) => <Checkbox {...args} />;
+export const InputPropsOnMouseOver = (args: TypeProps) => (
+  <Checkbox {...args} />
+);
 
 InputPropsOnMouseOver.args = {
   checked: true,

package/__flow__/Checkbox/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import Checkbox from "./";
@@ -50,7 +51,12 @@ describe("Checkbox", () => {
 
   it("should display label when label not undefined and appearance is default", () => {
     const { getByLabelText } = render(
-      <Checkbox checked label="Checkbox Label" id="checkboxid" />
+      <Checkbox
+        checked
+        onChange={mockHandleClick}
+        label="Checkbox Label"
+        id="checkboxid"
+      />
     );
     expect(getByLabelText("Checkbox Label")).toBeInTheDocument();
   });
@@ -59,6 +65,7 @@ describe("Checkbox", () => {
     const { queryByLabelText } = render(
       <Checkbox
         checked
+        onChange={mockHandleClick}
         label="Checkbox Label"
         id="checkboxid"
         appearance="pill"
@@ -72,6 +79,7 @@ describe("Checkbox", () => {
     const options = render(
       <Checkbox
         checked
+        onChange={mockHandleClick}
         inputProps={{ onMouseOver: mockHandleMouseOver }}
         id="checkboxid"
         label="checkbox"

package/__flow__/Collapsible/index.stories.js

@@ -1,9 +1,18 @@
-import React, { useState } from "react";
+// @flow
+import React, { type Node as ReactNode, useState } from "react";
 import Collapsible from "./index";
 import Button from "../Button";
 import Box from "../Box";
 
-const StatefulCollapse = ({ children, offset = 0, initialIsOpen = false }) => {
+const StatefulCollapse = ({
+  children,
+  offset = 0,
+  initialIsOpen = false,
+}: {
+  children: ReactNode,
+  offset?: number,
+  initialIsOpen?: boolean,
+}) => {
   const [open, setOpen] = useState(initialIsOpen);
   const toggle = () => setOpen(!open);
 
@@ -95,6 +104,11 @@ const StatefulCollapseWithMinHeight = ({
   offset = 0,
   collapsedHeight = 0,
   openHeight,
+}: {
+  children: ReactNode,
+  offset?: number,
+  collapsedHeight?: number,
+  openHeight: number,
 }) => {
   const [open, setOpen] = useState(false);
   const toggle = () => setOpen(!open);

package/__flow__/Collapsible/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { useState } from "react";
 import { render, fireEvent } from "../utils/react-testing-library";

package/__flow__/Drawer/index.stories.js

@@ -1,7 +1,8 @@
+// @flow
 import React, { useState } from "react";
 import { createGlobalStyle } from "styled-components";
 import { text, number, boolean } from "@storybook/addon-knobs";
-import Drawer from "./index";
+import Drawer, { type TypeDrawerProps } from "./index";
 import Button from "../Button";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -14,7 +15,12 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
+const StatefulDrawer = ({
+  isOpen = true,
+  onClose,
+  children,
+  ...rest
+}: TypeDrawerProps) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen);
   const onDrawerClose = () => {
     setIsDrawerOpen(false);
@@ -23,7 +29,7 @@ const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
 
   return (
     <React.Fragment>
-      <Drawer isOpen={isDrawerOpen} onClose={onDrawerClose} {...rest}>
+      <Drawer {...rest} isOpen={isDrawerOpen} onClose={onDrawerClose}>
         {children}
       </Drawer>
       <Button
@@ -36,7 +42,7 @@ const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
   );
 };
 
-const DrawerComponent = ({ direction, offset }) => {
+const DrawerComponent = ({ direction, offset }: $Shape<TypeDrawerProps>) => {
   const [isOpen, setIsOpen] = useState(false);
   const onOpen = () => setIsOpen(true);
   const onClose = () => setIsOpen(false);
@@ -71,7 +77,10 @@ const DrawerComponent = ({ direction, offset }) => {
   );
 };
 
-const NectarDrawerComponent = ({ direction, offset }) => {
+const NectarDrawerComponent = ({
+  direction,
+  offset,
+}: $Shape<TypeDrawerProps>) => {
   const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
   const [isPoplarOpen, setIsPoplarOpen] = useState(false);
   const openNotifications = () => {

package/__flow__/Drawer/index.test.js

@@ -1,5 +1,6 @@
+// @flow
 import React, { useState } from "react";
-import Drawer from "./";
+import Drawer, { type TypeDrawerProps } from "./";
 import {
   render as testRender,
   fireEvent,
@@ -14,7 +15,7 @@ const StatefulDrawer = ({ isOpen, onClose, children, ...rest }) => {
   };
 
   return (
-    <Drawer isOpen={isDrawerOpen} onClose={onDrawerClose} {...rest}>
+    <Drawer {...rest} isOpen={isDrawerOpen} onClose={onDrawerClose}>
       {children}
     </Drawer>
   );
@@ -36,7 +37,7 @@ const render = ({
   onClose = () => {},
   id = "drawer",
   closeButtonLabel = "close",
-} = {}) => {
+}: $Shape<TypeDrawerProps> = {}) => {
   const { baseElement } = testRender(<div id="main-content" />);
   const mainContentRef = baseElement.querySelector("#main-content");
 

package/__flow__/EmptyState/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import EmptyState from "./index";
 import Button from "../Button";

package/__flow__/EmptyState/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";