Fix: right icon position (#223)

Co-authored-by: vin0401 <[email protected]>

assets/js/src/core/components/dropdown-menu/dropdown-menu.styles.tsx

@@ -15,18 +15,39 @@ import { createStyles } from 'antd-style'
 
 export const useStyle = createStyles(({ token, css }) => {
   return {
-    'menu-icon': css`
+    'menu-icon-left': css`
       .anticon& {
           vertical-align: middle;
           margin-right: ${token.marginXS}px;
       }
     `,
+
+    'menu-icon': css`
+      .anticon& {
+          vertical-align: middle;
+      }
+    `,
+
     label: css`
         margin-right: ${token.marginXS}px;
     `,
+
     'flexbox-start-end': css`
-        display: flex;
-        justify-content: space-between;
-      `
+      display: flex;
+      justify-content: space-between;
+    `,
+
+    flexbox: css`
+      display: flex;
+    `,
+
+    'left-area': css`
+      margin-right: 22px;
+    `,
+
+    'icon-placeholder': css`
+      width: 16px;
+      height: 16px;
+    `
   }
 }, { hashPriority: 'low' })

assets/js/src/core/components/dropdown-menu/dropdown-menu.tsx

@@ -47,6 +47,10 @@ export const DropdownMenu = ({
 ): React.JSX.Element => {
   const items: MenuProps['items'] = []
 
+  const menuHasAnyIconRight = dropdownItems.find((item: DropdownMenuItemProps): boolean =>
+    item.iconRight !== null && item.iconRight !== undefined
+  ) !== undefined
+
   dropdownItems.forEach((item: DropdownMenuItemProps, index: number): void => {
     items.push(
       {
@@ -55,6 +59,7 @@ export const DropdownMenu = ({
           <MenuItemContent
             index={ index }
             item={ item }
+            menuHasAnyIconRight={ menuHasAnyIconRight }
           />
         )
       }
@@ -73,14 +78,13 @@ export const DropdownMenu = ({
 }
 
 function MenuItemContent (prop): React.JSX.Element {
-  const { item } = prop
-  const { index } = prop
+  const { item, index, menuHasAnyIconRight } = prop
   const { styles } = useStyle()
   const iconOptions = { width: '16px', height: '16px' }
 
   const iconLeft = (
     <Icon
-      className={ styles['menu-icon'] }
+      className={ styles['menu-icon-left'] }
       name={ item.iconLeft }
       options={ iconOptions }
     />
@@ -94,7 +98,7 @@ function MenuItemContent (prop): React.JSX.Element {
         role={ 'menuitem' }
         tabIndex={ index * 2 }
       >
-        <div>
+        <div className={ styles['left-area'] }>
           {iconLeft}
           <span className={ styles.label }>{item.label}</span>
           {
@@ -121,13 +125,15 @@ function MenuItemContent (prop): React.JSX.Element {
 
   return (
     <div
+      className={ styles.flexbox + ' ' + styles['left-area'] }
       onClick={ item.onClick }
       onKeyDown={ onKeyEnterExecuteClick }
       role={ 'menuitem' }
       tabIndex={ index }
     >
       {iconLeft}
       {item.label}
+      {menuHasAnyIconRight as boolean && <div className={ styles['icon-placeholder'] } /> }
     </div>
   )
 }

public/core-dll/entrypoints.json

@@ -5,7 +5,7 @@
         "/bundles/pimcorestudioui/core-dll/core-dll.63b795ca.css"
       ],
       "js": [
-        "/bundles/pimcorestudioui/core-dll/core-dll.9448a12c.js"
+        "/bundles/pimcorestudioui/core-dll/core-dll.a1ec41bc.js"
       ]
     }
   }