LG-4422: Flip chevron icon and add animation (#2443)

* Flip chevron icon and add animation for expand/collapse UIs * Changeset for expandable-card and menu
mongodb · Aug 9, 2024 · af96e39 · af96e39
1 parent c1b8b63
commit af96e39
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git a/.changeset/many-pots-carry.md b/.changeset/many-pots-carry.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/expandable-card': patch
+'@leafygreen-ui/menu': patch
+---
+
+[LG-4422](https://jira.mongodb.org/browse/LG-4422) Update chevron icon to properly indicate if interaction will expand or collapse and add animation
diff --git a/packages/expandable-card/src/ExpandableCard/ExpandableCard.styles.ts b/packages/expandable-card/src/ExpandableCard/ExpandableCard.styles.ts
@@ -71,6 +71,7 @@ export const iconStyle = css`
   grid-column: 2;
   grid-row: 1;
   color: ${palette.gray.base};
+  transition: transform ${transitionDuration}ms ease-in-out;
 `;
 
 export const iconThemeStyle: Record<Theme, string> = {

diff --git a/packages/expandable-card/src/ExpandableCard/ExpandableCard.tsx b/packages/expandable-card/src/ExpandableCard/ExpandableCard.tsx
@@ -135,7 +135,7 @@ const ExpandableCard = ({
                 aria-label={`${isOpen ? 'collapse' : 'expand'} card`}
                 tabIndex={0}
               >
-                <Icon glyph="ChevronUp" size={24} />
+                <Icon glyph="ChevronDown" size={24} />
               </IconButton>
             )}
           </Transition>

diff --git a/packages/menu/src/SubMenu/SubMenu.styles.ts b/packages/menu/src/SubMenu/SubMenu.styles.ts
@@ -1,11 +1,13 @@
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
 import { spacing, transitionDuration } from '@leafygreen-ui/tokens';
 
 import { LGIDs } from '../constants';
 import { menuItemContainerStyles } from '../MenuItem/MenuItem.styles';
 import { menuColor } from '../styles';
 
+const TRANSITION_DURATION = transitionDuration.default;
+
 export const subMenuContainerClassName = createUniqueClassName(LGIDs.submenu);
 export const subMenuToggleClassName = createUniqueClassName(
   LGIDs.submenu + '-trigger',
@@ -16,13 +18,15 @@ export const subMenuContainerStyles = css`
   position: relative;
 `;
 
-export const getSubmenuToggleStyles = (theme: Theme) => css`
+const getBaseSubmenuToggleStyles = (theme: Theme) => css`
   position: absolute;
   right: ${spacing[300]}px;
   // Ensure the trigger is centered regardless of element height
   top: 50%;
-  transform: translateY(-50%);
+  translate: 0 -50%;
+  rotate: 0deg;
   color: ${menuColor[theme].icon.default};
+  transition: rotate ${TRANSITION_DURATION}ms ease-in-out;
 
   &:hover {
     color: ${menuColor[theme].icon.hover};
@@ -33,13 +37,22 @@ export const getSubmenuToggleStyles = (theme: Theme) => css`
   }
 `;
 
+const submenuToggleExpandedStyle = css`
+  rotate: 180deg;
+`;
+
+export const getSubmenuToggleStyles = (theme: Theme, open: boolean) =>
+  cx(subMenuToggleClassName, getBaseSubmenuToggleStyles(theme), {
+    [submenuToggleExpandedStyle]: open,
+  });
+
 export const getSubmenuListStyles = () => css`
   list-style: none;
   margin: 0;
   padding: 0;
   max-height: 0;
   height: max-content;
   overflow: hidden;
-  transition: max-height ${transitionDuration.default}ms ease-in-out;
+  transition: max-height ${TRANSITION_DURATION}ms ease-in-out;
   position: relative;
 `;
diff --git a/packages/menu/src/SubMenu/SubMenu.tsx b/packages/menu/src/SubMenu/SubMenu.tsx
@@ -12,7 +12,6 @@ import PropTypes from 'prop-types';
 import { useDescendant } from '@leafygreen-ui/descendants';
 import { css, cx } from '@leafygreen-ui/emotion';
 import ChevronDownIcon from '@leafygreen-ui/icon/dist/ChevronDown';
-import ChevronUpIcon from '@leafygreen-ui/icon/dist/ChevronUp';
 import IconButton from '@leafygreen-ui/icon-button';
 import { keyMap } from '@leafygreen-ui/lib';
 import {
@@ -34,7 +33,6 @@ import {
   getSubmenuToggleStyles,
   subMenuContainerClassName,
   subMenuContainerStyles,
-  subMenuToggleClassName,
 } from './SubMenu.styles';
 import { InternalSubMenuProps } from './SubMenu.types';
 import { useChildrenHeight } from './useChildrenHeight';
@@ -100,8 +98,6 @@ export const SubMenu = InferredPolymorphic<InternalSubMenuProps, 'button'>(
     const submenuTriggerRef = useRef<HTMLButtonElement>(null);
     const subMenuHeight = useChildrenHeight(submenuRef, [open]);
 
-    const ChevronIcon = open ? ChevronDownIcon : ChevronUpIcon;
-
     const handleClick: MouseEventHandler = e => {
       if (onClick || rest.href) {
         if (!disabled) {
@@ -210,12 +206,9 @@ export const SubMenu = InferredPolymorphic<InternalSubMenuProps, 'button'>(
             aria-label={open ? 'Close Sub-menu' : 'Open Sub-menu'}
             onClick={handleToggleClick}
             onMouseDownCapture={handleToggleMouseDown}
-            className={cx(
-              subMenuToggleClassName,
-              getSubmenuToggleStyles(theme),
-            )}
+            className={getSubmenuToggleStyles(theme, open)}
           >
-            <ChevronIcon role="presentation" />
+            <ChevronDownIcon role="presentation" />
           </IconButton>
         </li>
         <SubMenuProvider depth={depth + 1} hasIcon={!!rest.glyph}>