@react-ui-org/react-ui 0.51.0 → 0.52.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/dist/lib.development.js +140 -32
- package/dist/lib.js +1 -1
- package/package.json +1 -1
- package/src/lib/components/Button/Button.jsx +17 -9
- package/src/lib/components/Button/_base.scss +21 -12
- package/src/lib/components/Button/_priorities.scss +1 -18
- package/src/lib/components/Button/_theme.scss +0 -10
- package/src/lib/components/ButtonGroup/ButtonGroup.jsx +5 -3
- package/src/lib/components/ButtonGroup/ButtonGroup.scss +26 -1
- package/src/lib/components/ButtonGroup/README.mdx +11 -1
- package/src/lib/components/ButtonGroup/_theme.scss +13 -0
- package/src/lib/components/FormLayout/README.mdx +5 -0
- package/src/lib/components/InputGroup/InputGroup.jsx +170 -0
- package/src/lib/components/InputGroup/InputGroup.scss +92 -0
- package/src/lib/components/InputGroup/InputGroupContext.js +3 -0
- package/src/lib/components/InputGroup/README.mdx +278 -0
- package/src/lib/components/InputGroup/_theme.scss +2 -0
- package/src/lib/components/InputGroup/index.js +2 -0
- package/src/lib/components/Modal/Modal.jsx +58 -97
- package/src/lib/components/Modal/README.mdx +288 -15
- package/src/lib/components/Modal/_helpers/getPositionClassName.js +7 -0
- package/src/lib/components/Modal/_helpers/getSizeClassName.js +19 -0
- package/src/lib/components/Modal/_hooks/useModalFocus.js +126 -0
- package/src/lib/components/Modal/_hooks/useModalScrollPrevention.js +35 -0
- package/src/lib/components/Modal/_settings.scss +1 -1
- package/src/lib/components/Radio/README.mdx +9 -1
- package/src/lib/components/Radio/Radio.jsx +39 -31
- package/src/lib/components/Radio/Radio.scss +11 -1
- package/src/lib/components/SelectField/SelectField.jsx +21 -8
- package/src/lib/components/SelectField/SelectField.scss +5 -0
- package/src/lib/components/TextField/TextField.jsx +21 -8
- package/src/lib/components/TextField/TextField.scss +5 -0
- package/src/lib/index.js +1 -0
- package/src/lib/styles/theme/_borders.scss +2 -1
- package/src/lib/styles/tools/form-fields/_box-field-elements.scss +19 -2
- package/src/lib/styles/tools/form-fields/_box-field-sizes.scss +11 -8
- package/src/lib/styles/tools/form-fields/_foundation.scss +7 -0
- package/src/lib/theme.scss +23 -11
- /package/src/lib/components/{Button/helpers → _helpers}/getRootPriorityClassName.js +0 -0
@@ -25,7 +25,8 @@ export const Radio = ({
|
|
25
25
|
const context = useContext(FormLayoutContext);
|
26
26
|
|
27
27
|
return (
|
28
|
-
<
|
28
|
+
<fieldset
|
29
|
+
{...transferProps(restProps)}
|
29
30
|
className={classNames(
|
30
31
|
styles.root,
|
31
32
|
context && styles.isRootInFormLayout,
|
@@ -36,53 +37,59 @@ export const Radio = ({
|
|
36
37
|
required && styles.isRootRequired,
|
37
38
|
getRootValidationStateClassName(validationState, styles),
|
38
39
|
)}
|
40
|
+
disabled={disabled}
|
39
41
|
id={id}
|
40
42
|
>
|
43
|
+
<legend
|
44
|
+
className={styles.legend}
|
45
|
+
id={id && `${id}__label`}
|
46
|
+
>
|
47
|
+
{label}
|
48
|
+
</legend>
|
41
49
|
<div
|
50
|
+
aria-hidden
|
42
51
|
className={classNames(
|
43
52
|
styles.label,
|
44
53
|
!isLabelVisible && styles.isLabelHidden,
|
45
54
|
)}
|
46
|
-
id={id && `${id}
|
55
|
+
id={id && `${id}__displayLabel`}
|
47
56
|
>
|
48
57
|
{label}
|
49
58
|
</div>
|
50
59
|
<div className={styles.field}>
|
51
|
-
<
|
60
|
+
<div className={styles.options}>
|
52
61
|
{
|
53
62
|
options.map((option) => {
|
54
63
|
const key = option.key ?? option.value;
|
55
64
|
return (
|
56
|
-
<
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
65
|
+
<label
|
66
|
+
className={styles.option}
|
67
|
+
htmlFor={id && `${id}__item__${key}`}
|
68
|
+
id={id && `${id}__item__${key}__label`}
|
69
|
+
key={key}
|
70
|
+
>
|
71
|
+
<input
|
72
|
+
className={styles.input}
|
73
|
+
checked={restProps.onChange
|
74
|
+
? (value === option.value) || false
|
75
|
+
: undefined}
|
76
|
+
disabled={disabled || option.disabled}
|
77
|
+
id={id && `${id}__item__${key}`}
|
78
|
+
name={id}
|
79
|
+
type="radio"
|
80
|
+
value={option.value}
|
81
|
+
/>
|
82
|
+
<span
|
83
|
+
className={styles.optionLabel}
|
84
|
+
id={id && `${id}__item__${key}__labelText`}
|
61
85
|
>
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
checked={restProps.onChange
|
66
|
-
? (value === option.value) || false
|
67
|
-
: undefined}
|
68
|
-
disabled={disabled || option.disabled}
|
69
|
-
id={id && `${id}__item__${key}`}
|
70
|
-
name={id}
|
71
|
-
type="radio"
|
72
|
-
value={option.value}
|
73
|
-
/>
|
74
|
-
<span
|
75
|
-
className={styles.optionLabel}
|
76
|
-
id={id && `${id}__item__${key}__labelText`}
|
77
|
-
>
|
78
|
-
{ option.label }
|
79
|
-
</span>
|
80
|
-
</label>
|
81
|
-
</li>
|
86
|
+
{ option.label }
|
87
|
+
</span>
|
88
|
+
</label>
|
82
89
|
);
|
83
90
|
})
|
84
91
|
}
|
85
|
-
</
|
92
|
+
</div>
|
86
93
|
{helpText && (
|
87
94
|
<div
|
88
95
|
className={styles.helpText}
|
@@ -100,7 +107,7 @@ export const Radio = ({
|
|
100
107
|
</div>
|
101
108
|
)}
|
102
109
|
</div>
|
103
|
-
</
|
110
|
+
</fieldset>
|
104
111
|
);
|
105
112
|
};
|
106
113
|
|
@@ -129,7 +136,8 @@ Radio.propTypes = {
|
|
129
136
|
* ID of the root HTML element.
|
130
137
|
*
|
131
138
|
* Also serves as base for ids of nested elements:
|
132
|
-
* * `<ID>
|
139
|
+
* * `<ID>__label`
|
140
|
+
* * `<ID>__displayLabel`
|
133
141
|
* * `<ID>__helpText`
|
134
142
|
* * `<ID>__validationText`
|
135
143
|
*
|
@@ -1,3 +1,6 @@
|
|
1
|
+
// 1. Legends are tricky to style, let's use a `div` instead.
|
2
|
+
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
|
3
|
+
|
1
4
|
@use "../../styles/tools/form-fields/box-field-elements";
|
2
5
|
@use "../../styles/tools/form-fields/box-field-layout";
|
3
6
|
@use "../../styles/tools/form-fields/foundation";
|
@@ -11,15 +14,22 @@
|
|
11
14
|
// Foundation
|
12
15
|
.root {
|
13
16
|
@include foundation.root();
|
17
|
+
@include foundation.fieldset();
|
14
18
|
@include variants.visual(check);
|
15
19
|
}
|
16
20
|
|
21
|
+
// 1.
|
22
|
+
.legend {
|
23
|
+
@include accessibility.hide-text();
|
24
|
+
}
|
25
|
+
|
26
|
+
// 1.
|
17
27
|
.label,
|
18
28
|
.optionLabel {
|
19
29
|
@include foundation.label();
|
20
30
|
}
|
21
31
|
|
22
|
-
.
|
32
|
+
.options {
|
23
33
|
@include reset.list();
|
24
34
|
}
|
25
35
|
|
@@ -7,6 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
|
|
7
7
|
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
|
8
8
|
import { transferProps } from '../_helpers/transferProps';
|
9
9
|
import { FormLayoutContext } from '../FormLayout';
|
10
|
+
import { InputGroupContext } from '../InputGroup/InputGroupContext';
|
10
11
|
import { Option } from './_components/Option';
|
11
12
|
import styles from './SelectField.scss';
|
12
13
|
|
@@ -28,20 +29,25 @@ export const SelectField = React.forwardRef((props, ref) => {
|
|
28
29
|
...restProps
|
29
30
|
} = props;
|
30
31
|
|
31
|
-
const
|
32
|
+
const formLayoutContext = useContext(FormLayoutContext);
|
33
|
+
const inputGroupContext = useContext(InputGroupContext);
|
32
34
|
|
33
35
|
return (
|
34
36
|
<label
|
35
37
|
className={classNames(
|
36
38
|
styles.root,
|
37
39
|
fullWidth && styles.isRootFullWidth,
|
38
|
-
|
39
|
-
resolveContextOrProp(
|
40
|
+
formLayoutContext && styles.isRootInFormLayout,
|
41
|
+
resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
|
42
|
+
resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
|
40
43
|
? styles.isRootLayoutHorizontal
|
41
44
|
: styles.isRootLayoutVertical,
|
42
|
-
|
45
|
+
inputGroupContext && styles.isRootGrouped,
|
43
46
|
required && styles.isRootRequired,
|
44
|
-
getRootSizeClassName(
|
47
|
+
getRootSizeClassName(
|
48
|
+
resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
|
49
|
+
styles,
|
50
|
+
),
|
45
51
|
getRootValidationStateClassName(validationState, styles),
|
46
52
|
variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
|
47
53
|
)}
|
@@ -51,7 +57,7 @@ export const SelectField = React.forwardRef((props, ref) => {
|
|
51
57
|
<div
|
52
58
|
className={classNames(
|
53
59
|
styles.label,
|
54
|
-
!isLabelVisible && styles.isLabelHidden,
|
60
|
+
(!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
|
55
61
|
)}
|
56
62
|
id={id && `${id}__labelText`}
|
57
63
|
>
|
@@ -62,7 +68,7 @@ export const SelectField = React.forwardRef((props, ref) => {
|
|
62
68
|
<select
|
63
69
|
{...transferProps(restProps)}
|
64
70
|
className={styles.input}
|
65
|
-
disabled={disabled}
|
71
|
+
disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
|
66
72
|
id={id}
|
67
73
|
ref={ref}
|
68
74
|
required={required}
|
@@ -110,7 +116,7 @@ export const SelectField = React.forwardRef((props, ref) => {
|
|
110
116
|
{helpText}
|
111
117
|
</div>
|
112
118
|
)}
|
113
|
-
{validationText && (
|
119
|
+
{(validationText && !inputGroupContext) && (
|
114
120
|
<div
|
115
121
|
className={styles.validationText}
|
116
122
|
id={id && `${id}__validationText`}
|
@@ -169,6 +175,8 @@ SelectField.propTypes = {
|
|
169
175
|
/**
|
170
176
|
* If `false`, the label will be visually hidden (but remains accessible by assistive
|
171
177
|
* technologies).
|
178
|
+
*
|
179
|
+
* Automatically set to `false` when the component is rendered within `InputGroup` component.
|
172
180
|
*/
|
173
181
|
isLabelVisible: PropTypes.bool,
|
174
182
|
/**
|
@@ -224,6 +232,8 @@ SelectField.propTypes = {
|
|
224
232
|
required: PropTypes.bool,
|
225
233
|
/**
|
226
234
|
* Size of the field.
|
235
|
+
*
|
236
|
+
* Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
|
227
237
|
*/
|
228
238
|
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
229
239
|
/**
|
@@ -232,6 +242,9 @@ SelectField.propTypes = {
|
|
232
242
|
validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
|
233
243
|
/**
|
234
244
|
* Validation message to be displayed.
|
245
|
+
*
|
246
|
+
* Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
|
247
|
+
* component itself renders all validation texts of its nested components.
|
235
248
|
*/
|
236
249
|
validationText: PropTypes.node,
|
237
250
|
/**
|
@@ -7,6 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
|
|
7
7
|
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
|
8
8
|
import { transferProps } from '../_helpers/transferProps';
|
9
9
|
import { FormLayoutContext } from '../FormLayout';
|
10
|
+
import { InputGroupContext } from '../InputGroup/InputGroupContext';
|
10
11
|
import styles from './TextField.scss';
|
11
12
|
|
12
13
|
const SMALL_INPUT_SIZE = 10;
|
@@ -29,7 +30,8 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
29
30
|
variant,
|
30
31
|
...restProps
|
31
32
|
} = props;
|
32
|
-
const
|
33
|
+
const formLayoutContext = useContext(FormLayoutContext);
|
34
|
+
const inputGroupContext = useContext(InputGroupContext);
|
33
35
|
const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
|
34
36
|
|
35
37
|
return (
|
@@ -39,13 +41,17 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
39
41
|
fullWidth && styles.isRootFullWidth,
|
40
42
|
hasSmallInput && styles.hasRootSmallInput,
|
41
43
|
inputSize && styles.hasRootCustomInputSize,
|
42
|
-
|
43
|
-
resolveContextOrProp(
|
44
|
+
formLayoutContext && styles.isRootInFormLayout,
|
45
|
+
resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
|
46
|
+
resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
|
44
47
|
? styles.isRootLayoutHorizontal
|
45
48
|
: styles.isRootLayoutVertical,
|
46
|
-
|
49
|
+
inputGroupContext && styles.isRootGrouped,
|
47
50
|
required && styles.isRootRequired,
|
48
|
-
getRootSizeClassName(
|
51
|
+
getRootSizeClassName(
|
52
|
+
resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
|
53
|
+
styles,
|
54
|
+
),
|
49
55
|
getRootValidationStateClassName(validationState, styles),
|
50
56
|
variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
|
51
57
|
)}
|
@@ -56,7 +62,7 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
56
62
|
<div
|
57
63
|
className={classNames(
|
58
64
|
styles.label,
|
59
|
-
!isLabelVisible && styles.isLabelHidden,
|
65
|
+
(!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
|
60
66
|
)}
|
61
67
|
id={id && `${id}__labelText`}
|
62
68
|
>
|
@@ -67,7 +73,7 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
67
73
|
<input
|
68
74
|
{...transferProps(restProps)}
|
69
75
|
className={styles.input}
|
70
|
-
disabled={disabled}
|
76
|
+
disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
|
71
77
|
id={id}
|
72
78
|
ref={ref}
|
73
79
|
required={required}
|
@@ -86,7 +92,7 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
86
92
|
{helpText}
|
87
93
|
</div>
|
88
94
|
)}
|
89
|
-
{validationText && (
|
95
|
+
{(validationText && !inputGroupContext) && (
|
90
96
|
<div
|
91
97
|
className={styles.validationText}
|
92
98
|
id={id && `${id}__validationText`}
|
@@ -143,6 +149,8 @@ TextField.propTypes = {
|
|
143
149
|
/**
|
144
150
|
* If `false`, the label will be visually hidden (but remains accessible by assistive
|
145
151
|
* technologies).
|
152
|
+
*
|
153
|
+
* Automatically set to `false` when the component is rendered within `InputGroup` component.
|
146
154
|
*/
|
147
155
|
isLabelVisible: PropTypes.bool,
|
148
156
|
/**
|
@@ -162,6 +170,8 @@ TextField.propTypes = {
|
|
162
170
|
required: PropTypes.bool,
|
163
171
|
/**
|
164
172
|
* Size of the field.
|
173
|
+
*
|
174
|
+
* Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
|
165
175
|
*/
|
166
176
|
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
167
177
|
/**
|
@@ -174,6 +184,9 @@ TextField.propTypes = {
|
|
174
184
|
validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
|
175
185
|
/**
|
176
186
|
* Validation message to be displayed.
|
187
|
+
*
|
188
|
+
* Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
|
189
|
+
* component itself renders all validation texts of its nested components.
|
177
190
|
*/
|
178
191
|
validationText: PropTypes.node,
|
179
192
|
/**
|
package/src/lib/index.js
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
// result width across browsers.
|
4
4
|
// 3. Let inputs properly fit various layout scenarios.
|
5
5
|
// 4. Leave out space for SelectField caret.
|
6
|
+
// 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
|
6
7
|
|
7
8
|
@use "../../settings/form-fields" as settings;
|
8
9
|
@use "../../theme/form-fields" as theme;
|
@@ -93,8 +94,8 @@
|
|
93
94
|
align-items: center;
|
94
95
|
justify-content: center;
|
95
96
|
width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
|
96
|
-
border-
|
97
|
-
border-
|
97
|
+
border-start-end-radius: theme.$box-border-radius;
|
98
|
+
border-end-end-radius: theme.$box-border-radius;
|
98
99
|
pointer-events: none;
|
99
100
|
}
|
100
101
|
|
@@ -122,3 +123,19 @@
|
|
122
123
|
transform: scaleX(1);
|
123
124
|
}
|
124
125
|
}
|
126
|
+
|
127
|
+
@mixin in-group-layout() {
|
128
|
+
.inputContainer {
|
129
|
+
display: block; // 5.
|
130
|
+
}
|
131
|
+
|
132
|
+
&:not(:first-child) .input {
|
133
|
+
border-start-start-radius: var(--rui-local-inner-border-radius);
|
134
|
+
border-end-start-radius: var(--rui-local-inner-border-radius);
|
135
|
+
}
|
136
|
+
|
137
|
+
&:not(:last-child) .input {
|
138
|
+
border-start-end-radius: var(--rui-local-inner-border-radius);
|
139
|
+
border-end-end-radius: var(--rui-local-inner-border-radius);
|
140
|
+
}
|
141
|
+
}
|
@@ -1,19 +1,22 @@
|
|
1
1
|
@use "sass:map";
|
2
2
|
@use "../../theme/form-fields" as theme;
|
3
3
|
|
4
|
-
@mixin size($size, $is-multiline: false) {
|
4
|
+
@mixin size($size, $has-input: true, $is-multiline: false) {
|
5
5
|
$size-properties: map.get(theme.$box-sizes, $size);
|
6
6
|
|
7
7
|
--rui-local-padding-y: #{map.get($size-properties, padding-y)};
|
8
8
|
--rui-local-padding-x: #{map.get($size-properties, padding-x)};
|
9
|
-
--rui-local-font-size: #{map.get($size-properties, font-size)};
|
10
9
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
10
|
+
@if $has-input {
|
11
|
+
--rui-local-font-size: #{map.get($size-properties, font-size)};
|
12
|
+
|
13
|
+
.input {
|
14
|
+
@if $is-multiline {
|
15
|
+
height: auto;
|
16
|
+
min-height: map.get($size-properties, height);
|
17
|
+
} @else {
|
18
|
+
--rui-local-height: #{map.get($size-properties, height)};
|
19
|
+
}
|
17
20
|
}
|
18
21
|
}
|
19
22
|
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
// 1. Don't let text alignment be affected by a parent.
|
2
|
+
// 2. Override foundation reset.
|
2
3
|
|
3
4
|
@use "../../settings/form-fields" as settings;
|
4
5
|
@use "../../theme/form-fields" as theme;
|
@@ -7,6 +8,12 @@
|
|
7
8
|
text-align: left; // 1.
|
8
9
|
}
|
9
10
|
|
11
|
+
@mixin fieldset() {
|
12
|
+
&:not(:last-child) {
|
13
|
+
margin-bottom: 0; // 2.
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
10
17
|
@mixin label() {
|
11
18
|
color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
|
12
19
|
}
|
package/src/lib/theme.scss
CHANGED
@@ -30,7 +30,8 @@
|
|
30
30
|
--rui-dimension-breakpoint-x3l: #{breakpoints.$x3l};
|
31
31
|
|
32
32
|
// Radii
|
33
|
-
--rui-dimension-radius-1: 0.
|
33
|
+
--rui-dimension-radius-1: 0.125rem;
|
34
|
+
--rui-dimension-radius-2: 0.25rem;
|
34
35
|
|
35
36
|
// Spacing
|
36
37
|
--rui-dimension-space-0: 0;
|
@@ -259,7 +260,7 @@
|
|
259
260
|
--rui-Alert__padding: var(--rui-dimension-space-3);
|
260
261
|
--rui-Alert__font-weight: var(--rui-font-weight-base);
|
261
262
|
--rui-Alert__border-width: var(--rui-dimension-border-width-1);
|
262
|
-
--rui-Alert__border-radius: var(--rui-dimension-radius-
|
263
|
+
--rui-Alert__border-radius: var(--rui-dimension-radius-2);
|
263
264
|
--rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold);
|
264
265
|
--rui-Alert__stripe__width: var(--rui-dimension-border-width-1);
|
265
266
|
|
@@ -312,7 +313,7 @@
|
|
312
313
|
--rui-Button__letter-spacing: 0;
|
313
314
|
--rui-Button__text-transform: none;
|
314
315
|
--rui-Button__border-width: var(--rui-dimension-border-width-1);
|
315
|
-
--rui-Button__border-radius: var(--rui-dimension-radius-
|
316
|
+
--rui-Button__border-radius: var(--rui-dimension-radius-2);
|
316
317
|
--rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity);
|
317
318
|
--rui-Button--disabled__cursor: var(--rui-cursor-not-allowed);
|
318
319
|
--rui-Button--feedback__opacity: 1;
|
@@ -711,26 +712,30 @@
|
|
711
712
|
// ButtonGroup
|
712
713
|
// ===========
|
713
714
|
|
715
|
+
--rui-ButtonGroup__inner-border-radius: 0;
|
716
|
+
|
714
717
|
// ButtonGroup: filled buttons
|
715
718
|
--rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width));
|
716
719
|
--rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width);
|
717
720
|
--rui-ButtonGroup--filled__separator__color: currentColor;
|
718
721
|
|
722
|
+
// ButtonGroup: outline buttons
|
723
|
+
--rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
|
724
|
+
--rui-ButtonGroup--outline__separator__width: 0;
|
725
|
+
--rui-ButtonGroup--outline__separator__color: transparent;
|
726
|
+
|
719
727
|
// ButtonGroup: flat buttons
|
720
728
|
--rui-ButtonGroup--flat__gap: var(--rui-Button__border-width);
|
721
729
|
--rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap);
|
722
730
|
--rui-ButtonGroup--flat__separator__color: currentColor;
|
723
731
|
|
724
|
-
// ButtonGroup: outline buttons
|
725
|
-
--rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
|
726
|
-
|
727
732
|
//
|
728
733
|
// Card
|
729
734
|
// ====
|
730
735
|
|
731
736
|
--rui-Card__padding: var(--rui-dimension-space-4);
|
732
737
|
--rui-Card__border-width: var(--rui-dimension-border-width-1);
|
733
|
-
--rui-Card__border-radius: var(--rui-dimension-radius-
|
738
|
+
--rui-Card__border-radius: var(--rui-dimension-radius-2);
|
734
739
|
--rui-Card--dense__padding: var(--rui-dimension-space-2);
|
735
740
|
--rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
|
736
741
|
--rui-Card--disabled__background-color: var(--rui-color-background-disabled);
|
@@ -834,7 +839,7 @@
|
|
834
839
|
|
835
840
|
// Form fields: box fields
|
836
841
|
--rui-FormField--box__border-width: var(--rui-dimension-border-width-1);
|
837
|
-
--rui-FormField--box__border-radius: var(--rui-dimension-radius-
|
842
|
+
--rui-FormField--box__border-radius: var(--rui-dimension-radius-2);
|
838
843
|
--rui-FormField--box__input__width: auto; // 1.
|
839
844
|
--rui-FormField--box__input__min-width: 240px; // 1.
|
840
845
|
--rui-FormField--box__placeholder__color: var(--rui-color-text-secondary);
|
@@ -910,6 +915,13 @@
|
|
910
915
|
--rui-FormLayout--horizontal__label__width--auto: auto;
|
911
916
|
--rui-FormLayout--horizontal__label__width--limited: fit-content(50%);
|
912
917
|
|
918
|
+
//
|
919
|
+
// InputGroup
|
920
|
+
// =======
|
921
|
+
|
922
|
+
--rui-InputGroup__gap: var(--rui-dimension-space-1);
|
923
|
+
--rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1);
|
924
|
+
|
913
925
|
//
|
914
926
|
// Modal
|
915
927
|
// =====
|
@@ -941,7 +953,7 @@
|
|
941
953
|
--rui-Paper__padding: var(--rui-dimension-space-4);
|
942
954
|
--rui-Paper__border-width: 0;
|
943
955
|
--rui-Paper__border-color: transparent;
|
944
|
-
--rui-Paper__border-radius: var(--rui-dimension-radius-
|
956
|
+
--rui-Paper__border-radius: var(--rui-dimension-radius-2);
|
945
957
|
--rui-Paper__background-color: var(--rui-color-background-layer-1);
|
946
958
|
--rui-Paper--muted__background-color: var(--rui-color-background-disabled);
|
947
959
|
--rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity);
|
@@ -955,7 +967,7 @@
|
|
955
967
|
--rui-Popover__padding: var(--rui-dimension-space-3);
|
956
968
|
--rui-Popover__border-width: 0;
|
957
969
|
--rui-Popover__border-color: transparent;
|
958
|
-
--rui-Popover__border-radius: var(--rui-dimension-radius-
|
970
|
+
--rui-Popover__border-radius: var(--rui-dimension-radius-2);
|
959
971
|
--rui-Popover__color: var(--rui-color-text-primary);
|
960
972
|
--rui-Popover__background-color: var(--rui-color-background-layer-2);
|
961
973
|
--rui-Popover__box-shadow: var(--rui-shadow-layer-2);
|
@@ -983,7 +995,7 @@
|
|
983
995
|
var(--rui-color-border-secondary)
|
984
996
|
transparent
|
985
997
|
var(--rui-color-border-secondary);
|
986
|
-
--rui-Tabs__item__border-radius: var(--rui-dimension-radius-
|
998
|
+
--rui-Tabs__item__border-radius: var(--rui-dimension-radius-2);
|
987
999
|
--rui-Tabs__item__background-color: var(--rui-color-background-layer-1);
|
988
1000
|
--rui-Tabs__item__box-shadow: none;
|
989
1001
|
--rui-Tabs__item__icon__gap: var(--rui-dimension-space-2);
|
File without changes
|