feat: added subtitle to ModalHeader and style prop to MenuItem and Bu…

…ttonGroup
DevoInc · Oct 18, 2024 · d3a7239 · d3a7239
1 parent 67d4d86
commit d3a7239
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx b/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
@@ -14,6 +14,7 @@ import {
   ButtonGroupIconButton,
   ButtonGroupItem,
 } from './components';
+import { mergeStyles } from '../../helpers';
 
 export interface ButtonGroupProps
   extends Omit<FlexProps, 'children'>,
@@ -36,6 +37,7 @@ export const InternalButtonGroup: React.FC<ButtonGroupProps> = ({
   inline = true,
   justifyContent = 'center',
   size = 'md',
+  style,
   visibilityTrigger,
   ...restFlexProps
 }) => {
@@ -49,7 +51,10 @@ export const InternalButtonGroup: React.FC<ButtonGroupProps> = ({
       gap={gap || `cmp-${FLEX_SPACING_SIZE_MAP[size]}`}
       justifyContent={justifyContent}
       inline={inline}
-      style={buttonGroupMixin({ hidden, theme, visibilityTrigger })}
+      style={mergeStyles(
+        buttonGroupMixin({ hidden, theme, visibilityTrigger }),
+        style,
+      )}
     >
       {React.Children.map(children, (child, idx) => {
         const baseChild = (

diff --git a/...rc/components/Menu/components/MenuItem/components/MenuItemContainer/MenuItemContainer.tsx b/...rc/components/Menu/components/MenuItem/components/MenuItemContainer/MenuItemContainer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type {
+import {
   IButtonAttrs,
   IDataAttrs,
   IFieldAttrs,
@@ -11,6 +11,7 @@ import type {
   ILinkAttrs,
   IMouseEventAttrs,
   INavigationAriaAttrs,
+  IStyledOverloadCss,
   IStyledPolymorphic,
   ITriggerAriaAttrs,
 } from '../../../../../../declarations';
@@ -22,6 +23,7 @@ import { StyledMenuItem } from './StyledMenuItem';
 
 export interface MenuItemContainerProps
   extends IStyledPolymorphic,
+    IStyledOverloadCss,
     IGlobalAttrs,
     IDataAttrs,
     IFieldAttrs,

diff --git a/packages/core/src/components/Modal/components/ModalHeader/ModalHeader.tsx b/packages/core/src/components/Modal/components/ModalHeader/ModalHeader.tsx
@@ -7,10 +7,12 @@ import { ModalContext } from '../../context';
 import { Panel, type PanelHeaderProps } from '../../../Panel';
 import { Flex } from '../../../Flex';
 import { ModalIcon } from '../ModalIcon';
-import { Heading } from '../../../Typography/components/Heading';
+import { Heading } from '../../../Typography/components';
 import { ButtonGroup } from '../../../ButtonGroup';
 import { IconButtonClose } from '../../../IconButton';
 import { mergeStyles } from '../../../../helpers';
+import { Typography } from '../../../Typography';
+import { VFlex } from '../../../VFlex';
 
 export interface ModalHeaderProps
   extends Pick<
@@ -20,6 +22,7 @@ export interface ModalHeaderProps
     | 'children'
     | 'removeSpace'
     | 'style'
+    | 'subtitle'
     | 'title'
     | 'titleTooltip'
   > {
@@ -35,6 +38,7 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
   removeSpace,
   status,
   style,
+  subtitle,
   title,
   titleTooltip,
 }) => {
@@ -54,15 +58,24 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
         <Flex alignItems="center">
           <Flex alignItems="inherit">
             <ModalIcon status={evalStatus} />
-            <Heading
-              size={evalStatus === 'base' ? 'h4' : 'h5'}
-              truncateLine={1}
-              tooltip={
-                titleTooltip || (typeof title === 'string' ? title : null)
-              }
-            >
-              {title}
-            </Heading>
+            <VFlex spacing="cmp-xxs">
+              {title && (
+                <Heading
+                  size={evalStatus === 'base' ? 'h4' : 'h5'}
+                  truncateLine={1}
+                  tooltip={
+                    titleTooltip || (typeof title === 'string' ? title : null)
+                  }
+                >
+                  {title}
+                </Heading>
+              )}
+              {subtitle && (
+                <Typography.Paragraph colorScheme="weak" truncateLine={2}>
+                  {subtitle}
+                </Typography.Paragraph>
+              )}
+            </VFlex>
           </Flex>
           <Flex marginLeft="auto">
             <ButtonGroup size="sm">