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

package/__flow__/Input/index.js

@@ -78,17 +78,28 @@ type TypeInputContext = $Shape<{
 const InputContext = React.createContext<TypeInputContext>({});
 
 const ClearButton = () => {
-  const { handleClear, clearButtonLabel, hasValue } =
+  const { handleClear, clearButtonLabel, hasValue, size } =
     React.useContext(InputContext);
 
   // Hide the button when there is no text to clear.
   if (!hasValue) {
     return null;
   }
+
+  // Cut down the padding for size small Inputs so that the focus ring 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 = size === "small" ? 100 : undefined;
+  const px = size === "small" ? 200 : undefined;
+  const buttonSize = size === "small" ? "default" : size;
+
+  // 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 label to Input."
+    );
+  }
   return (
-    <Button onClick={handleClear}>
-      {/*Unlocalized fallback should not be used. Always include a localized
-      clearButtonLabel when using <Input.ClearButton/> or <Input type="search"/>.*/}
+    <Button onClick={handleClear} size={buttonSize} py={py} px={px}>
       <Icon name="circlex" title={clearButtonLabel || "Clear"} />
     </Button>
   );
@@ -117,8 +128,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.onClear?.(e);
+    this.props.innerRef?.current?.focus();
+  };
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onChange?.(e, e.currentTarget.value);
@@ -166,6 +179,7 @@ class Input extends React.Component<TypeProps> {
       inputProps = {},
       qa = {},
       appearance,
+      size,
       ...rest
     } = this.props;
 
@@ -178,7 +192,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 +208,16 @@ 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,
+            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,7 @@ 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 _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 }; }
 
@@ -33,15 +33,29 @@ var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
       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,
+      size = _React$useContext.size; // Hide the button when there is no text to clear.
 
 
   if (!hasValue) {
     return null;
+  } // Cut down the padding for size small Inputs so that the focus ring 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 = size === "small" ? 100 : undefined;
+  var px = size === "small" ? 200 : undefined;
+  var buttonSize = size === "small" ? "default" : size; // 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 label to Input.");
   }
 
   return /*#__PURE__*/React.createElement(_Button.default, {
-    onClick: handleClear
+    onClick: handleClear,
+    size: buttonSize,
+    py: py,
+    px: px
   }, /*#__PURE__*/React.createElement(_Icon.default, {
     name: "circlex",
     title: clearButtonLabel || "Clear"
@@ -75,7 +89,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.onClear == null ? void 0 : _this.props.onClear(e);
+      (_this$props$innerRef = _this.props.innerRef) == null ? void 0 : (_this$props$innerRef$ = _this$props$innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
     };
 
     _this.handleChange = function (e) {
@@ -136,6 +153,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 +166,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 +177,15 @@ 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
+        size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
       before: true

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); }
 
@@ -18,15 +18,29 @@ var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
       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,
+      size = _React$useContext.size; // Hide the button when there is no text to clear.
 
 
   if (!hasValue) {
     return null;
+  } // Cut down the padding for size small Inputs so that the focus ring 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 = size === "small" ? 100 : undefined;
+  var px = size === "small" ? 200 : undefined;
+  var buttonSize = size === "small" ? "default" : size; // 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 label to Input.");
   }
 
   return /*#__PURE__*/React.createElement(Button, {
-    onClick: handleClear
+    onClick: handleClear,
+    size: buttonSize,
+    py: py,
+    px: px
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "circlex",
     title: clearButtonLabel || "Clear"
@@ -60,7 +74,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.onClear == null ? void 0 : _this.props.onClear(e);
+      (_this$props$innerRef = _this.props.innerRef) == null ? void 0 : (_this$props$innerRef$ = _this$props$innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
     };
 
     _this.handleChange = function (e) {
@@ -121,6 +138,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 +151,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 +162,15 @@ 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
+        size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
       before: true

package/package.json

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