fix: allow heading truncation

.changeset/wise-terms-travel.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react': patch
+'@aws-amplify/ui': patch
+---
+
+fix(ui-react): Fixes an issue where the isTruncated prop of the Heading component was not properly applying a truncation.

packages/react/src/primitives/Heading/Heading.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { classNameModifier } from '../shared/utils';
+import { classNameModifier, classNameModifierByFlag } from '../shared/utils';
 import { ComponentClassNames } from '../shared/constants';
 import { HeadingProps, Primitive } from '../types';
 import { View } from '../View';
@@ -22,14 +22,19 @@ const headingLevels: HeadingLevels = {
 };
 
 const HeadingPrimitive: Primitive<HeadingProps, HeadingTag> = (
-  { className, children, level = 6, ...rest },
+  { className, children, isTruncated, level = 6, ...rest },
   ref
 ) => (
   <View
     as={headingLevels[level]}
     className={classNames(
       ComponentClassNames.Heading,
       classNameModifier(ComponentClassNames.Heading, level),
+      classNameModifierByFlag(
+        ComponentClassNames.Heading,
+        'truncated',
+        isTruncated
+      ),
       className
     )}
     ref={ref}

packages/react/src/primitives/Heading/__tests__/Heading.test.tsx

@@ -128,4 +128,20 @@ describe('Heading: ', () => {
     const heading = await screen.findByTestId('dataTest');
     expect(heading.dataset['demo']).toBe('true');
   });
+
+  it('should render the truncated class on Heading', async () => {
+    render(
+      <div>
+        <Heading testId="truncated" isTruncated={true}>
+          truncated
+        </Heading>
+      </div>
+    );
+
+    const truncated = await screen.findByTestId('truncated');
+
+    expect(truncated.classList).toContain(
+      `${ComponentClassNames['Heading']}--truncated`
+    );
+  });
 });

packages/ui/src/theme/css/component/heading.scss

@@ -2,6 +2,12 @@
   color: var(--amplify-components-heading-color);
   line-height: var(--amplify-components-heading-line-height);
   display: block;
+
+  &--truncated {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .amplify-heading--1 {