@instructure/ui-checkbox 10.16.5-snapshot-6 → 10.16.5-snapshot-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Checkbox/ToggleFacade/styles.js +6 -1
  3. package/lib/Checkbox/ToggleFacade/styles.js +6 -1
  4. package/package.json +19 -19
  5. package/src/Checkbox/ToggleFacade/styles.ts +11 -2
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/Checkbox/ToggleFacade/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.16.5-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.16.4...v10.16.5-snapshot-6) (2025-05-16)
6
+ ## [10.16.5-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.16.4...v10.16.5-snapshot-7) (2025-05-20)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-checkbox
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-checkbox:** remove pointer cursor from disabled checkbox toggle ([796284e](https://github.com/instructure/instructure-ui/commit/796284ecad5af495d369ef467386f21a503fdc0f))
9
12
 
10
13
 
11
14
 
package/es/Checkbox/ToggleFacade/styles.js CHANGED
@@ -33,7 +33,8 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const size = props.size,
36
+ const disabled = props.disabled,
37
+ size = props.size,
37
38
  checked = props.checked,
38
39
  focused = props.focused,
39
40
  labelPlacement = props.labelPlacement,
@@ -102,6 +103,10 @@ const generateStyle = (componentTheme, props) => {
102
103
  background: componentTheme.checkedBackground,
103
104
  boxShadow: 'none'
104
105
  }),
106
+ ...(disabled && {
107
+ cursor: 'not-allowed',
108
+ pointerEvents: 'none'
109
+ }),
105
110
  '&::before': {
106
111
  content: '""',
107
112
  position: 'absolute',
package/lib/Checkbox/ToggleFacade/styles.js CHANGED
@@ -39,7 +39,8 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const size = props.size,
42
+ const disabled = props.disabled,
43
+ size = props.size,
43
44
  checked = props.checked,
44
45
  focused = props.focused,
45
46
  labelPlacement = props.labelPlacement,
@@ -108,6 +109,10 @@ const generateStyle = (componentTheme, props) => {
108
109
  background: componentTheme.checkedBackground,
109
110
  boxShadow: 'none'
110
111
  }),
112
+ ...(disabled && {
113
+ cursor: 'not-allowed',
114
+ pointerEvents: 'none'
115
+ }),
111
116
  '&::before': {
112
117
  content: '""',
113
118
  position: 'absolute',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-checkbox",
3
- "version": "10.16.5-snapshot-6",
3
+ "version": "10.16.5-snapshot-7",
4
4
  "description": " styled HTML input type='checkbox' component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,28 +24,28 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.16.5-snapshot-6",
28
- "@instructure/emotion": "10.16.5-snapshot-6",
29
- "@instructure/shared-types": "10.16.5-snapshot-6",
30
- "@instructure/ui-dom-utils": "10.16.5-snapshot-6",
31
- "@instructure/ui-form-field": "10.16.5-snapshot-6",
32
- "@instructure/ui-icons": "10.16.5-snapshot-6",
33
- "@instructure/ui-prop-types": "10.16.5-snapshot-6",
34
- "@instructure/ui-react-utils": "10.16.5-snapshot-6",
35
- "@instructure/ui-svg-images": "10.16.5-snapshot-6",
36
- "@instructure/ui-testable": "10.16.5-snapshot-6",
37
- "@instructure/ui-utils": "10.16.5-snapshot-6",
38
- "@instructure/ui-view": "10.16.5-snapshot-6",
39
- "@instructure/uid": "10.16.5-snapshot-6",
27
+ "@instructure/console": "10.16.5-snapshot-7",
28
+ "@instructure/emotion": "10.16.5-snapshot-7",
29
+ "@instructure/shared-types": "10.16.5-snapshot-7",
30
+ "@instructure/ui-dom-utils": "10.16.5-snapshot-7",
31
+ "@instructure/ui-form-field": "10.16.5-snapshot-7",
32
+ "@instructure/ui-icons": "10.16.5-snapshot-7",
33
+ "@instructure/ui-prop-types": "10.16.5-snapshot-7",
34
+ "@instructure/ui-react-utils": "10.16.5-snapshot-7",
35
+ "@instructure/ui-svg-images": "10.16.5-snapshot-7",
36
+ "@instructure/ui-testable": "10.16.5-snapshot-7",
37
+ "@instructure/ui-utils": "10.16.5-snapshot-7",
38
+ "@instructure/ui-view": "10.16.5-snapshot-7",
39
+ "@instructure/uid": "10.16.5-snapshot-7",
40
40
  "keycode": "^2",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-axe-check": "10.16.5-snapshot-6",
45
- "@instructure/ui-babel-preset": "10.16.5-snapshot-6",
46
- "@instructure/ui-color-utils": "10.16.5-snapshot-6",
47
- "@instructure/ui-test-utils": "10.16.5-snapshot-6",
48
- "@instructure/ui-themes": "10.16.5-snapshot-6",
44
+ "@instructure/ui-axe-check": "10.16.5-snapshot-7",
45
+ "@instructure/ui-babel-preset": "10.16.5-snapshot-7",
46
+ "@instructure/ui-color-utils": "10.16.5-snapshot-7",
47
+ "@instructure/ui-test-utils": "10.16.5-snapshot-7",
48
+ "@instructure/ui-themes": "10.16.5-snapshot-7",
49
49
  "@testing-library/jest-dom": "^6.6.3",
50
50
  "@testing-library/react": "^16.0.1",
51
51
  "@testing-library/user-event": "^14.5.2",
package/src/Checkbox/ToggleFacade/styles.ts CHANGED
@@ -39,7 +39,7 @@ const generateStyle = (
39
39
  componentTheme: ToggleFacadeTheme,
40
40
  props: ToggleFacadeProps
41
41
  ): ToggleFacadeStyle => {
42
- const { size, checked, focused, labelPlacement, invalid } = props
42
+ const { disabled, size, checked, focused, labelPlacement, invalid } = props
43
43
 
44
44
  const labelPlacementVariants = {
45
45
  start: {
@@ -91,7 +91,11 @@ const generateStyle = (
91
91
  position: 'relative',
92
92
  borderRadius: '3rem',
93
93
  verticalAlign: 'middle',
94
- boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${(invalid && !checked) ? componentTheme.errorBorderColor : componentTheme.borderColor}`,
94
+ boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${
95
+ invalid && !checked
96
+ ? componentTheme.errorBorderColor
97
+ : componentTheme.borderColor
98
+ }`,
95
99
  height: componentTheme.toggleSize,
96
100
  width: `calc(${componentTheme.toggleSize} * 1.5)`,
97
101
  ...labelPlacementVariants[labelPlacement!].facade,
@@ -101,6 +105,11 @@ const generateStyle = (
101
105
  boxShadow: 'none'
102
106
  }),
103
107
 
108
+ ...(disabled && {
109
+ cursor: 'not-allowed',
110
+ pointerEvents: 'none'
111
+ }),
112
+
104
113
  '&::before': {
105
114
  content: '""',
106
115
  position: 'absolute',