@sproutsocial/racine 12.14.0 → 12.16.0

package/__flow__/Input/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 
@@ -10,6 +11,8 @@ export default {
 
 export const defaultStory = () => (
   <Input
+    id="test"
+    name="test"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -22,6 +25,8 @@ defaultStory.story = {
 
 export const small = () => (
   <Input
+    id="small"
+    name="small"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -35,6 +40,8 @@ small.story = {
 
 export const large = () => (
   <Input
+    id="large"
+    name="large"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -48,6 +55,8 @@ large.story = {
 
 export const disabled = () => (
   <Input
+    id="disabled"
+    name="disabled"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -61,6 +70,8 @@ disabled.story = {
 
 export const readOnly = () => (
   <Input
+    id="readOnly"
+    name="readOnly"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -74,6 +85,8 @@ readOnly.story = {
 
 export const required = () => (
   <Input
+    id="required"
+    name="required"
     value={text("value", "")}
     placeholder={text("placeholder", "Please enter a value...")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
@@ -87,6 +100,8 @@ required.story = {
 
 export const error = () => (
   <Input
+    id="error"
+    name="error"
     value={text("value", "")}
     isInvalid
     placeholder={text("placeholder", "blah@something")}
@@ -100,6 +115,8 @@ error.story = {
 
 export const leftIcon = () => (
   <Input
+    id="left-icon"
+    name="left-icon"
     value={text("value", "")}
     elemBefore={<Icon fixedWidth name="lock" />}
     placeholder={text("placeholder", "Password")}
@@ -113,6 +130,8 @@ leftIcon.story = {
 
 export const rightIcon = () => (
   <Input
+    id="right-icon"
+    name="right-icon"
     value={text("value", "")}
     elemAfter={<Icon fixedWidth name="lock" />}
     placeholder="Password"
@@ -126,6 +145,8 @@ rightIcon.story = {
 
 export const leftAndRightIcons = () => (
   <Input
+    id="left-right-icons"
+    name="left-right-icons"
     elemBefore={<Icon fixedWidth name="search" />}
     elemAfter={<Icon fixedWidth name="lock" />}
     placeholder={text("placeholder", "Please enter a value...")}
@@ -145,6 +166,8 @@ export const SearchInput = () => {
   const [value, setValue] = React.useState("");
   return (
     <Input
+      id="search"
+      name="search"
       type="search"
       placeholder={text("placeholder", "Please enter a value...")}
       value={value}
@@ -164,6 +187,8 @@ export const SmallSearchInput = () => {
 
   return (
     <Input
+      id="small-search"
+      name="small-search"
       type="search"
       size="small"
       placeholder={text("placeholder", "Please enter a value...")}
@@ -184,6 +209,8 @@ export const LargeSearchInput = () => {
 
   return (
     <Input
+      id="large-search"
+      name="large-search"
       type="search"
       size="large"
       placeholder={text("placeholder", "Please enter a value...")}
@@ -201,6 +228,8 @@ LargeSearchInput.story = {
 
 export const uncontrolledSearchInput = () => (
   <Input
+    id="uncontrolled-search"
+    name="uncontrolled-search"
     type="search"
     placeholder={text("placeholder", "Please enter a value...")}
     clearButtonLabel={text("clearButtonLabel", "Clear search")}
@@ -217,6 +246,8 @@ export const NonSearchClearButtonInput = () => {
 
   return (
     <Input
+      id="clear-button"
+      name="clear-button"
       type="text"
       placeholder={text("placeholder", "Please enter a value...")}
       value={value}
@@ -234,6 +265,8 @@ NonSearchClearButtonInput.story = {
 
 export const autofocus = () => (
   <Input
+    id="autofocus"
+    name="autofocus"
     autoFocus
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}
@@ -247,6 +280,8 @@ autofocus.story = {
 
 export const maxLength = () => (
   <Input
+    id="maxlength"
+    name="maxlength"
     autoFocus
     placeholder={text("placeholder", "Max Length is 10")}
     maxLength={10}
@@ -260,6 +295,8 @@ maxLength.story = {
 
 export const secondary = () => (
   <Input
+    id="secondary"
+    name="secondary"
     appearance="secondary"
     placeholder={text("placeholder", "Please enter a value...")}
     value={text("value", "")}

package/__flow__/Input/index.test.js

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

package/__flow__/KeyboardKey/index.stories.js

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

package/__flow__/KeyboardKey/index.test.js

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

package/__flow__/Label/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 
@@ -8,7 +9,7 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Label>{text("children", "Example label")}</Label>
+  <Label htmlFor="default">{text("children", "Example label")}</Label>
 );
 
 defaultStory.story = {

package/__flow__/Label/index.test.js

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

package/__flow__/Link/index.stories.js

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

package/__flow__/Link/index.test.js

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

package/__flow__/Listbox/index.stories.js

@@ -1,6 +1,8 @@
+// @flow
 import React from "react";
 import Listbox, { ListboxButton } from "./index";
 import { MenuButton } from "../Menu";
+import type { TypeListboxButtonProps } from "../Menu/index.flow";
 import { useMultiselect, useSelect } from "../utils/hooks";
 import Icon from "../Icon";
 import Button from "../Button";
@@ -59,13 +61,14 @@ const BaseListbox = () => {
   );
 };
 
-const BaseListboxMultiselect = (props) => {
+const BaseListboxMultiselect = (props: $Shape<TypeListboxButtonProps>) => {
   const { value, onChange, onClear } = useMultiselect();
   const currentOption =
     value.length > 1 ? value.length + " selected" : value.length ? value : null;
 
   return (
     <ListboxButton
+      {...props}
       minWidth="140px"
       content={
         <Listbox
@@ -86,7 +89,6 @@ const BaseListboxMultiselect = (props) => {
           )}
         </Listbox>
       }
-      {...props}
     >
       {currentOption || "Select a fruit"}
     </ListboxButton>
@@ -198,18 +200,22 @@ export const BigVirtualizedExample = () => {
 };
 
 const ListboxFilterInput = () => {
-  const { value, onChange } = useSelect({ initialValue: null });
-  const { inputValue } = useSelect({ initialValue: null });
+  const { value, onChange } = useSelect();
   return (
     <>
-      <Text>{inputValue}</Text>
+      <Text>{value}</Text>
       <ListboxButton
         minWidth="200px"
         aria-label="Favorite fruit"
         content={
           <Listbox onChange={onChange} value={value} width="200px">
             <Listbox.Group>
-              <Listbox.FilterInput placeholder="Filter items" mb={300} />
+              <Listbox.FilterInput
+                id="list-filter"
+                name="list-filter"
+                placeholder="Filter items"
+                mb={300}
+              />
               <Listbox.Item value="Apple">Apple</Listbox.Item>
               <Listbox.Item value="Orange">Orange</Listbox.Item>
               <Listbox.Item value="Banana">Banana</Listbox.Item>

package/__flow__/Listbox/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import {
   render,

package/__flow__/Loader/index.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import Container, { Text } from "./styles";
 
-type TypeProps = {
+export type TypeProps = {
   size: "small" | "large",
   /** Text for the loader. This text is not visible, but is used for accessibility purposed */
   text: string,

package/__flow__/Loader/index.stories.js

@@ -1,12 +1,13 @@
+// @flow
 import React from "react";
-import Loader from "./";
+import Loader, { type TypeProps } from "./";
 
 export default {
   title: "Loader",
   component: Loader,
 };
 
-export const defaultStory = (args) => <Loader {...args} />;
+export const defaultStory = (args: TypeProps) => <Loader {...args} />;
 
 defaultStory.args = {
   text: "Content loading",
@@ -16,7 +17,7 @@ defaultStory.story = {
   name: "Default",
 };
 
-export const small = (args) => <Loader {...args} />;
+export const small = (args: TypeProps) => <Loader {...args} />;
 
 small.args = {
   text: "Content loading",
@@ -27,7 +28,7 @@ small.story = {
   name: "Small",
 };
 
-export const noDelay = (args) => <Loader {...args} />;
+export const noDelay = (args: TypeProps) => <Loader {...args} />;
 
 noDelay.args = {
   text: "Content loading",

package/__flow__/Loader/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__/LoaderButton/index.js

@@ -14,7 +14,9 @@ type TypeLoaderButtonProps = TypeButtonProps & {
 
 const getColor = (appearance) => {
   switch (appearance) {
+    /** "default" is @deprecated in favour of unstyled */
     case "default":
+    case "unstyled":
     case "outline":
     case "secondary":
       return "dark";
@@ -44,7 +46,7 @@ const CustomLoader = styled(Loader)`
 `;
 
 export const LoaderButton = ({
-  appearance = "default",
+  appearance = "unstyled",
   isLoading: _isLoading = false,
   disabled,
   loaderLabel,

package/__flow__/LoaderButton/index.stories.js

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

package/__flow__/LoaderButton/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__/LogoViewBoxes.js

@@ -1 +1 @@
-module.exports = {"bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox":"0 0 140 119","facebook-dark":"0 0 141 139","facebook-groups-dark":"0 0 140 140","facebook-groups":"0 0 140 140","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","feedly-dark":"0 0 141 123","feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-audience-network-dark":"0 0 140 140","twitter-audience-network":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk":"0 0 140 107"};
+module.exports = {"bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox-lockup-dark":"0 0 291 57","dropbox-lockup":"0 0 291 57","dropbox-wordmark-dark":"0 0 308 71","dropbox-wordmark":"0 0 308 71","dropbox":"0 0 140 119","facebook-audience-network-dark":"0 0 140 145","facebook-audience-network":"0 0 140 145","facebook-dark":"0 0 141 139","facebook-groups-dark":"0 0 140 140","facebook-groups":"0 0 140 140","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","feedly-dark":"0 0 141 123","feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-audience-network-dark":"0 0 140 141","linkedin-audience-network":"0 0 140 141","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-audience-network-dark":"0 0 140 140","twitter-audience-network":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk-lockup-dark":"0 0 160 115","zendesk-lockup":"0 0 160 115","zendesk-wordmark-dark":"0 0 350 67","zendesk-wordmark":"0 0 350 67","zendesk":"0 0 140 107"};

package/__flow__/Menu/index.flow.js

@@ -98,4 +98,6 @@ export type TypeListboxButtonProps = {
   size?: "large" | "default" | "small",
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
+  "aria-label"?: string,
+  "aria-labelledby"?: string,
 };

package/__flow__/Menu/index.stories.js

@@ -1,5 +1,7 @@
+// @flow
 import React, { useContext } from "react";
 import Menu, { MenuButton, MenuCheckbox } from "./index";
+import type { TypeMenuProps } from "./index.flow";
 import { MenuButtonContext } from "./hooks";
 import OverflowList from "../OverflowList";
 import Icon from "../Icon";
@@ -33,16 +35,16 @@ const BaseContents = () => (
   </>
 );
 
-const BaseMenu = (props) => (
+const BaseMenu = (props: TypeMenuProps) => (
   <Menu width="200px" {...props}>
     <BaseContents />
   </Menu>
 );
 
-const VirtualizedMenu = (props) => {
+const VirtualizedMenu = (props: TypeMenuProps) => {
   return (
     <Menu width="200px" {...props}>
-      <OverflowList height="200px">
+      <OverflowList height="200px" width="auto">
         <Menu.Group title="1">
           {fruit.map((item) => (
             <Menu.Item key={item} onClick={() => alert(item)}>
@@ -127,6 +129,7 @@ export const PropGetters = () => {
           <Menu.Group>
             <OverflowList
               height="400px"
+              width="auto"
               items={names}
               getItemProps={({ item }) => ({ key: item, item })}
               ItemComponent={({ item }) => (
@@ -152,7 +155,7 @@ const CloseOnClick = () => {
   return (
     <Menu.Item
       onClick={() => {
-        closePopout();
+        closePopout && closePopout();
       }}
     >
       close the popout
@@ -180,7 +183,7 @@ export const OneItemCanCloseThePopout = () => {
   );
 };
 
-export const MenuWithCheckboxes = (props) => {
+export const MenuWithCheckboxes = (props: TypeMenuProps) => {
   return (
     <Menu width="200px" {...props}>
       <Menu.Group title="Fruit" titleAs="h2">
@@ -206,7 +209,7 @@ export const MenuWithCheckboxes = (props) => {
 };
 
 // Specifically testing that icons with a color inverse when active like the text does.
-export const MenuWithIcons = (props) => {
+export const MenuWithIcons = (props: TypeMenuProps) => {
   return (
     <Box
       width="200px"
@@ -234,7 +237,7 @@ export const MenuWithIcons = (props) => {
   );
 };
 
-export const MenuWithFilter = (props) => {
+export const MenuWithFilter = (props: TypeMenuProps) => {
   return (
     <Box
       width="200px"
@@ -245,7 +248,12 @@ export const MenuWithFilter = (props) => {
       backgroundColor="container.background.base"
     >
       <Menu {...props}>
-        <Menu.FilterInput placeholder="filter contents..." m={300} />
+        <Menu.FilterInput
+          id="menu-input"
+          name="menu-input"
+          placeholder="filter contents..."
+          m={300}
+        />
         <BaseContents />
       </Menu>
     </Box>

package/__flow__/Menu/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import {
   render,
@@ -8,13 +9,14 @@ import {
 import Icon from "../Icon";
 
 import Menu, { MenuButton } from "./index";
+import type { TypeMenuProps } from "./index.flow";
 import { MENU_ITEM_ROLES } from "./constants";
 
 const fruit = ["Apple", "Banana", "Orange"];
 const maybeFruit = ["Tomato", "Cucumber", "Squash"];
 const mockOnClick = jest.fn();
 
-export const AsMenu = (props) => {
+export const AsMenu = (props: TypeMenuProps) => {
   return (
     <Menu width="200px" {...props}>
       <Menu.Group title="Fruit">

package/__flow__/Message/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import Message from "./index";
+import Message, { type EnumDensities } from "./index";
 import Box from "../Box";
 import Icon from "../Icon";
 import { select } from "@storybook/addon-knobs";
@@ -14,6 +15,8 @@ export const defaultStory = ({
     ["condensed", "compact", "small", "large"],
     "condensed"
   ),
+}: {
+  density?: EnumDensities,
 }) => (
   <Message density={density} bg="container.background.base">
     <Message.Header>
@@ -26,11 +29,16 @@ export const defaultStory = ({
         Attribution
       </Box>
       <Box>
-        <Message.Checkbox />
+        <Message.Checkbox
+          id="message-checkbox"
+          ariaLabel="Message Checkbox"
+          onChange={() => {}}
+        />
       </Box>
     </Message.Header>
     <Message.Body>Message Content</Message.Body>
     <Message.Footer>
+      {/* $FlowIssue - Could not decide which case to select */}
       <Box>
         <Message.Button>
           <Icon name="comment-alt-outline" mr={200} />
@@ -38,16 +46,16 @@ export const defaultStory = ({
         </Message.Button>
       </Box>
       <Box>
-        <Message.Button>
+        <Message.Button aria-label="Heart Icon Example">
           <Icon name="heart-outline" />
         </Message.Button>
-        <Message.Button>
+        <Message.Button aria-label="Tag Icon Example">
           <Icon name="tag-outline" />
         </Message.Button>
-        <Message.Button>
+        <Message.Button aria-label="Reply Icon Example">
           <Icon name="reply-outline" />
         </Message.Button>
-        <Message.Button>
+        <Message.Button aria-label="Check Icon Example">
           <Icon name="circle-check-outline" />
         </Message.Button>
       </Box>

package/__flow__/Message/index.test.js

@@ -1,11 +1,11 @@
-import React from "react";
+// @flow
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
-import Message from "./";
+import { defaultStory as defaultMessageStory } from "./index.stories";
 
 describe("Message", () => {
   it("should render properly", async () => {
-    const { container, runA11yCheck } = render(<Message />);
+    const { container, runA11yCheck } = render(defaultMessageStory({}));
     expect(container).toBeTruthy();
     await runA11yCheck();
   });

package/__flow__/Modal/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Component from "@reach/component-component";
 import Modal from "./";

package/__flow__/Modal/index.test.js

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

package/__flow__/Numeral/index.js

@@ -15,7 +15,7 @@ import { EM_DASH } from "../utils/constants";
 
 type EnumNumeralFormat = "decimal" | "currency" | "percent";
 
-type TypeProps = {
+export type TypeProps = {
   /** The number to be formatted */
   number?: ?number,
   /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */

package/__flow__/Numeral/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import Numeral from "./index";
+import Numeral, { type TypeProps } from "./index";
 
 const localeOptions = [
   "United States (en-US)",
@@ -120,13 +121,13 @@ export default {
   },
 };
 
-export const defaultStory = (args) => <Numeral {...args} />;
+export const defaultStory = (args: TypeProps) => <Numeral {...args} />;
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const total = (args) => <Numeral {...args} />;
+export const total = (args: TypeProps) => <Numeral {...args} />;
 
 total.args = {
   number: 100,
@@ -138,7 +139,7 @@ total.story = {
   name: "Total",
 };
 
-export const trend = (args) => <Numeral {...args} />;
+export const trend = (args: TypeProps) => <Numeral {...args} />;
 
 trend.args = {
   number: 100,
@@ -149,7 +150,7 @@ trend.story = {
   name: "Trend",
 };
 
-export const noPrecision = (args) => <Numeral {...args} />;
+export const noPrecision = (args: TypeProps) => <Numeral {...args} />;
 
 noPrecision.args = {
   number: 123.45678,
@@ -160,7 +161,7 @@ noPrecision.story = {
   name: "No Precision",
 };
 
-export const currencyPrecision = (args) => <Numeral {...args} />;
+export const currencyPrecision = (args: TypeProps) => <Numeral {...args} />;
 
 currencyPrecision.args = {
   number: 123.4,
@@ -171,7 +172,7 @@ currencyPrecision.story = {
   name: "Currency precision",
 };
 
-export const invalid = (args) => <Numeral {...args} />;
+export const invalid = (args: TypeProps) => <Numeral {...args} />;
 
 invalid.args = {
   number: null,

package/__flow__/OverflowList/index.flow.js

@@ -15,8 +15,8 @@ export type TypeOverflowListProps<Item, Props> = {|
   width: string,
   items?: Array<Item>,
   children?: React.Node,
-  ItemComponent: React.ComponentType<Props>,
-  getItemProps: (Item) => Props,
+  ItemComponent?: React.ComponentType<Props>,
+  getItemProps?: (Item) => Props,
   itemWrapperProps?: TypeContainerProps,
   containerProps?: TypeContainerProps,
 |};