@sproutsocial/racine 11.6.1 → 11.7.0-input-beta.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 11.7.0
+
+### Minor Changes
+
+- 90438e2: Add \_themed.scss for Sprout theme
+  - This allows usage of Sprout theme-specific values in SCSS
+
+## 11.6.2
+
+### Patch Changes
+
+- 560c463: Added a new extended theme for the compare to period for the date picker.
+
 ## 11.6.1
 
 ### Patch Changes

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__/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

@@ -16,7 +16,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 +52,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 +72,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,
@@ -96,7 +97,6 @@ const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
 
 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,
           }}
         >

package/__flow__/Input/index.stories.js

@@ -188,6 +188,20 @@ largeSearchInput.story = {
   name: "Large Search Input",
 };
 
+export const uncontrolledSearchInput = () => (
+  <Input
+    type="search"
+    placeholder={text("placeholder", "Please enter a value...")}
+    onClear={() => window.alert("Cleared!")}
+    clearButtonLabel={text("clearButtonLabel", "Clear search")}
+    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+  />
+);
+
+uncontrolledSearchInput.story = {
+  name: "Uncontrolled Search Input",
+};
+
 export const nonSearchClearButtonInput = () => {
   return (
     <Input

package/__flow__/Input/index.test.js

@@ -85,6 +85,26 @@ describe("Input", () => {
         expect(getByRole("button")).toBeTruthy();
       });
 
+      it("should render a clear button for an uncontrolled search Input only when it has text", () => {
+        const { getByRole, queryByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            type="search"
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(queryByRole("button")).toBeFalsy();
+        const input = getByRole("searchbox");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.keyboard("some text");
+        expect(getByRole("button")).toBeTruthy();
+        userEvent.tab();
+        userEvent.keyboard("{enter}");
+        expect(queryByRole("button")).toBeFalsy();
+      });
+
       it("should not render a clear button for search Inputs if there is no text", () => {
         const { queryByRole } = render(
           <Input

package/__flow__/Input/styles.js

@@ -134,13 +134,13 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.before &&
     css`
-      left: ${props.theme.space[350]};
+      left: ${props.theme.space[300]};
     `};
 
   ${(props) =>
     props.after &&
     css`
-      right: ${props.isClearButton ? 0 : props.theme.space[350]};
+      right: ${props.isClearButton ? 0 : props.theme.space[300]};
     `};
 `;
 

package/__flow__/SegmentedControl/index.js

@@ -17,8 +17,9 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext =
-  React.createContext<?TypeSegmentedControlContext>(null);
+const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
+  null
+);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/TableCell/index.js

@@ -22,8 +22,15 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const { id, content, colSpan, width, align, children, ...rest } =
-      this.props;
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      children,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/ToggleHint/index.js

@@ -32,8 +32,15 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
-      this.props;
+    const {
+      icon,
+      isOpen,
+      openString,
+      closeString,
+      qa,
+      className,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/systemProps/color.js

@@ -14,8 +14,7 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp =
-  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -31,11 +31,23 @@ export const navigation = {
   },
 };
 
+export const datePicker = {
+  comparison: {
+    background: {
+      base: baseDarkTheme.colors.neutral[400],
+    },
+    text: {
+      base: baseDarkTheme.colors.neutral[800],
+    },
+  },
+};
+
 const darkTheme: TypeSproutTheme = {
   ...baseDarkTheme,
   colors: {
     ...baseDarkTheme.colors,
     navigation,
+    datePicker,
   },
 };
 

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -31,11 +31,23 @@ export const navigation = {
   },
 };
 
+export const datePicker = {
+  comparison: {
+    background: {
+      base: baseLightTheme.colors.neutral[400],
+    },
+    text: {
+      base: baseLightTheme.colors.neutral[800],
+    },
+  },
+};
+
 const lightTheme: TypeSproutTheme = {
   ...baseLightTheme,
   colors: {
     ...baseLightTheme.colors,
     navigation,
+    datePicker,
   },
 };
 

package/__flow__/themes/{dark → utils}/_themed.scss

@@ -2,12 +2,13 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../dist/themes/dark/dark.scss";
+// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
+@import "./theme.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, "default");
+$theme: map-get($theme, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.

package/__flow__/types/theme.flow.js

@@ -13,7 +13,10 @@ import {
 } from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
-import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
+import {
+  datePicker,
+  navigation,
+} from "../themes/extendedThemes/sproutTheme/light/theme";
 
 export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
@@ -53,5 +56,6 @@ export type TypeSproutTheme = {
   colors: {|
     ...$Exact<TypeColor>,
     navigation: typeof navigation,
+    datePicker: typeof datePicker,
   |},
 };

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,13 +19,21 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0, 1, 2, 3, 3,
+      0,
+      1,
+      2,
+      3,
+      3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0, 1, 2, 3, 4,
+      0,
+      1,
+      2,
+      3,
+      4,
     ]);
   });
 });