Add truncate prop to Text and Heading

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/witty-weeks-boil.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new truncate prop to Text and Heading components in Canon.

packages/canon/css/components.css

@@ -403,6 +403,12 @@
   color: var(--canon-fg-success);
 }
 
+.canon-Text[data-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .canon-Heading {
   font-family: var(--canon-font-regular);
   color: var(--canon-fg-primary);
@@ -441,6 +447,12 @@
   font-weight: var(--canon-font-weight-bold);
 }
 
+.canon-Heading[data-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .canon-IconButton {
   user-select: none;
   font-family: var(--canon-font-regular);

packages/canon/css/heading.css

@@ -35,3 +35,9 @@
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
+
+.canon-Heading[data-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

packages/canon/css/styles.css

@@ -9627,6 +9627,12 @@
   color: var(--canon-fg-success);
 }
 
+.canon-Text[data-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .canon-Heading {
   font-family: var(--canon-font-regular);
   color: var(--canon-fg-primary);
@@ -9665,6 +9671,12 @@
   font-weight: var(--canon-font-weight-bold);
 }
 
+.canon-Heading[data-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .canon-IconButton {
   user-select: none;
   font-family: var(--canon-font-regular);

packages/canon/css/text.css

@@ -51,3 +51,9 @@
 .canon-Text[data-color="success"] {
   color: var(--canon-fg-success);
 }
+
+.canon-Text[data-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

packages/canon/report.api.md

@@ -627,6 +627,8 @@ export interface HeadingProps {
   // (undocumented)
   style?: React.CSSProperties;
   // (undocumented)
+  truncate?: boolean;
+  // (undocumented)
   variant?:
     | 'display'
     | 'title1'
@@ -1250,6 +1252,8 @@ export interface TextProps {
   // (undocumented)
   style?: CSSProperties;
   // (undocumented)
+  truncate?: boolean;
+  // (undocumented)
   variant?:
     | 'subtitle'
     | 'body'

packages/canon/src/components/Heading/Heading.stories.tsx

@@ -50,6 +50,14 @@ export const AllVariants: Story = {
   ),
 };
 
+export const Truncate: Story = {
+  args: {
+    ...Title1.args,
+    truncate: true,
+    style: { maxWidth: '400px' },
+  },
+};
+
 export const Responsive: Story = {
   args: {
     variant: {

packages/canon/src/components/Heading/Heading.tsx

@@ -27,6 +27,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
       children,
       variant = 'title1',
       as = 'h1',
+      truncate,
       className,
       ...restProps
     } = props;
@@ -47,6 +48,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
         ref={ref}
         className={clsx('canon-Heading', className)}
         data-variant={responsiveVariant}
+        data-truncate={truncate}
         {...restProps}
       >
         {children}

packages/canon/src/components/Heading/styles.css

@@ -51,3 +51,9 @@
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
+
+.canon-Heading[data-truncate] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

packages/canon/src/components/Heading/types.ts

@@ -33,6 +33,7 @@ export interface HeadingProps {
         >
       >;
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  truncate?: boolean;
   className?: string;
   style?: React.CSSProperties;
 }

packages/canon/src/components/Text/Text.stories.tsx

@@ -78,6 +78,13 @@ export const AllColors: Story = {
   ),
 };
 
+export const Truncate: Story = {
+  args: {
+    ...Default.args,
+    truncate: true,
+  },
+};
+
 export const Responsive: Story = {
   args: {
     ...Default.args,

packages/canon/src/components/Text/Text.tsx

@@ -30,6 +30,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
       color = 'primary',
       style,
       className,
+      truncate,
       ...restProps
     } = props;
 
@@ -45,6 +46,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
         data-variant={responsiveVariant}
         data-weight={responsiveWeight}
         data-color={responsiveColor}
+        data-truncate={truncate}
         style={style}
         {...restProps}
       >

packages/canon/src/components/Text/styles.css

@@ -67,3 +67,9 @@
 .canon-Text[data-color='success'] {
   color: var(--canon-fg-success);
 }
+
+.canon-Text[data-truncate] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

packages/canon/src/components/Text/types.ts

@@ -39,6 +39,7 @@ export interface TextProps {
           'primary' | 'secondary' | 'danger' | 'warning' | 'success'
         >
       >;
+  truncate?: boolean;
   className?: string;
   style?: CSSProperties;
 }