@instructure/ui-buttons 11.6.1-snapshot-135 → 11.7.0

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.6.1-snapshot-135](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-snapshot-135) (2026-03-18)
+# [11.7.0](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.7.0) (2026-03-18)
 
 
 ### Bug Fixes
@@ -14,6 +14,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **many:** add solution for using both old and new token system in the same app ([688a713](https://github.com/instructure/instructure-ui/commit/688a713ff715433bb085323dbad61285387c5141))
+* **ui-buttons,ui-text-input:** add condensed sizes to IconButton and simplify TextInput afterElement ([49bd675](https://github.com/instructure/instructure-ui/commit/49bd675ad9d9e77bffeb1940888d33d6cc911c60))
 * **ui-buttons:** add v2 button components with new icon system and theming ([4f49e3e](https://github.com/instructure/instructure-ui/commit/4f49e3e27d8a44f566f2390f8bb8abf6d8ee745b))
 
 

package/package.json

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

package/src/Button/v2/README.md

@@ -37,7 +37,7 @@ The `primary-inverse` color is designed for use on colored backgrounds. It provi
 ---
 type: example
 ---
-<View display="block" background="brand" padding="small">
+<View display="block" background="info" padding="small">
   <Button color="primary-inverse" margin="small">Primary Inverse</Button>
 </View>
 ```

package/src/IconButton/v2/README.md

@@ -12,6 +12,52 @@ type: example
 <IconButton screenReaderLabel="Add User"><PlusInstUIIcon /></IconButton>
 ```
 
+### Sizes
+
+```js
+---
+type: example
+---
+<View display="block">
+  <IconButton size="small" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
+  <IconButton size="medium" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
+  <IconButton size="large" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
+</View>
+```
+
+There are also two condensed size variants for compact layouts: `condensedSmall` and `condensedMedium`. These are designed to be used inside other components, such as a [TextInput](TextInput).
+
+```js
+---
+type: example
+---
+const PasswordInput = () => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  return (
+    <View as="div" maxWidth="20rem">
+    <TextInput
+      renderLabel="Password"
+      type={showPassword ? 'text' : 'password'}
+      renderAfterInput={
+        <IconButton
+          size="condensedMedium"
+          withBackground={false}
+          withBorder={false}
+          screenReaderLabel={showPassword ? 'Hide password' : 'Show password'}
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? <EyeOffInstUIIcon /> : <EyeInstUIIcon />}
+        </IconButton>
+      }
+    />
+    </View>
+  )
+}
+
+render(<PasswordInput />)
+```
+
 ### Accessibility
 
 Because the IconButton visually only renders an icon, a description is necessary for assistive technologies. The `screenReaderLabel` prop is required for this purpose, and should consist of a complete description of the action.

package/src/IconButton/v2/props.ts

@@ -59,7 +59,7 @@ type IconButtonOwnProps = {
   /**
    * The size of the `IconButton`
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large' | 'condensedSmall' | 'condensedMedium'
 
   /**
    * Provides a reference to the `IconButton`'s underlying html element.

package/src/ToggleButton/v2/README.md

@@ -50,7 +50,7 @@ type: example
       <View
         as="div"
         padding="xx-large"
-        background="primary-inverse"
+        background="info"
         id="inverseToggleContainer"
       >
         <ToggleButton