Merge pull request #3766 from Sage/FE-3771-tooltip-flip-override

feat(tooltip): add support for overriding default flip placements FE-3771
Sage · Mar 12, 2021 · aae25e9 · aae25e9
2 parents 8749415 + 2b88b25
commit aae25e9
Show file tree

Hide file tree

Showing 24 changed files with 419 additions and 54 deletions.
diff --git a/src/__experimental__/components/label/label.component.js b/src/__experimental__/components/label/label.component.js
@@ -98,6 +98,7 @@ const Label = ({
             warning={warning}
             info={info}
             tooltipPosition={tooltipPositionValue}
+            tooltipFlipOverrides={["top", "bottom"]}
           />
         </IconWrapperStyle>
       );

diff --git a/src/__experimental__/components/simple-color-picker/simple-color-picker.component.js b/src/__experimental__/components/simple-color-picker/simple-color-picker.component.js
@@ -228,7 +228,12 @@ const SimpleColorPicker = (props) => {
             </StyledColorOptions>
           )}
         </InputGroupContext.Consumer>
-        {!validationOnLegend && <ValidationIcon {...validationProps} />}
+        {!validationOnLegend && (
+          <ValidationIcon
+            {...validationProps}
+            tooltipFlipOverrides={["top", "bottom"]}
+          />
+        )}
       </StyledContent>
     </Fieldset>
   );

diff --git a/src/__experimental__/components/switch/switch-slider.component.js b/src/__experimental__/components/switch/switch-slider.component.js
@@ -61,6 +61,7 @@ const SwitchSlider = (props) => {
           warning={warning}
           info={info}
           size={props.size}
+          tooltipFlipOverrides={["top", "bottom"]}
         />
       )}
     </StyledSwitchSlider>

diff --git a/src/__internal__/fieldset/fieldset.component.js b/src/__internal__/fieldset/fieldset.component.js
@@ -50,7 +50,12 @@ const Fieldset = ({
                 </legend>
               )}
             </InputGroupContext.Consumer>
-            <ValidationIcon error={error} warning={warning} info={info} />
+            <ValidationIcon
+              error={error}
+              warning={warning}
+              info={info}
+              tooltipFlipOverrides={["top", "bottom"]}
+            />
           </StyledLegendContainer>
         )}
         {children}

diff --git a/src/components/button-toggle-group/button-toggle-group.component.js b/src/components/button-toggle-group/button-toggle-group.component.js
@@ -44,7 +44,12 @@ const BaseButtonToggleGroup = (props) => {
           >
             {children}
           </RadioButtonMapper>
-          {!validationOnLabel && <ValidationIcon {...validationProps} />}
+          {!validationOnLabel && (
+            <ValidationIcon
+              {...validationProps}
+              tooltipFlipOverrides={["top", "bottom"]}
+            />
+          )}
         </ButtonToggleGroupStyle>
       </FormField>
     </InputGroupBehaviour>

diff --git a/src/components/button-toggle-group/button-toggle-group.spec.js b/src/components/button-toggle-group/button-toggle-group.spec.js
@@ -8,6 +8,7 @@ import { baseTheme, mintTheme } from "../../style/themes";
 import { assertStyleMatch } from "../../__spec_helper__/test-utils";
 import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
 import StyledValidationIcon from "../validations/validation-icon.style";
+import ValidationIcon from "../validations";
 import Label from "../../__experimental__/components/label";
 
 import ButtonToggleGroup from "./button-toggle-group.component";
@@ -78,6 +79,7 @@ describe("ButtonToggleGroup", () => {
       expect(wrapper).toMatchSnapshot();
     });
   });
+
   describe("Style props", () => {
     it("renders with the correct width", () => {
       const wrapper = renderWithTheme(
@@ -117,6 +119,7 @@ describe("ButtonToggleGroup", () => {
             { modifier: `${StyledButtonToggleLabel}` }
           );
         });
+
         it("renders validation icon on input", () => {
           const wrapper = renderWithTheme(
             { theme: baseTheme, [type]: "Message" },
@@ -128,7 +131,12 @@ describe("ButtonToggleGroup", () => {
               .find(StyledValidationIcon)
               .exists()
           ).toBe(true);
+
+          expect(
+            wrapper.find(ValidationIcon).props().tooltipFlipOverrides
+          ).toEqual(["top", "bottom"]);
         });
+
         it("renders validation icon on label when validationOnLabel passed as true", () => {
           const wrapper = renderWithTheme(
             {

diff --git a/src/components/help/help.component.js b/src/components/help/help.component.js
@@ -22,6 +22,7 @@ const Help = (props) => {
     type,
     tooltipBgColor,
     tooltipFontColor,
+    tooltipFlipOverrides,
   } = props;
 
   useEffect(() => {
@@ -76,6 +77,7 @@ const Help = (props) => {
         tooltipVisible={isFocused || isTooltipVisible}
         tooltipBgColor={tooltipBgColor}
         tooltipFontColor={tooltipFontColor}
+        tooltipFlipOverrides={tooltipFlipOverrides}
       />
     </StyledHelp>
   );
@@ -104,6 +106,22 @@ Help.propTypes = {
   tooltipBgColor: PropTypes.string,
   /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipFontColor: PropTypes.string,
+  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
+  tooltipFlipOverrides: (props, propName, componentName) => {
+    const prop = props[propName];
+    const isValid =
+      prop &&
+      Array.isArray(prop) &&
+      prop.every((placement) => OptionsHelper.positions.includes(placement));
+
+    if (!prop || isValid) {
+      return null;
+    }
+    return new Error(
+      // eslint-disable-next-line max-len
+      `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`
+    );
+  },
 };
 
 Help.defaultProps = {

diff --git a/src/components/help/help.d.ts b/src/components/help/help.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IconTypes } from "../../utils/helpers/options-helper/options-helper";
+import { IconTypes, Positions } from "../../utils/helpers/options-helper/options-helper";
 
 export interface HelpProps {
   className?: string;
@@ -10,9 +10,10 @@ export interface HelpProps {
   href?: string;
   isFocused?: boolean;
   type?: IconTypes;
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
+  tooltipPosition?: Positions;
   tooltipBgColor?: string;
   tooltipFontColor?: string;
+  tooltipFlipOverrides?: Positions[];
 }
 
 declare const Help: React.ComponentType<HelpProps>;

diff --git a/src/components/help/help.spec.js b/src/components/help/help.spec.js
@@ -197,6 +197,31 @@ describe("Help", () => {
       document.body.removeChild(domNode);
     });
   });
+
+  describe("tooltipFlipOverrides", () => {
+    it("does not throw an error if a valid array is passed", () => {
+      jest.spyOn(global.console, "error").mockImplementation(() => {});
+
+      renderHelp(
+        { type: "home", tooltipFlipOverrides: ["top", "bottom"] },
+        mount
+      );
+
+      // eslint-disable-next-line no-console
+      expect(console.error).not.toHaveBeenCalled();
+      global.console.error.mockReset();
+    });
+
+    it("throws an error if a invalid array is passed", () => {
+      jest.spyOn(global.console, "error").mockImplementation(() => {});
+
+      renderHelp({ type: "home", tooltipFlipOverrides: ["foo", "bar"] }, mount);
+
+      // eslint-disable-next-line no-console
+      expect(console.error).toHaveBeenCalled();
+      global.console.error.mockReset();
+    });
+  });
 });
 
 function renderHelp(props, renderer = shallow) {

diff --git a/src/components/help/help.stories.js b/src/components/help/help.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { text, select } from "@storybook/addon-knobs";
+import { text, select, boolean } from "@storybook/addon-knobs";
 import OptionsHelper from "../../utils/helpers/options-helper";
 import Help from "./help.component";
 
@@ -28,17 +28,40 @@ export const Default = () => {
     : undefined;
   const href = text("href", "http://www.sage.com");
   const type = select("type", OptionsHelper.icons, "help");
-  const tooltipBgColor = text("tooltipBgColor", undefined);
-  const tooltipFontColor = text("tooltipFontColor", undefined);
+  const tooltipBgColor = children
+    ? text("tooltipBgColor", undefined)
+    : undefined;
+  const tooltipFontColor = children
+    ? text("tooltipFontColor", undefined)
+    : undefined;
+
+  const isVertical = ["top", "bottom"].includes(tooltipPosition);
+  const enableFlipOverrides = children
+    ? boolean("enable flip overrides", false)
+    : undefined;
+
+  const tooltipFlipOverrides =
+    children && enableFlipOverrides
+      ? select(
+          "tooltipFlipOverrides",
+          isVertical ? ["left", "right"] : ["top", "bottom"],
+          isVertical ? "right" : "bottom"
+        )
+      : undefined;
+
+  const flipOverrides = tooltipFlipOverrides
+    ? [tooltipFlipOverrides]
+    : undefined;
 
   return (
-    <div style={{ marginLeft: "125px" }}>
+    <div style={{ margin: "200px" }}>
       <Help
         tooltipPosition={tooltipPosition}
         href={href}
         type={type}
         tooltipBgColor={tooltipBgColor}
         tooltipFontColor={tooltipFontColor}
+        tooltipFlipOverrides={flipOverrides}
       >
         {children}
       </Help>

diff --git a/src/components/icon/icon.component.js b/src/components/icon/icon.component.js
@@ -24,6 +24,7 @@ const Icon = React.forwardRef(
       tooltipVisible,
       tooltipBgColor,
       tooltipFontColor,
+      tooltipFlipOverrides,
       tabIndex,
       isPartOfInput,
       inputSize,
@@ -90,6 +91,7 @@ const Icon = React.forwardRef(
           inputSize={inputSize}
           bgColor={tooltipBgColor}
           fontColor={tooltipFontColor}
+          flipOverrides={tooltipFlipOverrides}
         >
           {icon}
         </Tooltip>
@@ -100,6 +102,8 @@ const Icon = React.forwardRef(
   }
 );
 
+const placements = ["top", "bottom", "left", "right"];
+
 Icon.propTypes = {
   /**
    * @private
@@ -146,13 +150,29 @@ Icon.propTypes = {
   /** The message string to be displayed in the tooltip */
   tooltipMessage: PropTypes.string,
   /** The position to display the tooltip */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+  tooltipPosition: PropTypes.oneOf(placements),
   /** Control whether the tooltip is visible */
   tooltipVisible: PropTypes.bool,
   /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipBgColor: PropTypes.string,
   /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipFontColor: PropTypes.string,
+  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
+  tooltipFlipOverrides: (props, propName) => {
+    const prop = props[propName];
+    const isValid =
+      prop &&
+      Array.isArray(prop) &&
+      prop.every((placement) => placements.includes(placement));
+
+    if (!prop || isValid) {
+      return null;
+    }
+    return new Error(
+      // eslint-disable-next-line max-len
+      `The \`${propName}\` prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`
+    );
+  },
   /** @ignore @private */
   isPartOfInput: PropTypes.bool,
   /** @ignore @private */

diff --git a/src/components/icon/icon.d.ts b/src/components/icon/icon.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import { Positions } from "../../utils/helpers/options-helper";
 export interface IconProps {
   /** Icon type */
   type: string;
@@ -28,13 +28,15 @@ export interface IconProps {
   /** The message string to be displayed in the tooltip */
   tooltipMessage?: string;
   /** The position to display the tooltip */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
+  tooltipPosition?: Positions;
   /** Control whether the tooltip is visible */
   tooltipVisible?: boolean;
   /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipBgColor?: string;
   /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipFontColor?: string;
+  /** Overrides the default flip behaviour of the Tooltip */
+  tooltipFlipOverrides?: Positions[];
 }
 
 declare const Icon: React.ComponentType<IconProps>;

diff --git a/src/components/icon/icon.spec.js b/src/components/icon/icon.spec.js
@@ -177,16 +177,31 @@ describe("Icon component", () => {
 
     const wrongColors = ["rgb(0,0)", "#ff", "test"];
     describe.each(wrongColors)("when wrong color prop is provided", (color) => {
+      beforeEach(() => {
+        jest.spyOn(global.console, "error").mockImplementation(() => {});
+      });
+
+      afterEach(() => {
+        global.console.error.mockReset();
+      });
+
       it("throws an error", () => {
-        jest.spyOn(global.console, "error");
         mount(<Icon color={color} type="message" />);
         // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalled();
       });
     });
+
     describe.each(wrongColors)("when wrong bg prop is provided", (color) => {
+      beforeEach(() => {
+        jest.spyOn(global.console, "error").mockImplementation(() => {});
+      });
+
+      afterEach(() => {
+        global.console.error.mockReset();
+      });
+
       it("throws an error", () => {
-        jest.spyOn(global.console, "error");
         mount(<Icon bg={color} type="message" />);
         // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalled();
@@ -499,5 +514,40 @@ describe("Icon component", () => {
 
       expect(wrapper.find(Tooltip).props().isVisible).toEqual(false);
     });
+
+    describe("tooltipFlipOverrides", () => {
+      it("does not throw an error if a valid array is passed", () => {
+        global.console.error.mockReset();
+
+        jest.spyOn(global.console, "error").mockImplementation(() => {});
+
+        mount(
+          <Icon
+            type="home"
+            tooltipMessage="foo"
+            tooltipFlipOverrides={["top", "bottom"]}
+          />
+        );
+
+        // eslint-disable-next-line no-console
+        expect(console.error).not.toHaveBeenCalled();
+        global.console.error.mockReset();
+      });
+
+      it("throws an error if a invalid array is passed", () => {
+        jest.spyOn(global.console, "error").mockImplementation(() => {});
+        mount(
+          <Icon
+            type="home"
+            tooltipMessage="foo"
+            tooltipFlipOverrides={["foo", "bar"]}
+          />
+        );
+
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalled();
+        global.console.error.mockReset();
+      });
+    });
   });
 });