*fix app sidebar item adornment alignment

hazelcast · Sep 19, 2024 · db3f57b · db3f57b
1 parent 96f65ed
commit db3f57b
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 4 deletions.
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed_With_Scroll.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed_With_Scroll.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Default.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_With_Scroll.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_With_Scroll.png
diff --git a/packages/ui/__stories__/AppSidebar.stories.tsx b/packages/ui/__stories__/AppSidebar.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Story } from '@storybook/react'
-import { Disc, HardDrive, Wifi, Activity, Droplet, Airplay } from 'react-feather'
+import { Disc, AlertTriangle, HardDrive, Wifi, Activity, Droplet, Airplay } from 'react-feather'
 
 import {
   AppSidebar,
@@ -10,6 +10,7 @@ import {
   AppSidebarProps,
   AppSidebarFavorites,
 } from '../src/AppSidebar'
+import { Icon } from '../src/Icon'
 
 export default {
   title: 'App/Sidebar',
@@ -24,9 +25,10 @@ const Template: Story<Partial<AppSidebarProps>> = (props) => (
       <AppSidebarItem title="Wan healthcheck replication" />
       <AppSidebarItem title="Test 2" />
     </AppSidebarSection>
-    <AppSidebarSection active={false} id="cluster" title="Cluster" ariaLabel="cluster" icon={HardDrive}>
+    <AppSidebarSection active id="cluster" title="Cluster" ariaLabel="cluster" icon={HardDrive}>
       <AppSidebarItem id="2" title="Cluster-1" adornment={<AppSidebarMenuItemCounter>13</AppSidebarMenuItemCounter>} />
       <AppSidebarItem title="Cluster-2" adornment={<AppSidebarMenuItemCounter>3</AppSidebarMenuItemCounter>} />
+      <AppSidebarItem title="Maps" adornment={<Icon size="small" icon={AlertTriangle} />} />
     </AppSidebarSection>
     <AppSidebarSection active={false} id="members" title="Memebers" ariaLabel="memebers" icon={Wifi}>
       <AppSidebarItem title="Cluster-1" adornment={<AppSidebarMenuItemCounter>13</AppSidebarMenuItemCounter>} />

diff --git a/packages/ui/src/AppSidebar/AppSidebarItem/AppSidebarItem.tsx b/packages/ui/src/AppSidebar/AppSidebarItem/AppSidebarItem.tsx
@@ -21,6 +21,7 @@ export type AppSidebarItemProps = {
   onClick?: () => void
   available?: boolean
   adornment?: ReactNode
+  adornmentClassName?: string
 } & DataTestProp &
   ({ disabled?: never; disabledTooltip?: never } | { disabled: boolean; disabledTooltip: string }) &
   ({ icon?: never; iconAriaLabel?: never } | { icon: FeatherIcon; iconAriaLabel: string })
@@ -38,6 +39,7 @@ export const AppSidebarItem = ({
   color = 'light',
   adornment,
   available,
+  adornmentClassName,
   'data-test': dataTest,
 }: AppSidebarItemProps) => {
   const { isOpen } = useContext(appSidebarContext)
@@ -65,7 +67,7 @@ export const AppSidebarItem = ({
               {icon && <Icon size="medium" icon={icon} ariaLabel={iconAriaLabel} className={styles.icon} />}
               {title}
               {(adornment || available !== undefined) && (
-                <div className={styles.adornment}>
+                <div className={cn(styles.adornment, adornmentClassName)}>
                   {adornment}
                   {available !== undefined && <span className={cn(styles.status, { [styles.available]: available })} />}
                 </div>

diff --git a/packages/ui/src/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.module.scss b/packages/ui/src/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.module.scss
@@ -12,7 +12,6 @@
   height: c.$grid * 4;
   padding: math.div(c.$grid, 2);
   font-size: c.$fontSizeBodyTiny;
-  margin-right: c.$grid * 1.5;
 
   &:hover {
     color: #353d49;

diff --git a/packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSection.module.scss b/packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSection.module.scss
@@ -39,6 +39,10 @@ $sideBarMenuSectionTransitionMaxHeight: 1000px;
 
 .toggle {
   margin-bottom: c.$grid;
+
+  .adornment {
+    margin-right: -#{c.$grid * 1.5};
+  }
 }
 
 .transitionLeave {

diff --git a/packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.tsx b/packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.tsx
@@ -81,6 +81,7 @@ export const AppSidebarSectionExpandable = ({
         onClick={handleClick}
         active={active}
         className={styles.toggle}
+        adornmentClassName={styles.adornment}
         adornment={<Icon data-test="sidebar-menu-section-chevron" size="medium" containerClassName={styles.icon} {...chevronButtonProps} />}
         data-test={dataTest}
       />