From 88c6ef5d98dd929f96bb428e4791d775171810e5 Mon Sep 17 00:00:00 2001 From: Sajarin M <68892162+Sajarin-M@users.noreply.github.com> Date: Wed, 7 Dec 2022 18:28:14 +0530 Subject: [PATCH 1/4] [docs] Fix typo (#3138) --- docs/src/docs/theming/mantine-provider.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/docs/theming/mantine-provider.mdx b/docs/src/docs/theming/mantine-provider.mdx index adf704fc810..739df80ba25 100644 --- a/docs/src/docs/theming/mantine-provider.mdx +++ b/docs/src/docs/theming/mantine-provider.mdx @@ -41,7 +41,7 @@ and global styles (`withGlobalStyles`). It is recommended to enable these option - background-color to `theme.colors.dark[7]` in dark color scheme and `theme.white` in light - color to `theme.colors.dark[0]` in dark color scheme and `theme.black` in light - font-family and font-smoothing based on theme -- font-size to `theme.fontSize.md` +- font-size to `theme.fontSizes.md` ```tsx import { MantineProvider } from '@mantine/core'; From c69982e69ddb0674dec4642c8e622a9adcf87324 Mon Sep 17 00:00:00 2001 From: Paul Moss Date: Thu, 8 Dec 2022 21:53:59 +0000 Subject: [PATCH 2/4] Update getLineClamp in Text.styles.ts to support 1 liner --- src/mantine-core/src/Text/Text.styles.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/mantine-core/src/Text/Text.styles.ts b/src/mantine-core/src/Text/Text.styles.ts index 8025ae2e65d..f5359b66674 100644 --- a/src/mantine-core/src/Text/Text.styles.ts +++ b/src/mantine-core/src/Text/Text.styles.ts @@ -62,6 +62,14 @@ function getTextColor({ theme, color, variant }: GetTextColor) { function getLineClamp(lineClamp: number): CSSObject { if (typeof lineClamp === 'number') { + if (lineClamp === 1) { + return { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + }; + } + return { overflow: 'hidden', textOverflow: 'ellipsis', From 8b080f76b87b60f3d9433f6c08970f994b7ee2f3 Mon Sep 17 00:00:00 2001 From: Paul Moss Date: Sun, 11 Dec 2022 17:29:36 +0000 Subject: [PATCH 3/4] Remove getLineClamp update, create truncate param to Text component --- src/mantine-core/src/Text/Text.styles.ts | 23 +++++++++++++++-------- src/mantine-core/src/Text/Text.tsx | 5 +++++ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/mantine-core/src/Text/Text.styles.ts b/src/mantine-core/src/Text/Text.styles.ts index f5359b66674..2dce8d5fd64 100644 --- a/src/mantine-core/src/Text/Text.styles.ts +++ b/src/mantine-core/src/Text/Text.styles.ts @@ -12,6 +12,7 @@ export interface TextStylesParams { variant: 'text' | 'link' | 'gradient'; size: MantineNumberSize; lineClamp: number; + truncate: boolean; inline: boolean; inherit: boolean; underline: boolean; @@ -62,14 +63,6 @@ function getTextColor({ theme, color, variant }: GetTextColor) { function getLineClamp(lineClamp: number): CSSObject { if (typeof lineClamp === 'number') { - if (lineClamp === 1) { - return { - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap' - }; - } - return { overflow: 'hidden', textOverflow: 'ellipsis', @@ -82,6 +75,18 @@ function getLineClamp(lineClamp: number): CSSObject { return null; } +function getTruncate(truncate: boolean): CSSObject { + if (truncate) { + return { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + }; + } + + return null +} + export default createStyles( ( theme, @@ -90,6 +95,7 @@ export default createStyles( variant, size, lineClamp, + truncate, inline, inherit, underline, @@ -108,6 +114,7 @@ export default createStyles( ...theme.fn.fontStyles(), ...theme.fn.focusStyles(), ...getLineClamp(lineClamp), + ...getTruncate(truncate), color: getTextColor({ color, theme, variant }), fontFamily: inherit ? 'inherit' : theme.fontFamily, fontSize: diff --git a/src/mantine-core/src/Text/Text.tsx b/src/mantine-core/src/Text/Text.tsx index 4c84fd52df6..a7526bdaf62 100644 --- a/src/mantine-core/src/Text/Text.tsx +++ b/src/mantine-core/src/Text/Text.tsx @@ -35,6 +35,9 @@ export interface TextProps extends DefaultProps { /** CSS -webkit-line-clamp property */ lineClamp?: number; + /** CSS truncate overflowing text with an ellipsis */ + truncate?: boolean; + /** Sets line-height to 1 for centering */ inline?: boolean; @@ -71,6 +74,7 @@ export const _Text = forwardRef((props, ref) => { align, variant, lineClamp, + truncate, gradient, inline, inherit, @@ -90,6 +94,7 @@ export const _Text = forwardRef((props, ref) => { color, size, lineClamp, + truncate, inline, inherit, underline, From d8d0a8643e928c2c2e78f67d81c0eefb764dc61d Mon Sep 17 00:00:00 2001 From: Paul Moss Date: Sun, 11 Dec 2022 20:33:44 +0000 Subject: [PATCH 4/4] Fix for prettier test failing --- src/mantine-core/src/Text/Text.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mantine-core/src/Text/Text.styles.ts b/src/mantine-core/src/Text/Text.styles.ts index 2dce8d5fd64..06df436616b 100644 --- a/src/mantine-core/src/Text/Text.styles.ts +++ b/src/mantine-core/src/Text/Text.styles.ts @@ -80,11 +80,11 @@ function getTruncate(truncate: boolean): CSSObject { return { overflow: 'hidden', textOverflow: 'ellipsis', - whiteSpace: 'nowrap' + whiteSpace: 'nowrap', }; } - return null + return null; } export default createStyles(