@instructure/ui-buttons 8.50.1-snapshot-1 → 8.50.1-snapshot-13

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.
 
-## [8.50.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-1) (2023-12-06)
+## [8.50.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-13) (2023-12-07)
 
 **Note:** Version bump only for package @instructure/ui-buttons
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "8.50.1-snapshot-1",
+  "version": "8.50.1-snapshot-13",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.50.1-snapshot-1",
-    "@instructure/ui-test-locator": "8.50.1-snapshot-1",
-    "@instructure/ui-test-queries": "8.50.1-snapshot-1",
-    "@instructure/ui-test-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-themes": "8.50.1-snapshot-1"
+    "@instructure/ui-babel-preset": "8.50.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.50.1-snapshot-13",
+    "@instructure/ui-test-queries": "8.50.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-themes": "8.50.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.50.1-snapshot-1",
-    "@instructure/emotion": "8.50.1-snapshot-1",
-    "@instructure/shared-types": "8.50.1-snapshot-1",
-    "@instructure/ui-a11y-content": "8.50.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-color-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-dom-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-icons": "8.50.1-snapshot-1",
-    "@instructure/ui-position": "8.50.1-snapshot-1",
-    "@instructure/ui-react-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-testable": "8.50.1-snapshot-1",
-    "@instructure/ui-tooltip": "8.50.1-snapshot-1",
-    "@instructure/ui-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-view": "8.50.1-snapshot-1",
+    "@instructure/console": "8.50.1-snapshot-13",
+    "@instructure/emotion": "8.50.1-snapshot-13",
+    "@instructure/shared-types": "8.50.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.50.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-icons": "8.50.1-snapshot-13",
+    "@instructure/ui-position": "8.50.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-testable": "8.50.1-snapshot-13",
+    "@instructure/ui-tooltip": "8.50.1-snapshot-13",
+    "@instructure/ui-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-view": "8.50.1-snapshot-13",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/README.md

@@ -7,7 +7,7 @@ Use [Button](#Button), [IconButton](#IconButton), or [CondensedButton](#Condense
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block" margin="medium">
   <BaseButton>Click me</BaseButton>

package/src/Button/README.md

@@ -6,7 +6,7 @@ Button allows users to perform actions or trigger changes. If selecting the Butt
 
 ```js
 ---
-example: true
+type: example
 ---
 <Button>Hello{null}</Button>
 ```
@@ -17,7 +17,7 @@ The `color` prop will change the Button's color scheme.
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block">
   <Button color="primary" margin="small">Primary</Button>
@@ -34,7 +34,7 @@ To specify the Button `size`, set the size prop to `small`, `medium` (default) o
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block">
   <Button size="small" margin="small">Small</Button>
@@ -49,7 +49,7 @@ An icon can be rendered alongside the Button content using the `renderIcon` prop
 
 ```js
 ---
-example: true
+type: example
 ---
 <Button renderIcon={IconAddLine}>Add Item</Button>
 ```
@@ -60,7 +60,7 @@ Just like native HTML buttons, the Button text will wrap to the next line when i
 
 ```js
 ---
-example: true
+type: example
 ---
 <View
   display="block"
@@ -77,33 +77,73 @@ example: true
 
 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
----
-example: true
-render: false
----
-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 })
+    handleUpdate = (isTruncated) => {
+      if (this.state.isTruncated !== isTruncated) {
+        this.setState({ isTruncated })
+      }
     }
-  }
 
-  renderButton () {
-    return (
-      <Button color="primary">
-        <TruncateText onUpdate={this.handleUpdate}>
-          {this.props.message}
-        </TruncateText>
-      </Button>
-    )
+    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 () {
+  render(<Example message="A Button With a Whole Lot of Text" />)
+  ```
+
+- ```js
+  const Example = ({ message }) => {
+    const [isTruncated, setIsTruncated] = useState(false)
+
+    const handleUpdate = (shouldBeTruncated) => {
+      if (isTruncated !== shouldBeTruncated) {
+        setIsTruncated(shouldBeTruncated)
+      }
+    }
+
+    const renderButton = () => {
+      return (
+        <Button color="primary">
+          <TruncateText onUpdate={handleUpdate}>{message}</TruncateText>
+        </Button>
+      )
+    }
+
     return (
       <View
         display="block"
@@ -112,21 +152,22 @@ class Example extends React.Component {
         padding="small none"
         withVisualDebug
       >
-        {this.state.isTruncated ? (
+        {isTruncated ? (
           <Tooltip
-            renderTip={this.props.message}
+            renderTip={message}
             mountNode={() => document.getElementById('main')}
           >
-            { this.renderButton() }
+            {renderButton()}
           </Tooltip>
-        ) : this.renderButton()}
+        ) : (
+          renderButton()
+        )}
       </View>
     )
   }
-}
 
-render(<Example message="A Button With a Whole Lot of Text" />)
-```
+  render(<Example message="A Button With a Whole Lot of Text" />)
+  ```
 
 ### Display
 
@@ -134,7 +175,7 @@ By default, the Button displays inline with other elements. If you need it to ex
 
 ```js
 ---
-example: true
+type: example
 ---
 <View
   display="block"
@@ -160,7 +201,7 @@ Use backgroundless buttons for interfaces on dark backgrounds or when there is a
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block">
   <View display="inline-block" background="primary">
@@ -176,7 +217,7 @@ example: true
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">
@@ -199,7 +240,7 @@ guidelines: true
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="a11y" title="Accessibility">

package/src/CloseButton/README.md

@@ -8,7 +8,7 @@ The `placement` prop designates the `CloseButton` placement within the parent co
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block" position="relative" height="5rem" background="primary" shadow="resting">
   <CloseButton placement="end" offset="small" screenReaderLabel="Close" />
@@ -19,7 +19,7 @@ If you need the `CloseButton` to work in a layout with other elements vs. absolu
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block" position="relative" background="primary" shadow="resting">
   <Flex height="6rem" justifyItems="space-between" alignItems="center" padding="medium">
@@ -37,7 +37,7 @@ If you need even more customization, note that you can always compose this compo
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block" position="relative" height="5rem" background="primary" shadow="resting">
   <Flex justifyItems="end">
@@ -59,7 +59,7 @@ example: true
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="a11y" title="Accessibility">

package/src/CondensedButton/README.md

@@ -6,7 +6,7 @@ CondensedButton is a button component that renders without padding. It is meant
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block" background="primary" padding="small">
   <CondensedButton>Click Me</CondensedButton>
@@ -17,7 +17,7 @@ In the following example, CondensedButton is used so that the button content can
 
 ```js
 ---
-example: true
+type: example
 ---
 <Table caption='Tallest Roller Coasters'>
   <Table.Head>

package/src/IconButton/README.md

@@ -6,7 +6,7 @@ An IconButton can be used when the Button only renders an Icon and does not have
 
 ```js
 ---
-example: true
+type: example
 ---
 <IconButton screenReaderLabel="Add User"><IconAddLine /></IconButton>
 ```
@@ -17,7 +17,7 @@ Because the IconButton visually only renders an icon, a description is necessary
 
 ```js
 ---
-example: true
+type: example
 ---
 <IconButton color="primary" screenReaderLabel="Add blog post"><IconAddLine /></IconButton>
 ```
@@ -26,7 +26,7 @@ Using [Tooltip](#Tooltip) in conjunction with IconButton can also provide necess
 
 ```js
 ---
-example: true
+type: example
 ---
 <Tooltip
   renderTip="View user profile"
@@ -43,7 +43,7 @@ The `shape` prop specifies if the IconButton will render as a `rectangle` or `ci
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block">
   <IconButton shape="rectangle" screenReaderLabel="Delete tag" margin="small"><IconXSolid /></IconButton>
@@ -57,7 +57,7 @@ The background and border can be optionally removed as needed by setting the `wi
 
 ```js
 ---
-example: true
+type: example
 ---
 <View display="block">
   <View display="inline-block" background="primary">

package/src/ToggleButton/README.md

@@ -7,8 +7,7 @@ between one of two states (locked/unlocked, published/unpublished, etc.).
 
 ```javascript
 ---
-example: true
-render: false
+type: example
 ---
 class Example extends React.Component {
   state = {
@@ -46,8 +45,7 @@ render(<Example />)
 
 ```javascript
 ---
-example: true
-render: false
+type: example
 ---
 class InverseExample extends React.Component {
   state = {
@@ -85,7 +83,7 @@ render(<InverseExample />)
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">