@instructure/ui-buttons 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-buttons
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.0.1-snapshot-9",
+  "version": "10.0.1-snapshot-11",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.0.1-snapshot-9",
-    "@instructure/ui-babel-preset": "10.0.1-snapshot-9",
-    "@instructure/ui-test-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-themes": "10.0.1-snapshot-9",
+    "@instructure/ui-axe-check": "10.0.1-snapshot-11",
+    "@instructure/ui-babel-preset": "10.0.1-snapshot-11",
+    "@instructure/ui-test-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-themes": "10.0.1-snapshot-11",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.0.1-snapshot-9",
-    "@instructure/emotion": "10.0.1-snapshot-9",
-    "@instructure/shared-types": "10.0.1-snapshot-9",
-    "@instructure/ui-a11y-content": "10.0.1-snapshot-9",
-    "@instructure/ui-a11y-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-color-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-dom-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-icons": "10.0.1-snapshot-9",
-    "@instructure/ui-position": "10.0.1-snapshot-9",
-    "@instructure/ui-prop-types": "10.0.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-testable": "10.0.1-snapshot-9",
-    "@instructure/ui-tooltip": "10.0.1-snapshot-9",
-    "@instructure/ui-utils": "10.0.1-snapshot-9",
-    "@instructure/ui-view": "10.0.1-snapshot-9",
+    "@instructure/console": "10.0.1-snapshot-11",
+    "@instructure/emotion": "10.0.1-snapshot-11",
+    "@instructure/shared-types": "10.0.1-snapshot-11",
+    "@instructure/ui-a11y-content": "10.0.1-snapshot-11",
+    "@instructure/ui-a11y-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-color-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-dom-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-icons": "10.0.1-snapshot-11",
+    "@instructure/ui-position": "10.0.1-snapshot-11",
+    "@instructure/ui-prop-types": "10.0.1-snapshot-11",
+    "@instructure/ui-react-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-testable": "10.0.1-snapshot-11",
+    "@instructure/ui-tooltip": "10.0.1-snapshot-11",
+    "@instructure/ui-utils": "10.0.1-snapshot-11",
+    "@instructure/ui-view": "10.0.1-snapshot-11",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/ToggleButton/README.md

@@ -5,23 +5,43 @@ 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
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    locked: 'off'
-  }
+- ```javascript
+  class Example extends React.Component {
+    state = {
+      locked: false
+    }
+
+    handleLocked = (e) => {
+      this.setState((prevState) => ({ locked: !prevState.locked }))
+    }
 
-  handleLocked = (e) => {
-    this.setState(function(prevState) {
-      return {locked: prevState.locked === 'on' ? 'off' : 'on'}
-    })
+    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
+  const Example = () => {
+    const [locked, setLocked] = useState(false)
 
-  render () {
-    const locked = this.state.locked === 'on'
+    const handleLocked = () => {
+      setLocked(!locked)
+    }
 
     return (
       <View as="div" padding="x-large" id="toggleContainer">
@@ -31,53 +51,80 @@ class Example extends React.Component {
           renderIcon={locked ? IconLockSolid : IconUnlockLine}
           screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
           renderTooltipContent={locked ? 'Unlock' : 'Lock'}
-          onClick={this.handleLocked}
-          mountNode={() => document.getElementById('toggleContainer')}
+          onClick={handleLocked}
         />
       </View>
     )
   }
-}
-render(<Example />)
-```
+
+  render(<Example />)
+  ```
 
 ### Inverse ToggleButton
 
-```javascript
----
-type: example
----
-class InverseExample extends React.Component {
-  state = {
-    locked: 'off'
-  }
+- ```javascript
+  class InverseExample extends React.Component {
+    state = {
+      locked: false
+    }
+
+    handleLocked = (e) => {
+      this.setState((prevState) => ({ locked: !prevState.locked }))
+    }
 
-  handleLocked = (e) => {
-    this.setState(function(prevState) {
-      return {locked: prevState.locked === 'on' ? 'off' : 'on'}
-    })
+    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
+  const InverseExample = () => {
+    const [locked, setLocked] = useState(false)
 
-  render () {
-    const locked = this.state.locked === 'on'
+    const handleLocked = () => {
+      setLocked(!locked)
+    }
 
     return (
-      <View as="div" padding="xx-large" background="primary-inverse" id="inverseToggleContainer">
+      <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}
-          mountNode={() => document.getElementById('inverseToggleContainer')}
+          onClick={handleLocked}
         />
       </View>
     )
   }
-}
-render(<InverseExample />)
-```
+  render(<InverseExample />)
+  ```
 
 ### Guidelines