feat: improvements for Icon, InputControl, MenuItem and PanelHeader c…

…omponents.
DevoInc · Nov 15, 2023 · 2e2fa1d · 2e2fa1d
1 parent d56d45b
commit 2e2fa1d
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)}