fix(ui-link,ui-breadcrumb,ui-table): avoid layout shifts on SSR hydration

packages/ui-breadcrumb/src/Breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -65,6 +65,32 @@ describe('<Breadcrumb />', () => {
     expect(axeCheck).toBe(true)
   })
 
+  it('should stay on a single line when the crumbs do not fit', async () => {
+    const crumbs = (
+      <Breadcrumb label={TEST_LABEL}>
+        <Breadcrumb.Link href="#">English literature 204</Breadcrumb.Link>
+        <Breadcrumb.Link href="#">Second term modules</Breadcrumb.Link>
+        <Breadcrumb.Link>Current lesson</Breadcrumb.Link>
+      </Breadcrumb>
+    )
+    const { container } = await render(
+      <div>
+        <div data-testid="wide" style={{ width: '40rem' }}>
+          {crumbs}
+        </div>
+        <div data-testid="narrow" style={{ width: '12rem' }}>
+          {crumbs}
+        </div>
+      </div>
+    )
+    const [wideList, narrowList] = [...container.querySelectorAll('ol')].map(
+      (list) => list.getBoundingClientRect()
+    )
+
+    expect(narrowList.width).toBeLessThan(wideList.width)
+    expect(narrowList.height).toBe(wideList.height)
+  })
+
   it('should render the label as an aria-label attribute', async () => {
     await render(
       <Breadcrumb label={TEST_LABEL}>

packages/ui-breadcrumb/src/Breadcrumb/__tests__/BreadcrumbLink.test.tsx

@@ -124,6 +124,70 @@ describe('<BreadcrumbLink />', () => {
     expect(span).toMatchTextContent(TEST_TEXT_01)
   })
 
+  describe('truncation', () => {
+    const LONG_TEXT = 'A very long breadcrumb text that does not fit'
+
+    it('should truncate long text with CSS and keep the full text in the DOM', async () => {
+      const { container } = await render(
+        <div style={{ width: '6rem' }}>
+          <BreadcrumbLink href={TEST_LINK}>{LONG_TEXT}</BreadcrumbLink>
+        </div>
+      )
+      const link = page.getByRole('link').element()
+      const text = container.querySelector('a > span')!
+
+      expect(link).toMatchTextContent(LONG_TEXT)
+      expect(text).toHaveStyle('white-space: nowrap')
+      expect(text).toHaveStyle('text-overflow: ellipsis')
+      expect(text.scrollWidth).toBeGreaterThan(text.clientWidth)
+    })
+
+    it('should truncate long text next to an icon', async () => {
+      const { container } = await render(
+        <div style={{ width: '6rem' }}>
+          <BreadcrumbLink
+            href={TEST_LINK}
+            renderIcon={<svg data-testid="icon" width="16" height="16" />}
+          >
+            {LONG_TEXT}
+          </BreadcrumbLink>
+        </div>
+      )
+      const link = page.getByRole('link').element()
+      const text = container.querySelector('a > span:last-child')!
+      const icon = page.getByTestId('icon').element()
+
+      expect(text).toMatchTextContent(LONG_TEXT)
+      expect(text.scrollWidth).toBeGreaterThan(text.clientWidth)
+      expect(link.getBoundingClientRect().height).toBeLessThan(
+        icon.getBoundingClientRect().height * 2
+      )
+    })
+
+    it('should show the full text in a tooltip only when truncated', async () => {
+      await render(
+        <div>
+          <div style={{ width: '6rem' }}>
+            <BreadcrumbLink href={TEST_LINK}>{LONG_TEXT}</BreadcrumbLink>
+          </div>
+          <BreadcrumbLink href={TEST_LINK}>{TEST_TEXT_01}</BreadcrumbLink>
+        </div>
+      )
+      const [truncatedLink, shortLink] = page.getByRole('link').all()
+
+      await userEvent.hover(truncatedLink)
+      await expect
+        .element(page.getByRole('tooltip'))
+        .toMatchTextContent(LONG_TEXT)
+
+      await userEvent.unhover(truncatedLink)
+      await expect.element(page.getByRole('tooltip')).not.toBeInTheDocument()
+
+      await userEvent.hover(shortLink)
+      await expect.element(page.getByRole('tooltip')).not.toBeInTheDocument()
+    })
+  })
+
   it('should meet a11y standards as a link', async () => {
     const { container } = await render(
       <BreadcrumbLink href={TEST_LINK}>{TEST_TEXT_01}</BreadcrumbLink>

packages/ui-breadcrumb/src/Breadcrumb/v2/BreadcrumbLink/index.tsx

@@ -24,10 +24,12 @@
 
 import { Component } from 'react'
 
-import { TruncateText } from '@instructure/ui-truncate-text/latest'
 import { Link } from '@instructure/ui-link/latest'
 import { omitProps } from '@instructure/ui-react-utils'
 import { Tooltip } from '@instructure/ui-tooltip/latest'
+import { withStyleNew } from '@instructure/emotion'
+
+import generateStyle from './styles.js'
 
 import { allowedProps } from './props.js'
 import type { BreadcrumbLinkProps, BreadcrumbLinkState } from './props'
@@ -39,6 +41,7 @@ id: Breadcrumb.Link
 ---
 **/
 
+@withStyleNew(generateStyle)
 class BreadcrumbLink extends Component<
   BreadcrumbLinkProps,
   BreadcrumbLinkState
@@ -50,18 +53,50 @@ class BreadcrumbLink extends Component<
   static defaultProps = {}
 
   ref: Element | null = null
+  private _textRef: HTMLSpanElement | null = null
+  private _resizeObserver?: ResizeObserver
 
   handleRef = (el: Element | null) => {
     this.ref = el
   }
+
+  handleTextRef = (el: HTMLSpanElement | null) => {
+    this._textRef = el
+  }
+
   constructor(props: BreadcrumbLinkProps) {
     super(props)
 
     this.state = {
       isTruncated: false
     }
   }
-  handleTruncation(isTruncated: boolean) {
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+
+    if (this._textRef && typeof ResizeObserver !== 'undefined') {
+      this._resizeObserver = new ResizeObserver(this.checkTruncation)
+      this._resizeObserver.observe(this._textRef)
+    }
+    this.checkTruncation()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+    this.checkTruncation()
+  }
+
+  componentWillUnmount() {
+    this._resizeObserver?.disconnect()
+  }
+
+  checkTruncation = () => {
+    if (!this._textRef) {
+      return
+    }
+    const isTruncated = this._textRef.scrollWidth > this._textRef.clientWidth
+
     if (isTruncated !== this.state.isTruncated) {
       this.setState({ isTruncated })
     }
@@ -76,7 +111,8 @@ class BreadcrumbLink extends Component<
       onClick,
       onMouseEnter,
       isCurrentPage,
-      size
+      size,
+      styles
     } = this.props
     const { isTruncated } = this.state
     const props = omitProps(this.props, BreadcrumbLink.allowedProps)
@@ -87,7 +123,7 @@ class BreadcrumbLink extends Component<
         renderTip={children}
         preventTooltip={!isTruncated}
         // this wraps the achor/button tag in a span and puts the aria-describedby on that instead of the anchor/button tag
-        // to avoid SRs reading the text twice when there is already an aria-label
+        // to avoid SRs reading the text twice
         {...(isInteractive && { as: 'span' })}
       >
         <Link
@@ -101,18 +137,14 @@ class BreadcrumbLink extends Component<
           elementRef={this.handleRef}
           forceButtonRole={false}
           size={size}
+          // needed so the focus ring shows up
+          {...(!renderIcon && { display: 'block' })}
           {...(isCurrentPage && { 'aria-current': 'page' })}
-          {...(isTruncated && {
-            ...(typeof children === 'string' && { 'aria-label': children }),
-            ...(!isInteractive && { role: 'text' })
-          })}
           data-cid="BreadcrumbLink"
         >
-          <TruncateText
-            onUpdate={(isTruncated) => this.handleTruncation(isTruncated)}
-          >
-            <span aria-hidden={isTruncated}>{children}</span>
-          </TruncateText>
+          <span css={styles?.text} ref={this.handleTextRef}>
+            {children}
+          </span>
         </Link>
       </Tooltip>
     )

packages/ui-breadcrumb/src/Breadcrumb/v2/BreadcrumbLink/props.ts

@@ -30,6 +30,7 @@ import type {
 } from '@instructure/shared-types'
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 import type { LinkProps } from '@instructure/ui-link/latest'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type BreadcrumbLinkOwnProps = {
   /**
@@ -81,7 +82,10 @@ type BreadcrumbLinkProps = PickPropsWithExceptions<
   | 'elementRef'
 > &
   BreadcrumbLinkOwnProps &
+  WithStyleProps<null, BreadcrumbLinkStyle> &
   OtherHTMLAttributes<BreadcrumbLinkOwnProps & LinkProps>
+
+type BreadcrumbLinkStyle = ComponentStyle<'text'>
 const allowedProps: AllowedPropKeys = [
   'children',
   'href',
@@ -97,5 +101,5 @@ type BreadcrumbLinkState = {
   isTruncated: boolean
 }
 
-export type { BreadcrumbLinkProps, BreadcrumbLinkState }
+export type { BreadcrumbLinkProps, BreadcrumbLinkState, BreadcrumbLinkStyle }
 export { allowedProps }

packages/ui-breadcrumb/src/Breadcrumb/v2/BreadcrumbLink/styles.ts

@@ -0,0 +1,47 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { BreadcrumbLinkStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} _componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (_componentTheme: never): BreadcrumbLinkStyle => {
+  return {
+    text: {
+      label: 'breadcrumbLink__text',
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }
+}
+
+export default generateStyle

packages/ui-breadcrumb/src/Breadcrumb/v2/styles.ts

@@ -60,18 +60,7 @@ const generateStyle = (
     crumb: {
       label: 'breadcrumb__crumb',
       boxSizing: 'border-box',
-      display: 'flex',
-      alignItems: 'center',
-
-      // prevent text clipping
-      '[data-cid~="TruncateText"]': {
-        overflow: 'visible',
-
-        // prevent extra spacing after the '...'
-        '& [class*="truncateText__spacer"]': {
-          display: 'inline'
-        }
-      }
+      display: 'block'
     },
     separator: {
       label: 'breadcrumb__separator',

packages/ui-link/src/Link/v2/index.tsx

@@ -25,7 +25,6 @@
 import { Children, Component } from 'react'
 
 import { View } from '@instructure/ui-view/latest'
-import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils'
 import {
   getElementType,
@@ -41,7 +40,7 @@ import { withStyleNew } from '@instructure/emotion'
 import generateStyle from './styles.js'
 
 import { allowedProps } from './props.js'
-import type { LinkProps, LinkState, LinkStyleProps } from './props'
+import type { LinkProps, LinkState } from './props'
 
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 
@@ -69,31 +68,11 @@ class Link extends Component<LinkProps, LinkState> {
   ref: Element | null = null
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleProps())
+    this.props.makeStyles?.()
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleProps())
-  }
-
-  makeStyleProps = (): LinkStyleProps & {
-    variant?: LinkProps['variant']
-    size?: LinkProps['size']
-  } => {
-    const { variant, size: sizeProp } = this.props
-
-    let size = sizeProp
-
-    if ((variant === 'inline' || variant === 'standalone') && !sizeProp) {
-      size = 'medium'
-    }
-
-    return {
-      containsTruncateText: this.containsTruncateText,
-      hasVisibleChildren: this.hasVisibleChildren,
-      variant,
-      size
-    }
+    this.props.makeStyles?.()
   }
 
   handleElementRef = (el: Element | null) => {
@@ -180,10 +159,6 @@ class Link extends Component<LinkProps, LinkState> {
     return findFocusable(this.ref)
   }
 
-  get hasVisibleChildren() {
-    return hasVisibleChildren(this.props.children)
-  }
-
   get role() {
     const { role, forceButtonRole, onClick } = this.props
 

packages/ui-link/src/Link/v2/props.ts

@@ -136,11 +136,6 @@ type LinkOwnProps = {
   size?: 'small' | 'medium' | 'large'
 }
 
-export type LinkStyleProps = {
-  containsTruncateText: boolean
-  hasVisibleChildren: boolean
-}
-
 type PropKeys = keyof LinkOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>