Merge pull request #3956 from Sage/FE-4025-dialog-text-wrap

feat(dialog, dialog-full-screen): add help and and fix text wrapping - [ FE-4025 | FE-4026 ]

cypress/features/regression/experimental/simpleColorPickerAction.feature

@@ -18,33 +18,33 @@ Feature: Simple Color Picker component
 
   @positive
   Scenario: When on last color, going forward selects first color
-    When I press rightarrow on the 10 color
+    When I press rightarrow on the 10 color in IFrame
     Then Experimental Simple Color Picker 1 element was picked up
 
   @positive
   Scenario: When on first color, going backward selects last color
-    When I press leftarrow on the 1 color
+    When I press leftarrow on the 1 color in IFrame
     Then Experimental Simple Color Picker 10 element was picked up
 
   @positive
   Scenario: Left arrow moves selection left
-    When I press leftarrow on the 3 color
+    When I press leftarrow on the 3 color in IFrame
     Then Experimental Simple Color Picker 2 element was picked up
 
   @positive
   Scenario: Right arrow moves selection right
-    When I press rightarrow on the 3 color
+    When I press rightarrow on the 3 color in IFrame
     Then Experimental Simple Color Picker 4 element was picked up
 
   @positive
   Scenario: Up arrow moves selection up
     Given I select 6 color
-    When I press uparrow on the 6 color
+    When I press uparrow on the 6 color in IFrame
     Then Experimental Simple Color Picker 1 element was picked up
 
   @positive
   Scenario: Down arrow moves selection down
-    When I press downarrow on the 3 color
+    When I press downarrow on the 3 color in IFrame
     Then Experimental Simple Color Picker 8 element was picked up
 
   @positive

cypress/features/regression/test/advancedColorPickerNoIFrame.feature

@@ -7,7 +7,7 @@ Feature: Advanced Color Picker component
 
   @positive
   Scenario Outline: <key> moves selection
-    When I press "<key>" onto focused element
+    When I press <key> on the 7 color
     Then Simple Color <index> element was picked up in noIframe
     Examples:
       | key        | index |
@@ -16,7 +16,7 @@ Feature: Advanced Color Picker component
       | uparrow    | 2     |
 
   @positive
-  Scenario: Down arrow moves selection down
-    Given I press "uparrow" onto focused element
-    When I press "downarrow" onto focused element
+  Scenario: down arrow moves selection down
+    Given I press uparrow on the 7 color
+    When I press downarrow on the 2 color
     Then Simple Color 7 element was picked up in noIframe

cypress/support/step-definitions/simple-color-picker-steps.js

@@ -2,7 +2,10 @@ import {
   simpleColorPickerDiv,
   simpleColorPickerLegendNoIFrame,
 } from "../../locators/simple-color-picker";
-import { experimentalSimpleColorPickerInputInIframe } from "../../locators/advanced-color-picker/index";
+import {
+  experimentalSimpleColorPickerInputInIframe,
+  experimentalSimpleColorPickerInput,
+} from "../../locators/advanced-color-picker/index";
 import {
   getKnobsInput,
   commonDataElementInputPreviewNoIframe,
@@ -39,13 +42,17 @@ When("I select {int} color", (index) => {
   experimentalSimpleColorPickerInputInIframe(index).click();
 });
 
-When("I press {word} on the {int} color", (key, index) => {
+When("I press {word} on the {int} color in IFrame", (key, index) => {
   experimentalSimpleColorPickerInputInIframe(index).trigger(
     "keydown",
     keyCode(key)
   );
 });
 
+When("I press {word} on the {int} color", (key, index) => {
+  experimentalSimpleColorPickerInput(index).trigger("keydown", keyCode(key));
+});
+
 Then("It renders with all colors", () => {
   cy.fixture("simpleColorPicker.json").then(($json) => {
     for (let i = 0; i < $json.length; ++i) {

src/__internal__/focus-trap/focus-trap.component.js

@@ -1,5 +1,6 @@
 import {
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -13,6 +14,7 @@ import {
   isRadio,
   setElementFocus,
 } from "./focus-trap-utils";
+import { ModalContext } from "../../components/modal/modal.component";
 
 const FocusTrap = ({
   children,
@@ -25,7 +27,7 @@ const FocusTrap = ({
   const [focusableElements, setFocusableElements] = useState();
   const [firstElement, setFirstElement] = useState();
   const [lastElement, setLastElement] = useState();
-
+  const { isAnimationComplete } = useContext(ModalContext);
   const hasNewInputs = useCallback(
     (candidate) => {
       if (!focusableElements || candidate.length !== focusableElements.length) {
@@ -54,11 +56,16 @@ const FocusTrap = ({
   }, [children, hasNewInputs, wrapperRef]);
 
   useEffect(() => {
-    if (autoFocus && firstOpen.current && (focusFirstElement || firstElement)) {
+    if (
+      autoFocus &&
+      firstOpen.current &&
+      isAnimationComplete &&
+      (focusFirstElement || firstElement)
+    ) {
       setElementFocus(focusFirstElement || firstElement);
       firstOpen.current = false;
     }
-  }, [autoFocus, firstElement, focusFirstElement]);
+  }, [autoFocus, firstElement, focusFirstElement, isAnimationComplete]);
 
   useEffect(() => {
     const trapFn = (ev) => {

src/__internal__/focus-trap/focus-trap.spec.js

@@ -6,6 +6,7 @@ import {
   RadioButton,
   RadioButtonGroup,
 } from "../../__experimental__/components/radio-button";
+import { ModalContext } from "../../components/modal/modal.component";
 
 jest.useFakeTimers();
 
@@ -14,11 +15,13 @@ const MockComponent = ({ children, ...rest }) => {
   const ref = useRef();
 
   return (
-    <FocusTrap wrapperRef={ref} {...rest}>
-      <div ref={ref} id="myComponent">
-        {children}
-      </div>
-    </FocusTrap>
+    <ModalContext.Provider value={{ isAnimationComplete: true }}>
+      <FocusTrap wrapperRef={ref} {...rest}>
+        <div ref={ref} id="myComponent">
+          {children}
+        </div>
+      </FocusTrap>
+    </ModalContext.Provider>
   );
 };
 
@@ -419,9 +422,11 @@ describe("FocusTrap", () => {
     it("renders without wrapperRef provided", () => {
       expect(() => {
         mount(
-          <FocusTrap>
-            <div id="myComponent">Content</div>
-          </FocusTrap>
+          <ModalContext.Provider value={{ isAnimationComplete: true }}>
+            <FocusTrap>
+              <div id="myComponent">Content</div>
+            </FocusTrap>
+          </ModalContext.Provider>
         );
       }).not.toThrow();
     });

src/components/advanced-color-picker/advanced-color-picker.spec.js

@@ -10,6 +10,7 @@ import {
   testStyledSystemMargin,
 } from "../../__spec_helper__/test-utils";
 import { noThemeSnapshot } from "../../__spec_helper__/enzyme-snapshot-helper";
+import { ModalContext } from "../modal/modal.component";
 
 jest.mock("../../utils/helpers/guid");
 guid.mockImplementation(() => "guid-12345");
@@ -43,6 +44,8 @@ describe("AdvancedColorPicker", () => {
   function render(props = {}) {
     wrapper = mount(<AdvancedColorPicker {...props} />, {
       attachTo: htmlElement,
+      wrappingComponent: ModalContext.Provider,
+      wrappingComponentProps: { value: { isAnimationComplete: true } },
     });
   }
 
@@ -105,10 +108,12 @@ describe("AdvancedColorPicker", () => {
 
   describe("when controlled", () => {
     describe("when dialog is open", () => {
+      jest.useFakeTimers();
       describe("handleFocus focus trap callback", () => {
         describe("when key other than tab pressed", () => {
           it("should not change the focus", () => {
             render({ ...requiredProps, open: true });
+            jest.runAllTimers();
             const { defaultSimpleColor } = getElements();
 
             expect(document.activeElement).toBe(defaultSimpleColor);
@@ -132,6 +137,7 @@ describe("AdvancedColorPicker", () => {
         describe("when shift tab keys pressed on the selected color input", () => {
           it("should switch focus to the close button", () => {
             render({ ...requiredProps, open: true });
+            jest.runAllTimers();
             const { closeIcon, defaultSimpleColor } = getElements();
 
             expect(document.activeElement).toBe(defaultSimpleColor);
@@ -152,7 +158,7 @@ describe("AdvancedColorPicker", () => {
             };
 
             render(extraProps);
-
+            jest.runAllTimers();
             const { simpleColors } = getElements();
 
             expect(document.activeElement).toBe(simpleColors[0]);
@@ -191,7 +197,7 @@ describe("AdvancedColorPicker", () => {
             };
 
             render(extraProps);
-
+            jest.runAllTimers();
             const { simpleColors } = getElements();
 
             expect(document.activeElement).toBe(simpleColors[7]);
@@ -215,7 +221,7 @@ describe("AdvancedColorPicker", () => {
             };
 
             render(extraProps);
-
+            jest.runAllTimers();
             const { simpleColors } = getElements();
 
             expect(document.activeElement).toBe(simpleColors[7]);
@@ -239,7 +245,7 @@ describe("AdvancedColorPicker", () => {
           };
 
           render(extraProps);
-
+          jest.runAllTimers();
           const { simpleColors } = getElements();
 
           expect(document.activeElement).toBe(simpleColors[7]);

src/components/dialog-full-screen/dialog-full-screen.component.js

@@ -24,6 +24,7 @@ const DialogFullScreen = ({
   disableEscKey,
   onCancel,
   contentRef,
+  help,
   ...rest
 }) => {
   const dialogRef = useRef();
@@ -51,6 +52,7 @@ const DialogFullScreen = ({
           subheader={subtitle}
           subtitleId="carbon-dialog-subtitle"
           divider={false}
+          help={help}
         />
       ) : (
         title
@@ -114,6 +116,8 @@ DialogFullScreen.propTypes = {
   disableAutoFocus: PropTypes.bool,
   /** Determines if the Esc Key closes the Dialog */
   disableEscKey: PropTypes.bool,
+  /** Adds Help tooltip to Header */
+  help: PropTypes.string,
   /** remove padding from content */
   disableContentPadding: PropTypes.bool,
   /** Child elements */

src/components/dialog-full-screen/dialog-full-screen.spec.js

@@ -13,6 +13,7 @@ import { assertStyleMatch } from "../../__spec_helper__/test-utils";
 import IconButton from "../icon-button";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { StyledHeader, StyledHeading } from "../heading/heading.style";
+import Help from "../help";
 
 jest.mock("../../utils/helpers/guid");
 
@@ -67,13 +68,16 @@ describe("DialogFullScreen", () => {
   });
 
   describe("autoFocus", () => {
+    jest.useFakeTimers();
     it("should focus the first element by default", () => {
       mount(
         <DialogFullScreen open>
           <input type="text" />
         </DialogFullScreen>
       );
 
+      jest.runAllTimers();
+
       const firstFocusableElement = document.querySelector("input");
       expect(document.activeElement).toBe(firstFocusableElement);
     });
@@ -85,13 +89,16 @@ describe("DialogFullScreen", () => {
         </DialogFullScreen>
       );
 
+      jest.runAllTimers();
+
       const firstFocusableElement = document.querySelector("input");
       expect(document.activeElement).not.toBe(firstFocusableElement);
     });
   });
 
   describe("focusFirstElement", () => {
     it("should focus on the element passes as focusFirstElement prop", () => {
+      jest.useFakeTimers();
       const Component = () => {
         const secondInputRef = useRef(null);
         return (
@@ -103,6 +110,8 @@ describe("DialogFullScreen", () => {
       };
       mount(<Component />);
 
+      jest.runAllTimers();
+
       const secondFocusableElement = document.querySelectorAll("input")[1];
       expect(document.activeElement).toEqual(secondFocusableElement);
     });
@@ -232,6 +241,20 @@ describe("DialogFullScreen", () => {
         expect(heading.props().title).toEqual("my custom heading");
       });
     });
+
+    describe("when prop help is passed", () => {
+      it("should render Help component", () => {
+        wrapper = mount(
+          <DialogFullScreen
+            open
+            title="This is test title"
+            help="this is help text"
+          />
+        );
+
+        expect(wrapper.find(Help).exists()).toBe(true);
+      });
+    });
   });
 
   describe("tags", () => {