@instructure/ui-tooltip 10.2.3-snapshot-3 → 10.2.3-snapshot-5

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.2.3-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-3) (2024-09-20)
+## [10.2.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-5) (2024-09-24)
 
 **Note:** Version bump only for package @instructure/ui-tooltip
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tooltip",
-  "version": "10.2.3-snapshot-3",
+  "version": "10.2.3-snapshot-5",
   "description": "A component for showing small text-only overlays on hover/focus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,25 +24,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "10.2.3-snapshot-3",
-    "@instructure/shared-types": "10.2.3-snapshot-3",
-    "@instructure/ui-popover": "10.2.3-snapshot-3",
-    "@instructure/ui-position": "10.2.3-snapshot-3",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-3",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-testable": "10.2.3-snapshot-3",
-    "@instructure/ui-utils": "10.2.3-snapshot-3",
+    "@instructure/emotion": "10.2.3-snapshot-5",
+    "@instructure/shared-types": "10.2.3-snapshot-5",
+    "@instructure/ui-popover": "10.2.3-snapshot-5",
+    "@instructure/ui-position": "10.2.3-snapshot-5",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-5",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-testable": "10.2.3-snapshot-5",
+    "@instructure/ui-utils": "10.2.3-snapshot-5",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.3-snapshot-3",
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-3",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-scripts": "10.2.3-snapshot-3",
-    "@instructure/ui-test-locator": "10.2.3-snapshot-3",
-    "@instructure/ui-test-queries": "10.2.3-snapshot-3",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-themes": "10.2.3-snapshot-3",
+    "@instructure/ui-axe-check": "10.2.3-snapshot-5",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-5",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-scripts": "10.2.3-snapshot-5",
+    "@instructure/ui-test-locator": "10.2.3-snapshot-5",
+    "@instructure/ui-test-queries": "10.2.3-snapshot-5",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-themes": "10.2.3-snapshot-5",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

package/src/Tooltip/README.md

@@ -59,74 +59,121 @@ type: example
 
 #### Controlled Tooltips
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        isShowingContent: false
+      }
+    }
 
-    this.state = {
-      isShowingContent: false
+    render() {
+      return (
+        <>
+          <p>
+            <Tooltip
+              renderTip="Hello. I'm a tool tip"
+              isShowingContent={this.state.isShowingContent}
+              onShowContent={(e) => {
+                console.log('expecting to show tooltip')
+              }}
+              onHideContent={(e) => {
+                console.log('expecting to hide tooltip')
+              }}
+            >
+              <Link href="#">This link has a tooltip</Link>
+            </Tooltip>
+          </p>
+          <Checkbox
+            label="show tooltip?"
+            variant="toggle"
+            value="toggled"
+            onChange={(event) => {
+              this.setState({ isShowingContent: event.target.checked })
+            }}
+          />
+        </>
+      )
     }
   }
 
-  render () {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [isShowingContent, setIsShowingContent] = useState(false)
+
     return (
       <>
         <p>
-        <Tooltip
-          renderTip="Hello. I'm a tool tip"
-          isShowingContent={this.state.isShowingContent}
-          onShowContent={(e) => {
-            console.log("expecting to show tooltip")
-          }}
-          onHideContent={(e) => {
-            console.log("expecting to hide tooltip")
-          }}
-        >
-          <Link href="#">This link has a tooltip</Link>
-        </Tooltip>
+          <Tooltip
+            renderTip="Hello. I'm a tool tip"
+            isShowingContent={isShowingContent}
+            onShowContent={(e) => {
+              console.log('expecting to show tooltip')
+            }}
+            onHideContent={(e) => {
+              console.log('expecting to hide tooltip')
+            }}
+          >
+            <Link href="#">This link has a tooltip</Link>
+          </Tooltip>
         </p>
         <Checkbox
           label="show tooltip?"
           variant="toggle"
           value="toggled"
           onChange={(event) => {
-            this.setState({isShowingContent: event.target.checked})
+            setIsShowingContent(event.target.checked)
           }}
         />
-    </>
-  )
+      </>
+    )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 ### Custom elements as renderTrigger
 
 Popover and Tooltip attach mouse and focus event listeners to their render trigger components via props. These need to be propagated to the component for the listeners to work:
 
-```js
----
-  type: example
----
-class MyComponent extends React.Component {
-  constructor(props) {
-    super(props)
-    this.ref = React.createRef()
-  }
-  render() {
-    //  Spread the props to the underlying DOM element
-    return <div {...this.props} ref={this.ref} style={{width:"10rem"}}>My custom component</div>
+- ```js
+  class MyComponent extends React.Component {
+    constructor(props) {
+      super(props)
+      this.ref = React.createRef()
+    }
+    render() {
+      //  Spread the props to the underlying DOM element
+      return (
+        <div {...this.props} ref={this.ref} style={{ width: '10rem' }}>
+          My custom component
+        </div>
+      )
+    }
   }
-}
-<Tooltip renderTip="Tooltip text to display" >
-  <MyComponent />
-</Tooltip>
-```
+  ;<Tooltip renderTip="Tooltip text to display">
+    <MyComponent />
+  </Tooltip>
+  ```
+
+- ```js
+  const MyComponent = forwardRef((props, ref) => {
+    return (
+      <div {...props} ref={ref} style={{ width: '10rem' }}>
+        My custom component
+      </div>
+    )
+  })
+
+  ;<Tooltip renderTip="Tooltip text to display">
+    <MyComponent />
+  </Tooltip>
+  ```
 
 ### Guidelines