fix(collapsible): update tooltip over toggle panel button

innovaccer · Aug 2, 2023 · 79faecb · 79faecb
1 parent acfbf4d
commit 79faecb
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 44 deletions.
diff --git a/core/components/atoms/collapsible/Collapsible.tsx b/core/components/atoms/collapsible/Collapsible.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from '@/index';
+import { Icon, Tooltip, Divider } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
 export interface CollapsibleProps extends BaseProps {
@@ -44,9 +44,9 @@ export const Collapsible = (props: CollapsibleProps) => {
   const baseProps = extractBaseProps(props);
 
   React.useEffect(() => {
-    if (ref.current) {
-      setSeperator(ref.current.scrollHeight > ref.current.clientHeight);
-    }
+    window.requestAnimationFrame(() => {
+      ref.current && setSeperator(ref.current.scrollHeight > ref.current.clientHeight);
+    });
   });
 
   const WrapperClass = classNames({
@@ -70,7 +70,6 @@ export const Collapsible = (props: CollapsibleProps) => {
 
   const FooterClass = classNames({
     ['Collapsible-footer']: true,
-    ['Collapsible-footer--seperator']: seperator,
   });
 
   const onToggleHandler = (newExpanded: boolean, type: string) => () => {
@@ -102,6 +101,7 @@ export const Collapsible = (props: CollapsibleProps) => {
         >
           {children}
         </div>
+        {withTrigger && seperator && <Divider appearance="header" />}
         {withTrigger && (
           <div
             role="button"
@@ -111,12 +111,26 @@ export const Collapsible = (props: CollapsibleProps) => {
             onClick={onToggleHandler(!expanded, 'click')}
             onKeyDown={onToggleHandler(!expanded, 'click')}
           >
-            <Icon
-              name={expanded ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-              data-test="DesignSystem-Collapsible--FooterIcon"
-              className="px-6 py-4 my-2 cursor-pointer"
-              size={16}
-            />
+            {expanded && (
+              <Tooltip tooltip="Collapse the panel" position="right">
+                <Icon
+                  name="keyboard_arrow_left"
+                  data-test="DesignSystem-Collapsible--FooterIcon"
+                  className="px-6 py-4 my-2 cursor-pointer"
+                  size={16}
+                />
+              </Tooltip>
+            )}
+            {!expanded && (
+              <Tooltip tooltip="Expand the panel" position="right">
+                <Icon
+                  name="keyboard_arrow_right"
+                  data-test="DesignSystem-Collapsible--FooterIcon"
+                  className="px-6 py-4 my-2 cursor-pointer"
+                  size={16}
+                />
+              </Tooltip>
+            )}
           </div>
         )}
       </div>

diff --git a/core/components/atoms/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap b/core/components/atoms/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap
@@ -29,14 +29,19 @@ exports[`Collapsible component
           role="button"
           tabindex="0"
         >
-          <i
-            class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
-            data-test="DesignSystem-Collapsible--FooterIcon"
-            role="button"
-            style="font-size: 16px; width: 16px;"
+          <style />
+          <div
+            class="OutsideClick PopperWrapper-trigger"
           >
-            keyboard_arrow_right_round
-          </i>
+            <i
+              class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
+              data-test="DesignSystem-Collapsible--FooterIcon"
+              role="button"
+              style="font-size: 16px; width: 16px;"
+            >
+              keyboard_arrow_right_round
+            </i>
+          </div>
         </div>
       </div>
     </div>
@@ -73,14 +78,19 @@ exports[`Collapsible component
           role="button"
           tabindex="0"
         >
-          <i
-            class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
-            data-test="DesignSystem-Collapsible--FooterIcon"
-            role="button"
-            style="font-size: 16px; width: 16px;"
+          <style />
+          <div
+            class="OutsideClick PopperWrapper-trigger"
           >
-            keyboard_arrow_right_round
-          </i>
+            <i
+              class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
+              data-test="DesignSystem-Collapsible--FooterIcon"
+              role="button"
+              style="font-size: 16px; width: 16px;"
+            >
+              keyboard_arrow_right_round
+            </i>
+          </div>
         </div>
       </div>
     </div>
@@ -118,14 +128,19 @@ exports[`Collapsible component
           role="button"
           tabindex="0"
         >
-          <i
-            class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
-            data-test="DesignSystem-Collapsible--FooterIcon"
-            role="button"
-            style="font-size: 16px; width: 16px;"
+          <style />
+          <div
+            class="OutsideClick PopperWrapper-trigger"
           >
-            keyboard_arrow_left_round
-          </i>
+            <i
+              class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
+              data-test="DesignSystem-Collapsible--FooterIcon"
+              role="button"
+              style="font-size: 16px; width: 16px;"
+            >
+              keyboard_arrow_left_round
+            </i>
+          </div>
         </div>
       </div>
     </div>
@@ -163,14 +178,19 @@ exports[`Collapsible component
           role="button"
           tabindex="0"
         >
-          <i
-            class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
-            data-test="DesignSystem-Collapsible--FooterIcon"
-            role="button"
-            style="font-size: 16px; width: 16px;"
+          <style />
+          <div
+            class="OutsideClick PopperWrapper-trigger"
           >
-            keyboard_arrow_left_round
-          </i>
+            <i
+              class="material-icons material-icons-round Icon px-6 py-4 my-2 cursor-pointer"
+              data-test="DesignSystem-Collapsible--FooterIcon"
+              role="button"
+              style="font-size: 16px; width: 16px;"
+            >
+              keyboard_arrow_left_round
+            </i>
+          </div>
         </div>
       </div>
     </div>

diff --git a/css/src/components/collapsible.css b/css/src/components/collapsible.css
@@ -35,7 +35,6 @@
 .Collapsible-footer {
   padding-top: var(--spacing-m);
   padding-bottom: var(--spacing-m);
-  box-sizing: border-box;
   cursor: pointer;
   display: flex;
 }
@@ -53,7 +52,3 @@
 .Collapsible-footer:active {
   background-color: var(--secondary-light);
 }
-
-.Collapsible-footer--seperator {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
-}