@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.
Files changed (39) hide show
  1. package/dist/lib.development.js +140 -32
  2. package/dist/lib.js +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/components/Button/Button.jsx +17 -9
  5. package/src/lib/components/Button/_base.scss +21 -12
  6. package/src/lib/components/Button/_priorities.scss +1 -18
  7. package/src/lib/components/Button/_theme.scss +0 -10
  8. package/src/lib/components/ButtonGroup/ButtonGroup.jsx +5 -3
  9. package/src/lib/components/ButtonGroup/ButtonGroup.scss +26 -1
  10. package/src/lib/components/ButtonGroup/README.mdx +11 -1
  11. package/src/lib/components/ButtonGroup/_theme.scss +13 -0
  12. package/src/lib/components/FormLayout/README.mdx +5 -0
  13. package/src/lib/components/InputGroup/InputGroup.jsx +170 -0
  14. package/src/lib/components/InputGroup/InputGroup.scss +92 -0
  15. package/src/lib/components/InputGroup/InputGroupContext.js +3 -0
  16. package/src/lib/components/InputGroup/README.mdx +278 -0
  17. package/src/lib/components/InputGroup/_theme.scss +2 -0
  18. package/src/lib/components/InputGroup/index.js +2 -0
  19. package/src/lib/components/Modal/Modal.jsx +58 -97
  20. package/src/lib/components/Modal/README.mdx +288 -15
  21. package/src/lib/components/Modal/_helpers/getPositionClassName.js +7 -0
  22. package/src/lib/components/Modal/_helpers/getSizeClassName.js +19 -0
  23. package/src/lib/components/Modal/_hooks/useModalFocus.js +126 -0
  24. package/src/lib/components/Modal/_hooks/useModalScrollPrevention.js +35 -0
  25. package/src/lib/components/Modal/_settings.scss +1 -1
  26. package/src/lib/components/Radio/README.mdx +9 -1
  27. package/src/lib/components/Radio/Radio.jsx +39 -31
  28. package/src/lib/components/Radio/Radio.scss +11 -1
  29. package/src/lib/components/SelectField/SelectField.jsx +21 -8
  30. package/src/lib/components/SelectField/SelectField.scss +5 -0
  31. package/src/lib/components/TextField/TextField.jsx +21 -8
  32. package/src/lib/components/TextField/TextField.scss +5 -0
  33. package/src/lib/index.js +1 -0
  34. package/src/lib/styles/theme/_borders.scss +2 -1
  35. package/src/lib/styles/tools/form-fields/_box-field-elements.scss +19 -2
  36. package/src/lib/styles/tools/form-fields/_box-field-sizes.scss +11 -8
  37. package/src/lib/styles/tools/form-fields/_foundation.scss +7 -0
  38. package/src/lib/theme.scss +23 -11
  39. /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
- <div
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}__labelText`}
55
+ id={id && `${id}__displayLabel`}
47
56
  >
48
57
  {label}
49
58
  </div>
50
59
  <div className={styles.field}>
51
- <ul className={styles.list}>
60
+ <div className={styles.options}>
52
61
  {
53
62
  options.map((option) => {
54
63
  const key = option.key ?? option.value;
55
64
  return (
56
- <li key={key}>
57
- <label
58
- className={styles.option}
59
- htmlFor={id && `${id}__item__${key}`}
60
- id={id && `${id}__item__${key}__label`}
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
- <input
63
- {...transferProps(restProps)}
64
- className={styles.input}
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
- </ul>
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
- </div>
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>__labelText`
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
- .list {
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 context = useContext(FormLayoutContext);
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
- context && styles.isRootInFormLayout,
39
- resolveContextOrProp(context && context.layout, layout) === 'horizontal'
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
- disabled && styles.isRootDisabled,
45
+ inputGroupContext && styles.isRootGrouped,
43
46
  required && styles.isRootRequired,
44
- getRootSizeClassName(size, styles),
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
  /**
@@ -102,3 +102,8 @@
102
102
  .isRootSizeLarge {
103
103
  @include box-field-sizes.size(large);
104
104
  }
105
+
106
+ // Groups
107
+ .isRootGrouped {
108
+ @include box-field-elements.in-group-layout();
109
+ }
@@ -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 context = useContext(FormLayoutContext);
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
- context && styles.isRootInFormLayout,
43
- resolveContextOrProp(context && context.layout, layout) === 'horizontal'
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
- disabled && styles.isRootDisabled,
49
+ inputGroupContext && styles.isRootGrouped,
47
50
  required && styles.isRootRequired,
48
- getRootSizeClassName(size, styles),
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
  /**
@@ -100,3 +100,8 @@
100
100
  .isRootSizeLarge {
101
101
  @include box-field-sizes.size(large);
102
102
  }
103
+
104
+ // Groups
105
+ .isRootGrouped {
106
+ @include box-field-elements.in-group-layout();
107
+ }
package/src/lib/index.js CHANGED
@@ -18,6 +18,7 @@ export {
18
18
  Grid,
19
19
  GridSpan,
20
20
  } from './components/Grid';
21
+ export { InputGroup } from './components/InputGroup';
21
22
  export {
22
23
  Modal,
23
24
  ModalBody,
@@ -1,2 +1,3 @@
1
1
  $width: var(--rui-dimension-border-width-1);
2
- $radius: var(--rui-dimension-radius-1);
2
+ $radius-1: var(--rui-dimension-radius-1);
3
+ $radius-2: var(--rui-dimension-radius-2);
@@ -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-top-right-radius: theme.$box-border-radius;
97
- border-bottom-right-radius: theme.$box-border-radius;
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
- .input {
12
- @if $is-multiline {
13
- height: auto;
14
- min-height: map.get($size-properties, height);
15
- } @else {
16
- --rui-local-height: #{map.get($size-properties, height)};
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
  }
@@ -30,7 +30,8 @@
30
30
  --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l};
31
31
 
32
32
  // Radii
33
- --rui-dimension-radius-1: 0.25rem;
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-1);
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-1);
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-1);
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-1);
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-1);
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-1);
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-1);
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);