Skip to content

Commit

Permalink
fix: refactor overflow utils and logic
Browse files Browse the repository at this point in the history
  • Loading branch information
davidmenendez committed Dec 11, 2024
1 parent ef2d05e commit c2c6b6f
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 60 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down
22 changes: 10 additions & 12 deletions packages/ibm-products/src/components/PageHeader/PageHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -903,13 +903,11 @@ export let PageHeader = React.forwardRef(

const displayedBreadcrumbs = getBreadcrumbs();

const longTitleRef = useRef<HTMLSpanElement>(null);
const titleRef = useRef<HTMLSpanElement>(null);

const isEllipsisApplied = useOverflow({
longRef: longTitleRef,
shortRef: titleRef,
text: subtitle,
const subtitleRef = useRef<HTMLSpanElement>(null);
const overflowSubtitleRef = useRef<HTMLSpanElement>(null);
const isOverflowing = replaceOverflowHeight({
overflowRef: overflowSubtitleRef,
ref: subtitleRef,
});

return (
Expand Down Expand Up @@ -1049,21 +1047,21 @@ export let PageHeader = React.forwardRef(
{subtitle && (
<Row className={`${blockClass}__subtitle-row`}>
<Column className={`${blockClass}__subtitle`}>
{isEllipsisApplied ? (
{isOverflowing ? (
<DefinitionTooltip

Check warning on line 1051 in packages/ibm-products/src/components/PageHeader/PageHeader.tsx

View check run for this annotation

Codecov / codecov/patch

packages/ibm-products/src/components/PageHeader/PageHeader.tsx#L1051

Added line #L1051 was not covered by tests
definition={subtitle}
className={`${blockClass}__subtitle-tooltip`}
>
<span
ref={titleRef}
className={`${blockClass}__subtitle-text--long`}
ref={overflowSubtitleRef}
className={`${blockClass}__subtitle-text`}
>
{subtitle}
</span>
</DefinitionTooltip>
) : (
<span
ref={longTitleRef}
ref={subtitleRef}
className={`${blockClass}__subtitle-text`}
>
{subtitle}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
*
Expand Down Expand Up @@ -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) {
Expand Down

This file was deleted.

47 changes: 47 additions & 0 deletions packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts
Original file line number Diff line number Diff line change
@@ -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<HTMLElement>;
/**
* the ref for the element that is overflowing
*/
overflowRef: RefObject<HTMLElement>;
};

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;

Check warning on line 32 in packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts

View check run for this annotation

Codecov / codecov/patch

packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts#L32

Added line #L32 was not covered by tests
}
return false;
};

export const replaceOverflowHeight = ({ ref, overflowRef }: Props): boolean => {
if (ref.current) {
return ref.current?.offsetHeight < ref.current?.scrollHeight;
}
if (overflowRef.current) {
return (

Check warning on line 42 in packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts

View check run for this annotation

Codecov / codecov/patch

packages/ibm-products/src/global/js/utils/replaceWithOverflow.ts#L42

Added line #L42 was not covered by tests
overflowRef.current?.offsetHeight < overflowRef.current?.scrollHeight
);
}
return false;
};

0 comments on commit c2c6b6f

Please sign in to comment.