Merge 99f35c1 into 6825397

.changeset/odd-pumpkins-count.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/truncate': patch
+'@twilio-paste/core': patch
+---
+
+[Truncate] fix alignment when truncate is within another component

packages/paste-core/components/truncate/src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import {Box, BoxProps} from '@twilio-paste/box';
-
+import {Box} from '@twilio-paste/box';
+import type {BoxProps} from '@twilio-paste/box';
 export interface TruncateProps extends Omit<React.HtmlHTMLAttributes<HTMLSpanElement>, 'color'>, Pick<BoxProps, 'as'> {
   children: NonNullable<React.ReactNode>;
   title: string;
@@ -13,6 +13,8 @@ const Truncate = React.forwardRef<HTMLSpanElement, TruncateProps>(({children, ..
       {...props}
       as="span"
       display="inline-block"
+      verticalAlign="bottom"
+      textDecoration="inherit"
       maxWidth="100%"
       overflow="hidden"
       ref={ref}

packages/paste-core/components/truncate/stories/index.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {Box} from '@twilio-paste/box';
 import {Text} from '@twilio-paste/text';
+import {Anchor} from '@twilio-paste/anchor';
 import {Truncate} from '../src';
 
 // eslint-disable-next-line import/no-default-export
@@ -18,3 +19,13 @@ export const Default = (): React.ReactNode => {
     </Box>
   );
 };
+
+export const TruncateInAnchor = (): React.ReactNode => {
+  return (
+    <Box maxWidth="size20">
+      <Anchor href="https://paste.twilio.design">
+        <Truncate title="A very very long anchor to truncate">A very very long anchor to truncate</Truncate>
+      </Anchor>
+    </Box>
+  );
+};