Skip to content

Commit

Permalink
fix: Fix ellipsis clamp lines for SSR [prerelease] (#2484)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MosheZemah
MosheZemah authored Oct 10, 2024
1 parent bea185c commit 0f2c618
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 56 deletions.
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
"monday-ui-style": "0.14.1",
"prop-types": "^15.8.1",
"react-dates": "21.8.0",
"react-inlinesvg": "^3.0.1",
"react-inlinesvg": "^4.1.3",
"react-is": "^16.9.0",
"react-popper": "^2.3.0",
"react-select": "^3.2.0",
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,11 @@ const CustomSvgIcon: FunctionComponent<CustomSvgIconProps> = ({

if (typeof src !== "string") return null;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const SVGComponent = SVG as React.FC<any>;

return (
<SVG
<SVGComponent
innerRef={ref}
{...screenReaderAccessProps}
onClick={onClick}
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/components/Typography/Typography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const Typography: VibeComponent<TypographyProps, HTMLElement> = forwardRef(
const componentRef = useRef(null);
const mergedRef = useMergeRef(ref, componentRef);
const ignoreHeightOverflow = maxLines === 1;
const { ref: overrideRef, class: ellipsisClass } = useEllipsisClass(mergedRef, ellipsis, maxLines);
const { class: ellipsisClass, style: ellipsisStyle } = useEllipsisClass(ellipsis, maxLines);
const overrideTooltipProps = useTooltipProps(
componentRef,
withoutTooltip,
Expand All @@ -81,9 +81,10 @@ const Typography: VibeComponent<TypographyProps, HTMLElement> = forwardRef(
element,
{
id,
style: ellipsisStyle,
"data-testid": dataTestId,
className: cx(styles.typography, styles[color], styles[align], ellipsisClass, className),
ref: overrideRef,
ref: mergedRef,
role,
...htmlAttributes
},
Expand Down
16 changes: 7 additions & 9 deletions packages/core/src/components/Typography/TypographyHooks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import { MutableRefObject } from "react";
import { MutableRefObject, useMemo } from "react";
import { ElementContent } from "../../types";
import useIsOverflowing from "../../hooks/useIsOverflowing/useIsOverflowing";
import { TooltipProps } from "../Tooltip/Tooltip";
import styles from "./Typography.module.scss";

export function useEllipsisClass(ref: MutableRefObject<HTMLElement>, ellipsis: boolean, maxLines: number) {
let ellipsisClass;
const overrideRef = (node: HTMLElement) => {
node?.style.setProperty("--text-clamp-lines", maxLines.toString());
ref.current = node;
};

export function useEllipsisClass(ellipsis: boolean, maxLines = 1) {
let ellipsisClass: string;
// If component contains ellipsis return the fit ellipsis class
if (ellipsis) {
ellipsisClass = maxLines > 1 ? styles.multiLineEllipsis : styles.singleLineEllipsis;
}

return { ref: overrideRef, class: ellipsisClass };
const result = useMemo(() => {
return { class: ellipsisClass, style: { "--text-clamp-lines": maxLines.toString() } };
}, [ellipsisClass, maxLines]);
return result;
}

export function useTooltipProps(
Expand Down
55 changes: 12 additions & 43 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9812,11 +9812,6 @@ execa@^8.0.1:
signal-exit "^4.1.0"
strip-final-newline "^3.0.0"

exenv@^1.2.2:
version "1.2.2"
resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==

exit@^0.1.2:
version "0.1.2"
resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
Expand Down Expand Up @@ -16774,18 +16769,17 @@ react-fast-compare@^3.0.1:
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==

react-from-dom@^0.6.2:
version "0.6.2"
resolved "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz#9da903a508c91c013b55afcd59348b8b0a39bdb4"
integrity sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==
react-from-dom@^0.7.2:
version "0.7.3"
resolved "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.3.tgz#60e75fde2369ceb0a8f87d88f9cfbeb67b730e43"
integrity sha512-9IK6R7+eD1wOAMC2ZCrENev0eK1625cb7vX+cnnOR9LBRNbjKiaJk4ij2zQbcefEXTWjXFhA7CTO1cd8wMONnw==

react-inlinesvg@^3.0.1:
version "3.0.3"
resolved "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-3.0.3.tgz#b52d34869af2f7dd06f459302f5719ff70f0cb44"
integrity sha512-D9wqEyh1+ni07+CP2yaD9nSK11Y2ngd79xudEilX7YHKmUCeP1lXZqFvuLbdOo+m+oEjekd+c0DBc/bj93Lwqg==
react-inlinesvg@^4.1.3:
version "4.1.3"
resolved "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.1.3.tgz#671f083fd78934ec58afa5128460252dcae61177"
integrity sha512-p1+wkr1UQZyLw/3bdpnHO3v3tMNVWyxWnAEY6ML/Ql9ldDYTBTy6HqAyNl7u3au925XPffLMiXKnQrqZeJAldw==
dependencies:
exenv "^1.2.2"
react-from-dom "^0.6.2"
react-from-dom "^0.7.2"

react-input-autosize@^2.2.2:
version "2.2.2"
Expand Down Expand Up @@ -18447,16 +18441,7 @@ string-length@^4.0.1:
char-regex "^1.0.2"
strip-ansi "^6.0.0"

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -18542,7 +18527,7 @@ stringify-entities@^4.0.0:
character-entities-html4 "^2.0.0"
character-entities-legacy "^3.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand All @@ -18563,13 +18548,6 @@ strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1, strip-ansi@^7.1.0:
version "7.1.0"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
Expand Down Expand Up @@ -20412,7 +20390,7 @@ [email protected]:
resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -20430,15 +20408,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down

0 comments on commit 0f2c618

Please sign in to comment.