@sproutsocial/racine 11.3.0-beta.2 → 11.3.0-beta.5

package/__flow__/Input/index.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import Container, { Accessory } from "./styles";
 import Button from "../Button";
 import Icon from "../Icon";
+import styled from "styled-components";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -43,10 +44,11 @@ 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: HTMLInputElement | null |},
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  /** Called on Input.ClearButton trigger. */
+  /** 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?: (
@@ -70,27 +72,70 @@ type 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 = styled(Button)`
+  &:hover,
+  &:active {
+    color: ${(props) =>
+      props.theme.utils.interact(props.theme.colors.icon.base)};
+  }
+`;
+
 const ClearButton = () => {
-  const { handleClear, clearButtonLabel, hasValue } =
-    React.useContext(InputContext);
+  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 (
-    <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>
+    <StyledButton
+      onClick={handleClear}
+      size={buttonSize}
+      py={py}
+      px={px}
+      title={clearButtonLabel || "Clear"}
+      color="icon.base"
+    >
+      <Icon name="circlex" />
+    </StyledButton>
   );
 };
 
@@ -110,6 +155,7 @@ class Input extends React.Component<TypeProps> {
     type: "text",
     size: "default",
     appearance: "primary",
+    innerRef: React.createRef<HTMLInputElement>(),
   };
 
   static ClearButton = ClearButton;
@@ -117,8 +163,10 @@ class Input extends React.Component<TypeProps> {
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) =>
     this.props.onBlur?.(e);
 
-  handleClear = (e: SyntheticEvent<HTMLButtonElement>) =>
+  handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
+    this.props.innerRef.current?.focus();
     this.props.onClear?.(e);
+  };
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onChange?.(e, e.currentTarget.value);
@@ -166,6 +214,7 @@ class Input extends React.Component<TypeProps> {
       inputProps = {},
       qa = {},
       appearance,
+      size,
       ...rest
     } = this.props;
 
@@ -178,7 +227,7 @@ class Input extends React.Component<TypeProps> {
     // Add default elemBefore and elemAfter elements if type is search.
     const elementBefore =
       type === "search" && !elemBefore ? (
-        <Icon name="search" ariaHidden />
+        <Icon name="search" ariaHidden color="icon.base" />
       ) : (
         elemBefore
       );
@@ -194,14 +243,17 @@ class Input extends React.Component<TypeProps> {
         invalid={!!isInvalid}
         warning={hasWarning}
         appearance={appearance}
+        size={size}
         // $FlowIssue - upgrade v0.112.0
         {...rest}
       >
         <InputContext.Provider
           value={{
             handleClear: this.handleClear,
-            clearButtonLabel,
             hasValue: !!value,
+            clearButtonLabel,
+            onClear,
+            size,
           }}
         >
           {elementBefore && <Accessory before>{elementBefore}</Accessory>}

package/__flow__/Input/index.stories.js

@@ -156,6 +156,38 @@ 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
@@ -171,7 +203,7 @@ export const nonSearchClearButtonInput = () => {
 };
 
 nonSearchClearButtonInput.story = {
-  name: "Input.ClearButton usage",
+  name: "Manual Input.ClearButton usage",
 };
 
 export const autofocus = () => (

package/__flow__/Input/index.test.js

@@ -85,6 +85,20 @@ describe("Input", () => {
         expect(getByRole("button")).toBeTruthy();
       });
 
+      it("should not render a clear button for search Inputs if there is no text", () => {
+        const { queryByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value=""
+            type="search"
+            onClear={jest.fn()}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(queryByRole("button")).toBeFalsy();
+      });
+
       it("should not override an elemAfter prop if passed", () => {
         const { getByText, queryByTitle } = render(
           <Input
@@ -189,6 +203,20 @@ describe("Input", () => {
         expect(getByRole("button")).toBeTruthy();
       });
 
+      it("should not render a clear button if there is no text", () => {
+        const { queryByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value=""
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(queryByRole("button")).toBeFalsy();
+      });
+
       it("should use the fallback title if clearButtonLabel is not provided", () => {
         const { getByTitle } = render(
           <Input

package/commonjs/Input/index.js

@@ -11,7 +11,9 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,23 +30,52 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 var InputContext = /*#__PURE__*/React.createContext({});
+var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "Input__StyledButton",
+  componentId: "sc-1ck1dnm-0"
+})(["&:hover,&:active{color:", ";}"], function (props) {
+  return props.theme.utils.interact(props.theme.colors.icon.base);
+});
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
+      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
-      hasValue = _React$useContext.hasValue; // Hide the button when there is no text to clear.
+      hasValue = _React$useContext.hasValue,
+      inputSize = _React$useContext.size; // 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.
 
-  return /*#__PURE__*/React.createElement(_Button.default, {
-    onClick: handleClear
+
+  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.
+
+
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
+  return /*#__PURE__*/React.createElement(StyledButton, {
+    onClick: handleClear,
+    size: buttonSize,
+    py: py,
+    px: px,
+    title: clearButtonLabel || "Clear",
+    color: "icon.base"
   }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "circlex",
-    title: clearButtonLabel || "Clear"
+    name: "circlex"
   }));
 }; // 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.
@@ -75,7 +106,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      return _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      var _this$props$innerRef$;
+
+      (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
+      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
     _this.handleChange = function (e) {
@@ -136,6 +170,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         appearance = _this$props.appearance,
+        size = _this$props.size,
         rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
 
 
@@ -148,7 +183,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
     var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
       name: "search",
-      ariaHidden: true
+      ariaHidden: true,
+      color: "icon.base"
     }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
 
     var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
@@ -158,13 +194,16 @@ var Input = /*#__PURE__*/function (_React$Component) {
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
-      appearance: appearance // $FlowIssue - upgrade v0.112.0
+      appearance: appearance,
+      size: size // $FlowIssue - upgrade v0.112.0
 
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
+        hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
-        hasValue: !!value
+        onClear: onClear,
+        size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
       before: true
@@ -207,7 +246,8 @@ Input.defaultProps = {
   disabled: false,
   type: "text",
   size: "default",
-  appearance: "primary"
+  appearance: "primary",
+  innerRef: /*#__PURE__*/React.createRef()
 };
 Input.ClearButton = ClearButton;
 Input.ClearButton.displayName = "Input.ClearButton";

package/lib/Input/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
+var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,24 +12,54 @@ import * as React from "react";
 import Container, { Accessory } from "./styles";
 import Button from "../Button";
 import Icon from "../Icon";
+import styled from "styled-components";
 var InputContext = /*#__PURE__*/React.createContext({});
+var StyledButton = styled(Button).withConfig({
+  displayName: "Input__StyledButton",
+  componentId: "sc-1ck1dnm-0"
+})(["&:hover,&:active{color:", ";}"], function (props) {
+  return props.theme.utils.interact(props.theme.colors.icon.base);
+});
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
+      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
-      hasValue = _React$useContext.hasValue; // Hide the button when there is no text to clear.
+      hasValue = _React$useContext.hasValue,
+      inputSize = _React$useContext.size; // 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.
 
-  return /*#__PURE__*/React.createElement(Button, {
-    onClick: handleClear
+
+  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.
+
+
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
+  return /*#__PURE__*/React.createElement(StyledButton, {
+    onClick: handleClear,
+    size: buttonSize,
+    py: py,
+    px: px,
+    title: clearButtonLabel || "Clear",
+    color: "icon.base"
   }, /*#__PURE__*/React.createElement(Icon, {
-    name: "circlex",
-    title: clearButtonLabel || "Clear"
+    name: "circlex"
   }));
 }; // 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.
@@ -60,7 +90,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      return _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      var _this$props$innerRef$;
+
+      (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
+      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
     _this.handleChange = function (e) {
@@ -121,6 +154,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         appearance = _this$props.appearance,
+        size = _this$props.size,
         rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
 
 
@@ -133,7 +167,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
     var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
       name: "search",
-      ariaHidden: true
+      ariaHidden: true,
+      color: "icon.base"
     }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
 
     var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
@@ -143,13 +178,16 @@ var Input = /*#__PURE__*/function (_React$Component) {
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
-      appearance: appearance // $FlowIssue - upgrade v0.112.0
+      appearance: appearance,
+      size: size // $FlowIssue - upgrade v0.112.0
 
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
+        hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
-        hasValue: !!value
+        onClear: onClear,
+        size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
       before: true
@@ -192,7 +230,8 @@ Input.defaultProps = {
   disabled: false,
   type: "text",
   size: "default",
-  appearance: "primary"
+  appearance: "primary",
+  innerRef: /*#__PURE__*/React.createRef()
 };
 Input.ClearButton = ClearButton;
 Input.ClearButton.displayName = "Input.ClearButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.3.0-beta.2",
+  "version": "11.3.0-beta.5",
   "license": "MIT",
   "files": [
     "__flow__",