@sproutsocial/racine 11.3.1-beta-deps.2 → 11.4.0-input-beta.0

package/__flow__/Button/index.stories.js

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

package/__flow__/Button/index.test.js

@@ -0,0 +1,113 @@
+import React from "react";
+import { fireEvent, render } from "../utils/react-testing-library";
+import "jest-styled-components";
+import Button from "./";
+
+describe("Racine Button", () => {
+  it("should render in default style", () => {
+    const { container } = render(<Button>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+  it("should render in primary style", () => {
+    const { container } = render(<Button appearance="primary">Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+  it("should render in secondary style", () => {
+    const { container } = render(
+      <Button appearance="secondary">Button</Button>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should render in pill style", () => {
+    const { container } = render(<Button shape="pill">Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should render in an anchor tag with external target", () => {
+    const { container } = render(
+      <Button href="http://sproutsocial.style" external>
+        Button
+      </Button>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should render in large size", () => {
+    const { container } = render(
+      <Button appearance="secondary" size="large">
+        Button
+      </Button>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should render in active state", () => {
+    const { container } = render(
+      <Button appearance="secondary" active>
+        Button
+      </Button>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("setting external to prop true should add target blank attribute to anchor", () => {
+    const { getByText } = render(
+      <Button href="http://sproutsocial.com" external>
+        Link
+      </Button>
+    );
+    expect(getByText("Link").target).toEqual("_blank");
+  });
+
+  it("setting external to prop true should add rel='noopener noreferrer' attribute", () => {
+    const { getByText } = render(
+      <Button href="http://sproutsocial.com" external>
+        Link
+      </Button>
+    );
+    expect(getByText("Link").rel).toEqual("noopener noreferrer");
+  });
+
+  it("setting a URL renders component as an Anchor", () => {
+    const { getByText } = render(
+      <Button href="http://sproutsocial.com">Am I an anchor?</Button>
+    );
+    // expect(wrapper.find("a").length).toEqual(1);
+    expect(getByText("Am I an anchor?").tagName).toEqual("A");
+  });
+
+  it("should only submit a form when given type=submit", () => {
+    const onSubmit = jest.fn();
+    const { queryByText } = render(
+      <form onSubmit={onSubmit}>
+        <Button>Not Submit</Button>
+        <Button type="submit">Submit</Button>
+      </form>
+    );
+    fireEvent.click(queryByText("Not Submit"));
+    expect(onSubmit).not.toHaveBeenCalled();
+    fireEvent.click(queryByText("Submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
+  it("Has type attribute as button by default", () => {
+    const { getByText } = render(<Button>My Button</Button>);
+    expect(getByText("My Button").type).toEqual("button");
+  });
+
+  it("Does not have type attribute when given href attribute", () => {
+    const { getByText } = render(<Button href="google.com">My Button</Button>);
+    expect(getByText("My Button").type).toBeFalsy();
+    expect(getByText("My Button").type).not.toEqual("button");
+  });
+
+  it("Had overriden type attribute", () => {
+    const { getByText } = render(
+      <Button href="google.com" type="button">
+        My Button
+      </Button>
+    );
+    expect(getByText("My Button").type).toEqual("button");
+  });
+});

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

@@ -1,6 +1,11 @@
 // @flow
 import * as React from "react";
 import Container, { Accessory } from "./styles";
+import Button from "../Button";
+import Icon from "../Icon";
+import styled from "styled-components";
+import type { StyledComponent } from "styled-components";
+import type { TypeTheme } from "../types/theme.flow";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -10,6 +15,8 @@ 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/>. */
+  clearButtonLabel?: string,
   /** Placeholder text for when value is undefined or empty */
   placeholder?: string,
   /** Current value of the input */
@@ -39,9 +46,14 @@ type TypeProps = {
   /** Props to spread onto the underlying input element */
   inputProps?: any,
   /** Used to get a reference to the underlying element */
-  innerRef?: React.Ref<"input">,
+  innerRef?:
+    | {| current: null | HTMLInputElement |}
+    | ((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.*/
+  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
     e: SyntheticKeyboardEvent<HTMLInputElement>,
@@ -54,57 +66,130 @@ type TypeProps = {
   onPaste?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
   size?: "large" | "small" | "default",
   qa?: Object,
-  /** 
-      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input. 
+  /**
+      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
       Note that this prop should only be used to alter styles and not functionality.
   */
   appearance?: "primary" | "secondary",
 };
 
-export default class Input extends React.Component<TypeProps> {
+// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
+// regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
+type TypeInputContext = $Shape<{
+  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  clearButtonLabel: string,
+  hasValue: boolean,
+  size: "large" | "small" | "default",
+}>;
+
+const InputContext = React.createContext<TypeInputContext>({});
+
+const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
+  &:hover,
+  &:active {
+    color: ${(props) =>
+      props.theme.utils.interact(props.theme.colors.icon.base)};
+  }
+`;
+
+const ClearButton = () => {
+  const {
+    onClear,
+    handleClear,
+    clearButtonLabel,
+    hasValue,
+    size: inputSize,
+  } = React.useContext(InputContext);
+
+  // Hide the button when there is no text to clear.
+  if (!hasValue) {
+    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."
+    );
+    return null;
+  }
+
+  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
+  if (!clearButtonLabel) {
+    console.warn(
+      "Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input."
+    );
+  }
+
+  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
+  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+  const py = inputSize === "small" ? 100 : undefined;
+  const px = inputSize === "small" ? 200 : undefined;
+  const buttonSize = inputSize === "small" ? "default" : inputSize;
+
+  return (
+    <StyledButton
+      onClick={handleClear}
+      size={buttonSize}
+      py={py}
+      px={px}
+      title={clearButtonLabel || "Clear"}
+      ariaLabel={clearButtonLabel || "Clear"}
+      color="icon.base"
+    >
+      <Icon name="circlex" />
+    </StyledButton>
+  );
+};
+
+// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
+// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
+const isClearButton = (elem: any) => {
+  if (elem?.type) {
+    return elem.type.displayName === "Input.ClearButton";
+  }
+  return false;
+};
+
+class Input extends React.Component<TypeProps> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
     type: "text",
     size: "default",
     appearance: "primary",
+    innerRef: React.createRef<HTMLInputElement>(),
   };
 
-  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (this.props.onBlur) {
-      this.props.onBlur(e);
-    }
-  };
+  static ClearButton = ClearButton;
 
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    if (this.props.onChange) {
-      this.props.onChange(e, e.currentTarget.value);
-    }
-  };
+  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) =>
+    this.props.onBlur?.(e);
 
-  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (this.props.onFocus) {
-      this.props.onFocus(e);
+  handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
+    // Only attempt to focus the input if the ref is an object. It won't work for refs that are functions.
+    if (typeof this.props.innerRef === "object") {
+      this.props.innerRef.current?.focus();
     }
+    this.props.onClear?.(e);
   };
 
-  handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(e, e.currentTarget.value);
-    }
-  };
+  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
+    this.props.onChange?.(e, e.currentTarget.value);
 
-  handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    if (this.props.onKeyUp) {
-      this.props.onKeyUp(e, e.currentTarget.value);
-    }
-  };
+  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) =>
+    this.props.onFocus?.(e);
 
-  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    if (this.props.onPaste) {
-      this.props.onPaste(e, e.currentTarget.value);
-    }
-  };
+  handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) =>
+    this.props.onKeyDown?.(e, e.currentTarget.value);
+
+  handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) =>
+    this.props.onKeyUp?.(e, e.currentTarget.value);
+
+  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
+    this.props.onPaste?.(e, e.currentTarget.value);
 
   render() {
     const {
@@ -125,9 +210,11 @@ export default class Input extends React.Component<TypeProps> {
       maxLength,
       ariaLabel,
       ariaDescribedby,
+      clearButtonLabel,
       innerRef,
       onBlur,
       onChange,
+      onClear,
       onFocus,
       onKeyDown,
       onKeyUp,
@@ -135,58 +222,90 @@ export default class Input extends React.Component<TypeProps> {
       inputProps = {},
       qa = {},
       appearance,
+      size,
       ...rest
     } = this.props;
 
+    // Convert autoComplete from a boolean prop to a string value.
     let autoCompleteValue = undefined;
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? "on" : "off";
     }
 
+    // Add default elemBefore and elemAfter elements if type is search.
+    const elementBefore =
+      type === "search" && !elemBefore ? (
+        <Icon name="search" ariaHidden color="icon.base" />
+      ) : (
+        elemBefore
+      );
+    // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    const elementAfter =
+      type === "search" && onClear && !elemAfter ? <ClearButton /> : elemAfter;
+
     return (
       <Container
-        hasBeforeElement={!!elemBefore}
-        hasAfterElement={!!elemAfter}
+        hasBeforeElement={!!elementBefore}
+        hasAfterElement={!!elementAfter}
         disabled={disabled}
         invalid={!!isInvalid}
         warning={hasWarning}
         appearance={appearance}
+        size={size}
         // $FlowIssue - upgrade v0.112.0
         {...rest}
       >
-        {elemBefore && <Accessory before>{elemBefore}</Accessory>}
-
-        <input
-          aria-invalid={!!isInvalid}
-          aria-label={ariaLabel}
-          aria-describedby={ariaDescribedby}
-          autoComplete={autoCompleteValue}
-          autoFocus={autoFocus}
-          disabled={disabled}
-          readOnly={readOnly}
-          id={id}
-          name={name}
-          placeholder={placeholder}
-          type={type}
-          required={required}
-          value={value}
-          maxLength={maxLength}
-          onBlur={this.handleBlur}
-          onChange={this.handleChange}
-          onFocus={this.handleFocus}
-          onKeyDown={this.handleKeyDown}
-          onKeyUp={this.handleKeyUp}
-          onPaste={this.handlePaste}
-          ref={innerRef}
-          data-qa-input={name || ""}
-          data-qa-input-isdisabled={disabled === true}
-          data-qa-input-isrequired={required === true}
-          {...qa}
-          {...inputProps}
-        />
-
-        {elemAfter && <Accessory after>{elemAfter}</Accessory>}
+        <InputContext.Provider
+          value={{
+            handleClear: this.handleClear,
+            hasValue: !!value,
+            clearButtonLabel,
+            onClear,
+            size,
+          }}
+        >
+          {elementBefore && <Accessory before>{elementBefore}</Accessory>}
+
+          <input
+            aria-invalid={!!isInvalid}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedby}
+            autoComplete={autoCompleteValue}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            readOnly={readOnly}
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            type={type}
+            required={required}
+            value={value}
+            maxLength={maxLength}
+            onBlur={this.handleBlur}
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
+            onKeyDown={this.handleKeyDown}
+            onKeyUp={this.handleKeyUp}
+            onPaste={this.handlePaste}
+            ref={innerRef}
+            data-qa-input={name || ""}
+            data-qa-input-isdisabled={disabled === true}
+            data-qa-input-isrequired={required === true}
+            {...qa}
+            {...inputProps}
+          />
+
+          {elementAfter && (
+            <Accessory after isClearButton={isClearButton(elementAfter)}>
+              {elementAfter}
+            </Accessory>
+          )}
+        </InputContext.Provider>
       </Container>
     );
   }
 }
+
+Input.ClearButton.displayName = "Input.ClearButton";
+
+export default Input;