@instructure/ui-truncate-text 10.0.1-snapshot-9 → 10.0.1-snapshot-11

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.0.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-9) (2024-08-14)
+## [10.0.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-11) (2024-08-14)
 
 **Note:** Version bump only for package @instructure/ui-truncate-text
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-truncate-text",
-  "version": "10.0.1-snapshot-9",
+  "version": "10.0.1-snapshot-11",
   "description": "A TruncateText component made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.0.1-snapshot-9",
-    "@instructure/debounce": "10.0.1-snapshot-9",
-    "@instructure/emotion": "10.0.1-snapshot-9",
-    "@instructure/shared-types": "10.0.1-snapshot-9",
-    "@instructure/ui-dom-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-testable": "10.0.1-snapshot-9",
-    "@instructure/ui-utils": "10.0.1-snapshot-9",
+    "@instructure/console": "10.0.1-snapshot-11",
+    "@instructure/debounce": "10.0.1-snapshot-11",
+    "@instructure/emotion": "10.0.1-snapshot-11",
+    "@instructure/shared-types": "10.0.1-snapshot-11",
+    "@instructure/ui-dom-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-react-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-testable": "10.0.1-snapshot-11",
+    "@instructure/ui-utils": "10.0.1-snapshot-11",
     "escape-html": "^1.0.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.0.1-snapshot-9",
-    "@instructure/ui-color-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-test-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-text": "10.0.1-snapshot-9",
-    "@instructure/ui-themes": "10.0.1-snapshot-9",
+    "@instructure/ui-babel-preset": "10.0.1-snapshot-11",
+    "@instructure/ui-color-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-test-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-text": "10.0.1-snapshot-11",
+    "@instructure/ui-themes": "10.0.1-snapshot-11",
     "@types/escape-html": "^1.0.4"
   },
   "peerDependencies": {

package/src/TruncateText/README.md

@@ -169,54 +169,85 @@ type: example
 
 It's best practice to make the complete text of a truncated element available via a [Tooltip](#Tooltip).
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    isTruncated: false
-  }
+- ```js
+  class Example extends React.Component {
+    state = {
+      isTruncated: false
+    }
+
+    handleUpdate = (isTruncated) => {
+      if (this.state.isTruncated !== isTruncated) {
+        this.setState({ isTruncated })
+      }
+    }
+
+    renderLink() {
+      return (
+        <Link href="#">
+          <TruncateText onUpdate={this.handleUpdate}>
+            {this.props.message}
+          </TruncateText>
+        </Link>
+      )
+    }
 
-  handleUpdate = (isTruncated) => {
-    if (this.state.isTruncated !== isTruncated) {
-      this.setState({ isTruncated })
+    render() {
+      return (
+        <View as="div" padding="xx-small none" maxWidth="230px" withVisualDebug>
+          {this.state.isTruncated ? (
+            <Tooltip
+              renderTip={this.props.message}
+              mountNode={() => document.getElementById('main')}
+            >
+              {this.renderLink()}
+            </Tooltip>
+          ) : (
+            this.renderLink()
+          )}
+        </View>
+      )
     }
   }
+  render(
+    <Example message="A tooltip will display only when this text is truncated" />
+  )
+  ```
 
-  renderLink () {
-    return (
+- ```js
+  const Example = (props) => {
+    const [isTruncated, setIsTruncated] = useState(false)
+
+    const handleUpdate = (newIsTruncated) => {
+      if (isTruncated !== newIsTruncated) {
+        setIsTruncated(newIsTruncated)
+      }
+    }
+
+    const renderLink = () => (
       <Link href="#">
-        <TruncateText onUpdate={this.handleUpdate}>
-          {this.props.message}
-        </TruncateText>
+        <TruncateText onUpdate={handleUpdate}>{props.message}</TruncateText>
       </Link>
     )
-  }
 
-  render () {
     return (
-      <View
-        as="div"
-        padding="xx-small none"
-        maxWidth="230px"
-        withVisualDebug
-      >
-        {this.state.isTruncated ? (
+      <View as="div" padding="xx-small none" maxWidth="230px" withVisualDebug>
+        {isTruncated ? (
           <Tooltip
-            renderTip={this.props.message}
+            renderTip={props.message}
             mountNode={() => document.getElementById('main')}
           >
-            { this.renderLink() }
+            {renderLink()}
           </Tooltip>
-        ) : this.renderLink()}
+        ) : (
+          renderLink()
+        )}
       </View>
     )
   }
-}
-
-render(<Example message="A tooltip will display only when this text is truncated" />)
-```
+  render(
+    <Example message="A tooltip will display only when this text is truncated" />
+  )
+  ```
 
 ### Guidelines