@instructure/ui-breadcrumb 11.7.8-snapshot-2 → 11.7.8-snapshot-3

package/CHANGELOG.md

@@ -3,12 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.8-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-2) (2026-09-24)
-
-**Note:** Version bump only for package @instructure/ui-breadcrumb
-
+## [11.7.8-snapshot-3](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-3) (2026-09-28)
 
+### Bug Fixes
 
+* **ui-link,ui-breadcrumb,ui-table:** avoid layout shifts on SSR hydration ([d90cd09](https://github.com/instructure/instructure-ui/commit/d90cd09fcf63775879830a1809cd5169acf91b5f))
 
 
 ## [11.7.7](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7) (2026-09-23)

package/es/Breadcrumb/v2/BreadcrumbLink/index.js

@@ -1,3 +1,4 @@
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -23,10 +24,11 @@
  */
 
 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 { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
@@ -35,29 +37,52 @@ parent: Breadcrumb
 id: Breadcrumb.Link
 ---
 **/
-
-class BreadcrumbLink extends Component {
+let BreadcrumbLink = (_dec = withStyleNew(generateStyle), _dec(_class = class BreadcrumbLink extends Component {
   static displayName = 'BreadcrumbLink';
   static componentId = 'Breadcrumb.Link';
   static allowedProps = allowedProps;
   static defaultProps = {};
   ref = null;
+  _textRef = null;
+  _resizeObserver;
   handleRef = el => {
     this.ref = el;
   };
+  handleTextRef = el => {
+    this._textRef = el;
+  };
   constructor(props) {
     super(props);
     this.state = {
       isTruncated: false
     };
   }
-  handleTruncation(isTruncated) {
+  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
       });
     }
-  }
+  };
   render() {
     const {
       children,
@@ -67,7 +92,8 @@ class BreadcrumbLink extends Component {
       onClick,
       onMouseEnter,
       isCurrentPage,
-      size
+      size,
+      styles
     } = this.props;
     const {
       isTruncated
@@ -78,7 +104,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'
@@ -93,29 +119,24 @@ class BreadcrumbLink extends Component {
         variant: "standalone",
         elementRef: this.handleRef,
         forceButtonRole: false,
-        size: size,
+        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",
-        children: _jsx(TruncateText, {
-          onUpdate: isTruncated => this.handleTruncation(isTruncated),
-          children: _jsx("span", {
-            "aria-hidden": isTruncated,
-            children: children
-          })
+        children: _jsx("span", {
+          css: styles?.text,
+          ref: this.handleTextRef,
+          children: children
         })
       })
     });
   }
-}
+}) || _class);
 export default BreadcrumbLink;
 export { BreadcrumbLink };

package/es/Breadcrumb/v2/BreadcrumbLink/styles.js

@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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 => {
+  return {
+    text: {
+      label: 'breadcrumbLink__text',
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  };
+};
+export default generateStyle;

package/es/Breadcrumb/v2/styles.js

@@ -54,16 +54,7 @@ const generateStyle = (componentTheme, props) => {
     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',

package/lib/Breadcrumb/v2/BreadcrumbLink/index.js

@@ -1,16 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BreadcrumbLink = void 0;
 var _react = require("react");
-var _latest = require("@instructure/ui-truncate-text/latest");
-var _latest2 = require("@instructure/ui-link/latest");
+var _latest = require("@instructure/ui-link/latest");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _latest3 = require("@instructure/ui-tooltip/latest");
+var _latest2 = require("@instructure/ui-tooltip/latest");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles.js"));
 var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -34,36 +37,58 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /**
 ---
 parent: Breadcrumb
 id: Breadcrumb.Link
 ---
 **/
-
-class BreadcrumbLink extends _react.Component {
+let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class BreadcrumbLink extends _react.Component {
   static displayName = 'BreadcrumbLink';
   static componentId = 'Breadcrumb.Link';
   static allowedProps = _props.allowedProps;
   static defaultProps = {};
   ref = null;
+  _textRef = null;
+  _resizeObserver;
   handleRef = el => {
     this.ref = el;
   };
+  handleTextRef = el => {
+    this._textRef = el;
+  };
   constructor(props) {
     super(props);
     this.state = {
       isTruncated: false
     };
   }
-  handleTruncation(isTruncated) {
+  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
       });
     }
-  }
+  };
   render() {
     const {
       children,
@@ -73,23 +98,24 @@ class BreadcrumbLink extends _react.Component {
       onClick,
       onMouseEnter,
       isCurrentPage,
-      size
+      size,
+      styles
     } = this.props;
     const {
       isTruncated
     } = this.state;
     const props = (0, _omitProps.omitProps)(this.props, BreadcrumbLink.allowedProps);
     const isInteractive = onClick || href;
-    return (0, _jsxRuntime.jsx)(_latest3.Tooltip, {
+    return (0, _jsxRuntime.jsx)(_latest2.Tooltip, {
       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'
       }),
-      children: (0, _jsxRuntime.jsx)(_latest2.Link, {
+      children: (0, _jsxRuntime.jsx)(_latest.Link, {
         ...props,
         href: href,
         renderIcon: renderIcon,
@@ -99,29 +125,23 @@ class BreadcrumbLink extends _react.Component {
         variant: "standalone",
         elementRef: this.handleRef,
         forceButtonRole: false,
-        size: size,
+        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",
-        children: (0, _jsxRuntime.jsx)(_latest.TruncateText, {
-          onUpdate: isTruncated => this.handleTruncation(isTruncated),
-          children: (0, _jsxRuntime.jsx)("span", {
-            "aria-hidden": isTruncated,
-            children: children
-          })
+        children: (0, _jsxRuntime.jsx)("span", {
+          css: styles?.text,
+          ref: this.handleTextRef,
+          children: children
         })
       })
     });
   }
-}
-exports.BreadcrumbLink = BreadcrumbLink;
+}) || _class);
 var _default = exports.default = BreadcrumbLink;

package/lib/Breadcrumb/v2/BreadcrumbLink/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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 => {
+  return {
+    text: {
+      label: 'breadcrumbLink__text',
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Breadcrumb/v2/styles.js

@@ -60,16 +60,7 @@ const generateStyle = (componentTheme, props) => {
     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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-breadcrumb",
-  "version": "11.7.8-snapshot-2",
+  "version": "11.7.8-snapshot-3",
   "description": "A breadcrumb component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/ui-icons": "11.7.8-snapshot-2",
-    "@instructure/ui-link": "11.7.8-snapshot-2",
-    "@instructure/emotion": "11.7.8-snapshot-2",
-    "@instructure/ui-react-utils": "11.7.8-snapshot-2",
-    "@instructure/ui-themes": "11.7.8-snapshot-2",
-    "@instructure/shared-types": "11.7.8-snapshot-2",
-    "@instructure/ui-truncate-text": "11.7.8-snapshot-2",
-    "@instructure/ui-tooltip": "11.7.8-snapshot-2",
-    "@instructure/ui-utils": "11.7.8-snapshot-2",
-    "@instructure/ui-view": "11.7.8-snapshot-2"
+    "@instructure/emotion": "11.7.8-snapshot-3",
+    "@instructure/shared-types": "11.7.8-snapshot-3",
+    "@instructure/ui-link": "11.7.8-snapshot-3",
+    "@instructure/ui-icons": "11.7.8-snapshot-3",
+    "@instructure/ui-react-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-tooltip": "11.7.8-snapshot-3",
+    "@instructure/ui-themes": "11.7.8-snapshot-3",
+    "@instructure/ui-truncate-text": "11.7.8-snapshot-3",
+    "@instructure/ui-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-view": "11.7.8-snapshot-3"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-scripts": "11.7.8-snapshot-2",
-    "@instructure/ui-babel-preset": "11.7.8-snapshot-2",
-    "@instructure/ui-axe-check": "11.7.8-snapshot-2"
+    "@instructure/ui-babel-preset": "11.7.8-snapshot-3",
+    "@instructure/ui-scripts": "11.7.8-snapshot-3",
+    "@instructure/ui-axe-check": "11.7.8-snapshot-3"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/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,10 +53,17 @@ 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)
 
@@ -61,7 +71,32 @@ class BreadcrumbLink extends Component<
       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>
     )

package/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 }

package/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