@sproutsocial/racine 11.2.0 → 11.3.0-beta.0

package/CHANGELOG.md

@@ -1,11 +1,5 @@
 # Change Log
 
-## 11.2.0
-
-### Minor Changes
-
-- a71a431: backwards compatible style and api changes to the badge component
-
 ## 11.1.2
 
 ### Patch Changes

package/__flow__/Badge/index.js

@@ -1,69 +1,43 @@
 // @flow
 import * as React from "react";
-import Icon from "../Icon";
 import Container from "./styles";
-import Box from "../Box";
 
 type TypeProps = {
-  children?: React.Node,
-  /** DEPRECATED: Use children instead of text */
   text: React.Node,
-  size?: "small" | "large" | "default",
-  badgeColor?:
-    | "green"
-    | "blue"
-    | "purple"
-    | "yellow"
-    | "orange"
-    | "red"
-    | "neutral",
-  iconName?: string,
-  /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
+  type:
+    | "primary"
+    | "secondary"
+    | "passive"
+    | "common"
+    | "approval"
+    | "default"
+    | "suggestion",
+  size: "default" | "small",
   tip?: React.Node,
-  /** DEPRECATED: The legacy method of choosing a theme. Use badgeColor instead. (optional) */
-  type?: string,
 };
 
-const Badge = ({
-  children,
-  text,
-  iconName,
-  type,
-  tip,
-  size = "small",
-  badgeColor = "blue",
-  ...rest
-}: TypeProps) => {
-  if (children && text) {
-    throw new Error(
-      "can't use both `children` and `text` props. Text is deprecated, consider using children."
-    );
-  }
+export default class Badge extends React.Component<TypeProps> {
+  static defaultProps = {
+    type: "primary",
+    size: "default",
+  };
 
-  return (
-    <Container
-      {...rest}
-      // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
-      size={size === "default" ? "large" : size}
-      badgeColor={badgeColor}
-      data-tip={tip}
-      data-qa-badge={text || ""}
-      data-qa-badge-type={type}
-      data-qa-badge-tip={tip || ""}
-      type={type && type}
-    >
-      <Box display="flex" alignItems="center" JustifyContent="center">
-        {iconName ? (
-          <Icon
-            mr={200}
-            name={iconName}
-            size={size === "small" ? "mini" : "default"}
-          />
-        ) : null}
-        {children || text}
-      </Box>
-    </Container>
-  );
-};
+  render() {
+    const { size, type, tip, text, ...rest } = this.props;
 
-export default Badge;
+    return (
+      <Container
+        type={type}
+        small={size === "small"}
+        data-tip={tip}
+        data-qa-badge={text || ""}
+        data-qa-badge-type={type}
+        data-qa-badge-tip={tip || ""}
+        // $FlowIssue - upgrade v0.112.0
+        {...rest}
+      >
+        {text}
+      </Container>
+    );
+  }
+}

package/__flow__/Badge/index.stories.js

@@ -1,46 +1,53 @@
 import React from "react";
+import { text } from "@storybook/addon-knobs";
 import Badge from "./index";
-import Box from "../Box";
-import Numeral from "../Numeral";
-import Text from "../Text";
-import Stack from "../Stack";
 
 export default {
   title: "Badge",
 };
 
 export const permutations = () => (
-  <Stack space={450}>
-    <Box display="flex" alignItems="center">
-      <Badge badgeColor="green">Badge</Badge>
-      <Badge>Badge</Badge>
-      <Badge badgeColor="purple">Badge</Badge>
-      <Badge badgeColor="yellow">Badge</Badge>
-      <Badge badgeColor="orange">Badge</Badge>
-      <Badge badgeColor="red">Badge</Badge>
-      <Badge badgeColor="neutral" iconName="atom">
-        Badge
-      </Badge>
-      <Badge
-        size="small"
-        type="default"
-        bg="chartreuse"
-        color="crimson"
-        p={500}
-      >
-        Radical overrides!
-      </Badge>
-    </Box>
-    <Box display="flex" alignItems="center">
-      <Badge size="large" type="secondary" iconName="sparkles">
-        Supports legacy types
-      </Badge>
-      <Badge size="large">
-        <Numeral fontWeight="bold" number={1569241} />
-        <Text ml={200}>and children!</Text>
-      </Badge>
-    </Box>
-  </Stack>
+  <>
+    <Badge
+      text={text("text", "Test")}
+      type="default"
+      size={text("size", "small")}
+    />
+    <Badge text={text("text", "Test")} size={text("size", "small")} />
+    <Badge
+      text={text("text", "Test")}
+      type="secondary"
+      size={text("size", "small")}
+    />
+    <Badge
+      text={text("text", "Test")}
+      type="passive"
+      size={text("size", "small")}
+    />
+    <Badge
+      text={text("text", "Test")}
+      type="common"
+      size={text("size", "small")}
+    />
+    <Badge
+      text={text("text", "Test")}
+      type="approval"
+      size={text("size", "small")}
+    />
+    <Badge
+      text={text("text", "Test")}
+      type="suggestion"
+      size={text("size", "small")}
+    />
+
+    <Badge text={text("text", "Test")} type="default" />
+    <Badge text={text("text", "Test")} />
+    <Badge text={text("text", "Test")} type="secondary" />
+    <Badge text={text("text", "Test")} type="passive" />
+    <Badge text={text("text", "Test")} type="common" />
+    <Badge text={text("text", "Test")} type="approval" />
+    <Badge text={text("text", "Test")} type="suggestion" />
+  </>
 );
 
 permutations.story = {

package/__flow__/Badge/index.test.js

@@ -3,50 +3,48 @@ import Badge from "./";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
 
-describe("Badge...", () => {
-  it("...should render with default props", () => {
-    const { getByText } = render(<Badge>Test</Badge>);
+describe("Racine Badge", () => {
+  it("should render with default props", () => {
+    const { getByText, getByDataQaLabel } = render(<Badge text="Test" />);
     expect(getByText("Test")).toBeTruthy();
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "padding",
-      "0px 4px"
-    );
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "background",
-      "#dcf2ff"
-    );
+    expect(getByDataQaLabel({ "badge-type": "primary" })).toBeTruthy();
   });
 
-  it("...should render with correct size styling", () => {
-    const { getByText } = render(<Badge size="large">Test</Badge>);
-    expect(getByText("Test").closest("span")).toHaveStyleRule("padding", "8px");
+  it("should render with correct size styling", () => {
+    const { getByText } = render(<Badge text="Test" size="small" />);
+    expect(getByText("Test")).toHaveStyleRule("padding", "4px 8px");
   });
 
-  it("...should render with legacy type", () => {
-    const { getByText } = render(<Badge type="secondary">Test</Badge>);
-    expect(getByText("Test")).toBeTruthy();
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "color",
-      "#364141"
-    );
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "background",
-      "#fdefcd"
+  it("should render with secondary type", () => {
+    const { getByText, getByDataQaLabel } = render(
+      <Badge text="Test" type="secondary" />
     );
+    expect(getByText("Test")).toBeTruthy();
+    expect(getByDataQaLabel({ "badge-type": "secondary" })).toBeTruthy();
   });
 
-  it("...should render with a badge color", () => {
-    const { getByText } = render(<Badge badgeColor="purple">Test</Badge>);
+  it("should render with passive type", () => {
+    const { getByText, getByDataQaLabel } = render(
+      <Badge text="Test" type="passive" />
+    );
     expect(getByText("Test")).toBeTruthy();
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "background",
-      "#eaeaf9"
+    expect(getByDataQaLabel({ "badge-type": "passive" })).toBeTruthy();
+  });
+
+  it("should render with common type", () => {
+    const { getByText, getByDataQaLabel } = render(
+      <Badge text="Test" type="common" />
     );
+    expect(getByText("Test")).toBeTruthy();
+    expect(getByDataQaLabel({ "badge-type": "common" })).toBeTruthy();
   });
 
-  it("...should render with an icon", () => {
-    const { container } = render(<Badge iconName="sparkles">Test</Badge>);
-    expect(container.querySelector("svg")).toBeTruthy();
+  it("should render with approval type", () => {
+    const { getByText, getByDataQaLabel } = render(
+      <Badge text="Test" type="approval" />
+    );
+    expect(getByText("Test")).toBeTruthy();
+    expect(getByDataQaLabel({ "badge-type": "approval" })).toBeTruthy();
   });
   it("should render with suggestion type", () => {
     const { getByText, getByDataQaLabel } = render(
@@ -56,9 +54,9 @@ describe("Badge...", () => {
     expect(getByDataQaLabel({ "badge-type": "suggestion" })).toBeTruthy();
   });
 
-  it("...should render with tooltip class", () => {
+  it("should render with tooltip class", () => {
     const { getByText, getByDataQaLabel } = render(
-      <Badge tip="test tip">Test</Badge>
+      <Badge text="Test" tip="test tip" />
     );
     expect(getByText("Test")).toBeTruthy();
     expect(getByDataQaLabel({ "badge-tip": "test tip" })).toBeTruthy();

package/__flow__/Badge/styles.js

@@ -1,31 +1,51 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
+import styled, { css, type StyledComponent } from "styled-components";
 import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
 import { themeGet } from "@styled-system/theme-get";
-import { legacyBadgeColors } from "./constants";
+
+import type { TypeTheme } from "../types/theme.flow";
+
+const colors = {
+  primary: "colors.neutral.0",
+  secondary: "colors.neutral.800",
+  passive: "colors.neutral.800",
+  common: "colors.neutral.0",
+  approval: "colors.neutral.800",
+  default: "colors.neutral.0",
+  suggestion: "colors.neutral.900",
+};
+
+const backgroundColors = {
+  primary: "colors.blue.700",
+  secondary: "colors.yellow.500",
+  passive: "colors.neutral.200",
+  common: "colors.aqua.600",
+  approval: "colors.orange.300",
+  default: "colors.purple.700",
+  suggestion: "colors.blue.300",
+};
 
 // eslint-disable-next-line prettier/prettier
-const Container: StyledComponent<{type: ?string, badgeColor: string, size: string, ...}, TypeTheme, *> = styled.span`
-  font-family: ${(p) => p.theme.fontFamily};
-  ${(p) =>
-    p.size === "small" ? p.theme.typography[100] : p.theme.typography[200]};
-  border-radius: 9999px;
-  line-height: 16px;
+const Container: StyledComponent<{type: "primary" | "secondary" | "passive" | "common" | "approval" | "default" | "suggestion", small: boolean, ...}, TypeTheme, *> = styled.span`
   display: inline-block;
-  color: ${(p) =>
-    p.type
-      ? themeGet(legacyBadgeColors[p.type].color)
-      : p.theme.colors.text.body};
-  background: ${(p) =>
-    p.type
-      ? themeGet(legacyBadgeColors[p.type].background)
-      : p.theme.colors.container.background.decorative[p.badgeColor]};
-  padding: ${(p) =>
-    p.size === "small"
-      ? `${p.theme.space[0]} ${p.theme.space[200]}`
-      : `${p.theme.space[300]}`};
-  ${COMMON};
+  text-align: center;
+  border-radius: 50px;
+  font-family: ${(props) => props.theme.fontFamily};
+
+  padding: ${(props) =>
+    props.small
+      ? `${props.theme.space[200]} ${props.theme.space[300]}`
+      : `${props.theme.space[300]} ${props.theme.space[350]}`};
+
+  ${(props) =>
+    props.small ? props.theme.typography[100] : props.theme.typography[200]}
+
+  ${(props) => css`
+    color: ${themeGet(colors[props.type])(props)};
+    background: ${themeGet(backgroundColors[props.type])(props)};
+  `}
+
+  ${COMMON}
 `;
 
 export default Container;

package/__flow__/Input/index.js

@@ -1,6 +1,8 @@
 // @flow
 import * as React from "react";
 import Container, { Accessory } from "./styles";
+import Button from "../Button";
+import Icon from "../Icon";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -10,6 +12,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 */
@@ -41,7 +45,14 @@ type TypeProps = {
   /** Used to get a reference to the underlying element */
   innerRef?: React.Ref<"input">,
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
+  onChange?: (
+    e:
+      | SyntheticInputEvent<HTMLInputElement>
+      | SyntheticEvent<HTMLButtonElement>,
+    value: string
+  ) => void,
+  /** Called on Input.ClearButton trigger */
+  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
     e: SyntheticKeyboardEvent<HTMLInputElement>,
@@ -54,14 +65,34 @@ 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<{
+  handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  clearButtonLabel: string,
+}>;
+
+const InputContext = React.createContext<TypeInputContext>({});
+
+const ClearButton = () => {
+  const { handleClear, clearButtonLabel } = React.useContext(InputContext);
+  return (
+    <Button onClick={handleClear}>
+      {/*Unlocalized fallback should not be used. Always include a localized
+      clearButtonLabel when using <Input.ClearButton/> or <Input type="search"/>.*/}
+      <Icon name="circlex" title={clearButtonLabel || "Clear"} />
+    </Button>
+  );
+};
+
+class Input extends React.Component<TypeProps> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
@@ -70,41 +101,33 @@ export default class Input extends React.Component<TypeProps> {
     appearance: "primary",
   };
 
-  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>) => {
+    if (this.props.onClear) {
+      this.props.onClear(e);
+    } else if (this.props.onChange) {
+      this.props.onChange(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 +148,11 @@ export default class Input extends React.Component<TypeProps> {
       maxLength,
       ariaLabel,
       ariaDescribedby,
+      clearButtonLabel,
       innerRef,
       onBlur,
       onChange,
+      onClear,
       onFocus,
       onKeyDown,
       onKeyUp,
@@ -138,15 +163,26 @@ export default class Input extends React.Component<TypeProps> {
       ...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 />
+      ) : (
+        elemBefore
+      );
+    const elementAfter =
+      type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
+
     return (
       <Container
-        hasBeforeElement={!!elemBefore}
-        hasAfterElement={!!elemAfter}
+        hasBeforeElement={!!elementBefore}
+        hasAfterElement={!!elementAfter}
         disabled={disabled}
         invalid={!!isInvalid}
         warning={hasWarning}
@@ -154,39 +190,61 @@ export default class Input extends React.Component<TypeProps> {
         // $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,
+            clearButtonLabel,
+          }}
+        >
+          {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
+              // Used for positioning. 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.
+              isClearButton={
+                elementAfter?.type?.prototype === Input.ClearButton.prototype
+              }
+            >
+              {elementAfter}
+            </Accessory>
+          )}
+        </InputContext.Provider>
       </Container>
     );
   }
 }
+
+Input.ClearButton.displayName = "Input.ClearButton";
+
+export default Input;