@instructure/ui-radio-input 8.17.1-snapshot.82 → 8.18.1-snapshot.1

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 (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/es/RadioInput/index.js +21 -15
  3. package/es/RadioInput/theme.js +30 -30
  4. package/lib/RadioInput/index.js +21 -15
  5. package/lib/RadioInput/theme.js +30 -30
  6. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +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
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **ui-radio-input:** fix cursor of radioinput, version toggle in Safari ([0670cf5](https://github.com/instructure/instructure-ui/commit/0670cf5bc27401023eb273a44bdbf8cc79b5efa8))
11
+
6
12
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
13
 
8
14
  ### Bug Fixes
package/es/RadioInput/index.js CHANGED
@@ -85,15 +85,21 @@ let RadioInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
85
85
  }
86
86
 
87
87
  componentDidMount() {
88
- this.props.makeStyles?.();
88
+ var _this$props$makeStyle, _this$props;
89
+
90
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
89
91
  }
90
92
 
91
93
  componentDidUpdate() {
92
- this.props.makeStyles?.();
94
+ var _this$props$makeStyle2, _this$props2;
95
+
96
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
93
97
  }
94
98
 
95
99
  focus() {
96
- this._input?.focus();
100
+ var _this$_input;
101
+
102
+ (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
97
103
  }
98
104
 
99
105
  get id() {
@@ -109,16 +115,16 @@ let RadioInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
109
115
  }
110
116
 
111
117
  render() {
112
- const _this$props = this.props,
113
- disabled = _this$props.disabled,
114
- readOnly = _this$props.readOnly,
115
- label = _this$props.label,
116
- value = _this$props.value,
117
- name = _this$props.name,
118
- styles = _this$props.styles;
118
+ const _this$props3 = this.props,
119
+ disabled = _this$props3.disabled,
120
+ readOnly = _this$props3.readOnly,
121
+ label = _this$props3.label,
122
+ value = _this$props3.value,
123
+ name = _this$props3.name,
124
+ styles = _this$props3.styles;
119
125
  const props = omitProps(this.props, RadioInput.allowedProps);
120
126
  return jsx("div", {
121
- css: styles?.radioInput,
127
+ css: styles === null || styles === void 0 ? void 0 : styles.radioInput,
122
128
  ref: el => {
123
129
  this.ref = el;
124
130
  }
@@ -131,19 +137,19 @@ let RadioInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
131
137
  name: name,
132
138
  checked: this.checked,
133
139
  type: "radio",
134
- css: styles?.input,
140
+ css: styles === null || styles === void 0 ? void 0 : styles.input,
135
141
  disabled: disabled || readOnly,
136
142
  "aria-disabled": disabled || readOnly ? 'true' : void 0,
137
143
  onChange: this.handleChange,
138
144
  onClick: this.handleClick
139
145
  })), jsx("label", {
140
- css: styles?.control,
146
+ css: styles === null || styles === void 0 ? void 0 : styles.control,
141
147
  htmlFor: this.id
142
148
  }, jsx("span", {
143
- css: styles?.facade,
149
+ css: styles === null || styles === void 0 ? void 0 : styles.facade,
144
150
  "aria-hidden": "true"
145
151
  }), jsx("span", {
146
- css: styles?.label
152
+ css: styles === null || styles === void 0 ? void 0 : styles.label
147
153
  }, label)));
148
154
  }
149
155
 
package/es/RadioInput/theme.js CHANGED
@@ -42,47 +42,47 @@ const generateComponentTheme = theme => {
42
42
  labelColor: theme['ic-brand-font-color-dark']
43
43
  },
44
44
  'canvas-high-contrast': {
45
- toggleBackgroundOff: colors?.backgroundDarkest
45
+ toggleBackgroundOff: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
46
46
  }
47
47
  };
48
48
  const componentVariables = {
49
- labelColor: colors?.textDarkest,
50
- labelFontFamily: typography?.fontFamily,
51
- labelFontWeight: typography?.fontWeightNormal,
52
- labelLineHeight: typography?.lineHeightCondensed,
53
- background: colors?.backgroundLightest,
54
- borderWidth: borders?.widthSmall,
55
- borderColor: colors?.borderMedium,
56
- hoverBorderColor: colors?.borderDarkest,
49
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
50
+ labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
+ labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
53
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
54
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
55
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
56
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
57
57
  controlSize: '0.1875rem',
58
- focusBorderColor: colors?.borderBrand,
59
- focusBorderWidth: borders?.widthMedium,
60
- focusBorderStyle: borders?.style,
58
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
59
+ focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
60
+ focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
61
61
  simpleFacadeSmallSize: '1rem',
62
62
  simpleFacadeMediumSize: '1.25rem',
63
63
  simpleFacadeLargeSize: '1.75rem',
64
64
  simpleCheckedInsetSmall: '0.1875rem',
65
65
  simpleCheckedInsetMedium: '0.25rem',
66
66
  simpleCheckedInsetLarge: '0.375rem',
67
- simpleFontSizeSmall: typography?.fontSizeSmall,
68
- simpleFontSizeMedium: typography?.fontSizeMedium,
69
- simpleFontSizeLarge: typography?.fontSizeLarge,
70
- simpleFacadeMarginEnd: spacing?.xSmall,
71
- toggleBorderRadius: borders?.radiusSmall,
72
- toggleBorderWidth: borders?.widthLarge,
73
- toggleBackgroundSuccess: colors?.backgroundSuccess,
74
- toggleBackgroundOff: colors?.backgroundDark,
75
- toggleBackgroundDanger: colors?.backgroundDanger,
76
- toggleBackgroundWarning: colors?.backgroundWarning,
77
- toggleHandleText: colors?.textLightest,
78
- toggleSmallHeight: forms?.inputHeightSmall,
79
- toggleMediumHeight: forms?.inputHeightMedium,
80
- toggleLargeHeight: forms?.inputHeightLarge,
81
- toggleShadow: shadows?.depth1,
67
+ simpleFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
68
+ simpleFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
69
+ simpleFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
70
+ simpleFacadeMarginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
71
+ toggleBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusSmall,
72
+ toggleBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge,
73
+ toggleBackgroundSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
74
+ toggleBackgroundOff: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
75
+ toggleBackgroundDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
76
+ toggleBackgroundWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
77
+ toggleHandleText: colors === null || colors === void 0 ? void 0 : colors.textLightest,
78
+ toggleSmallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
79
+ toggleMediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
80
+ toggleLargeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
81
+ toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
82
82
  // toggle font is uppercase, so sizes are smaller below
83
- toggleSmallFontSize: typography?.fontSizeXSmall,
84
- toggleMediumFontSize: typography?.fontSizeSmall,
85
- toggleLargeFontSize: typography?.fontSizeMedium
83
+ toggleSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
84
+ toggleMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
85
+ toggleLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium
86
86
  };
87
87
  return { ...componentVariables,
88
88
  ...themeSpecificStyle[themeName]
package/lib/RadioInput/index.js CHANGED
@@ -80,15 +80,21 @@ let RadioInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
80
80
  }
81
81
 
82
82
  componentDidMount() {
83
- this.props.makeStyles?.();
83
+ var _this$props$makeStyle, _this$props;
84
+
85
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
84
86
  }
85
87
 
86
88
  componentDidUpdate() {
87
- this.props.makeStyles?.();
89
+ var _this$props$makeStyle2, _this$props2;
90
+
91
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
88
92
  }
89
93
 
90
94
  focus() {
91
- this._input?.focus();
95
+ var _this$_input;
96
+
97
+ (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
92
98
  }
93
99
 
94
100
  get id() {
@@ -104,16 +110,16 @@ let RadioInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
104
110
  }
105
111
 
106
112
  render() {
107
- const _this$props = this.props,
108
- disabled = _this$props.disabled,
109
- readOnly = _this$props.readOnly,
110
- label = _this$props.label,
111
- value = _this$props.value,
112
- name = _this$props.name,
113
- styles = _this$props.styles;
113
+ const _this$props3 = this.props,
114
+ disabled = _this$props3.disabled,
115
+ readOnly = _this$props3.readOnly,
116
+ label = _this$props3.label,
117
+ value = _this$props3.value,
118
+ name = _this$props3.name,
119
+ styles = _this$props3.styles;
114
120
  const props = (0, _omitProps.omitProps)(this.props, RadioInput.allowedProps);
115
121
  return (0, _emotion.jsx)("div", {
116
- css: styles?.radioInput,
122
+ css: styles === null || styles === void 0 ? void 0 : styles.radioInput,
117
123
  ref: el => {
118
124
  this.ref = el;
119
125
  }
@@ -126,19 +132,19 @@ let RadioInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
126
132
  name: name,
127
133
  checked: this.checked,
128
134
  type: "radio",
129
- css: styles?.input,
135
+ css: styles === null || styles === void 0 ? void 0 : styles.input,
130
136
  disabled: disabled || readOnly,
131
137
  "aria-disabled": disabled || readOnly ? 'true' : void 0,
132
138
  onChange: this.handleChange,
133
139
  onClick: this.handleClick
134
140
  })), (0, _emotion.jsx)("label", {
135
- css: styles?.control,
141
+ css: styles === null || styles === void 0 ? void 0 : styles.control,
136
142
  htmlFor: this.id
137
143
  }, (0, _emotion.jsx)("span", {
138
- css: styles?.facade,
144
+ css: styles === null || styles === void 0 ? void 0 : styles.facade,
139
145
  "aria-hidden": "true"
140
146
  }), (0, _emotion.jsx)("span", {
141
- css: styles?.label
147
+ css: styles === null || styles === void 0 ? void 0 : styles.label
142
148
  }, label)));
143
149
  }
144
150
 
package/lib/RadioInput/theme.js CHANGED
@@ -49,47 +49,47 @@ const generateComponentTheme = theme => {
49
49
  labelColor: theme['ic-brand-font-color-dark']
50
50
  },
51
51
  'canvas-high-contrast': {
52
- toggleBackgroundOff: colors?.backgroundDarkest
52
+ toggleBackgroundOff: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
53
53
  }
54
54
  };
55
55
  const componentVariables = {
56
- labelColor: colors?.textDarkest,
57
- labelFontFamily: typography?.fontFamily,
58
- labelFontWeight: typography?.fontWeightNormal,
59
- labelLineHeight: typography?.lineHeightCondensed,
60
- background: colors?.backgroundLightest,
61
- borderWidth: borders?.widthSmall,
62
- borderColor: colors?.borderMedium,
63
- hoverBorderColor: colors?.borderDarkest,
56
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
57
+ labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
59
+ labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
60
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
61
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
62
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
63
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
64
64
  controlSize: '0.1875rem',
65
- focusBorderColor: colors?.borderBrand,
66
- focusBorderWidth: borders?.widthMedium,
67
- focusBorderStyle: borders?.style,
65
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
66
+ focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
67
+ focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
68
68
  simpleFacadeSmallSize: '1rem',
69
69
  simpleFacadeMediumSize: '1.25rem',
70
70
  simpleFacadeLargeSize: '1.75rem',
71
71
  simpleCheckedInsetSmall: '0.1875rem',
72
72
  simpleCheckedInsetMedium: '0.25rem',
73
73
  simpleCheckedInsetLarge: '0.375rem',
74
- simpleFontSizeSmall: typography?.fontSizeSmall,
75
- simpleFontSizeMedium: typography?.fontSizeMedium,
76
- simpleFontSizeLarge: typography?.fontSizeLarge,
77
- simpleFacadeMarginEnd: spacing?.xSmall,
78
- toggleBorderRadius: borders?.radiusSmall,
79
- toggleBorderWidth: borders?.widthLarge,
80
- toggleBackgroundSuccess: colors?.backgroundSuccess,
81
- toggleBackgroundOff: colors?.backgroundDark,
82
- toggleBackgroundDanger: colors?.backgroundDanger,
83
- toggleBackgroundWarning: colors?.backgroundWarning,
84
- toggleHandleText: colors?.textLightest,
85
- toggleSmallHeight: forms?.inputHeightSmall,
86
- toggleMediumHeight: forms?.inputHeightMedium,
87
- toggleLargeHeight: forms?.inputHeightLarge,
88
- toggleShadow: shadows?.depth1,
74
+ simpleFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
75
+ simpleFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
76
+ simpleFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
77
+ simpleFacadeMarginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
78
+ toggleBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusSmall,
79
+ toggleBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge,
80
+ toggleBackgroundSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
81
+ toggleBackgroundOff: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
82
+ toggleBackgroundDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
83
+ toggleBackgroundWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
84
+ toggleHandleText: colors === null || colors === void 0 ? void 0 : colors.textLightest,
85
+ toggleSmallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
86
+ toggleMediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
87
+ toggleLargeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
88
+ toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
89
89
  // toggle font is uppercase, so sizes are smaller below
90
- toggleSmallFontSize: typography?.fontSizeXSmall,
91
- toggleMediumFontSize: typography?.fontSizeSmall,
92
- toggleLargeFontSize: typography?.fontSizeMedium
90
+ toggleSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
91
+ toggleMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
92
+ toggleLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium
93
93
  };
94
94
  return { ...componentVariables,
95
95
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-radio-input",
3
- "version": "8.17.1-snapshot.82+96244a097",
3
+ "version": "8.18.1-snapshot.1+669aa5892",
4
4
  "description": "A styled HTML input type='radio' element",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,21 +24,21 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
28
- "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
29
- "@instructure/ui-dom-utils": "8.17.1-snapshot.82+96244a097",
30
- "@instructure/ui-form-field": "8.17.1-snapshot.82+96244a097",
31
- "@instructure/ui-prop-types": "8.17.1-snapshot.82+96244a097",
32
- "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
33
- "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
27
+ "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
28
+ "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
29
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.1+669aa5892",
30
+ "@instructure/ui-form-field": "8.18.1-snapshot.1+669aa5892",
31
+ "@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
32
+ "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
33
+ "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
34
34
  "prop-types": "^15"
35
35
  },
36
36
  "devDependencies": {
37
- "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
38
- "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
39
- "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
40
- "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
41
- "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
37
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
38
+ "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
39
+ "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
40
+ "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
41
+ "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "sideEffects": false,
50
- "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
50
+ "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
51
51
  }