feat(Toggletip, Tooltip): add inverted icons support (#558)

Author: faroukhoumaidi

packages/react/src/components/toggletip/toggletip.test.tsx.snap

@@ -241,6 +241,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
     buttonType="tertiary"
     data-testid="toggletip"
     iconName="info"
+    inverted={false}
     label="info"
     onClick={[Function]}
     type="button"
@@ -250,6 +251,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
       aria-label="info"
       buttonType="tertiary"
       data-testid="toggletip"
+      inverted={false}
       isMobile={false}
       onClick={[Function]}
       type="button"
@@ -260,6 +262,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
         buttonType="tertiary"
         className="c0"
         data-testid="toggletip"
+        inverted={false}
         isMobile={false}
         onClick={[Function]}
         type="button"
@@ -270,6 +273,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
           buttonType="tertiary"
           className="c0"
           data-testid="toggletip"
+          inverted={false}
           isMobile={false}
           onClick={[Function]}
           type="button"
@@ -456,6 +460,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
     buttonType="tertiary"
     data-testid="toggletip"
     iconName="info"
+    inverted={false}
     label="info"
     onClick={[Function]}
     type="button"
@@ -465,6 +470,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
       aria-label="info"
       buttonType="tertiary"
       data-testid="toggletip"
+      inverted={false}
       isMobile={false}
       onClick={[Function]}
       type="button"
@@ -475,6 +481,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
         buttonType="tertiary"
         className="c0"
         data-testid="toggletip"
+        inverted={false}
         isMobile={false}
         onClick={[Function]}
         type="button"
@@ -485,6 +492,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
           buttonType="tertiary"
           className="c0"
           data-testid="toggletip"
+          inverted={false}
           isMobile={false}
           onClick={[Function]}
           type="button"
@@ -760,6 +768,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
     buttonType="tertiary"
     data-testid="toggletip"
     iconName="info"
+    inverted={false}
     label="info"
     onClick={[Function]}
     type="button"
@@ -769,6 +778,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
       aria-label="info"
       buttonType="tertiary"
       data-testid="toggletip"
+      inverted={false}
       isMobile={true}
       onClick={[Function]}
       type="button"
@@ -779,6 +789,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
         buttonType="tertiary"
         className="c0"
         data-testid="toggletip"
+        inverted={false}
         isMobile={true}
         onClick={[Function]}
         type="button"
@@ -789,6 +800,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
           buttonType="tertiary"
           className="c0"
           data-testid="toggletip"
+          inverted={false}
           isMobile={true}
           onClick={[Function]}
           type="button"
@@ -975,6 +987,7 @@ exports[`Toggletip Has mobile styles 1`] = `
     buttonType="tertiary"
     data-testid="toggletip"
     iconName="info"
+    inverted={false}
     label="info"
     onClick={[Function]}
     type="button"
@@ -984,6 +997,7 @@ exports[`Toggletip Has mobile styles 1`] = `
       aria-label="info"
       buttonType="tertiary"
       data-testid="toggletip"
+      inverted={false}
       isMobile={true}
       onClick={[Function]}
       type="button"
@@ -994,6 +1008,7 @@ exports[`Toggletip Has mobile styles 1`] = `
         buttonType="tertiary"
         className="c0"
         data-testid="toggletip"
+        inverted={false}
         isMobile={true}
         onClick={[Function]}
         type="button"
@@ -1004,6 +1019,7 @@ exports[`Toggletip Has mobile styles 1`] = `
           buttonType="tertiary"
           className="c0"
           data-testid="toggletip"
+          inverted={false}
           isMobile={true}
           onClick={[Function]}
           type="button"

packages/react/src/components/toggletip/toggletip.tsx

@@ -148,6 +148,7 @@ export interface ToggletipProps {
      */
     desktopPlacement?: ToggletipPlacement;
     disabled?: boolean;
+    invertedIcon?: boolean;
 }
 
 const modifiers: PopperOptions['modifiers'] = [
@@ -167,6 +168,7 @@ export const Toggletip: FunctionComponent<ToggletipProps> = ({
     defaultOpen = false,
     disabled,
     desktopPlacement = 'right',
+    invertedIcon = false,
 }) => {
     const { isMobile } = useDeviceContext();
     const [isVisible, setVisible] = useState(defaultOpen);
@@ -200,6 +202,7 @@ export const Toggletip: FunctionComponent<ToggletipProps> = ({
                 aria-expanded={visible}
                 onClick={() => setVisible(!isVisible)}
                 ref={setTriggerRef}
+                inverted={invertedIcon}
             />
 
             {isVisible && (