@instructure/ui-checkbox 10.2.2-snapshot-5 → 10.2.2-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-5) (2024-09-10)
+## [10.2.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-7) (2024-09-10)
 
-**Note:** Version bump only for package @instructure/ui-checkbox
+
+### Bug Fixes
+
+* **ui-checkbox,ui-radio-input:** reduce clickable area of checkbox and radioinput ([77b2a7d](https://github.com/instructure/instructure-ui/commit/77b2a7d18da19f28328486e53a31f7ca5ec37e74))
 
 
 

package/es/Checkbox/index.js

@@ -199,6 +199,8 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
       onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver),
       onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut),
       ref: this.handleRef
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.container
     }, jsx("input", Object.assign({}, props, {
       id: this.id,
       value: value,
@@ -217,7 +219,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
     })), jsx("label", {
       htmlFor: this.id,
       css: styles === null || styles === void 0 ? void 0 : styles.control
-    }, this.renderFacade(), this.renderMessages()));
+    }, this.renderFacade(), this.renderMessages())));
   }
 }, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = propTypes, _Checkbox.allowedProps = allowedProps, _Checkbox.defaultProps = {
   size: 'medium',

package/es/Checkbox/styles.js

@@ -51,6 +51,10 @@ const generateStyle = (_componentTheme, props) => {
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,

package/lib/Checkbox/index.js

@@ -220,6 +220,8 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.handleMouseOver),
       onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.handleMouseOut),
       ref: this.handleRef
+    }, (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.container
     }, (0, _emotion.jsx)("input", Object.assign({}, props, {
       id: this.id,
       value: value,
@@ -238,7 +240,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
     })), (0, _emotion.jsx)("label", {
       htmlFor: this.id,
       css: styles === null || styles === void 0 ? void 0 : styles.control
-    }, this.renderFacade(), this.renderMessages()));
+    }, this.renderFacade(), this.renderMessages())));
   }
 }, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = _props.propTypes, _Checkbox.allowedProps = _props.allowedProps, _Checkbox.defaultProps = {
   size: 'medium',

package/lib/Checkbox/styles.js

@@ -57,6 +57,10 @@ const generateStyle = (_componentTheme, props) => {
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "10.2.2-snapshot-5",
+  "version": "10.2.2-snapshot-7",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.2-snapshot-5",
-    "@instructure/emotion": "10.2.2-snapshot-5",
-    "@instructure/shared-types": "10.2.2-snapshot-5",
-    "@instructure/ui-dom-utils": "10.2.2-snapshot-5",
-    "@instructure/ui-form-field": "10.2.2-snapshot-5",
-    "@instructure/ui-icons": "10.2.2-snapshot-5",
-    "@instructure/ui-prop-types": "10.2.2-snapshot-5",
-    "@instructure/ui-react-utils": "10.2.2-snapshot-5",
-    "@instructure/ui-svg-images": "10.2.2-snapshot-5",
-    "@instructure/ui-testable": "10.2.2-snapshot-5",
-    "@instructure/ui-utils": "10.2.2-snapshot-5",
-    "@instructure/ui-view": "10.2.2-snapshot-5",
-    "@instructure/uid": "10.2.2-snapshot-5",
+    "@instructure/console": "10.2.2-snapshot-7",
+    "@instructure/emotion": "10.2.2-snapshot-7",
+    "@instructure/shared-types": "10.2.2-snapshot-7",
+    "@instructure/ui-dom-utils": "10.2.2-snapshot-7",
+    "@instructure/ui-form-field": "10.2.2-snapshot-7",
+    "@instructure/ui-icons": "10.2.2-snapshot-7",
+    "@instructure/ui-prop-types": "10.2.2-snapshot-7",
+    "@instructure/ui-react-utils": "10.2.2-snapshot-7",
+    "@instructure/ui-svg-images": "10.2.2-snapshot-7",
+    "@instructure/ui-testable": "10.2.2-snapshot-7",
+    "@instructure/ui-utils": "10.2.2-snapshot-7",
+    "@instructure/ui-view": "10.2.2-snapshot-7",
+    "@instructure/uid": "10.2.2-snapshot-7",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.2-snapshot-5",
-    "@instructure/ui-babel-preset": "10.2.2-snapshot-5",
-    "@instructure/ui-color-utils": "10.2.2-snapshot-5",
-    "@instructure/ui-test-utils": "10.2.2-snapshot-5",
-    "@instructure/ui-themes": "10.2.2-snapshot-5",
+    "@instructure/ui-axe-check": "10.2.2-snapshot-7",
+    "@instructure/ui-babel-preset": "10.2.2-snapshot-7",
+    "@instructure/ui-color-utils": "10.2.2-snapshot-7",
+    "@instructure/ui-test-utils": "10.2.2-snapshot-7",
+    "@instructure/ui-themes": "10.2.2-snapshot-7",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

package/src/Checkbox/index.tsx

@@ -273,27 +273,29 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         onMouseOut={createChainedFunction(onMouseOut, this.handleMouseOut)}
         ref={this.handleRef}
       >
-        <input
-          {...props}
-          id={this.id}
-          value={value}
-          type="checkbox"
-          ref={(c) => {
-            this._input = c
-          }}
-          disabled={disabled || readOnly}
-          aria-checked={indeterminate ? 'mixed' : undefined}
-          css={styles?.input}
-          onChange={this.handleChange}
-          onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
-          onFocus={createChainedFunction(onFocus, this.handleFocus)}
-          onBlur={createChainedFunction(onBlur, this.handleBlur)}
-          checked={this.checked}
-        />
-        <label htmlFor={this.id} css={styles?.control}>
-          {this.renderFacade()}
-          {this.renderMessages()}
-        </label>
+        <div css={styles?.container}>
+          <input
+            {...props}
+            id={this.id}
+            value={value}
+            type="checkbox"
+            ref={(c) => {
+              this._input = c
+            }}
+            disabled={disabled || readOnly}
+            aria-checked={indeterminate ? 'mixed' : undefined}
+            css={styles?.input}
+            onChange={this.handleChange}
+            onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
+            onFocus={createChainedFunction(onFocus, this.handleFocus)}
+            onBlur={createChainedFunction(onBlur, this.handleBlur)}
+            checked={this.checked}
+          />
+          <label htmlFor={this.id} css={styles?.control}>
+            {this.renderFacade()}
+            {this.renderMessages()}
+          </label>
+        </div>
       </div>
     )
   }

package/src/Checkbox/props.ts

@@ -87,9 +87,12 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CheckboxProps = CheckboxOwnProps &
   WithStyleProps<CheckboxFacadeTheme | ToggleFacadeTheme, CheckboxStyle> &
-  OtherHTMLAttributes<CheckboxOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<CheckboxOwnProps> &
+  WithDeterministicIdProps
 
-type CheckboxStyle = ComponentStyle<'checkbox' | 'input' | 'control'>
+type CheckboxStyle = ComponentStyle<
+  'checkbox' | 'input' | 'control' | 'container'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,

package/src/Checkbox/styles.ts

@@ -57,6 +57,10 @@ const generateStyle = (
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,