fix(ProductiveCard): with overflow tooltip issue (#5803)

* fix(ProductiveCard): with-overflow-tooltip-issue * fix(ProductiveCard): add default value for empty iconDescription * fix(ProductiveCard): inconDescription default value update per comment
carbon-design-system · Aug 7, 2024 · 413b210 · 413b210
1 parent 61857e5
commit 413b210
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/ibm-products/src/components/Card/Card.tsx b/packages/ibm-products/src/components/Card/Card.tsx
@@ -78,6 +78,7 @@ interface CardProp extends PropsWithChildren {
   secondaryButtonPlacement?: 'top' | 'bottom';
   secondaryButtonText?: string;
   sequence?: number;
+  iconDescription?: string;
 
   /**
    * **Experimental?** For all cases a `Slug` component can be provided.
@@ -132,6 +133,7 @@ export const Card = forwardRef(
       sequence,
       title,
       titleSize = 'default',
+      iconDescription = 'Options',
 
       // Collect any other property values passed in.
       ...rest
@@ -170,6 +172,7 @@ export const Card = forwardRef(
               direction={pos}
               flipped
               aria-label={overflowAriaLabel}
+              iconDescription={iconDescription}
             >
               {overflowActions.map(({ id, ...rest }) => (
                 <OverflowMenuItem key={id} {...rest} />

diff --git a/packages/ibm-products/src/components/ProductiveCard/ProductiveCard.stories.jsx b/packages/ibm-products/src/components/ProductiveCard/ProductiveCard.stories.jsx
@@ -162,6 +162,7 @@ LabelOnly.args = {
 export const WithOverflow = Template.bind({});
 WithOverflow.args = {
   ...defaultProps,
+  iconDescription: 'Option',
   overflowAriaLabel: 'Overflow menu',
   overflowActions: [
     {

diff --git a/packages/ibm-products/src/components/ProductiveCard/ProductiveCard.tsx b/packages/ibm-products/src/components/ProductiveCard/ProductiveCard.tsx
@@ -138,11 +138,16 @@ interface ProductiveCardProps extends PropsWithChildren {
    * Determines title size
    */
   titleSize?: 'default' | 'large';
+
+  /**
+   * Tooltip icon description
+   */
+  iconDescription?: string;
 }
 
 export let ProductiveCard = forwardRef(
   (
-    { actionsPlacement = 'top', ...rest }: ProductiveCardProps,
+    { actionsPlacement = 'top', iconDescription, ...rest }: ProductiveCardProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const validProps = prepareProps(rest, [
@@ -155,7 +160,13 @@ export let ProductiveCard = forwardRef(
     ]);
     return (
       <Card
-        {...{ ...validProps, actionsPlacement, ref, productive: true }}
+        {...{
+          ...validProps,
+          iconDescription,
+          actionsPlacement,
+          ref,
+          productive: true,
+        }}
         {...getDevtoolsProps(componentName)}
       />
     );
@@ -204,6 +215,10 @@ ProductiveCard.propTypes = {
     PropTypes.object,
     PropTypes.node,
   ]),
+  /**
+   * Tooltip icon description
+   */
+  iconDescription: PropTypes.string,
   /**
    * Optional label for the top of the card
    */