From a3084721c13095b350bf9cd4900a34c6e71cb021 Mon Sep 17 00:00:00 2001 From: Marcin Sawicki Date: Tue, 22 Oct 2024 15:39:15 +0200 Subject: [PATCH] fix(AppFrame): nav bar scroll fix and sub nav chevron update (#1414) --- .../NavigationGroup.module.scss | 2 +- .../NavigationItem/NavigationItem.tsx | 2 +- .../SideNavigationGroup.module.scss | 2 + .../SideNavigationItem.module.scss | 5 ++ .../SideNavigationItem/SideNavigationItem.tsx | 6 ++- .../SearchInput/SearchInput.module.scss | 49 ++++++++++++++++--- .../components/SearchInput/SearchInput.tsx | 7 ++- .../src/hooks/useAnimations.ts | 15 ++---- 8 files changed, 68 insertions(+), 20 deletions(-) diff --git a/packages/react-components/src/components/AppFrame/components/NavigationGroup/NavigationGroup.module.scss b/packages/react-components/src/components/AppFrame/components/NavigationGroup/NavigationGroup.module.scss index 25207dbc3..3c93b4429 100644 --- a/packages/react-components/src/components/AppFrame/components/NavigationGroup/NavigationGroup.module.scss +++ b/packages/react-components/src/components/AppFrame/components/NavigationGroup/NavigationGroup.module.scss @@ -9,7 +9,7 @@ $base-class: 'navigation-group'; list-style: none; &--scrollable { - overflow-y: scroll; + overflow: hidden scroll; scrollbar-width: none; &::-webkit-scrollbar { diff --git a/packages/react-components/src/components/AppFrame/components/NavigationItem/NavigationItem.tsx b/packages/react-components/src/components/AppFrame/components/NavigationItem/NavigationItem.tsx index bb45fb157..ecd798852 100644 --- a/packages/react-components/src/components/AppFrame/components/NavigationItem/NavigationItem.tsx +++ b/packages/react-components/src/components/AppFrame/components/NavigationItem/NavigationItem.tsx @@ -96,7 +96,7 @@ export const NavigationItem: React.FC = ({ {icon} {isMobileViewEnabled && label} - {badge && getBadge(badge, id)} + {!!badge && getBadge(badge, id)} } > diff --git a/packages/react-components/src/components/AppFrame/components/SideNavigationGroup/SideNavigationGroup.module.scss b/packages/react-components/src/components/AppFrame/components/SideNavigationGroup/SideNavigationGroup.module.scss index d344833c6..d5e7c36b9 100644 --- a/packages/react-components/src/components/AppFrame/components/SideNavigationGroup/SideNavigationGroup.module.scss +++ b/packages/react-components/src/components/AppFrame/components/SideNavigationGroup/SideNavigationGroup.module.scss @@ -6,9 +6,11 @@ $transition: all var(--transition-duration-fast-2) ease-in-out; &__chevron { transition: $transition; + opacity: 0.6; &--active { transform: rotate(90deg); + opacity: 1; } } diff --git a/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.module.scss b/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.module.scss index 61712d61b..a8b15af2b 100644 --- a/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.module.scss +++ b/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.module.scss @@ -70,6 +70,11 @@ $base-class: 'side-navigation-item'; } } + &__right-node { + display: inline-block; + flex-shrink: 0; + } + &__label { gap: var(--spacing-2); opacity: 0.6; diff --git a/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.tsx b/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.tsx index c589be646..b2e859da2 100644 --- a/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.tsx +++ b/packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.tsx @@ -98,7 +98,11 @@ export const SideNavigationItem: React.FC = ({ {label} )} - {rightNode} + {rightNode && ( + + {rightNode} + + )} ); diff --git a/packages/react-components/src/components/SearchInput/SearchInput.module.scss b/packages/react-components/src/components/SearchInput/SearchInput.module.scss index 10c989a90..ebcfa85d8 100644 --- a/packages/react-components/src/components/SearchInput/SearchInput.module.scss +++ b/packages/react-components/src/components/SearchInput/SearchInput.module.scss @@ -1,6 +1,7 @@ $base-class: 'search-input'; -$transition: 0.25s ease-in-out; -$transition-with-delay: 0.25s ease-in-out 0.25s; +$transition: var(--transition-duration-fast-2) ease-in-out; +$transition-with-delay: var(--transition-duration-fast-2) ease-in-out + var(--transition-duration-fast-2); .#{$base-class} { box-sizing: border-box; @@ -48,14 +49,26 @@ $transition-with-delay: 0.25s ease-in-out 0.25s; &--collapsable { transition: width $transition, - background $transition-with-delay, + background $transition, border $transition-with-delay; border-color: transparent; background-color: transparent; - width: 42px; &:hover { border-color: transparent; + background-color: var(--surface-opacity-basic-hover); + } + + &--compact { + width: 34px; + } + + &--medium { + width: 38px; + } + + &--large { + width: 46px; } .#{$base-class}__search-icon { @@ -73,6 +86,7 @@ $transition-with-delay: 0.25s ease-in-out 0.25s; &:hover { border-color: var(--border-basic-hover); + background-color: var(--surface-primary-default); } &.#{$base-class}--focused, @@ -90,8 +104,19 @@ $transition-with-delay: 0.25s ease-in-out 0.25s; &__search-icon { position: absolute; justify-content: center; - width: 40px; height: 100%; + + &--compact { + width: 32px; + } + + &--medium { + width: 36px; + } + + &--large { + width: 44px; + } } &__clear-icon { @@ -111,9 +136,21 @@ $transition-with-delay: 0.25s ease-in-out 0.25s; &__input-wrapper { flex: 1 1; - padding: 0 0 0 40px; + padding: 0; width: 100%; + &--compact { + padding-left: 32px; + } + + &--medium { + padding-left: 36px; + } + + &--large { + padding-left: 44px; + } + input { border: 0; background-color: transparent; diff --git a/packages/react-components/src/components/SearchInput/SearchInput.tsx b/packages/react-components/src/components/SearchInput/SearchInput.tsx index 26adf949d..9b945bc2f 100644 --- a/packages/react-components/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-components/src/components/SearchInput/SearchInput.tsx @@ -91,6 +91,7 @@ export const SearchInput = React.forwardRef< isFocused && styles[`${baseClass}--focused`], isDisabled && styles[`${baseClass}--disabled`], isCollapsable && styles[`${baseClass}--collapsable`], + isCollapsable && styles[`${baseClass}--collapsable--${size}`], !isCollapsed && styles[`${baseClass}--collapsable--open`] ); @@ -144,7 +145,10 @@ export const SearchInput = React.forwardRef< onClick={handleClick} > diff --git a/packages/react-components/src/hooks/useAnimations.ts b/packages/react-components/src/hooks/useAnimations.ts index 3ea10bf18..99e03814c 100644 --- a/packages/react-components/src/hooks/useAnimations.ts +++ b/packages/react-components/src/hooks/useAnimations.ts @@ -19,22 +19,17 @@ export const useAnimations = ({ const [isOpen, setIsOpen] = React.useState(isVisible); const [shouldBeVisible, setShouldBeVisible] = React.useState(isVisible); + const handleTransitionEnd = () => setIsMounted(false); + // The main part of the logic responsible for managing the states used to animate the container opening/closing and mounting/unmounting the container elements React.useEffect(() => { const currentElement = elementRef.current; if (!shouldBeVisible && currentElement) { - const handleTransitionEnd = () => setIsMounted(false); - - currentElement.addEventListener('transitionend', handleTransitionEnd); + currentElement.addEventListener('transitionend', handleTransitionEnd, { + once: true, + }); setIsOpen(false); - - return () => { - currentElement.removeEventListener( - 'transitionend', - handleTransitionEnd - ); - }; } if (shouldBeVisible) {