chore(tearsheet): added definition tooltip if subtitle has ellipsis

carbon-design-system · Jan 13, 2025 · 633b910 · 633b910
1 parent ca6e937
commit 633b910
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 38 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -2592,7 +2592,7 @@ p.c4p--about-modal__copyright-text:first-child {
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-.c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label {
+.c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-decorator {
   border-color: transparent;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
@@ -2657,10 +2657,10 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--side-panel .c4p--side-panel__header:not(.c4p--side-panel__header--has-title)::before {
   background-color: transparent;
 }
-.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label {
+.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-decorator {
   --c4p--side-panel--title-padding-right: 4rem;
 }
-.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label {
+.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-decorator, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-decorator {
   --c4p--side-panel--title-padding-right: 5rem;
 }
 .c4p--side-panel .c4p--side-panel__animated-scroll-wrapper {
@@ -2756,7 +2756,7 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--side-panel .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
   padding-top: 0.5rem;
 }
-.c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls {
+.c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-decorator .c4p--side-panel--scrolls {
   background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
@@ -2805,7 +2805,8 @@ p.c4p--about-modal__copyright-text:first-child {
   height: 2.5rem;
 }
 .c4p--side-panel .c4p--side-panel__slug-and-close,
-.c4p--side-panel .c4p--side-panel__ai-label-and-close {
+.c4p--side-panel .c4p--side-panel__ai-label-and-close,
+.c4p--side-panel .c4p--side-panel__decorator-and-close {
   position: absolute;
   z-index: 10; /* must be higher than title container border bottom */
   top: 0;
@@ -2815,7 +2816,8 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 @media (prefers-reduced-motion) {
   .c4p--side-panel .c4p--side-panel__slug-and-close,
-  .c4p--side-panel .c4p--side-panel__ai-label-and-close {
+  .c4p--side-panel .c4p--side-panel__ai-label-and-close,
+  .c4p--side-panel .c4p--side-panel__decorator-and-close {
     position: absolute;
   }
 }
@@ -2899,8 +2901,10 @@ p.c4p--about-modal__copyright-text:first-child {
   inset: 0;
 }
 
+/* stylelint-disable-next-line carbon/theme-token-use */
 .c4p--side-panel--has-slug + .c4p--side-panel__overlay,
-.c4p--side-panel--has-ai-label + .c4p--side-panel__overlay {
+.c4p--side-panel--has-ai-label + .c4p--side-panel__overlay,
+.c4p--side-panel--has-decorator + .c4p--side-panel__overlay {
   background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
 }
 
@@ -3080,23 +3084,33 @@ p.c4p--about-modal__copyright-text:first-child {
   letter-spacing: var(--cds-heading-04-letter-spacing, 0);
 }
 .c4p--tearsheet .c4p--tearsheet__header-description {
-  display: -webkit-box;
-  overflow: hidden;
   max-width: 100%;
   margin-top: 1rem;
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
   word-break: break-word;
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet .c4p--tearsheet__header-description {
     max-width: 60%;
   }
 }
+.c4p--tearsheet .c4p--tearsheet__description-tooltip .cds--definition-term {
+  border-bottom: 0;
+  letter-spacing: inherit;
+  word-break: break-word;
+}
+.c4p--tearsheet .c4p--tearsheet__description-tooltip .cds--popover-content.cds--definition-tooltip {
+  max-inline-size: -webkit-fill-available;
+}
+.c4p--tearsheet .c4p--tearsheet__description-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   margin-top: 0.5rem;
 }
@@ -5825,25 +5839,38 @@ th.c4p--datagrid__select-all-toggle-on.button {
   position: relative;
 }
 
-.c4p--card .cds--slug {
+.c4p--card .cds--slug,
+.c4p--card .cds--ai-label {
   position: absolute;
   top: 1rem;
   right: 1rem;
 }
 
+.c4p--card__header__inner-wrapper--decorator {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+.c4p--card__header__inner-wrapper--decorator .cds--slug,
+.c4p--card__header__inner-wrapper--decorator .cds--ai-label {
+  position: relative;
+  top: unset;
+  right: unset;
+}
+
 .c4p--card__header-container--has-slug,
-.c4p--card__header-container--has-ai-label {
+.c4p--card__header-container--has-decorator {
   width: 100%;
   padding-right: 2rem;
 }
 
 .c4p--card__header-container--has-slug.c4p--card__header-container--has-actions,
-.c4p--card__header-container--has-ai-label.c4p--card__header-container--has-actions {
+.c4p--card__header-container--has-decorator.c4p--card__header-container--has-actions {
   padding-right: 2.5rem;
 }
 
 .c4p--card__header-container--has-slug.c4p--card__header-container--large-tile-or-label,
-.c4p--card__header-container--has-ai-label.c4p--card__header-container--large-tile-or-label {
+.c4p--card__header-container--has-decorator.c4p--card__header-container--large-tile-or-label {
   padding-right: 3rem;
 }
 
@@ -9420,12 +9447,7 @@ button.c4p--add-select__global-filter-toggle--open {
   visibility: hidden;
 }
 .c4p--page-header .c4p--page-header__subtitle-row {
-  display: -webkit-box;
-  overflow: hidden;
-  max-width: 100%;
   margin-top: 0.5rem;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
 }
 @media (min-width: 42rem) {
   .c4p--page-header .c4p--page-header__subtitle-row {
@@ -9441,6 +9463,19 @@ button.c4p--add-select__global-filter-toggle--open {
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
+.c4p--page-header .c4p--page-header__subtitle-tooltip .cds--definition-term {
+  border-bottom: 0;
+  letter-spacing: inherit;
+}
+.c4p--page-header .c4p--page-header__subtitle-tooltip .cds--popover-content.cds--definition-tooltip {
+  max-inline-size: fit-content;
+}
+.c4p--page-header .c4p--page-header__subtitle-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .c4p--page-header .c4p--page-header__available-row {
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);

diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
@@ -247,22 +247,35 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header-description {
-    display: -webkit-box;
-    overflow: hidden;
     max-width: 100%;
     margin-top: $spacing-05;
     @include type.type-style('body-compact-01');
-
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
     @include breakpoint-up('md') {
       max-width: 60%;
     }
 
     word-break: break-word;
   }
 
+  .#{$block-class}__description-tooltip .#{$carbon-prefix}--definition-term {
+    border-bottom: 0;
+    letter-spacing: inherit;
+    word-break: break-word;
+  }
+
+  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the description
+  .#{$block-class}__description-tooltip
+    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
+    max-inline-size: -webkit-fill-available;
+  }
+
+  .#{$block-class}__description-text {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
   &.#{$block-class}--narrow .#{$block-class}__header-description {
     margin-top: $spacing-03;
   }

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -15,7 +15,6 @@ import React, {
   ForwardedRef,
   MutableRefObject,
   RefObject,
-  useCallback,
 } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 
@@ -26,10 +25,12 @@ import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
 import { deprecateProp } from '../../global/js/utils/props-helper';
+import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow';
 // Carbon and package components we use.
 import {
   Button,
   ComposedModal,
+  DefinitionTooltip,
   Layer,
   ModalHeader,
   usePrefix,
@@ -288,13 +289,13 @@ export const TearsheetShell = React.forwardRef(
     );
     const modalRefValue = modalRef.current;
 
-    // Function to strip html tags out of a string.
-    const stripTags = useCallback(
-      (input) => input.replace(/<\/?[^>]+(>|$)/g, ''),
-      []
+    const descriptionRef = useRef<HTMLSpanElement>(null);
+    const isOverflowing = checkHeightOverflow(descriptionRef.current);
+    const descriptionContent = (
+      <span ref={descriptionRef} className={`${bc}__description-text`}>
+        {description}
+      </span>
     );
-
-    const titleText = stripTags(String(description));
     const wide = size === 'wide';
 
     // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -485,11 +486,17 @@ export const TearsheetShell = React.forwardRef(
                     >
                       {title}
                     </Wrap>
-                    <Wrap
-                      className={`${bc}__header-description`}
-                      title={titleText}
-                    >
-                      {description}
+                    <Wrap className={`${bc}__header-description`}>
+                      {isOverflowing ? (
+                        <DefinitionTooltip
+                          definition={description}
+                          className={`${bc}__description-tooltip`}
+                        >
+                          {descriptionContent}
+                        </DefinitionTooltip>
+                      ) : (
+                        descriptionContent
+                      )}
                     </Wrap>
                   </Wrap>
                   <Wrap className={`${bc}__header-actions`}>