@instructure/ui-buttons 11.7.5 → 11.7.6-snapshot-11

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.6-snapshot-11](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-11) (2026-08-31)
+
+
+### Features
+
+* **many:** add margin prop to v2 FormFieldGroup, CheckboxGroup, RadioInputGroup, Checkbox, RadioInput, RangeInput, Text, and ToggleButton ([fea952f](https://github.com/instructure/instructure-ui/commit/fea952f22e553745c299eeba1a2700dbb3b9d296))
+
+
+
+
+
 ## [11.7.5](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5) (2026-08-25)
 
 **Note:** Version bump only for package @instructure/ui-buttons

package/es/ToggleButton/v2/index.js

@@ -80,6 +80,7 @@ class ToggleButton extends Component {
       status,
       placement,
       onClick,
+      margin,
       ...props
     } = this.props;
     return _jsx(Tooltip, {
@@ -113,7 +114,8 @@ class ToggleButton extends Component {
         interaction: interaction,
         "aria-pressed": status === 'pressed',
         "data-cid": "ToggleButton",
-        renderIcon: renderIcon
+        renderIcon: renderIcon,
+        margin: margin
       })
     });
   }

package/es/ToggleButton/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
+const allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'margin', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
 export { allowedProps };

package/lib/ToggleButton/v2/index.js

@@ -86,6 +86,7 @@ class ToggleButton extends _react.Component {
       status,
       placement,
       onClick,
+      margin,
       ...props
     } = this.props;
     return (0, _jsxRuntime.jsx)(_latest.Tooltip, {
@@ -119,7 +120,8 @@ class ToggleButton extends _react.Component {
         interaction: interaction,
         "aria-pressed": status === 'pressed',
         "data-cid": "ToggleButton",
-        renderIcon: renderIcon
+        renderIcon: renderIcon,
+        margin: margin
       })
     });
   }

package/lib/ToggleButton/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
+const allowedProps = exports.allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'margin', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];

package/package.json

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

package/src/ToggleButton/v2/index.tsx

@@ -91,6 +91,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
       status,
       placement,
       onClick,
+      margin,
       ...props
     } = this.props
 
@@ -124,6 +125,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
           aria-pressed={status === 'pressed'}
           data-cid="ToggleButton"
           renderIcon={renderIcon}
+          margin={margin}
         />
       </Tooltip>
     )

package/src/ToggleButton/v2/props.ts

@@ -35,6 +35,7 @@ import type {
 } from '@instructure/ui-position'
 import type { ViewProps } from '@instructure/ui-view/latest'
 import { Renderable } from '@instructure/shared-types'
+import type { Spacing } from '@instructure/emotion'
 
 type ToggleButtonOwnProps = {
   /**
@@ -110,6 +111,13 @@ type ToggleButtonOwnProps = {
    * or a function returning an element.
    */
   constrain?: PositionConstraint
+
+  /**
+   * Valid values are `0`, `none`, `auto`, and Spacing token values,
+   * see https://instructure.design/layout-spacing. Apply these values via
+   * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
+   */
+  margin?: Spacing
 }
 
 type PropKeys = keyof ToggleButtonOwnProps
@@ -129,6 +137,7 @@ const allowedProps: AllowedPropKeys = [
   'elementRef',
   'interaction',
   'isShowingTooltip',
+  'margin',
   'mountNode',
   'onClick',
   'placement',