@sproutsocial/racine 11.2.5-sproutTheme-beta.1 → 11.2.5-sproutTheme-beta.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 11.4.0
+
+### Minor Changes
+
+- d888fa0: Add search icon to type "search" Input
+  - "<Icon name="search" />" is added to Inputs with type "search" unless an elemBefore prop is passed to override it.
+- d888fa0: Add Input.ClearButton
+  - This button is automatically included when Input has type "search" and no "elemAfter" prop is passed
+  - This button can be manually included with the "elemAfter" prop for non-search inputs
+  - In either case, the button will only be rendered if an "onClear" callback is passed to the Input component
+  - A "clearButtonLabel" prop should also be passed to the Input component
+
+## 11.3.0
+
+### Minor Changes
+
+- e8a9df6: Add text highlight style to theme
+
+### Patch Changes
+
+- 9e66592: Pass TokenInput autocomplete prop to input as autoComplete to suppress JSX console warnings
+
 ## 11.2.5
 
 ### Patch Changes

package/__flow__/Button/index.stories.js

@@ -3,11 +3,6 @@ import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
-import ThemeProvider from "../ThemeProvider";
-import {
-  sproutLightTheme,
-  sproutDarkTheme,
-} from "../themes/extendedThemes/sproutTheme";
 
 export default {
   title: "Button",
@@ -27,22 +22,12 @@ defaultStory.story = {
 };
 
 export const primary = () => (
-  <>
-    <Button
-      appearance={text("appearance", "primary")}
-      onClick={() => alert("Testing...")}
-    >
-      Primary Button
-    </Button>
-    <ThemeProvider theme={(theme) => sproutLightTheme(theme)}>
-      <Button
-        appearance={text("appearance", "primary")}
-        onClick={() => alert("Testing...")}
-      >
-        Primary Button
-      </Button>
-    </ThemeProvider>
-  </>
+  <Button
+    appearance={text("appearance", "primary")}
+    onClick={() => alert("Testing...")}
+  >
+    Primary Button
+  </Button>
 );
 
 primary.story = {

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;

package/__flow__/Input/index.stories.js

@@ -141,6 +141,71 @@ leftAndRightIcons.story = {
   name: "Left and right icons",
 };
 
+export const searchInput = () => (
+  <Input
+    type="search"
+    placeholder={text("placeholder", "Please enter a value...")}
+    value={text("value", "val")}
+    onClear={() => window.alert("Cleared!")}
+    clearButtonLabel={text("clearButtonLabel", "Clear search")}
+    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+  />
+);
+
+searchInput.story = {
+  name: "Search Input",
+};
+
+export const smallSearchInput = () => (
+  <Input
+    type="search"
+    size="small"
+    placeholder={text("placeholder", "Please enter a value...")}
+    value={text("value", "val")}
+    onClear={() => window.alert("Cleared!")}
+    clearButtonLabel={text("clearButtonLabel", "Clear search")}
+    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+  />
+);
+
+smallSearchInput.story = {
+  name: "Small Search Input",
+};
+
+export const largeSearchInput = () => (
+  <Input
+    type="search"
+    size="large"
+    placeholder={text("placeholder", "Please enter a value...")}
+    value={text("value", "val")}
+    onClear={() => window.alert("Cleared!")}
+    clearButtonLabel={text("clearButtonLabel", "Clear search")}
+    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+  />
+);
+
+largeSearchInput.story = {
+  name: "Large Search Input",
+};
+
+export const nonSearchClearButtonInput = () => {
+  return (
+    <Input
+      type="text"
+      placeholder={text("placeholder", "Please enter a value...")}
+      value={text("value", "val")}
+      onClear={() => window.alert("Cleared!")}
+      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+      clearButtonLabel={text("clearButtonLabel", "Clear text")}
+      elemAfter={<Input.ClearButton />}
+    />
+  );
+};
+
+nonSearchClearButtonInput.story = {
+  name: "Manual Input.ClearButton usage",
+};
+
 export const autofocus = () => (
   <Input
     autoFocus