Merge branch 'master' into canon-menu-updates

2025-05-16 18:17:47 +01:00
parent d01b8c976a 694fb79e7c
commit 148b354b93
18 changed files with 117 additions and 0 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new truncate prop to Text and Heading components in Canon.
@@ -62,6 +62,22 @@ appearance of the heading.
 </Flex>`}
 />

+### Truncate
+
+The `Heading` component has a `truncate` prop that can be used to truncate the
+heading.
+
+<Snippet
+  py={2}
+  open
+  preview={<HeadingSnippet story="Truncate" />}
+  code={`<Heading style={{ maxWidth: '400px' }} truncate>
+    A man looks at a painting in a museum and says, “Brothers and sisters I
+    have none, but that man&apos;s father is my father's son.” Who is
+    in the painting?
+  </Heading>`}
+/>
+
 ### Responsive

 You can also use the `variant` prop to change the appearance of the text based
@@ -12,6 +12,10 @@ export const headingPropDefs: Record<string, PropDef> = {
    values: ['ReactNode'],
    responsive: false,
  },
+  truncate: {
+    type: 'boolean',
+    default: 'false',
+  },
  ...classNamePropDefs,
  ...stylePropDefs,
 };
@@ -102,6 +102,21 @@ appearance of the text.
  </Flex>`}
 />

+### Truncate
+
+The `Text` component has a `truncate` prop that can be used to truncate the
+text.
+
+<Snippet
+  open
+  preview={<TextSnippet story="Truncate" />}
+  code={`<Text weight="regular" style={{ maxWidth: '600px' }} truncate>
+    A man looks at a painting in a museum and says, “Brothers and sisters I
+    have none, but that man&apos;s father is my father&apos;s son.” Who is
+    in the painting?
+  </Text>`}
+/>
+
 ### Responsive

 You can also use the `variant` prop to change the appearance of the text based
@@ -16,6 +16,10 @@ export const textPropDefs: Record<string, PropDef> = {
    values: ['regular', 'bold'],
    responsive: true,
  },
+  truncate: {
+    type: 'boolean',
+    default: 'false',
+  },
  ...childrenPropDefs,
  ...classNamePropDefs,
  ...stylePropDefs,
@@ -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);
@@ -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;
+}
@@ -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);
@@ -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;
+}
@@ -628,6 +628,8 @@ export interface HeadingProps {
  // (undocumented)
  style?: React.CSSProperties;
  // (undocumented)
+  truncate?: boolean;
+  // (undocumented)
  variant?:
    | 'display'
    | 'title1'
@@ -1275,6 +1277,8 @@ export interface TextProps {
  // (undocumented)
  style?: CSSProperties;
  // (undocumented)
+  truncate?: boolean;
+  // (undocumented)
  variant?:
    | 'subtitle'
    | 'body'
@@ -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: {
@@ -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}
@@ -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;
+}
@@ -33,6 +33,7 @@ export interface HeadingProps {
        >
      >;
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  truncate?: boolean;
  className?: string;
  style?: React.CSSProperties;
 }
@@ -78,6 +78,13 @@ export const AllColors: Story = {
  ),
 };

+export const Truncate: Story = {
+  args: {
+    ...Default.args,
+    truncate: true,
+  },
+};
+
 export const Responsive: Story = {
  args: {
    ...Default.args,
@@ -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}
      >
@@ -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;
+}
@@ -39,6 +39,7 @@ export interface TextProps {
          'primary' | 'secondary' | 'danger' | 'warning' | 'success'
        >
      >;
+  truncate?: boolean;
  className?: string;
  style?: CSSProperties;
 }