From 2e2fa1df33906023c0aafc0a7111aef22827bfd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Andre=CC=81s=20Granero?=
 <joseandres.granero@devo.com>
Date: Wed, 15 Nov 2023 13:34:21 +0100
Subject: [PATCH] feat: improvements for Icon, InputControl, MenuItem and
 PanelHeader components.

---
 packages/core/src/components/Icon/Icon.tsx                | 1 +
 .../components/InputControl/styled/StyledInputControl.ts  | 7 ++++---
 .../InputControl/styled/StyledInputControlShowPassword.ts | 1 +
 .../Menu/subcomponents/MenuItem/MenuItem.stories.tsx      | 5 +++--
 .../components/Menu/subcomponents/MenuItem/MenuItem.tsx   | 3 ++-
 .../Panel/components/PanelHeader/PanelHeader.tsx          | 8 +++++++-
 6 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/Icon/Icon.tsx b/packages/core/src/components/Icon/Icon.tsx
index d8f978676..e05de17db 100644
--- a/packages/core/src/components/Icon/Icon.tsx
+++ b/packages/core/src/components/Icon/Icon.tsx
@@ -44,6 +44,7 @@ export const Icon: React.FC<IconProps> = ({
         }),
         size: getIconSize(theme)(size),
         title: tooltip,
+        style: { position: 'relative' },
       }}
     >
       {children}
diff --git a/packages/core/src/components/InputControl/styled/StyledInputControl.ts b/packages/core/src/components/InputControl/styled/StyledInputControl.ts
index 326f23add..d9293fe07 100644
--- a/packages/core/src/components/InputControl/styled/StyledInputControl.ts
+++ b/packages/core/src/components/InputControl/styled/StyledInputControl.ts
@@ -60,9 +60,10 @@ export const StyledInputControl = styled.input<StyledInputControlProps>`
     const inputBorderRadius = fieldTokens.shape.borderRadius;
     const inputHeight = fieldTokens.size.height[$size];
     const inputHorPadding = fieldTokens.space.padding.hor[$size];
-    const inputWithIconPadding = hasIcon
-      ? css`calc(${iconSize} + ${inputHorPadding} * 2)`
-      : '0rem';
+    const inputWithIconPadding =
+      hasIcon || hasTypeIcon
+        ? css`calc(${iconSize} + ${inputHorPadding} * 2)`
+        : '0rem';
     const inputWithShowPasswordPadding =
       type === 'password'
         ? css`calc(${showPasswordSize} + ${inputHorPadding} * 2)`
diff --git a/packages/core/src/components/InputControl/styled/StyledInputControlShowPassword.ts b/packages/core/src/components/InputControl/styled/StyledInputControlShowPassword.ts
index c001a380e..6c86f1068 100644
--- a/packages/core/src/components/InputControl/styled/StyledInputControlShowPassword.ts
+++ b/packages/core/src/components/InputControl/styled/StyledInputControlShowPassword.ts
@@ -10,6 +10,7 @@ export const StyledInputControlShowPassword = styled.span<StyledInputControlShow
   right: ${({ $size, theme }) => css`
     ${theme.alias.fields.space.padding.hor[$size]}
   `};
+  display: flex;
   transform: translate(0, -50%);
   z-index: 1;
 `;
diff --git a/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.stories.tsx b/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.stories.tsx
index feacf988e..f20f6fd22 100644
--- a/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.stories.tsx
+++ b/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.stories.tsx
@@ -7,6 +7,7 @@ import { Badge } from '../../../Badge';
 import { Typography } from '../../../Typography';
 import { VFlex } from '../../../VFlex';
 import { ProgressBar } from '../../../ProgressBar';
+import { Box } from '../../../Box';
 import { GITimeZone } from '@devoinc/genesys-icons';
 
 const meta: Meta<typeof Menu.Item> = {
@@ -66,9 +67,9 @@ export const WithAppendPrependAndBottomContent: Story = {
       </Flex>
     ),
     bottomContent: (
-      <Flex as="span" paddingTop="cmp-xs">
+      <Box marginTop="cmp-xs">
         <ProgressBar percent={48} />
-      </Flex>
+      </Box>
     ),
     prependContent: (
       <Flex as="span" paddingRight="cmp-xs">
diff --git a/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.tsx b/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.tsx
index 20bfec26b..fa0baf2fb 100644
--- a/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.tsx
+++ b/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.tsx
@@ -164,6 +164,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
               justifyContent="center"
               childrenFitFullWidth
               spacing="0"
+              minWidth="0"
             >
               <HFlex
                 as="span"
@@ -183,8 +184,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                           : null
                       }
                       size={iconSize}
-                      tooltip="pepepe"
                       role={'img'}
+                      tooltip={ariaLabel || (isLabelString ? label : null)}
                     >
                       {!isFontIcon ? icon : null}
                     </Icon>
diff --git a/packages/core/src/components/Panel/components/PanelHeader/PanelHeader.tsx b/packages/core/src/components/Panel/components/PanelHeader/PanelHeader.tsx
index 102f63156..68f94ad87 100644
--- a/packages/core/src/components/Panel/components/PanelHeader/PanelHeader.tsx
+++ b/packages/core/src/components/Panel/components/PanelHeader/PanelHeader.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 
-import { StyledOverloadCssProps } from '../../../../declarations';
+import {
+  StyledOverloadCssProps,
+  StyledPolymorphicProps,
+} from '../../../../declarations';
 import { PanelFooterProps } from '../PanelFooter';
 import { HeaderSettingsProps, PanelSize } from '../../declarations';
 
@@ -20,6 +23,7 @@ import {
 
 export interface PanelHeaderProps
   extends StyledOverloadCssProps,
+    Pick<StyledPolymorphicProps, 'as'>,
     Omit<HeaderSettingsProps, 'renderContent'>,
     Pick<PanelHeaderContainerProps, 'hasBoxShadow'>,
     Pick<
@@ -46,6 +50,7 @@ export interface PanelHeaderProps
 
 export const InternalPanelHeader: React.FC<PanelHeaderProps> = ({
   actions,
+  as,
   bordered,
   children,
   closeSettings,
@@ -64,6 +69,7 @@ export const InternalPanelHeader: React.FC<PanelHeaderProps> = ({
 }) => {
   return (
     <PanelHeaderContainer
+      as={as}
       hasBoxShadow={hasBoxShadow}
       bordered={bordered}
       hasSubtitle={Boolean(subtitle)}