fix(AppFrame): nav bar scroll fix and sub nav chevron update (#1414)

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 {

packages/react-components/src/components/AppFrame/components/NavigationItem/NavigationItem.tsx

@@ -96,7 +96,7 @@ export const NavigationItem: React.FC<INavigationItemProps> = ({
               {icon}
               {isMobileViewEnabled && label}
             </a>
-            {badge && getBadge(badge, id)}
+            {!!badge && getBadge(badge, id)}
           </>
         }
       >

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;
     }
   }
 

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;

packages/react-components/src/components/AppFrame/components/SideNavigationItem/SideNavigationItem.tsx

@@ -98,7 +98,11 @@ export const SideNavigationItem: React.FC<ISideNavigationItemProps> = ({
             {label}
           </span>
         )}
-        {rightNode}
+        {rightNode && (
+          <span className={styles[`${baseClass}__right-node`]}>
+            {rightNode}
+          </span>
+        )}
       </a>
     </li>
   );

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;

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}
       >
         <Icon
-          className={styles[`${baseClass}__search-icon`]}
+          className={cx(
+            styles[`${baseClass}__search-icon`],
+            styles[`${baseClass}__search-icon--${size}`]
+          )}
           source={Search}
           disabled={isDisabled}
           kind="primary"
@@ -153,6 +157,7 @@ export const SearchInput = React.forwardRef<
           as="div"
           className={cx(
             styles[inputWrapperClass],
+            styles[`${inputWrapperClass}--${size}`],
             cropOnBlur && styles[`${inputWrapperClass}--crop`]
           )}
         >

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) {