From af96e3967d37dc47dd6950a45a115d48c0a0189b Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Fri, 9 Aug 2024 09:41:49 -0700 Subject: [PATCH] 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 --- .changeset/many-pots-carry.md | 6 ++++++ .../ExpandableCard/ExpandableCard.styles.ts | 1 + .../src/ExpandableCard/ExpandableCard.tsx | 2 +- packages/menu/src/SubMenu/SubMenu.styles.ts | 21 +++++++++++++++---- packages/menu/src/SubMenu/SubMenu.tsx | 11 ++-------- 5 files changed, 27 insertions(+), 14 deletions(-) create mode 100644 .changeset/many-pots-carry.md diff --git a/.changeset/many-pots-carry.md b/.changeset/many-pots-carry.md new file mode 100644 index 0000000000..a333001937 --- /dev/null +++ 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 index 00b16b8e1a..fbce31f467 100644 --- 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 = { diff --git a/packages/expandable-card/src/ExpandableCard/ExpandableCard.tsx b/packages/expandable-card/src/ExpandableCard/ExpandableCard.tsx index fac6e06a40..c1e1e3e36a 100644 --- 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} > - + )} diff --git a/packages/menu/src/SubMenu/SubMenu.styles.ts b/packages/menu/src/SubMenu/SubMenu.styles.ts index ce5e1023ff..3a3416fa28 100644 --- a/packages/menu/src/SubMenu/SubMenu.styles.ts +++ b/packages/menu/src/SubMenu/SubMenu.styles.ts @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,8 @@ 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,6 +37,15 @@ 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; @@ -40,6 +53,6 @@ export const getSubmenuListStyles = () => css` 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 index 775c6419e7..50534c6e4d 100644 --- 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( const submenuTriggerRef = useRef(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( aria-label={open ? 'Close Sub-menu' : 'Open Sub-menu'} onClick={handleToggleClick} onMouseDownCapture={handleToggleMouseDown} - className={cx( - subMenuToggleClassName, - getSubmenuToggleStyles(theme), - )} + className={getSubmenuToggleStyles(theme, open)} > - +