@instructure/ui-breadcrumb 10.14.1-snapshot-1 → 10.14.1-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.14.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-1) (2025-03-17)
+## [10.14.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-4) (2025-03-27)
 
-**Note:** Version bump only for package @instructure/ui-breadcrumb
+
+### Features
+
+* **ui-breadcrumb,ui-tooltip:** add tooltips for truncated breadcrumbs ([1c22bfc](https://github.com/instructure/instructure-ui/commit/1c22bfcb01238b2af8b03db5391013175f487805))
 
 
 

package/es/Breadcrumb/BreadcrumbLink/index.js

@@ -28,6 +28,7 @@ import { TruncateText } from '@instructure/ui-truncate-text';
 import { Link } from '@instructure/ui-link';
 import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
+import { Tooltip } from '@instructure/ui-tooltip';
 import { propTypes, allowedProps } from './props';
 /**
 ---
@@ -36,12 +37,22 @@ id: Breadcrumb.Link
 ---
 **/
 let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class BreadcrumbLink extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.ref = null;
     this.handleRef = el => {
       this.ref = el;
     };
+    this.state = {
+      isTruncated: false
+    };
+  }
+  handleTruncation(isTruncated) {
+    if (isTruncated !== this.state.isTruncated) {
+      this.setState({
+        isTruncated
+      });
+    }
   }
   render() {
     const _this$props = this.props,
@@ -52,18 +63,27 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
       onClick = _this$props.onClick,
       onMouseEnter = _this$props.onMouseEnter,
       isCurrentPage = _this$props.isCurrentPage;
+    const isTruncated = this.state.isTruncated;
     const props = omitProps(this.props, BreadcrumbLink.allowedProps);
-    return /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      renderTip: children,
+      preventTooltip: !isTruncated
+    }, /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
       href: href,
       renderIcon: renderIcon,
       iconPlacement: iconPlacement,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       isWithinText: false,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      forceButtonRole: false
     }, isCurrentPage && {
       'aria-current': 'page'
-    }), /*#__PURE__*/React.createElement(TruncateText, null, children));
+    }), /*#__PURE__*/React.createElement(TruncateText, {
+      onUpdate: isTruncated => this.handleTruncation(isTruncated)
+    }, /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": isTruncated
+    }, children))));
   }
 }, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = propTypes, _BreadcrumbLink.allowedProps = allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);
 export default BreadcrumbLink;

package/lib/Breadcrumb/BreadcrumbLink/index.js

@@ -10,6 +10,7 @@ var _TruncateText = require("@instructure/ui-truncate-text/lib/TruncateText");
 var _Link = require("@instructure/ui-link/lib/Link");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
 var _props = require("./props");
 var _dec, _class, _BreadcrumbLink;
 /*
@@ -42,12 +43,22 @@ id: Breadcrumb.Link
 ---
 **/
 let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(), _dec(_class = (_BreadcrumbLink = class BreadcrumbLink extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.ref = null;
     this.handleRef = el => {
       this.ref = el;
     };
+    this.state = {
+      isTruncated: false
+    };
+  }
+  handleTruncation(isTruncated) {
+    if (isTruncated !== this.state.isTruncated) {
+      this.setState({
+        isTruncated
+      });
+    }
   }
   render() {
     const _this$props = this.props,
@@ -58,18 +69,27 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
       onClick = _this$props.onClick,
       onMouseEnter = _this$props.onMouseEnter,
       isCurrentPage = _this$props.isCurrentPage;
+    const isTruncated = this.state.isTruncated;
     const props = (0, _omitProps.omitProps)(this.props, BreadcrumbLink.allowedProps);
-    return /*#__PURE__*/_react.default.createElement(_Link.Link, Object.assign({}, props, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      renderTip: children,
+      preventTooltip: !isTruncated
+    }, /*#__PURE__*/_react.default.createElement(_Link.Link, Object.assign({}, props, {
       href: href,
       renderIcon: renderIcon,
       iconPlacement: iconPlacement,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       isWithinText: false,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      forceButtonRole: false
     }, isCurrentPage && {
       'aria-current': 'page'
-    }), /*#__PURE__*/_react.default.createElement(_TruncateText.TruncateText, null, children));
+    }), /*#__PURE__*/_react.default.createElement(_TruncateText.TruncateText, {
+      onUpdate: isTruncated => this.handleTruncation(isTruncated)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": isTruncated
+    }, children))));
   }
 }, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = _props.propTypes, _BreadcrumbLink.allowedProps = _props.allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);
 var _default = exports.default = BreadcrumbLink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-breadcrumb",
-  "version": "10.14.1-snapshot-1",
+  "version": "10.14.1-snapshot-4",
   "description": "A breadcrumb component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.14.1-snapshot-1",
-    "@instructure/ui-babel-preset": "10.14.1-snapshot-1",
-    "@instructure/ui-scripts": "10.14.1-snapshot-1",
-    "@instructure/ui-themes": "10.14.1-snapshot-1",
+    "@instructure/ui-axe-check": "10.14.1-snapshot-4",
+    "@instructure/ui-babel-preset": "10.14.1-snapshot-4",
+    "@instructure/ui-scripts": "10.14.1-snapshot-4",
+    "@instructure/ui-themes": "10.14.1-snapshot-4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.14.1-snapshot-1",
-    "@instructure/shared-types": "10.14.1-snapshot-1",
-    "@instructure/ui-icons": "10.14.1-snapshot-1",
-    "@instructure/ui-link": "10.14.1-snapshot-1",
-    "@instructure/ui-prop-types": "10.14.1-snapshot-1",
-    "@instructure/ui-react-utils": "10.14.1-snapshot-1",
-    "@instructure/ui-testable": "10.14.1-snapshot-1",
-    "@instructure/ui-truncate-text": "10.14.1-snapshot-1",
-    "@instructure/ui-utils": "10.14.1-snapshot-1",
-    "@instructure/ui-view": "10.14.1-snapshot-1",
+    "@instructure/emotion": "10.14.1-snapshot-4",
+    "@instructure/shared-types": "10.14.1-snapshot-4",
+    "@instructure/ui-icons": "10.14.1-snapshot-4",
+    "@instructure/ui-link": "10.14.1-snapshot-4",
+    "@instructure/ui-prop-types": "10.14.1-snapshot-4",
+    "@instructure/ui-react-utils": "10.14.1-snapshot-4",
+    "@instructure/ui-testable": "10.14.1-snapshot-4",
+    "@instructure/ui-truncate-text": "10.14.1-snapshot-4",
+    "@instructure/ui-utils": "10.14.1-snapshot-4",
+    "@instructure/ui-view": "10.14.1-snapshot-4",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Breadcrumb/BreadcrumbLink/index.tsx

@@ -28,9 +28,10 @@ import { TruncateText } from '@instructure/ui-truncate-text'
 import { Link } from '@instructure/ui-link'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
+import { Tooltip } from '@instructure/ui-tooltip'
 
 import { propTypes, allowedProps } from './props'
-import type { BreadcrumbLinkProps } from './props'
+import type { BreadcrumbLinkProps, BreadcrumbLinkState } from './props'
 
 /**
 ---
@@ -40,7 +41,10 @@ id: Breadcrumb.Link
 **/
 
 @testable()
-class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
+class BreadcrumbLink extends Component<
+  BreadcrumbLinkProps,
+  BreadcrumbLinkState
+> {
   static readonly componentId = 'Breadcrumb.Link'
 
   static propTypes = propTypes
@@ -52,7 +56,18 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
   handleRef = (el: Element | null) => {
     this.ref = el
   }
+  constructor(props: BreadcrumbLinkProps) {
+    super(props)
 
+    this.state = {
+      isTruncated: false
+    }
+  }
+  handleTruncation(isTruncated: boolean) {
+    if (isTruncated !== this.state.isTruncated) {
+      this.setState({ isTruncated })
+    }
+  }
   render() {
     const {
       children,
@@ -64,22 +79,30 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
       isCurrentPage
     } = this.props
 
+    const { isTruncated } = this.state
     const props = omitProps(this.props, BreadcrumbLink.allowedProps)
 
     return (
-      <Link
-        {...props}
-        href={href}
-        renderIcon={renderIcon}
-        iconPlacement={iconPlacement}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        isWithinText={false}
-        elementRef={this.handleRef}
-        {...(isCurrentPage && { 'aria-current': 'page' })}
-      >
-        <TruncateText>{children}</TruncateText>
-      </Link>
+      <Tooltip renderTip={children} preventTooltip={!isTruncated}>
+        <Link
+          {...props}
+          href={href}
+          renderIcon={renderIcon}
+          iconPlacement={iconPlacement}
+          onClick={onClick}
+          onMouseEnter={onMouseEnter}
+          isWithinText={false}
+          elementRef={this.handleRef}
+          forceButtonRole={false}
+          {...(isCurrentPage && { 'aria-current': 'page' })}
+        >
+          <TruncateText
+            onUpdate={(isTruncated) => this.handleTruncation(isTruncated)}
+          >
+            <span aria-hidden={isTruncated}>{children}</span>
+          </TruncateText>
+        </Link>
+      </Tooltip>
     )
   }
 }

package/src/Breadcrumb/BreadcrumbLink/props.ts

@@ -109,5 +109,9 @@ const allowedProps: AllowedPropKeys = [
   'isCurrentPage'
 ]
 
-export type { BreadcrumbLinkProps }
+type BreadcrumbLinkState = {
+  isTruncated: boolean
+}
+
+export type { BreadcrumbLinkProps, BreadcrumbLinkState }
 export { propTypes, allowedProps }