@sproutsocial/racine 11.7.1 → 11.9.0-useInteractiveColor.0

package/__flow__/Checkbox/index.stories.js

@@ -1,114 +1,131 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 
 import Checkbox from "./";
 
 export default {
   title: "Checkbox",
+  component: Checkbox,
 };
 
-export const Checked = () => <Checkbox checked={boolean("checked", true)} />;
-export const Unchecked = () => <Checkbox checked={boolean("checked", false)} />;
+export const Checked = (args) => <Checkbox {...args} />;
 
-export const PillChecked = () => (
-  <Checkbox appearance="pill" checked={boolean("checked", true)} />
-);
+Checked.args = { checked: true };
+
+export const Unchecked = (args) => <Checkbox {...args} />;
+
+Unchecked.args = { checked: false };
+
+export const PillChecked = (args) => <Checkbox {...args} />;
+
+PillChecked.args = {
+  checked: true,
+  appearance: "pill",
+};
 
 PillChecked.story = {
   name: "Pill/Checked",
 };
 
-export const PillUnchecked = () => (
-  <Checkbox appearance="pill" checked={boolean("checked", false)} />
-);
+export const PillUnchecked = (args) => <Checkbox {...args} />;
+
+PillUnchecked.args = {
+  checked: false,
+  appearance: "pill",
+};
 
 PillUnchecked.story = {
   name: "Pill/Unchecked",
 };
 
-export const DisabledChecked = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledChecked = (args) => <Checkbox {...args} />;
+
+DisabledChecked.args = {
+  checked: true,
+  disabled: true,
+};
 
 DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const DisabledUnchecked = () => (
-  <Checkbox
-    checked={boolean("checked", false)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledUnchecked = (args) => <Checkbox {...args} />;
+
+DisabledUnchecked.args = {
+  checked: false,
+  disabled: true,
+};
 
 DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const IndeterminateChecked = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    indeterminate={boolean("indeterminate", true)}
-  />
-);
+export const IndeterminateChecked = (args) => <Checkbox {...args} />;
+
+IndeterminateChecked.args = {
+  checked: true,
+  indeterminate: true,
+};
 
 IndeterminateChecked.story = {
   name: "Indeterminate/Checked",
 };
 
-export const IndeterminateUnchecked = () => (
-  <Checkbox
-    checked={boolean("checked", false)}
-    indeterminate={boolean("indeterminate", true)}
-  />
-);
+export const IndeterminateUnchecked = (args) => <Checkbox {...args} />;
+
+IndeterminateUnchecked.args = {
+  checked: false,
+  indeterminate: true,
+};
 
 IndeterminateUnchecked.story = {
   name: "Indeterminate/Unchecked",
 };
 
-export const LabelledChecked = () => (
-  <Checkbox checked={boolean("checked", true)} label="Check Me" />
-);
+export const LabelledChecked = (args) => <Checkbox {...args} />;
+
+LabelledChecked.args = {
+  checked: true,
+  label: "Labelled checkbox",
+};
 
 LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = () => (
-  <Checkbox checked={boolean("checked", false)} label="Check Me" />
-);
+export const LabelledUnchecked = (args) => <Checkbox {...args} />;
+
+LabelledUnchecked.args = {
+  checked: false,
+  label: "Labelled checkbox",
+};
 
 LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-    label="Check Me"
-  />
-);
+export const LabelledDisabled = (args) => <Checkbox {...args} />;
+
+LabelledDisabled.args = {
+  checked: true,
+  disabled: true,
+  label: "Labelled checkbox",
+};
 
 LabelledDisabled.story = {
   name: "Labelled/Disabled",
 };
 
-export const InputPropsOnMouseOver = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    label="Check Me"
-    inputProps={{
-      onMouseOver: action("checkbox-mouseOver"),
-      onClick: action("checkbox-click"),
-    }}
-  />
-);
+export const InputPropsOnMouseOver = (args) => <Checkbox {...args} />;
+
+InputPropsOnMouseOver.args = {
+  checked: true,
+  label: "Labelled checkbox",
+  inputProps: {
+    onMouseOver: action("checkbox-mouseOver"),
+    onClick: action("checkbox-click"),
+  },
+};
 
 InputPropsOnMouseOver.story = {
   name: "InputProps/OnMouseOver",

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-    (props) => css`
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      position: relative;
-      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-      @supports (-webkit-appearance: none) {
-        &:before {
-          /* stylelint-disable */
-          content: url("data:image/svg+xml;utf8,${getIcon(
-            props.indeterminate ? "indeterminate" : "check",
-
-            props.checked
-              ? props.theme.colors.form.background.base
-              : props.theme.colors.form.border.base
-          )}");
-          opacity: ${props.checked ? 1 : 0};
-          position: absolute;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          text-align: center;
-          transform: translateY(1px);
-          line-height: 1;
-          margin: auto;
-          pointer-events: none;
-          transition: ${props.theme.duration.fast}
-            ${props.theme.easing.ease_inout};
+  (props) => css`
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+    @supports (-webkit-appearance: none) {
+      &:before {
+        /* stylelint-disable */
+        content: url("data:image/svg+xml;utf8,${getIcon(
+          props.indeterminate ? "indeterminate" : "check",
+
+          props.checked
+            ? props.theme.colors.form.background.base
+            : props.theme.colors.form.border.base
+        )}");
+        opacity: ${props.checked ? 1 : 0};
+        position: absolute;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        text-align: center;
+        transform: translateY(1px);
+        line-height: 1;
+        margin: auto;
+        pointer-events: none;
+        transition: ${props.theme.duration.fast}
+          ${props.theme.easing.ease_inout};
+      }
+
+      &:hover:before {
+        opacity: ${props.disabled && !props.checked ? 0 : 1};
+      }
+
+      ${props.disabled &&
+      css`
+        opacity: 0.4;
+      `}
+
+      input[type='checkbox'] {
+        box-sizing: border-box;
+        appearance: none;
+        margin: 0;
+        padding: 0;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        border: 1px solid ${props.theme.colors.form.border.base};
+        border-radius: 4px;
+        background-color: ${props.theme.colors.form.background.base};
+        transition: all ${props.theme.duration.fast}
+          ${props.theme.easing.ease_in};
+        cursor: ${props.disabled ? "not-allowed" : "pointer"};
+        flex-shrink: 0;
+
+        &:not(:checked) {
+          ${!props.indeterminate &&
+          css`
+            border-color: ${props.theme.colors
+              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+            background-color: ${props.theme.colors.form.background.base};
+          `}
         }
 
-        &:hover:before {
-          opacity: ${props.disabled && !props.checked ? 0 : 1};
+        &:checked {
+          border-color: ${props.theme.colors.form.border.selected};
+          background-color: ${props.theme.colors.form.background.selected};
         }
 
-        ${props.disabled &&
+        ${props.indeterminate &&
+        props.checked &&
         css`
-          opacity: 0.4;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
-        input[type='checkbox'] {
-          box-sizing: border-box;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          border: 1px solid ${props.theme.colors.form.border.base};
-          border-radius: 4px;
-          background-color: ${props.theme.colors.form.background.base};
-          transition: all ${props.theme.duration.fast}
-            ${props.theme.easing.ease_in};
-          cursor: ${props.disabled ? "not-allowed" : "pointer"};
-          flex-shrink: 0;
-
-          &:not(:checked) {
-            ${!props.indeterminate &&
-            css`
-              border-color: ${props.theme.colors
-                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-              background-color: ${props.theme.colors.form.background.base};
-            `}
-          }
-
-          &:checked {
-            border-color: ${props.theme.colors.form.border.selected};
-            background-color: ${props.theme.colors.form.background.selected};
-          }
-
-          ${props.indeterminate &&
-          props.checked &&
-          css`
-            border-color: ${props.theme.colors.form.border.selected} !important;
-            background-color: ${props.theme.colors.form.background
-              .selected} !important;
-          `}
-
-          &:focus {
-            ${focusRing}
-          }
+        &:focus {
+          ${focusRing}
         }
       }
+    }
 
-      ${COMMON}
-    `
-  );
+    ${COMMON}
+  `
+);
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,8 +73,9 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } =
-    useContext(CollapsibleContext);
+  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
+    CollapsibleContext
+  );
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/Icon/index.stories.js

@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import { text } from "@storybook/addon-knobs";
-
 import Icon from "./";
 import Button from "../Button";
 import Box from "../Box";
@@ -10,65 +8,72 @@ export default {
   title: "Icon",
 };
 
-export const mini12X12 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "mini")}
-  />
-);
+export const mini12X12 = (args) => <Icon {...args} />;
+
+mini12X12.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "mini",
+};
 
 mini12X12.story = {
   name: "Mini (12 x 12)",
 };
 
-export const default16X16 = () => (
-  <Icon color="icon.base" name={text("name", "dashboard")} />
-);
+export const default16X16 = (args) => <Icon {...args} />;
+
+default16X16.args = {
+  color: "icon.base",
+  name: "dashboard",
+};
 
 default16X16.story = {
   name: "Default (16 x 16)",
 };
 
-export const medium24X24 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "medium")}
-  />
-);
+export const medium24X24 = (args) => <Icon {...args} />;
+
+medium24X24.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "medium",
+};
 
 medium24X24.story = {
   name: "Medium (24 x 24)",
 };
 
-export const large32X32 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "large")}
-  />
-);
+export const large32X32 = (args) => <Icon {...args} />;
+
+large32X32.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "large",
+};
 
 large32X32.story = {
   name: "Large (32 x 32)",
 };
 
-export const jumbo64X64 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "jumbo")}
-  />
-);
+export const jumbo64X64 = (args) => <Icon {...args} />;
+
+jumbo64X64.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "jumbo",
+};
 
 jumbo64X64.story = {
   name: "Jumbo (64 x 64)",
 };
 
-export const defaultFixedWidth = () => (
-  <Icon color="icon.success" name={text("name", "dashboard")} fixedWidth />
-);
+export const defaultFixedWidth = (args) => <Icon {...args} />;
+
+defaultFixedWidth.args = {
+  color: "icon.success",
+  name: "dashboard",
+  fixedWidth: true,
+};
 
 defaultFixedWidth.story = {
   name: "Fixed Width (16 x 16)",

package/__flow__/Image/index.js

@@ -80,8 +80,16 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
-      this.props;
+    const {
+      alt,
+      title,
+      onClick,
+      onError,
+      onLoad,
+      src,
+      qa,
+      ...rest
+    } = this.props;
 
     return (
       <ImageContainer

package/__flow__/Input/index.js

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import type { StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -16,7 +17,7 @@ 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/>. */
+  /** Label for Input.ClearButton. Required when using Input.ClearButton. */
   clearButtonLabel?: string,
   /** Placeholder text for when value is undefined or empty */
   placeholder?: string,
@@ -52,8 +53,6 @@ type TypeProps = {
     | ((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?: (
@@ -74,10 +73,13 @@ type TypeProps = {
   appearance?: "primary" | "secondary",
 };
 
+type TypeState = {
+  hasValue: boolean,
+};
+
 // 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,
@@ -89,14 +91,12 @@ 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)};
+    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};
   }
 `;
 
 const ClearButton = () => {
   const {
-    onClear,
     handleClear,
     clearButtonLabel,
     hasValue,
@@ -108,15 +108,6 @@ const ClearButton = () => {
     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(
@@ -154,7 +145,16 @@ const isClearButton = (elem: any) => {
   return false;
 };
 
-class Input extends React.Component<TypeProps> {
+class Input extends React.Component<TypeProps, TypeState> {
+  constructor(props: TypeProps) {
+    super(props);
+    this.state = {
+      // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
+      // for both controlled and uncontrolled inputs.
+      hasValue: !!props.value,
+    };
+  }
+
   static defaultProps = {
     autoFocus: false,
     disabled: false,
@@ -165,7 +165,7 @@ class Input extends React.Component<TypeProps> {
 
   static ClearButton = ClearButton;
 
-  // Define our own ref for focus management.
+  // Define our own ref for use in handleClear.
   // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
   inputRef = React.createRef<HTMLInputElement>();
 
@@ -173,12 +173,28 @@ class Input extends React.Component<TypeProps> {
     this.props.onBlur?.(e);
 
   handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
-    this.inputRef?.current?.focus();
-    this.props.onClear?.(e);
+    const input = this.inputRef.current;
+    if (input) {
+      // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      nativeInputValueSetter?.call(input, "");
+      const inputEvent = new Event("input", { bubbles: true });
+      input.dispatchEvent(inputEvent);
+
+      // Focus the input, update hasValue, and call any onClear callback
+      input.focus();
+      this.updateState("");
+      this.props.onClear?.(e);
+    }
   };
 
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
+  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     this.props.onChange?.(e, e.currentTarget.value);
+    this.updateState(e.currentTarget.value);
+  };
 
   handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) =>
     this.props.onFocus?.(e);
@@ -192,6 +208,15 @@ class Input extends React.Component<TypeProps> {
   handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onPaste?.(e, e.currentTarget.value);
 
+  updateState = (inputValue: string) => {
+    const hasValue = inputValue !== "";
+    const previousHasValue = this.state.hasValue;
+    // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
+    if (hasValue !== previousHasValue) {
+      this.setState({ hasValue });
+    }
+  };
+
   render() {
     const {
       autoComplete,
@@ -240,9 +265,9 @@ class Input extends React.Component<TypeProps> {
       ) : (
         elemBefore
       );
-    // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    // Do not add a ClearButton if an elemAfter prop was passed.
     const elementAfter =
-      type === "search" && onClear && !elemAfter ? <ClearButton /> : elemAfter;
+      type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
 
     return (
       <Container
@@ -259,9 +284,8 @@ class Input extends React.Component<TypeProps> {
         <InputContext.Provider
           value={{
             handleClear: this.handleClear,
-            hasValue: !!value,
+            hasValue: this.state.hasValue,
             clearButtonLabel,
-            onClear,
             size,
           }}
         >