@instructure/ui-buttons 11.0.1-snapshot-1 → 11.0.1-snapshot-2

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.
 
-## [11.0.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-1) (2025-10-08)
+## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
 
 **Note:** Version bump only for package @instructure/ui-buttons
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "11.0.1-snapshot-1",
+  "version": "11.0.1-snapshot-2",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.0.1-snapshot-1",
-    "@instructure/ui-babel-preset": "11.0.1-snapshot-1",
-    "@instructure/ui-themes": "11.0.1-snapshot-1",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-2",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
+    "@instructure/ui-themes": "11.0.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
@@ -33,19 +33,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.0.1-snapshot-1",
-    "@instructure/emotion": "11.0.1-snapshot-1",
-    "@instructure/shared-types": "11.0.1-snapshot-1",
-    "@instructure/ui-a11y-content": "11.0.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-color-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-dom-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-icons": "11.0.1-snapshot-1",
-    "@instructure/ui-position": "11.0.1-snapshot-1",
-    "@instructure/ui-react-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-tooltip": "11.0.1-snapshot-1",
-    "@instructure/ui-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-view": "11.0.1-snapshot-1",
+    "@instructure/console": "11.0.1-snapshot-2",
+    "@instructure/emotion": "11.0.1-snapshot-2",
+    "@instructure/shared-types": "11.0.1-snapshot-2",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-2",
+    "@instructure/ui-a11y-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-color-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-icons": "11.0.1-snapshot-2",
+    "@instructure/ui-position": "11.0.1-snapshot-2",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-tooltip": "11.0.1-snapshot-2",
+    "@instructure/ui-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-view": "11.0.1-snapshot-2",
     "keycode": "^2"
   },
   "peerDependencies": {

package/src/Button/README.md

@@ -97,56 +97,10 @@ type: example
 
 If you need to prevent text wrapping, you can use the [TruncateText](#TruncateText) util. You can also conditionally render a [Tooltip](#Tooltip) with the full text when truncation occurs.
 
-- ```js
-  class Example extends React.Component {
-    state = {
-      isTruncated: false
-    }
-
-    handleUpdate = (isTruncated) => {
-      if (this.state.isTruncated !== isTruncated) {
-        this.setState({ isTruncated })
-      }
-    }
-
-    renderButton() {
-      return (
-        <Button color="primary">
-          <TruncateText onUpdate={this.handleUpdate}>
-            {this.props.message}
-          </TruncateText>
-        </Button>
-      )
-    }
-
-    render() {
-      return (
-        <View
-          display="block"
-          width="10rem"
-          margin="small"
-          padding="small none"
-          withVisualDebug
-        >
-          {this.state.isTruncated ? (
-            <Tooltip
-              renderTip={this.props.message}
-              mountNode={() => document.getElementById('main')}
-            >
-              {this.renderButton()}
-            </Tooltip>
-          ) : (
-            this.renderButton()
-          )}
-        </View>
-      )
-    }
-  }
-
-  render(<Example message="A Button With a Whole Lot of Text" />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = ({ message }) => {
     const [isTruncated, setIsTruncated] = useState(false)
 
@@ -187,7 +141,7 @@ If you need to prevent text wrapping, you can use the [TruncateText](#TruncateTe
   }
 
   render(<Example message="A Button With a Whole Lot of Text" />)
-  ```
+```
 
 ### Display
 

package/src/ToggleButton/README.md

@@ -5,37 +5,10 @@ describes: ToggleButton
 `ToggleButton` is a controlled button component used for toggling a status or setting
 between one of two states (locked/unlocked, published/unpublished, etc.).
 
-- ```javascript
-  class Example extends React.Component {
-    state = {
-      locked: false
-    }
-
-    handleLocked = (e) => {
-      this.setState((prevState) => ({ locked: !prevState.locked }))
-    }
-
-    render() {
-      const locked = this.state.locked
-
-      return (
-        <View as="div" padding="x-large" id="toggleContainer">
-          <ToggleButton
-            status={locked ? 'pressed' : 'unpressed'}
-            color={locked ? 'danger' : 'secondary'}
-            renderIcon={locked ? IconLockSolid : IconUnlockLine}
-            screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
-            renderTooltipContent={locked ? 'Unlock' : 'Lock'}
-            onClick={this.handleLocked}
-          />
-        </View>
-      )
-    }
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = () => {
     const [locked, setLocked] = useState(false)
 
@@ -58,46 +31,14 @@ between one of two states (locked/unlocked, published/unpublished, etc.).
   }
 
   render(<Example />)
-  ```
+```
 
 ### Inverse ToggleButton
 
-- ```javascript
-  class InverseExample extends React.Component {
-    state = {
-      locked: false
-    }
-
-    handleLocked = (e) => {
-      this.setState((prevState) => ({ locked: !prevState.locked }))
-    }
-
-    render() {
-      const locked = this.state.locked
-
-      return (
-        <View
-          as="div"
-          padding="xx-large"
-          background="primary-inverse"
-          id="inverseToggleContainer"
-        >
-          <ToggleButton
-            status={locked ? 'pressed' : 'unpressed'}
-            color="primary-inverse"
-            renderIcon={locked ? IconLockSolid : IconUnlockLine}
-            screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
-            renderTooltipContent={locked ? 'Unlock' : 'Lock'}
-            onClick={this.handleLocked}
-          />
-        </View>
-      )
-    }
-  }
-  render(<InverseExample />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const InverseExample = () => {
     const [locked, setLocked] = useState(false)
 
@@ -124,7 +65,7 @@ between one of two states (locked/unlocked, published/unpublished, etc.).
     )
   }
   render(<InverseExample />)
-  ```
+```
 
 ### Guidelines