fix(CreateFullPage): breadcrumb tooltip visibility issue (#6064)

carbon-design-system · Sep 20, 2024 · 03eadd2 · 03eadd2
1 parent ba29c09
commit 03eadd2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx b/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx
@@ -568,6 +568,7 @@ createFullPageWithHeader.args = {
     { key: '3', label: 'Breadcrumb 4', isCurrentPage: true },
   ],
   maxVisibleBreadcrumbs: 3,
+  breadcrumbOverflowTooltipAlign: 'right',
 };
 
 export const createFullPageWithStepInErrorState = TemplateWithError.bind({});
@@ -818,4 +819,5 @@ createFullPageWithGlobalHeader.args = {
     { key: '3', label: 'Breadcrumb 4', isCurrentPage: true },
   ],
   maxVisibleBreadcrumbs: 3,
+  breadcrumbOverflowTooltipAlign: 'right',
 };
diff --git a/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.tsx b/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.tsx
@@ -13,6 +13,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Tooltip,
 } from '@carbon/react';
 // Import portions of React that are needed.
 import React, {
@@ -79,6 +80,8 @@ type CreateFullPageBreadcrumbsProps =
        * Label for open/close overflow button used for breadcrumb items that do not fit
        */
       breadcrumbsOverflowAriaLabel?: never;
+
+      breadcrumbOverflowTooltipAlign?: never;
     }
   | {
       /** The header breadcrumbs */
@@ -88,6 +91,8 @@ type CreateFullPageBreadcrumbsProps =
        * Label for open/close overflow button used for breadcrumb items that do not fit
        */
       breadcrumbsOverflowAriaLabel: string;
+
+      breadcrumbOverflowTooltipAlign?: string;
     };
 
 type CreateFullPageBaseProps = {
@@ -235,6 +240,7 @@ export let CreateFullPage = React.forwardRef(
       noTrailingSlash,
       title,
       secondaryTitle,
+      breadcrumbOverflowTooltipAlign = 'right',
       ...rest
     }: CreateFullPageProps,
     ref: ForwardedRef<HTMLDivElement>
@@ -340,6 +346,7 @@ export let CreateFullPage = React.forwardRef(
             overflowAriaLabel={breadcrumbsOverflowAriaLabel}
             maxVisible={maxVisibleBreadcrumbs}
             className={`${blockClass}__header`}
+            overflowTooltipAlign={breadcrumbOverflowTooltipAlign}
           />
         )}
         <div className={`${blockClass}__influencer-and-body-container`}>
@@ -433,6 +440,11 @@ CreateFullPage.propTypes = {
    */
   backButtonText: PropTypes.string.isRequired,
 
+  /**
+   * align breadcrumb overflow tooltip
+   */
+  breadcrumbOverflowTooltipAlign: Tooltip.propTypes.align,
+
   /** The header breadcrumbs */
   /**@ts-ignore */
   breadcrumbs: PropTypes.arrayOf(

diff --git a/packages/ibm-products/src/components/SimpleHeader/SimpleHeader.js b/packages/ibm-products/src/components/SimpleHeader/SimpleHeader.js
@@ -13,6 +13,7 @@ import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
 import { isRequiredIf } from '../../global/js/utils/props-helper';
+import { Tooltip } from '@carbon/react';
 
 const blockClass = `${pkg.prefix}--simple-header`;
 const componentName = 'SimpleHeader';
@@ -35,6 +36,7 @@ const SimpleHeader = ({
   noTrailingSlash = true,
   maxVisible,
   overflowAriaLabel,
+  overflowTooltipAlign,
   ...rest
 }) => {
   const warnIfNoTitleOrBreadcrumbs = useCallback(() => {
@@ -58,6 +60,7 @@ const SimpleHeader = ({
           breadcrumbs={breadcrumbs}
           maxVisible={maxVisible}
           overflowAriaLabel={overflowAriaLabel}
+          overflowTooltipAlign={overflowTooltipAlign}
         />
       )}
       {title && <h1 className={cx(`${blockClass}__title`)}>{title}</h1>}
@@ -99,6 +102,10 @@ SimpleHeader.propTypes = {
   /** Label for open/close overflow button used for breadcrumb items that do not fit */
   overflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
 
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: Tooltip.propTypes.align,
   /** Header title */
   title: PropTypes.string,
 };