@instructure/ui-alerts 11.0.1-snapshot-0 → 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-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
+## [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-alerts
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "11.0.1-snapshot-0",
+  "version": "11.0.1-snapshot-2",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.0.1-snapshot-0",
-    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
-    "@instructure/ui-color-utils": "11.0.1-snapshot-0",
-    "@instructure/ui-scripts": "11.0.1-snapshot-0",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-2",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
+    "@instructure/ui-color-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-scripts": "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",
@@ -34,16 +34,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.0.1-snapshot-0",
-    "@instructure/emotion": "11.0.1-snapshot-0",
-    "@instructure/shared-types": "11.0.1-snapshot-0",
-    "@instructure/ui-a11y-content": "11.0.1-snapshot-0",
-    "@instructure/ui-buttons": "11.0.1-snapshot-0",
-    "@instructure/ui-icons": "11.0.1-snapshot-0",
-    "@instructure/ui-motion": "11.0.1-snapshot-0",
-    "@instructure/ui-react-utils": "11.0.1-snapshot-0",
-    "@instructure/ui-themes": "11.0.1-snapshot-0",
-    "@instructure/ui-view": "11.0.1-snapshot-0",
+    "@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-buttons": "11.0.1-snapshot-2",
+    "@instructure/ui-icons": "11.0.1-snapshot-2",
+    "@instructure/ui-motion": "11.0.1-snapshot-2",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-themes": "11.0.1-snapshot-2",
+    "@instructure/ui-view": "11.0.1-snapshot-2",
     "keycode": "^2"
   },
   "peerDependencies": {

package/src/Alert/README.md

@@ -81,217 +81,99 @@ ensure that element has the correct ARIA attributes.
 For more information about live regions, see
 [this MDN article](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-
-      this.state = {
-        alerts: []
-      }
-
-      this.i = 0
-      this.variants = ['info', 'success', 'warning', 'error']
-      this.politeness = ['polite', 'assertive']
-    }
-
-    addAlert() {
-      const variant = this.variants[this.i++ % this.variants.length]
-      const politeness = Math.random() < 0.5 ? 'polite' : 'assertive'
-      const alerts = [...this.state.alerts]
-      const key = new Number(this.i)
-      alerts.push({
-        key,
+```js
+---
+type: example
+---
+const Example = () => {
+  const [alerts, setAlerts] = useState([])
+  const [count, setcount] = useState(0)
+
+  const variants = ['info', 'success', 'warning', 'error']
+
+  const addAlert = () => {
+    const variant = variants[count % variants.length]
+    const politeness = Math.random() < 0.5 ? 'polite' : 'assertive'
+    setAlerts([
+      ...alerts,
+      {
+        key: count,
         variant,
-        politeness,
-        onDismiss: () => this.closeAlert(key)
-      })
-      this.setState({ alerts })
-    }
-
-    closeAlert(key) {
-      const alerts = this.state.alerts.filter((alert) => {
-        return alert.key !== key
-      })
-      this.setState({ alerts })
-    }
-
-    getScreenReaderLabel(variant) {
-      const labels = {
-        info: 'Information, ',
-        success: 'Success, ',
-        warning: 'Warning, ',
-        error: 'Error, '
+        politeness
       }
-      return labels[variant] || ''
-    }
-
-    render() {
-      return (
-        <div>
-          <Button onClick={this.addAlert.bind(this)}>Add Alert</Button>
-          {this.state.alerts.map((alert) => {
-            return (
-              <View key={alert.key} display="block" margin="small 0">
-                <Alert
-                  variant={alert.variant}
-                  renderCloseButtonLabel="Close"
-                  onDismiss={alert.onDismiss}
-                  liveRegion={() => document.getElementById('flash-messages')}
-                  liveRegionPoliteness={alert.politeness}
-                  margin="small 0"
-                  variantScreenReaderLabel={this.getScreenReaderLabel(
-                    alert.variant
-                  )}
-                >
-                  This is {alert.politeness === 'polite' ? 'a' : 'an'}{' '}
-                  {alert.politeness} {alert.variant} alert
-                </Alert>
-              </View>
-            )
-          })}
-        </div>
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [alerts, setAlerts] = useState([])
-    const [count, setcount] = useState(0)
-
-    const variants = ['info', 'success', 'warning', 'error']
-
-    const addAlert = () => {
-      const variant = variants[count % variants.length]
-      const politeness = Math.random() < 0.5 ? 'polite' : 'assertive'
-      setAlerts([
-        ...alerts,
-        {
-          key: count,
-          variant,
-          politeness
-        }
-      ])
-      setcount(count + 1)
-    }
-
-    const closeAlert = (key) =>
-      setAlerts(alerts.filter((alert) => alert.key !== key))
-
-    return (
-      <div>
-        <Button onClick={addAlert}>Add Alert</Button>
-        {alerts.map((alert) => {
-          return (
-            <View key={alert.key} display="block" margin="small 0">
-              <Alert
-                variant={alert.variant}
-                renderCloseButtonLabel="Close"
-                onDismiss={() => closeAlert(alert.key)}
-                liveRegion={() => document.getElementById('flash-messages')}
-                liveRegionPoliteness={alert.politeness}
-                margin="small 0"
-              >
-                This is {alert.politeness === 'polite' ? 'a' : 'an'}{' '}
-                {alert.politeness} {alert.variant} alert
-              </Alert>
-            </View>
-          )
-        })}
-      </div>
-    )
+    ])
+    setcount(count + 1)
   }
 
-  render(<Example />)
-  ```
+  const closeAlert = (key) =>
+    setAlerts(alerts.filter((alert) => alert.key !== key))
+
+  return (
+    <div>
+      <Button onClick={addAlert}>Add Alert</Button>
+      {alerts.map((alert) => {
+        return (
+          <View key={alert.key} display="block" margin="small 0">
+            <Alert
+              variant={alert.variant}
+              renderCloseButtonLabel="Close"
+              onDismiss={() => closeAlert(alert.key)}
+              liveRegion={() => document.getElementById('flash-messages')}
+              liveRegionPoliteness={alert.politeness}
+              margin="small 0"
+            >
+              This is {alert.politeness === 'polite' ? 'a' : 'an'}{' '}
+              {alert.politeness} {alert.variant} alert
+            </Alert>
+          </View>
+        )
+      })}
+    </div>
+  )
+}
+
+render(<Example />)
+```
 
 Alerts can be used to emit screenreader only messages too
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-
-      this.state = {
-        message: null,
-        count: 1
-      }
-    }
-
-    changeMessage = () => {
-      this.setState({
-        message: `this is message ${this.state.count}`,
-        count: this.state.count + 1
-      })
-    }
-
-    clearMessage = () => {
-      this.setState({
-        message: null,
-        count: this.state.count + 1
-      })
-    }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [message, setMessage] = useState(null)
+  const [count, setCount] = useState(1)
 
-    render() {
-      return (
-        <div>
-          <Button onClick={this.changeMessage}>Change Message</Button>
-          <Button onClick={this.clearMessage} margin="0 0 0 small">
-            Clear Message
-          </Button>
-          <Alert
-            liveRegion={() => document.getElementById('flash-messages')}
-            isLiveRegionAtomic
-            screenReaderOnly
-          >
-            {this.state.message}
-          </Alert>
-        </div>
-      )
-    }
+  const changeMessage = () => {
+    setMessage(`this is message ${count}`)
+    setCount(count + 1)
   }
 
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [message, setMessage] = useState(null)
-    const [count, setCount] = useState(1)
-
-    const changeMessage = () => {
-      setMessage(`this is message ${count}`)
-      setCount(count + 1)
-    }
-
-    const clearMessage = () => {
-      setMessage(null)
-      setCount(count + 1)
-    }
-
-    return (
-      <div>
-        <Button onClick={changeMessage}>Change Message</Button>
-        <Button onClick={clearMessage} margin="0 0 0 small">
-          Clear Message
-        </Button>
-        <Alert
-          liveRegion={() => document.getElementById('flash-messages')}
-          isLiveRegionAtomic
-          screenReaderOnly
-        >
-          {message}
-        </Alert>
-      </div>
-    )
+  const clearMessage = () => {
+    setMessage(null)
+    setCount(count + 1)
   }
 
-  render(<Example />)
-  ```
+  return (
+    <div>
+      <Button onClick={changeMessage}>Change Message</Button>
+      <Button onClick={clearMessage} margin="0 0 0 small">
+        Clear Message
+      </Button>
+      <Alert
+        liveRegion={() => document.getElementById('flash-messages')}
+        isLiveRegionAtomic
+        screenReaderOnly
+      >
+        {message}
+      </Alert>
+    </div>
+  )
+}
+
+render(<Example />)
+```
 
 When Alerts are used inline, the shadow can be removed with the `hasShadow` property.