@rescui/radio-button 0.9.5-RUI-285-Support-blur-for-glow-hover-6f393bc1.1 → 0.10.0
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.
- package/lib/index.css +345 -226
- package/lib/parts/radio-button-list.d.ts +10 -1
- package/lib/parts/radio-button-list.js +48 -20
- package/lib/parts/radio-button-list.p.module.css.js +16 -0
- package/lib/parts/radio-button.p.module.css.js +13 -19
- package/lib/parts/use-backward-compatible-id.d.ts +4 -0
- package/lib/parts/use-backward-compatible-id.js +14 -0
- package/lib/public-api.p.css +139 -18
- package/lib/public-api.pcss +139 -18
- package/package.json +7 -6
- package/lib/_virtual/index.css.js +0 -15
- package/lib/_virtual/warning.js +0 -106
|
@@ -2,8 +2,17 @@ import React from 'react';
|
|
|
2
2
|
import { RadioButtonManagerProps } from './radio-button-manager';
|
|
3
3
|
export declare type RadioButtonListProps = Omit<RadioButtonManagerProps, 'error'> & {
|
|
4
4
|
className?: string;
|
|
5
|
+
id?: string;
|
|
5
6
|
style?: object;
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
note?: React.ReactNode;
|
|
6
9
|
/** Error flag or message */
|
|
7
|
-
error?:
|
|
10
|
+
error?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
|
|
13
|
+
* If `false`, there will be no reservation.
|
|
14
|
+
*/
|
|
15
|
+
reserveErrorLine?: boolean;
|
|
16
|
+
boldLabel?: boolean;
|
|
8
17
|
};
|
|
9
18
|
export declare const RadioButtonList: React.FC<RadioButtonListProps>;
|
|
@@ -4,18 +4,19 @@ import cn from 'classnames';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { Menu } from '@rescui/menu';
|
|
6
6
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
7
|
-
import
|
|
7
|
+
import { ErrorMessage, shouldRenderErrorMessage } from '@rescui/form-field';
|
|
8
8
|
import { RadioButtonManager } from './radio-button-manager.js';
|
|
9
|
-
import
|
|
9
|
+
import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
|
|
10
|
+
import styles from './radio-button-list.p.module.css.js';
|
|
10
11
|
const THEME_STYLES = {
|
|
11
12
|
light: styles.themeLight,
|
|
12
13
|
dark: styles.themeDark
|
|
13
14
|
};
|
|
14
15
|
const SIZE_STYLES = {
|
|
15
|
-
s: styles.
|
|
16
|
-
m: styles.
|
|
17
|
-
l: styles.
|
|
18
|
-
};
|
|
16
|
+
s: styles.sizeS,
|
|
17
|
+
m: styles.sizeM,
|
|
18
|
+
l: styles.sizeL
|
|
19
|
+
}; // eslint-disable-next-line complexity
|
|
19
20
|
|
|
20
21
|
const RadioButtonList = _ref => {
|
|
21
22
|
let {
|
|
@@ -24,41 +25,68 @@ const RadioButtonList = _ref => {
|
|
|
24
25
|
disabled,
|
|
25
26
|
size = 'm',
|
|
26
27
|
theme: themeFromProps,
|
|
28
|
+
label,
|
|
29
|
+
note,
|
|
27
30
|
error,
|
|
31
|
+
reserveErrorLine = false,
|
|
28
32
|
className,
|
|
33
|
+
id,
|
|
29
34
|
style,
|
|
35
|
+
boldLabel = true,
|
|
30
36
|
...restProps
|
|
31
37
|
} = _ref;
|
|
32
38
|
const theme = useThemeWithUndefined(themeFromProps);
|
|
39
|
+
const uniqueId = `radio-button-list-${useBackwardCompatibleId()}`;
|
|
40
|
+
const errorId = `${id ? id : uniqueId}-error`;
|
|
41
|
+
const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
|
|
33
42
|
return /*#__PURE__*/React.createElement(RadioButtonManager, {
|
|
34
43
|
disabled: disabled,
|
|
35
44
|
size: size,
|
|
36
45
|
mode: mode,
|
|
37
46
|
theme: theme,
|
|
38
47
|
...restProps
|
|
39
|
-
}, /*#__PURE__*/React.createElement("
|
|
40
|
-
className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size]),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
className: styles.
|
|
48
|
-
"data-
|
|
49
|
-
|
|
48
|
+
}, /*#__PURE__*/React.createElement("fieldset", {
|
|
49
|
+
className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size], disabled && styles.disabled, Boolean(error) && styles.error),
|
|
50
|
+
id: id,
|
|
51
|
+
style: style,
|
|
52
|
+
"aria-errormessage": error ? errorId : undefined,
|
|
53
|
+
"aria-invalid": Boolean(error),
|
|
54
|
+
"data-test": 'radio-button-list'
|
|
55
|
+
}, label && /*#__PURE__*/React.createElement("legend", {
|
|
56
|
+
className: styles.label,
|
|
57
|
+
"data-test": 'radio-button-list__label',
|
|
58
|
+
"data-rs-internal": boldLabel ? 'radio-button-list__bold-label' : 'radio-button-list__label'
|
|
59
|
+
}, label), /*#__PURE__*/React.createElement(Menu, {
|
|
50
60
|
disabled: disabled,
|
|
51
61
|
theme: theme,
|
|
52
62
|
size: size,
|
|
53
63
|
tag: 'div',
|
|
54
64
|
itemTag: null,
|
|
55
65
|
mode: 'clear',
|
|
66
|
+
className: styles.inner,
|
|
56
67
|
"data-rs-internal": 'radio-button-list__menu'
|
|
57
|
-
}, children)
|
|
68
|
+
}, children), hasFooter && /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
className: styles.footer
|
|
70
|
+
}, /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
71
|
+
id: errorId,
|
|
72
|
+
className: styles.errorMessage,
|
|
73
|
+
"data-test": 'radio-button-list__error',
|
|
74
|
+
reserveLine: reserveErrorLine
|
|
75
|
+
}, error), note && /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: styles.note,
|
|
77
|
+
"data-test": 'radio-button-list__note',
|
|
78
|
+
"data-rs-internal": "radio-button-list__note"
|
|
79
|
+
}, note))));
|
|
58
80
|
};
|
|
59
81
|
|
|
60
82
|
RadioButtonList.propTypes = { ...RadioButtonManager.propTypes,
|
|
61
|
-
error:
|
|
62
|
-
style: PropTypes.object
|
|
83
|
+
error: ErrorMessage.propTypes.children,
|
|
84
|
+
style: PropTypes.object,
|
|
85
|
+
className: PropTypes.string,
|
|
86
|
+
id: PropTypes.string,
|
|
87
|
+
reserveErrorLine: PropTypes.bool,
|
|
88
|
+
label: PropTypes.node,
|
|
89
|
+
note: PropTypes.node,
|
|
90
|
+
boldLabel: PropTypes.bool
|
|
63
91
|
};
|
|
64
92
|
export { RadioButtonList };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
var styles = {
|
|
2
|
+
"themeLight": "_themeLight_1vkp275_6",
|
|
3
|
+
"themeDark": "_themeDark_1vkp275_9",
|
|
4
|
+
"container": "_container_1vkp275_13",
|
|
5
|
+
"sizeS": "_sizeS_1vkp275_18",
|
|
6
|
+
"sizeM": "_sizeM_1vkp275_21",
|
|
7
|
+
"sizeL": "_sizeL_1vkp275_24",
|
|
8
|
+
"inner": "_inner_1vkp275_28",
|
|
9
|
+
"label": "_label_1vkp275_32",
|
|
10
|
+
"disabled": "_disabled_1vkp275_39",
|
|
11
|
+
"footer": "_footer_1vkp275_44",
|
|
12
|
+
"errorMessage": "_errorMessage_1vkp275_49",
|
|
13
|
+
"error": "_error_1vkp275_49",
|
|
14
|
+
"note": "_note_1vkp275_58"
|
|
15
|
+
};
|
|
16
|
+
export { styles as default };
|
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"errorIcon": "_errorIcon_17h615z_71",
|
|
16
|
-
"input": "_input_17h615z_77",
|
|
17
|
-
"icon": "_icon_17h615z_90",
|
|
18
|
-
"enabled": "_enabled_17h615z_111",
|
|
19
|
-
"disabled": "_disabled_17h615z_120",
|
|
20
|
-
"error": "_error_17h615z_59"
|
|
2
|
+
"themeLight": "_themeLight_ftvo6_8",
|
|
3
|
+
"themeDark": "_themeDark_ftvo6_11",
|
|
4
|
+
"sizeS": "_sizeS_ftvo6_15",
|
|
5
|
+
"sizeM": "_sizeM_ftvo6_18",
|
|
6
|
+
"sizeL": "_sizeL_ftvo6_21",
|
|
7
|
+
"classic": "_classic_ftvo6_25",
|
|
8
|
+
"rock": "_rock_ftvo6_28",
|
|
9
|
+
"main": "_main_ftvo6_32",
|
|
10
|
+
"input": "_input_ftvo6_45",
|
|
11
|
+
"icon": "_icon_ftvo6_58",
|
|
12
|
+
"enabled": "_enabled_ftvo6_79",
|
|
13
|
+
"disabled": "_disabled_ftvo6_88",
|
|
14
|
+
"error": "_error_ftvo6_112"
|
|
21
15
|
};
|
|
22
16
|
export { styles as default };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
const useBackwardCompatibleId = () => {
|
|
4
|
+
const id = useRef(null);
|
|
5
|
+
|
|
6
|
+
if (id.current === null) {
|
|
7
|
+
id.current = useBackwardCompatibleId.counter++;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
return (React.useId ? React.useId : () => id.current)();
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
useBackwardCompatibleId.counter = 0;
|
|
14
|
+
export { useBackwardCompatibleId };
|
package/lib/public-api.p.css
CHANGED
|
@@ -1,5 +1,43 @@
|
|
|
1
1
|
@define-mixin rs-radio-button-list-size-s{
|
|
2
|
-
|
|
2
|
+
&[class]{
|
|
3
|
+
--_rs-radio-button-list-label-offset:4px;
|
|
4
|
+
--_rs-radio-button-list-left-offset:28px;
|
|
5
|
+
}
|
|
6
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
7
|
+
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
8
|
+
--_rs-typography-text-transform:initial;
|
|
9
|
+
--_rs-typography-font-variant-numeric:initial;
|
|
10
|
+
--_rs-typography-font-family:var(
|
|
11
|
+
--rs-font-family-ui,
|
|
12
|
+
var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
|
|
13
|
+
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
14
|
+
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
15
|
+
);
|
|
16
|
+
--_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
|
|
17
|
+
--_rs-typography-font-weight:var(
|
|
18
|
+
--rs-font-weight-regular,
|
|
19
|
+
400
|
|
20
|
+
);
|
|
21
|
+
--_rs-typography-line-height:var(
|
|
22
|
+
--rs-text-3-line-height,
|
|
23
|
+
20px
|
|
24
|
+
);
|
|
25
|
+
--_rs-typography-base-color:var(
|
|
26
|
+
--_rs-typography-hardness-color,
|
|
27
|
+
var(
|
|
28
|
+
--rs-color-average,
|
|
29
|
+
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
|
|
30
|
+
)
|
|
31
|
+
);
|
|
32
|
+
--_rs-typography-text-auto-offset:8px;
|
|
33
|
+
--_rs-typography-ul-list-li-padding-left:28px;
|
|
34
|
+
--_rs-typography-ol-list-li-padding-left:21px;
|
|
35
|
+
--_rs-typography-list-li-margin-top-from-text:8px;
|
|
36
|
+
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
37
|
+
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
38
|
+
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
39
|
+
}
|
|
40
|
+
&[class] [data-rs-internal='radio-button-list__bold-label']{
|
|
3
41
|
--_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
|
|
4
42
|
--_rs-typography-text-transform:initial;
|
|
5
43
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -29,9 +67,6 @@
|
|
|
29
67
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
30
68
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
31
69
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
32
|
-
}
|
|
33
|
-
&[class] [data-rs-internal='radio-button-list__error-icon']:not(html){
|
|
34
|
-
--_rs-icons-height:20px;
|
|
35
70
|
}
|
|
36
71
|
& [data-rs-internal="radio-button-list__menu"] [data-rs-internal="menu__menu-item"]{
|
|
37
72
|
--_rs-menu-mi-icon-offset:8px;
|
|
@@ -111,8 +146,12 @@
|
|
|
111
146
|
}
|
|
112
147
|
}
|
|
113
148
|
@define-mixin rs-radio-button-list-size-m{
|
|
114
|
-
|
|
115
|
-
--_rs-
|
|
149
|
+
&[class]{
|
|
150
|
+
--_rs-radio-button-list-label-offset:8px;
|
|
151
|
+
--_rs-radio-button-list-left-offset:32px;
|
|
152
|
+
}
|
|
153
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
154
|
+
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
116
155
|
--_rs-typography-text-transform:initial;
|
|
117
156
|
--_rs-typography-font-variant-numeric:initial;
|
|
118
157
|
--_rs-typography-font-family:var(
|
|
@@ -121,12 +160,54 @@
|
|
|
121
160
|
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
122
161
|
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
123
162
|
);
|
|
124
|
-
--_rs-typography-font-size:var(--rs-
|
|
163
|
+
--_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
|
|
164
|
+
--_rs-typography-font-weight:var(
|
|
165
|
+
--rs-font-weight-regular,
|
|
166
|
+
400
|
|
167
|
+
);
|
|
168
|
+
--_rs-typography-line-height:var(
|
|
169
|
+
--rs-text-2-line-height,
|
|
170
|
+
24px
|
|
171
|
+
);
|
|
172
|
+
--_rs-typography-base-color:var(
|
|
173
|
+
--_rs-typography-hardness-color,
|
|
174
|
+
var(
|
|
175
|
+
--rs-color-average,
|
|
176
|
+
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
|
|
177
|
+
)
|
|
178
|
+
);
|
|
179
|
+
--_rs-typography-text-auto-offset:16px;
|
|
180
|
+
--_rs-typography-ul-list-li-padding-left:22px;
|
|
181
|
+
--_rs-typography-ol-list-li-padding-left:26px;
|
|
182
|
+
--_rs-typography-list-li-margin-top-from-text:var(
|
|
183
|
+
--_rs-typography-text-2-sm-list-li-margin-top-from-text,
|
|
184
|
+
16px
|
|
185
|
+
);
|
|
186
|
+
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
187
|
+
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
188
|
+
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
189
|
+
}
|
|
190
|
+
@media screen and (max-width: 640px){
|
|
191
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
192
|
+
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
&[class] [data-rs-internal='radio-button-list__bold-label']{
|
|
196
|
+
--_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
|
|
197
|
+
--_rs-typography-text-transform:initial;
|
|
198
|
+
--_rs-typography-font-variant-numeric:initial;
|
|
199
|
+
--_rs-typography-font-family:var(
|
|
200
|
+
--rs-font-family-ui,
|
|
201
|
+
var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
|
|
202
|
+
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
203
|
+
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
204
|
+
);
|
|
205
|
+
--_rs-typography-font-size:var(--rs-h4-font-size, 16px);
|
|
125
206
|
--_rs-typography-font-weight:var(
|
|
126
207
|
--rs-font-weight-semi-bold,
|
|
127
208
|
600
|
|
128
209
|
);
|
|
129
|
-
--_rs-typography-line-height:var(--rs-
|
|
210
|
+
--_rs-typography-line-height:var(--rs-h4-line-height, 24px);
|
|
130
211
|
--_rs-typography-base-color:var(
|
|
131
212
|
--_rs-typography-heading-hardness-color,
|
|
132
213
|
var(
|
|
@@ -141,9 +222,6 @@
|
|
|
141
222
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
142
223
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
143
224
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
144
|
-
}
|
|
145
|
-
&[class] [data-rs-internal='radio-button-list__error-icon']:not(html){
|
|
146
|
-
--_rs-icons-height:20px;
|
|
147
225
|
}
|
|
148
226
|
& [data-rs-internal="radio-button-list__menu"] [data-rs-internal="menu__menu-item"]{
|
|
149
227
|
--_rs-menu-mi-icon-offset:8px;
|
|
@@ -231,8 +309,12 @@
|
|
|
231
309
|
}
|
|
232
310
|
}
|
|
233
311
|
@define-mixin rs-radio-button-list-size-l{
|
|
234
|
-
|
|
235
|
-
--_rs-
|
|
312
|
+
&[class]{
|
|
313
|
+
--_rs-radio-button-list-label-offset:12px;
|
|
314
|
+
--_rs-radio-button-list-left-offset:44px;
|
|
315
|
+
}
|
|
316
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
317
|
+
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
236
318
|
--_rs-typography-text-transform:initial;
|
|
237
319
|
--_rs-typography-font-variant-numeric:initial;
|
|
238
320
|
--_rs-typography-font-family:var(
|
|
@@ -241,12 +323,54 @@
|
|
|
241
323
|
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
242
324
|
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
243
325
|
);
|
|
244
|
-
--_rs-typography-font-size:var(--rs-
|
|
326
|
+
--_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
|
|
327
|
+
--_rs-typography-font-weight:var(
|
|
328
|
+
--rs-font-weight-regular,
|
|
329
|
+
400
|
|
330
|
+
);
|
|
331
|
+
--_rs-typography-line-height:var(
|
|
332
|
+
--rs-text-1-line-height,
|
|
333
|
+
28px
|
|
334
|
+
);
|
|
335
|
+
--_rs-typography-base-color:var(
|
|
336
|
+
--_rs-typography-hardness-color,
|
|
337
|
+
var(
|
|
338
|
+
--rs-color-average,
|
|
339
|
+
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
|
|
340
|
+
)
|
|
341
|
+
);
|
|
342
|
+
--_rs-typography-text-auto-offset:32px;
|
|
343
|
+
--_rs-typography-ul-list-li-padding-left:26px;
|
|
344
|
+
--_rs-typography-ol-list-li-padding-left:32px;
|
|
345
|
+
--_rs-typography-list-li-margin-top-from-text:var(
|
|
346
|
+
--_rs-typography-text-1-sm-list-li-margin-top-from-text,
|
|
347
|
+
24px
|
|
348
|
+
);
|
|
349
|
+
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
350
|
+
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
351
|
+
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
352
|
+
}
|
|
353
|
+
@media screen and (max-width: 640px){
|
|
354
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
355
|
+
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
&[class] [data-rs-internal='radio-button-list__bold-label']{
|
|
359
|
+
--_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
|
|
360
|
+
--_rs-typography-text-transform:initial;
|
|
361
|
+
--_rs-typography-font-variant-numeric:initial;
|
|
362
|
+
--_rs-typography-font-family:var(
|
|
363
|
+
--rs-font-family-ui,
|
|
364
|
+
var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
|
|
365
|
+
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
366
|
+
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
367
|
+
);
|
|
368
|
+
--_rs-typography-font-size:var(--rs-h3-font-size, 20px);
|
|
245
369
|
--_rs-typography-font-weight:var(
|
|
246
370
|
--rs-font-weight-semi-bold,
|
|
247
371
|
600
|
|
248
372
|
);
|
|
249
|
-
--_rs-typography-line-height:var(--rs-
|
|
373
|
+
--_rs-typography-line-height:var(--rs-h3-line-height, 28px);
|
|
250
374
|
--_rs-typography-base-color:var(
|
|
251
375
|
--_rs-typography-heading-hardness-color,
|
|
252
376
|
var(
|
|
@@ -261,9 +385,6 @@
|
|
|
261
385
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
262
386
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
263
387
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
264
|
-
}
|
|
265
|
-
&[class] [data-rs-internal='radio-button-list__error-icon']:not(html){
|
|
266
|
-
--_rs-icons-height:24px;
|
|
267
388
|
}
|
|
268
389
|
& [data-rs-internal="radio-button-list__menu"] [data-rs-internal="menu__menu-item"]{
|
|
269
390
|
--_rs-menu-mi-icon-offset:16px;
|
package/lib/public-api.pcss
CHANGED
|
@@ -1,5 +1,43 @@
|
|
|
1
1
|
@define-mixin rs-radio-button-list-size-s{
|
|
2
|
-
|
|
2
|
+
&[class]{
|
|
3
|
+
--_rs-radio-button-list-label-offset:4px;
|
|
4
|
+
--_rs-radio-button-list-left-offset:28px;
|
|
5
|
+
}
|
|
6
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
7
|
+
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
8
|
+
--_rs-typography-text-transform:initial;
|
|
9
|
+
--_rs-typography-font-variant-numeric:initial;
|
|
10
|
+
--_rs-typography-font-family:var(
|
|
11
|
+
--rs-font-family-ui,
|
|
12
|
+
var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
|
|
13
|
+
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
14
|
+
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
15
|
+
);
|
|
16
|
+
--_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
|
|
17
|
+
--_rs-typography-font-weight:var(
|
|
18
|
+
--rs-font-weight-regular,
|
|
19
|
+
400
|
|
20
|
+
);
|
|
21
|
+
--_rs-typography-line-height:var(
|
|
22
|
+
--rs-text-3-line-height,
|
|
23
|
+
20px
|
|
24
|
+
);
|
|
25
|
+
--_rs-typography-base-color:var(
|
|
26
|
+
--_rs-typography-hardness-color,
|
|
27
|
+
var(
|
|
28
|
+
--rs-color-average,
|
|
29
|
+
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
|
|
30
|
+
)
|
|
31
|
+
);
|
|
32
|
+
--_rs-typography-text-auto-offset:8px;
|
|
33
|
+
--_rs-typography-ul-list-li-padding-left:28px;
|
|
34
|
+
--_rs-typography-ol-list-li-padding-left:21px;
|
|
35
|
+
--_rs-typography-list-li-margin-top-from-text:8px;
|
|
36
|
+
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
37
|
+
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
38
|
+
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
39
|
+
}
|
|
40
|
+
&[class] [data-rs-internal='radio-button-list__bold-label']{
|
|
3
41
|
--_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
|
|
4
42
|
--_rs-typography-text-transform:initial;
|
|
5
43
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -29,9 +67,6 @@
|
|
|
29
67
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
30
68
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
31
69
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
32
|
-
}
|
|
33
|
-
&[class] [data-rs-internal='radio-button-list__error-icon']:not(html){
|
|
34
|
-
--_rs-icons-height:20px;
|
|
35
70
|
}
|
|
36
71
|
& [data-rs-internal="radio-button-list__menu"] [data-rs-internal="menu__menu-item"]{
|
|
37
72
|
--_rs-menu-mi-icon-offset:8px;
|
|
@@ -111,8 +146,12 @@
|
|
|
111
146
|
}
|
|
112
147
|
}
|
|
113
148
|
@define-mixin rs-radio-button-list-size-m{
|
|
114
|
-
|
|
115
|
-
--_rs-
|
|
149
|
+
&[class]{
|
|
150
|
+
--_rs-radio-button-list-label-offset:8px;
|
|
151
|
+
--_rs-radio-button-list-left-offset:32px;
|
|
152
|
+
}
|
|
153
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
154
|
+
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
116
155
|
--_rs-typography-text-transform:initial;
|
|
117
156
|
--_rs-typography-font-variant-numeric:initial;
|
|
118
157
|
--_rs-typography-font-family:var(
|
|
@@ -121,12 +160,54 @@
|
|
|
121
160
|
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
122
161
|
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
123
162
|
);
|
|
124
|
-
--_rs-typography-font-size:var(--rs-
|
|
163
|
+
--_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
|
|
164
|
+
--_rs-typography-font-weight:var(
|
|
165
|
+
--rs-font-weight-regular,
|
|
166
|
+
400
|
|
167
|
+
);
|
|
168
|
+
--_rs-typography-line-height:var(
|
|
169
|
+
--rs-text-2-line-height,
|
|
170
|
+
24px
|
|
171
|
+
);
|
|
172
|
+
--_rs-typography-base-color:var(
|
|
173
|
+
--_rs-typography-hardness-color,
|
|
174
|
+
var(
|
|
175
|
+
--rs-color-average,
|
|
176
|
+
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
|
|
177
|
+
)
|
|
178
|
+
);
|
|
179
|
+
--_rs-typography-text-auto-offset:16px;
|
|
180
|
+
--_rs-typography-ul-list-li-padding-left:22px;
|
|
181
|
+
--_rs-typography-ol-list-li-padding-left:26px;
|
|
182
|
+
--_rs-typography-list-li-margin-top-from-text:var(
|
|
183
|
+
--_rs-typography-text-2-sm-list-li-margin-top-from-text,
|
|
184
|
+
16px
|
|
185
|
+
);
|
|
186
|
+
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
187
|
+
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
188
|
+
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
189
|
+
}
|
|
190
|
+
@media screen and (max-width: 640px){
|
|
191
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
192
|
+
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
&[class] [data-rs-internal='radio-button-list__bold-label']{
|
|
196
|
+
--_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
|
|
197
|
+
--_rs-typography-text-transform:initial;
|
|
198
|
+
--_rs-typography-font-variant-numeric:initial;
|
|
199
|
+
--_rs-typography-font-family:var(
|
|
200
|
+
--rs-font-family-ui,
|
|
201
|
+
var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
|
|
202
|
+
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
203
|
+
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
204
|
+
);
|
|
205
|
+
--_rs-typography-font-size:var(--rs-h4-font-size, 16px);
|
|
125
206
|
--_rs-typography-font-weight:var(
|
|
126
207
|
--rs-font-weight-semi-bold,
|
|
127
208
|
600
|
|
128
209
|
);
|
|
129
|
-
--_rs-typography-line-height:var(--rs-
|
|
210
|
+
--_rs-typography-line-height:var(--rs-h4-line-height, 24px);
|
|
130
211
|
--_rs-typography-base-color:var(
|
|
131
212
|
--_rs-typography-heading-hardness-color,
|
|
132
213
|
var(
|
|
@@ -141,9 +222,6 @@
|
|
|
141
222
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
142
223
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
143
224
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
144
|
-
}
|
|
145
|
-
&[class] [data-rs-internal='radio-button-list__error-icon']:not(html){
|
|
146
|
-
--_rs-icons-height:20px;
|
|
147
225
|
}
|
|
148
226
|
& [data-rs-internal="radio-button-list__menu"] [data-rs-internal="menu__menu-item"]{
|
|
149
227
|
--_rs-menu-mi-icon-offset:8px;
|
|
@@ -231,8 +309,12 @@
|
|
|
231
309
|
}
|
|
232
310
|
}
|
|
233
311
|
@define-mixin rs-radio-button-list-size-l{
|
|
234
|
-
|
|
235
|
-
--_rs-
|
|
312
|
+
&[class]{
|
|
313
|
+
--_rs-radio-button-list-label-offset:12px;
|
|
314
|
+
--_rs-radio-button-list-left-offset:44px;
|
|
315
|
+
}
|
|
316
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
317
|
+
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
236
318
|
--_rs-typography-text-transform:initial;
|
|
237
319
|
--_rs-typography-font-variant-numeric:initial;
|
|
238
320
|
--_rs-typography-font-family:var(
|
|
@@ -241,12 +323,54 @@
|
|
|
241
323
|
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
242
324
|
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
243
325
|
);
|
|
244
|
-
--_rs-typography-font-size:var(--rs-
|
|
326
|
+
--_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
|
|
327
|
+
--_rs-typography-font-weight:var(
|
|
328
|
+
--rs-font-weight-regular,
|
|
329
|
+
400
|
|
330
|
+
);
|
|
331
|
+
--_rs-typography-line-height:var(
|
|
332
|
+
--rs-text-1-line-height,
|
|
333
|
+
28px
|
|
334
|
+
);
|
|
335
|
+
--_rs-typography-base-color:var(
|
|
336
|
+
--_rs-typography-hardness-color,
|
|
337
|
+
var(
|
|
338
|
+
--rs-color-average,
|
|
339
|
+
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
|
|
340
|
+
)
|
|
341
|
+
);
|
|
342
|
+
--_rs-typography-text-auto-offset:32px;
|
|
343
|
+
--_rs-typography-ul-list-li-padding-left:26px;
|
|
344
|
+
--_rs-typography-ol-list-li-padding-left:32px;
|
|
345
|
+
--_rs-typography-list-li-margin-top-from-text:var(
|
|
346
|
+
--_rs-typography-text-1-sm-list-li-margin-top-from-text,
|
|
347
|
+
24px
|
|
348
|
+
);
|
|
349
|
+
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
350
|
+
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
351
|
+
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
352
|
+
}
|
|
353
|
+
@media screen and (max-width: 640px){
|
|
354
|
+
&[class] [data-rs-internal='radio-button-list__label']{
|
|
355
|
+
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
&[class] [data-rs-internal='radio-button-list__bold-label']{
|
|
359
|
+
--_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
|
|
360
|
+
--_rs-typography-text-transform:initial;
|
|
361
|
+
--_rs-typography-font-variant-numeric:initial;
|
|
362
|
+
--_rs-typography-font-family:var(
|
|
363
|
+
--rs-font-family-ui,
|
|
364
|
+
var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
|
|
365
|
+
BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
366
|
+
'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
|
|
367
|
+
);
|
|
368
|
+
--_rs-typography-font-size:var(--rs-h3-font-size, 20px);
|
|
245
369
|
--_rs-typography-font-weight:var(
|
|
246
370
|
--rs-font-weight-semi-bold,
|
|
247
371
|
600
|
|
248
372
|
);
|
|
249
|
-
--_rs-typography-line-height:var(--rs-
|
|
373
|
+
--_rs-typography-line-height:var(--rs-h3-line-height, 28px);
|
|
250
374
|
--_rs-typography-base-color:var(
|
|
251
375
|
--_rs-typography-heading-hardness-color,
|
|
252
376
|
var(
|
|
@@ -261,9 +385,6 @@
|
|
|
261
385
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
262
386
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
263
387
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
264
|
-
}
|
|
265
|
-
&[class] [data-rs-internal='radio-button-list__error-icon']:not(html){
|
|
266
|
-
--_rs-icons-height:24px;
|
|
267
388
|
}
|
|
268
389
|
& [data-rs-internal="radio-button-list__menu"] [data-rs-internal="menu__menu-item"]{
|
|
269
390
|
--_rs-menu-mi-icon-offset:16px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/radio-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
19
|
-
"@rescui/
|
|
19
|
+
"@rescui/form-field": "^0.1.0",
|
|
20
|
+
"@rescui/menu": "^0.13.2",
|
|
20
21
|
"classnames": "^2.2.6"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
@@ -25,14 +26,14 @@
|
|
|
25
26
|
"react": ">=16.8.0 <20"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"@rescui/colors": "0.
|
|
29
|
-
"@rescui/scripts": "0.5.1",
|
|
30
|
-
"@rescui/typography": "0.24.4
|
|
29
|
+
"@rescui/colors": "^0.3.0",
|
|
30
|
+
"@rescui/scripts": "^0.5.1",
|
|
31
|
+
"@rescui/typography": "^0.24.4"
|
|
31
32
|
},
|
|
32
33
|
"scripts": {
|
|
33
34
|
"build": "rescui-scripts build && yarn run build-pcss-api",
|
|
34
35
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
35
36
|
},
|
|
36
37
|
"nx": {},
|
|
37
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "1c29c8940bcec78d637ea6070ee8a63c258c8e89"
|
|
38
39
|
}
|