From 0b9ab3b5be0bd9ede575a459e8e37f5a37f6220a Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 5 Dec 2024 13:25:13 -0600 Subject: [PATCH 01/10] fix: pageheader subtitle truncation visibility --- .../src/components/PageHeader/_page-header.scss | 6 ------ .../ibm-products/src/components/PageHeader/PageHeader.tsx | 4 +++- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss index fa1adf8ebe..f44f2c5b19 100644 --- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss +++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss @@ -538,14 +538,8 @@ $right-section-alt-width: 100% - $left-section-alt-width; } .#{$block-class}__subtitle-row { - display: -webkit-box; - overflow: hidden; - max-width: 100%; margin-top: $spacing-03; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - @include breakpoint-up('md') { max-width: $left-section-std-width; } diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx index aa2c4a6cc1..d8619e6dce 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx @@ -51,6 +51,7 @@ import cx from 'classnames'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; +import { StringFormatter } from '../StringFormatter'; const componentName = 'PageHeader'; @@ -1038,7 +1039,8 @@ export let PageHeader = React.forwardRef( {subtitle ? ( - {subtitle} + {/**@ts-ignore*/} + ) : null} From 76e52e93e688de6205d1287299c2e85072b26dc2 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Fri, 6 Dec 2024 10:19:09 -0600 Subject: [PATCH 02/10] fix: pageheader useoverflow hook --- .../components/PageHeader/_page-header.scss | 22 ++++++++++ .../src/components/PageHeader/PageHeader.tsx | 40 ++++++++++++++++--- .../components/PageHeader/PageHeaderTitle.js | 24 ++++------- .../PageHeader/hooks/useOverflow.ts | 29 ++++++++++++++ 4 files changed, 92 insertions(+), 23 deletions(-) create mode 100644 packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss index f44f2c5b19..ae349bd8f4 100644 --- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss +++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss @@ -553,6 +553,28 @@ $right-section-alt-width: 100% - $left-section-alt-width; @include type.type-style('body-01'); } + .#{$block-class}__subtitle-tooltip .cds--definition-term { + border-bottom: 0; + letter-spacing: inherit; + } + + .#{$block-class}__subtitle-tooltip + .cds--popover-content.cds--definition-tooltip { + max-inline-size: fit-content; + } + + .#{$block-class}__subtitle-text { + display: block; + white-space: nowrap; + } + + .#{$block-class}__subtitle-text--long { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + .#{$block-class}__available-row { @include type.type-style('body-01'); diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx index d8619e6dce..f00152987e 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx @@ -15,6 +15,7 @@ import { usePrefix, ButtonProps, PopoverAlignment, + DefinitionTooltip, } from '@carbon/react'; import { TagProps } from '@carbon/react/lib/components/Tag/Tag'; import React, { @@ -51,7 +52,7 @@ import cx from 'classnames'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; -import { StringFormatter } from '../StringFormatter'; +import useOverflow from './hooks/useOverflow'; const componentName = 'PageHeader'; @@ -902,12 +903,21 @@ export let PageHeader = React.forwardRef( const displayedBreadcrumbs = getBreadcrumbs(); + const longTitleRef = useRef(null); + const titleRef = useRef(null); + + const isEllipsisApplied = useOverflow({ + longRef: longTitleRef, + shortRef: titleRef, + text: subtitle, + }); + return ( <>
+ />
) : null} - {subtitle ? ( + {subtitle && ( - {/**@ts-ignore*/} - + {isEllipsisApplied ? ( + + + {subtitle} + + + ) : ( + + {subtitle} + + )} - ) : null} + )} {children ? ( diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js index 188776d5f8..59026cd8ae 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js @@ -5,11 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useLayoutEffect, useRef, useState } from 'react'; +import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { DefinitionTooltip, SkeletonText } from '@carbon/react'; import { EditInPlace } from '../EditInPlace'; +import useOverflow from './hooks/useOverflow'; /** * @@ -39,25 +40,14 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { let titleText; let isEditable = !!onSave; - const [isEllipsisApplied, setIsEllipsisApplied] = useState(); const longTitleRef = useRef(undefined); const titleRef = useRef(undefined); - useLayoutEffect(() => { - setIsEllipsisApplied(isEllipsisActive()); - }, [longTitleRef, titleRef, title]); - - const isEllipsisActive = () => { - if (longTitleRef.current) { - return ( - longTitleRef.current?.offsetWidth < longTitleRef.current?.scrollWidth - ); - } else if (titleRef.current) { - return titleRef.current?.offsetWidth < titleRef.current?.scrollWidth; - } - - return false; - }; + const isEllipsisApplied = useOverflow({ + longRef: longTitleRef, + shortRef: titleRef, + text, + }); if (text || !content) { if (text === undefined && typeof title === 'string') { diff --git a/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts b/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts new file mode 100644 index 0000000000..9382d8032d --- /dev/null +++ b/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts @@ -0,0 +1,29 @@ +import { useLayoutEffect, useState, RefObject, ReactNode } from 'react'; + +interface Props { + longRef: RefObject; + shortRef: RefObject; + text: string | ReactNode; +} + +const useOverflow = (props: Props): boolean => { + const { longRef, shortRef, text } = props; + const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); + + useLayoutEffect(() => { + const isEllipsisActive = () => { + if (longRef?.current) { + return longRef.current?.offsetWidth < longRef.current?.scrollWidth; + } else if (shortRef.current) { + return shortRef.current?.offsetWidth < shortRef.current?.scrollWidth; + } + + return false; + }; + setIsEllipsisApplied(isEllipsisActive()); + }, [longRef, shortRef, text]); + + return isEllipsisApplied; +}; + +export default useOverflow; From 1c02cf76801afbfd35e8ec031dba4967c7419241 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Fri, 6 Dec 2024 10:19:44 -0600 Subject: [PATCH 03/10] chore: copyright --- .../src/components/PageHeader/hooks/useOverflow.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts b/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts index 9382d8032d..9094b53799 100644 --- a/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts +++ b/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { useLayoutEffect, useState, RefObject, ReactNode } from 'react'; interface Props { From c2c6b6f707e08b1eb1eed9dcbe8fc23b5f79380d Mon Sep 17 00:00:00 2001 From: David Menendez Date: Wed, 11 Dec 2024 16:42:24 -0600 Subject: [PATCH 04/10] fix: refactor overflow utils and logic --- .../components/PageHeader/_page-header.scss | 5 -- .../PageHeader/PageHeader.stories.jsx | 2 +- .../src/components/PageHeader/PageHeader.tsx | 22 ++++----- .../components/PageHeader/PageHeaderTitle.js | 10 ++-- .../PageHeader/hooks/useOverflow.ts | 36 -------------- .../global/js/utils/replaceWithOverflow.ts | 47 +++++++++++++++++++ 6 files changed, 62 insertions(+), 60 deletions(-) delete mode 100644 packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts create mode 100644 packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss index ae349bd8f4..aef30002f2 100644 --- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss +++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss @@ -564,11 +564,6 @@ $right-section-alt-width: 100% - $left-section-alt-width; } .#{$block-class}__subtitle-text { - display: block; - white-space: nowrap; - } - - .#{$block-class}__subtitle-text--long { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx index 22e6b8fd6b..74ac52968c 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx @@ -486,7 +486,7 @@ const pageActionsOverflowLabel = 'Page actions...'; const subtitle = 'Optional subtitle if necessary'; const longSubtitle = - 'Optional subtitle if necessary, which is very long in this case, but will need to be handled somehow. It just keeps going on and on and on and on and on.'; + 'Optional subtitle if necessary, which is very long in this case, but will need to be handled somehow. It just keeps going on and on and on and on and on and on and on and on and on and on and on.'; const demoSubtitle = 'This report details the monthly authentication failures'; const dummyPageContent = ( diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx index f00152987e..4bc077e8d9 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx @@ -52,7 +52,7 @@ import cx from 'classnames'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; -import useOverflow from './hooks/useOverflow'; +import { replaceOverflowHeight } from '../../global/js/utils/replaceWithOverflow'; const componentName = 'PageHeader'; @@ -903,13 +903,11 @@ export let PageHeader = React.forwardRef( const displayedBreadcrumbs = getBreadcrumbs(); - const longTitleRef = useRef(null); - const titleRef = useRef(null); - - const isEllipsisApplied = useOverflow({ - longRef: longTitleRef, - shortRef: titleRef, - text: subtitle, + const subtitleRef = useRef(null); + const overflowSubtitleRef = useRef(null); + const isOverflowing = replaceOverflowHeight({ + overflowRef: overflowSubtitleRef, + ref: subtitleRef, }); return ( @@ -1049,21 +1047,21 @@ export let PageHeader = React.forwardRef( {subtitle && ( - {isEllipsisApplied ? ( + {isOverflowing ? ( {subtitle} ) : ( {subtitle} diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js index 59026cd8ae..b263e620ac 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js @@ -10,7 +10,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { DefinitionTooltip, SkeletonText } from '@carbon/react'; import { EditInPlace } from '../EditInPlace'; -import useOverflow from './hooks/useOverflow'; +import { replaceOverflowWidth } from '../../global/js/utils/replaceWithOverflow'; /** * @@ -42,11 +42,9 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { const longTitleRef = useRef(undefined); const titleRef = useRef(undefined); - - const isEllipsisApplied = useOverflow({ - longRef: longTitleRef, - shortRef: titleRef, - text, + const isEllipsisApplied = replaceOverflowWidth({ + overflowRef: longTitleRef, + ref: titleRef, }); if (text || !content) { diff --git a/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts b/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts deleted file mode 100644 index 9094b53799..0000000000 --- a/packages/ibm-products/src/components/PageHeader/hooks/useOverflow.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Copyright IBM Corp. 2024 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { useLayoutEffect, useState, RefObject, ReactNode } from 'react'; - -interface Props { - longRef: RefObject; - shortRef: RefObject; - text: string | ReactNode; -} - -const useOverflow = (props: Props): boolean => { - const { longRef, shortRef, text } = props; - const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); - - useLayoutEffect(() => { - const isEllipsisActive = () => { - if (longRef?.current) { - return longRef.current?.offsetWidth < longRef.current?.scrollWidth; - } else if (shortRef.current) { - return shortRef.current?.offsetWidth < shortRef.current?.scrollWidth; - } - - return false; - }; - setIsEllipsisApplied(isEllipsisActive()); - }, [longRef, shortRef, text]); - - return isEllipsisApplied; -}; - -export default useOverflow; diff --git a/packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts b/packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts new file mode 100644 index 0000000000..5ad4217030 --- /dev/null +++ b/packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts @@ -0,0 +1,47 @@ +// +// Copyright IBM Corp. 2024, 2024 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +import { RefObject } from 'react'; + +/** + * These functions are used to calculate if the content of an area is overflowing it's parent. + * Ideally used to replace an element with another if it's overflowing and vice versa. + * Check PageHeader.tsx and PageHeaderTitle.js for example usage. + */ + +type Props = { + /** + * the ref for the element not overflowing + */ + ref: RefObject; + /** + * the ref for the element that is overflowing + */ + overflowRef: RefObject; +}; + +export const replaceOverflowWidth = ({ ref, overflowRef }: Props): boolean => { + if (ref.current) { + return ref.current?.offsetWidth < ref.current?.scrollWidth; + } + if (overflowRef.current) { + return overflowRef.current?.offsetWidth < overflowRef.current?.scrollWidth; + } + return false; +}; + +export const replaceOverflowHeight = ({ ref, overflowRef }: Props): boolean => { + if (ref.current) { + return ref.current?.offsetHeight < ref.current?.scrollHeight; + } + if (overflowRef.current) { + return ( + overflowRef.current?.offsetHeight < overflowRef.current?.scrollHeight + ); + } + return false; +}; From 2126408f590065f4775a681314d6ec4e35d25dd5 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 12 Dec 2024 08:44:10 -0600 Subject: [PATCH 05/10] fix: overflow check refactor --- .../components/PageHeader/_page-header.scss | 5 +- .../src/components/PageHeader/PageHeader.tsx | 31 ++++++------ .../components/PageHeader/PageHeaderTitle.js | 9 ++-- .../src/global/js/utils/checkForOverflow.ts | 24 ++++++++++ .../global/js/utils/replaceWithOverflow.ts | 47 ------------------- 5 files changed, 45 insertions(+), 71 deletions(-) create mode 100644 packages/ibm-products/src/global/js/utils/checkForOverflow.ts delete mode 100644 packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss index aef30002f2..e2878df4b0 100644 --- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss +++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss @@ -553,13 +553,14 @@ $right-section-alt-width: 100% - $left-section-alt-width; @include type.type-style('body-01'); } - .#{$block-class}__subtitle-tooltip .cds--definition-term { + .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term { border-bottom: 0; letter-spacing: inherit; } + // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the header .#{$block-class}__subtitle-tooltip - .cds--popover-content.cds--definition-tooltip { + .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip { max-inline-size: fit-content; } diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx index 4bc077e8d9..da54e3cc2b 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx @@ -52,7 +52,7 @@ import cx from 'classnames'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; -import { replaceOverflowHeight } from '../../global/js/utils/replaceWithOverflow'; +import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow'; const componentName = 'PageHeader'; @@ -905,10 +905,17 @@ export let PageHeader = React.forwardRef( const subtitleRef = useRef(null); const overflowSubtitleRef = useRef(null); - const isOverflowing = replaceOverflowHeight({ - overflowRef: overflowSubtitleRef, - ref: subtitleRef, - }); + const isOverflowing = checkHeightOverflow( + subtitleRef.current || overflowSubtitleRef.current + ); + const subtitleContent = ( + + {subtitle} + + ); return ( <> @@ -1052,20 +1059,10 @@ export let PageHeader = React.forwardRef( definition={subtitle} className={`${blockClass}__subtitle-tooltip`} > - - {subtitle} - + {subtitleContent} ) : ( - - {subtitle} - + subtitleContent )} diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js index b263e620ac..3350370702 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js @@ -10,7 +10,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { DefinitionTooltip, SkeletonText } from '@carbon/react'; import { EditInPlace } from '../EditInPlace'; -import { replaceOverflowWidth } from '../../global/js/utils/replaceWithOverflow'; +import { checkWidthOverflow } from '../../global/js/utils/checkForOverflow'; /** * @@ -42,10 +42,9 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { const longTitleRef = useRef(undefined); const titleRef = useRef(undefined); - const isEllipsisApplied = replaceOverflowWidth({ - overflowRef: longTitleRef, - ref: titleRef, - }); + const isEllipsisApplied = checkWidthOverflow( + titleRef.current || longTitleRef.current + ); if (text || !content) { if (text === undefined && typeof title === 'string') { diff --git a/packages/ibm-products/src/global/js/utils/checkForOverflow.ts b/packages/ibm-products/src/global/js/utils/checkForOverflow.ts new file mode 100644 index 0000000000..f431fe82a7 --- /dev/null +++ b/packages/ibm-products/src/global/js/utils/checkForOverflow.ts @@ -0,0 +1,24 @@ +// +// Copyright IBM Corp. 2024, 2024 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/** + * used to calculate if a function is overflow width or height of an area + */ + +export const checkWidthOverflow = (el: HTMLElement | null): boolean => { + if (el) { + return el?.offsetWidth < el?.scrollWidth; + } + return false; +}; + +export const checkHeightOverflow = (el: HTMLElement | null): boolean => { + if (el) { + return el?.offsetHeight < el?.scrollHeight; + } + return false; +}; diff --git a/packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts b/packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts deleted file mode 100644 index 5ad4217030..0000000000 --- a/packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts +++ /dev/null @@ -1,47 +0,0 @@ -// -// Copyright IBM Corp. 2024, 2024 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -import { RefObject } from 'react'; - -/** - * These functions are used to calculate if the content of an area is overflowing it's parent. - * Ideally used to replace an element with another if it's overflowing and vice versa. - * Check PageHeader.tsx and PageHeaderTitle.js for example usage. - */ - -type Props = { - /** - * the ref for the element not overflowing - */ - ref: RefObject; - /** - * the ref for the element that is overflowing - */ - overflowRef: RefObject; -}; - -export const replaceOverflowWidth = ({ ref, overflowRef }: Props): boolean => { - if (ref.current) { - return ref.current?.offsetWidth < ref.current?.scrollWidth; - } - if (overflowRef.current) { - return overflowRef.current?.offsetWidth < overflowRef.current?.scrollWidth; - } - return false; -}; - -export const replaceOverflowHeight = ({ ref, overflowRef }: Props): boolean => { - if (ref.current) { - return ref.current?.offsetHeight < ref.current?.scrollHeight; - } - if (overflowRef.current) { - return ( - overflowRef.current?.offsetHeight < overflowRef.current?.scrollHeight - ); - } - return false; -}; From c429d8329a6eccbf1dc7d3fb7754be6d5deb6820 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 12 Dec 2024 08:58:35 -0600 Subject: [PATCH 06/10] fix: use one ref instead --- .../src/components/PageHeader/PageHeader.tsx | 10 ++----- .../components/PageHeader/PageHeaderTitle.js | 29 +++++++++---------- 2 files changed, 16 insertions(+), 23 deletions(-) diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx index da54e3cc2b..8d339ec5e2 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx @@ -904,15 +904,9 @@ export let PageHeader = React.forwardRef( const displayedBreadcrumbs = getBreadcrumbs(); const subtitleRef = useRef(null); - const overflowSubtitleRef = useRef(null); - const isOverflowing = checkHeightOverflow( - subtitleRef.current || overflowSubtitleRef.current - ); + const isOverflowing = checkHeightOverflow(subtitleRef.current); const subtitleContent = ( - + {subtitle} ); diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js index 3350370702..f525178b7d 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js @@ -40,11 +40,8 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { let titleText; let isEditable = !!onSave; - const longTitleRef = useRef(undefined); - const titleRef = useRef(undefined); - const isEllipsisApplied = checkWidthOverflow( - titleRef.current || longTitleRef.current - ); + const titleRef = useRef(); + const isEllipsisApplied = checkWidthOverflow(titleRef.current); if (text || !content) { if (text === undefined && typeof title === 'string') { @@ -53,6 +50,16 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { } const TitleIcon = icon; + const titleContent = ( + + {text} + + ); + titleInnards = ( <> {icon && !loading ? ( @@ -84,18 +91,10 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { definition={text} className={`${blockClass}__tooltip`} > - - {text} - + {titleContent} ) : ( - - {text} - + titleContent )} ); From ee199c44b0d5cae9ccd6ab7c4dca67ba387f1177 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 12 Dec 2024 09:05:21 -0600 Subject: [PATCH 07/10] fix: remove unnecessary title attribute --- .../src/components/PageHeader/PageHeaderTitle.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js index f525178b7d..a9e99255df 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js @@ -49,13 +49,16 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { asText = title; } const TitleIcon = icon; + console.log( + 'cheese', + isEllipsisApplied, + loading, + 'final!! =', + !isEllipsisApplied && !loading + ); const titleContent = ( - + {text} ); From e7a3117504f1b3c75f369a7902affd868670ad23 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 12 Dec 2024 09:22:37 -0600 Subject: [PATCH 08/10] fix: remove console log oops --- .../src/components/PageHeader/PageHeaderTitle.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js index a9e99255df..c0d8371e86 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js @@ -49,13 +49,6 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => { asText = title; } const TitleIcon = icon; - console.log( - 'cheese', - isEllipsisApplied, - loading, - 'final!! =', - !isEllipsisApplied && !loading - ); const titleContent = ( From d43f8a8bdc8b609995660e655c10dcb340d6c626 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 12 Dec 2024 14:23:41 -0600 Subject: [PATCH 09/10] fix: add testing --- .../utils/__tests__/checkForOverflow.test.js | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js diff --git a/packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js b/packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js new file mode 100644 index 0000000000..2144e23e88 --- /dev/null +++ b/packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js @@ -0,0 +1,40 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { checkWidthOverflow, checkHeightOverflow } from '../checkForOverflow'; + +const normalElm = { + offsetWidth: 200, + scrollWidth: 100, + offsetHeight: 200, + scrollHeight: 100, +}; + +const overflowElm = { + offsetWidth: 100, + scrollWidth: 200, + offsetHeight: 100, + scrollHeight: 200, +}; + +describe('checkForOverflow', () => { + beforeEach(() => { + jest.resetAllMocks(); + }); + + it('detects width overflow', () => { + expect(checkWidthOverflow(normalElm)).toBe(false); + expect(checkWidthOverflow(overflowElm)).toBe(true); + expect(checkWidthOverflow()).toBe(false); + }); + + it('detects height overflow', () => { + expect(checkHeightOverflow(normalElm)).toBe(false); + expect(checkHeightOverflow(overflowElm)).toBe(true); + expect(checkHeightOverflow()).toBe(false); + }); +}); From 468f657038eff7bf5add611b0f270458a758d5bf Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 12 Dec 2024 14:27:05 -0600 Subject: [PATCH 10/10] fix: description --- packages/ibm-products/src/global/js/utils/checkForOverflow.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ibm-products/src/global/js/utils/checkForOverflow.ts b/packages/ibm-products/src/global/js/utils/checkForOverflow.ts index f431fe82a7..386389d4b2 100644 --- a/packages/ibm-products/src/global/js/utils/checkForOverflow.ts +++ b/packages/ibm-products/src/global/js/utils/checkForOverflow.ts @@ -6,7 +6,7 @@ // /** - * used to calculate if a function is overflow width or height of an area + * used to calculate if a element is overflowing the width or height of an area */ export const checkWidthOverflow = (el: HTMLElement | null): boolean => {