@react-ui-org/react-ui 0.50.2 → 0.52.0

package/src/lib/components/TextField/TextField.jsx

@@ -7,6 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
+import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import styles from './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
@@ -29,7 +30,8 @@ export const TextField = React.forwardRef((props, ref) => {
     variant,
     ...restProps
   } = props;
-  const context = useContext(FormLayoutContext);
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
@@ -39,13 +41,17 @@ export const TextField = React.forwardRef((props, ref) => {
         fullWidth && styles.isRootFullWidth,
         hasSmallInput && styles.hasRootSmallInput,
         inputSize && styles.hasRootCustomInputSize,
-        context && styles.isRootInFormLayout,
-        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
-        disabled && styles.isRootDisabled,
+        inputGroupContext && styles.isRootGrouped,
         required && styles.isRootRequired,
-        getRootSizeClassName(size, styles),
+        getRootSizeClassName(
+          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
+          styles,
+        ),
         getRootValidationStateClassName(validationState, styles),
         variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
@@ -56,7 +62,7 @@ export const TextField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -67,7 +73,7 @@ export const TextField = React.forwardRef((props, ref) => {
           <input
             {...transferProps(restProps)}
             className={styles.input}
-            disabled={disabled}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
             ref={ref}
             required={required}
@@ -86,7 +92,7 @@ export const TextField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={id && `${id}__validationText`}
@@ -143,6 +149,8 @@ TextField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
@@ -162,6 +170,8 @@ TextField.propTypes = {
   required: PropTypes.bool,
   /**
    * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
@@ -174,6 +184,9 @@ TextField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
    */
   validationText: PropTypes.node,
   /**

package/src/lib/components/TextField/TextField.scss

@@ -100,3 +100,8 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
+
+// Groups
+.isRootGrouped {
+    @include box-field-elements.in-group-layout();
+}

package/src/lib/components/TextLink/README.mdx

@@ -73,12 +73,14 @@ accessibility.
 
 ## Theming
 
-| Custom Property                          | Description                       |
-|------------------------------------------|-----------------------------------|
-| `--rui-TextLink__color`                  | Text color                        |
-| `--rui-TextLink__text-decoration`        | Text decoration, e.g. underline   |
-| `--rui-TextLink--hover__color`           | Text color on hover               |
-| `--rui-TextLink--hover__text-decoration` | Text decoration on hover          |
+| Custom Property                           | Description                         |
+|-------------------------------------------|-------------------------------------|
+| `--rui-TextLink__color`                   | Text color                          |
+| `--rui-TextLink__text-decoration`         | Text decoration, e.g. underline     |
+| `--rui-TextLink--hover__color`            | Text color on hover                 |
+| `--rui-TextLink--hover__text-decoration`  | Text decoration on hover            |
+| `--rui-TextLink--active__color`           | Text color in the active state      |
+| `--rui-TextLink--active__text-decoration` | Text decoration in the active state |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
 [a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes

package/src/lib/components/TextLink/TextLink.scss

@@ -8,4 +8,9 @@
         text-decoration: theme.$hover-text-decoration;
         color: theme.$hover-color;
     }
+
+    &:active {
+        text-decoration: theme.$active-text-decoration;
+        color: theme.$active-color;
+    }
 }

package/src/lib/components/TextLink/_theme.scss

@@ -2,3 +2,5 @@ $color: var(--rui-TextLink__color);
 $text-decoration: var(--rui-TextLink__text-decoration);
 $hover-color: var(--rui-TextLink--hover__color);
 $hover-text-decoration: var(--rui-TextLink--hover__text-decoration);
+$active-color: var(--rui-TextLink--active__color);
+$active-text-decoration: var(--rui-TextLink--active__text-decoration);

package/src/lib/components/Toolbar/README.mdx

@@ -90,24 +90,28 @@ of `right`.
               <span id="alignment-label">Alignment:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="alignment-label">
+              <ButtonGroup aria-labelledby="alignment-label" priority="outline">
                 <Button
-                  color={alignment === 'top' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'top'}
+                  color={alignment === 'top' ? 'selected' : 'secondary'}
                   label="top"
                   onClick={() => setAlignment('top')}
                 />
                 <Button
-                  color={alignment === 'middle' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'middle'}
+                  color={alignment === 'middle' ? 'selected' : 'secondary'}
                   label="middle"
                   onClick={() => setAlignment('middle')}
                 />
                 <Button
-                  color={alignment === 'bottom' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'bottom'}
+                  color={alignment === 'bottom' ? 'selected' : 'secondary'}
                   label="bottom"
                   onClick={() => setAlignment('bottom')}
                 />
                 <Button
-                  color={alignment === 'baseline' ? 'dark' : 'primary'}
+                  aria-pressed={alignment === 'baseline'}
+                  color={alignment === 'baseline' ? 'selected' : 'secondary'}
                   label="baseline"
                   onClick={() => setAlignment('baseline')}
                 />
@@ -119,24 +123,28 @@ of `right`.
               <span id="justification-label">Justification:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="justification-label">
+              <ButtonGroup aria-labelledby="justification-label" priority="outline">
                 <Button
-                  color={justification === 'start' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'start'}
+                  color={justification === 'start' ? 'selected' : 'secondary'}
                   label="start"
                   onClick={() => setJustification('start')}
                 />
                 <Button
-                  color={justification === 'center' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'center'}
+                  color={justification === 'center' ? 'selected' : 'secondary'}
                   label="center"
                   onClick={() => setJustification('center')}
                 />
                 <Button
-                  color={justification === 'end' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'end'}
+                  color={justification === 'end' ? 'selected' : 'secondary'}
                   label="end"
                   onClick={() => setJustification('end')}
                 />
                 <Button
-                  color={justification === 'space-between' ? 'dark' : 'primary'}
+                  aria-pressed={justification === 'space-between'}
+                  color={justification === 'space-between' ? 'selected' : 'secondary'}
                   label="space-between"
                   onClick={() => setJustification('space-between')}
                 />
@@ -202,7 +210,7 @@ toolbar groups, or on the entire toolbar.
 
 <Playground>
   {() => {
-    const [isGroupDense, setIsGroupDense] = React.useState(true);
+    const [isGroupDense, setIsGroupDense] = React.useState(false);
     const [isToolbarDense, setIsToolbarDense] = React.useState(false);
     return (
       <div>

package/src/lib/components/_helpers/getRootColorClassName.js

@@ -7,6 +7,10 @@ export const getRootColorClassName = (variant, styles) => {
     return styles.isRootColorSecondary;
   }
 
+  if (variant === 'selected') {
+    return styles.isRootColorSelected;
+  }
+
   if (variant === 'success') {
     return styles.isRootColorSuccess;
   }

package/src/lib/index.js

@@ -18,6 +18,7 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
+export { InputGroup } from './components/InputGroup';
 export {
   Modal,
   ModalBody,

package/src/lib/styles/elements/_code.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
 @use "../theme/code";
-@use "../theme/colors";
 
 code,
 pre {
@@ -10,5 +8,5 @@ pre {
 
 code {
     padding: 0.15em 0.5em;
-    background-color: map.get(colors.$grays, gray-100);
+    background-color: var(--rui-color-background-light);
 }

package/src/lib/styles/elements/_page.scss

@@ -6,6 +6,7 @@ html {
     height: 100%;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    font-weight: typography.$font-weight-base;
     font-size: typography.$font-size-base;
     line-height: typography.$line-height-base;
     font-family: typography.$font-family-base;

package/src/lib/styles/elements/_rulers.scss

@@ -1,9 +1,7 @@
-@use "sass:map";
 @use "../theme/borders";
-@use "../theme/colors";
 
 hr {
     border: 0;
-    border-top: borders.$width solid map.get(colors.$grays, gray-200);
+    border-top: borders.$width solid var(--rui-color-border-secondary);
     background: none;
 }

package/src/lib/styles/elements/_small.scss

@@ -1,5 +1,5 @@
 @use "../theme/typography";
 
 small {
-    font-size: typography.$size-small;
+    font-size: typography.$font-size-small;
 }

package/src/lib/styles/settings/_form-fields.scss

@@ -15,7 +15,7 @@ $horizontal-inner-gap: spacing.of(2);
 $horizontal-outer-spacing: spacing.of(2);
 
 $box-input-font-family: typography.$font-family-base;
-$box-input-font-weight: map.get(typography.$font-weight-values, regular);
+$box-input-font-weight: map.get(typography.$font-weight-values, default);
 $box-input-line-height: 1.5rem; // 1.
 $box-field-caret-size: 2.25rem;
 $box-field-input-number-arrows-width: 1.5rem;

package/src/lib/styles/settings/_utilities.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-@use "../theme/colors";
 @use "../theme/spacing";
 @use "../theme/typography";
 
@@ -85,8 +84,8 @@ $map: (
     "font-size": (
         responsive: false,
         property: font-size,
-        class: typography-size,
-        values: typography.$size-values,
+        class: font-size,
+        values: typography.$font-size-values,
     ),
     "text-align": (
         responsive: true,
@@ -99,17 +98,50 @@ $map: (
         property: color,
         class: text,
         values: (
-            primary: map.get(colors.$brand, primary),
-            secondary: map.get(colors.$brand, secondary),
-            success: map.get(colors.$ui, success),
-            warning: map.get(colors.$ui, warning),
-            danger: map.get(colors.$ui, danger),
-            help: map.get(colors.$ui, help),
-            info: map.get(colors.$ui, info),
-            note: map.get(colors.$ui, note),
-            light: colors.$light,
-            dark: colors.$dark,
-            muted: colors.$muted,
+            // Text colors
+            primary: var(--rui-color-text-primary),
+            primary-disabled: var(--rui-color-text-primary-disabled),
+            secondary: var(--rui-color-text-secondary),
+            secondary-disabled: var(--rui-color-text-secondary-disabled),
+            // Feedback colors
+            success: var(--rui-color-feedback-success),
+            warning: var(--rui-color-feedback-warning),
+            danger: var(--rui-color-feedback-danger),
+            help: var(--rui-color-feedback-help),
+            info: var(--rui-color-feedback-info),
+            note: var(--rui-color-feedback-note),
+            // Neutral colors
+            light: var(--rui-color-neutral-light),
+            dark: var(--rui-color-neutral-dark),
+        ),
+    ),
+    "background-color": (
+        responsive: false,
+        property: background-color,
+        class: bg,
+        values: (
+            // Content layers
+            base: var(--rui-color-background-base),
+            layer-1: var(--rui-color-background-layer-1),
+            layer-2: var(--rui-color-background-layer-2),
+            // Component backgrounds
+            basic: var(--rui-color-background-basic),
+            disabled: var(--rui-color-background-disabled),
+            // Interactive backgrounds: intentionally not generated to utilities, CSS use only.
+            // Action backgrounds
+            primary: var(--rui-color-background-primary),
+            secondary: var(--rui-color-background-secondary),
+            selected: var(--rui-color-background-selected),
+            // Feedback backgrounds
+            success: var(--rui-color-background-success),
+            warning: var(--rui-color-background-warning),
+            danger: var(--rui-color-background-danger),
+            help: var(--rui-color-background-help),
+            info: var(--rui-color-background-info),
+            note: var(--rui-color-background-note),
+            // Neutral backgrounds
+            light: var(--rui-color-background-light),
+            dark: var(--rui-color-background-dark),
         ),
     ),
 );

package/src/lib/styles/theme/_accessibility.scss

@@ -1,7 +1,7 @@
 // 1. Make it possible to keep the original box shadow of the component: if `--rui-focus-box-shadow` is set to
 //    `initial`, `revert` or `unset`, `--rui-local-box-shadow` is used.
 
-$tap-target-size: var(--rui-tap-target-size);
-$focus-outline: var(--rui-focus-outline);
-$focus-outline-offset: var(--rui-focus-outline-offset);
-$focus-box-shadow: var(--rui-focus-box-shadow, var(--rui-local-box-shadow, initial)); // 1.
+$tap-target-size: var(--rui-dimension-tap-target-size);
+$focus-outline: var(--rui-border-focus-ring);
+$focus-outline-offset: var(--rui-dimension-focus-ring-offset);
+$focus-box-shadow: var(--rui-shadow-focus-ring, var(--rui-local-box-shadow, initial)); // 1.

package/src/lib/styles/theme/_borders.scss

@@ -1,2 +1,3 @@
-$width: var(--rui-border-width);
-$radius: var(--rui-border-radius);
+$width: var(--rui-dimension-border-width-1);
+$radius-1: var(--rui-dimension-radius-1);
+$radius-2: var(--rui-dimension-radius-2);

package/src/lib/styles/theme/_code.scss

@@ -1,2 +1,2 @@
-$font-family: var(--rui-code-font-family);
-$font-size: var(--rui-code-font-size);
+$font-family: var(--rui-font-family-monospace);
+$font-size: var(--rui-font-size-code);

package/src/lib/styles/theme/_links.scss

@@ -1,4 +1,6 @@
-$color: var(--rui-link-color);
-$decoration: var(--rui-link-decoration);
-$hover-color: var(--rui-link-hover-color);
-$hover-decoration: var(--rui-link-hover-decoration);
+$color: var(--rui-color-text-link);
+$decoration: var(--rui-text-decoration-link);
+$hover-color: var(--rui-color-text-link-hover);
+$hover-decoration: var(--rui-text-decoration-link-hover);
+$active-color: var(--rui-color-text-link-active);
+$active-decoration: var(--rui-text-decoration-link-active);

package/src/lib/styles/theme/_lists.scss

@@ -1 +1 @@
-$unordered-style: var(--rui-list-unordered-style);
+$unordered-style: var(--rui-list-style-unordered);

package/src/lib/styles/theme/_page.scss

@@ -1,2 +1,2 @@
-$color: var(--rui-page-color);
-$background: var(--rui-page-background);
+$background: var(--rui-color-background-base);
+$color: var(--rui-color-text-primary);

package/src/lib/styles/theme/_spacing.scss

@@ -1,16 +1,16 @@
 $values: (
-    0: var(--rui-spacing-0),
-    1: var(--rui-spacing-1),
-    2: var(--rui-spacing-2),
-    3: var(--rui-spacing-3),
-    4: var(--rui-spacing-4),
-    5: var(--rui-spacing-5),
-    6: var(--rui-spacing-6),
-    7: var(--rui-spacing-7),
+    0: var(--rui-dimension-space-0),
+    1: var(--rui-dimension-space-1),
+    2: var(--rui-dimension-space-2),
+    3: var(--rui-dimension-space-3),
+    4: var(--rui-dimension-space-4),
+    5: var(--rui-dimension-space-5),
+    6: var(--rui-dimension-space-6),
+    7: var(--rui-dimension-space-7),
 );
 
 $bottom: (
-    default: var(--rui-spacing-bottom-default),
-    headings: var(--rui-spacing-bottom-headings),
-    layouts: var(--rui-spacing-bottom-layouts),
+    base: var(--rui-dimension-space-bottom-base),
+    headings: var(--rui-dimension-space-bottom-headings),
+    layouts: var(--rui-dimension-space-bottom-layouts),
 );

package/src/lib/styles/theme/_typography.scss

@@ -1,24 +1,25 @@
 $font-weight-values: (
-    thin: var(--rui-typography-font-weight-thin),
-    light: var(--rui-typography-font-weight-light),
-    regular: var(--rui-typography-font-weight-regular),
-    medium: var(--rui-typography-font-weight-medium),
-    bold: var(--rui-typography-font-weight-bold),
+    light: var(--rui-font-weight-light),
+    default: var(--rui-font-weight-base),
+    bold: var(--rui-font-weight-bold),
 );
 
-$size-values: (
-    0: var(--rui-typography-size-0),
-    1: var(--rui-typography-size-1),
-    2: var(--rui-typography-size-2),
-    3: var(--rui-typography-size-3),
-    4: var(--rui-typography-size-4),
-    5: var(--rui-typography-size-5),
+$font-weight-base: var(--rui-font-weight-base);
+
+$font-size-values: (
+    1: var(--rui-font-size-1),
+    2: var(--rui-font-size-2),
+    3: var(--rui-font-size-3),
+    4: var(--rui-font-size-4),
+    5: var(--rui-font-size-5),
+    6: var(--rui-font-size-6),
 );
 
-$size-small: var(--rui-typography-size-small);
-$size-smaller: var(--rui-typography-size-smaller);
+$font-size-base: var(--rui-font-size-base);
+$font-size-small: var(--rui-font-size-small);
+$font-size-smaller: var(--rui-font-size-smaller);
+
+$font-family-base: var(--rui-font-family-base);
 
-$font-family-base: var(--rui-typography-font-family-base);
-$font-size-base: var(--rui-typography-font-size-base);
-$line-height-base: var(--rui-typography-line-height-base);
-$line-height-small: var(--rui-typography-line-height-small);
+$line-height-base: var(--rui-line-height-base);
+$line-height-small: var(--rui-line-height-small);

package/src/lib/styles/theme-constants/_colors.scss

@@ -1,4 +1,4 @@
-// ⚠️ For `theme.scss` purposes only, do not use anywhere else.
+// ⚠️ FOR `theme.scss` PURPOSES ONLY. DO NOT USE AS A BASE FOR YOUR COLOR PALETTES OR ANYWHERE ELSE THAN IN THE THEME.
 
 @use "sass:color";
 @use "../tools/colors";
@@ -8,8 +8,24 @@ $_amount-light: 90%;
 $_amount-dark: 10%;
 $_amount-darker: 20%;
 
+$gray-50: colors.darken-color($_gray-base-color, 5%);
+$gray-100: colors.darken-color($_gray-base-color, 10%);
+$gray-200: colors.darken-color($_gray-base-color, 20%);
+$gray-300: colors.darken-color($_gray-base-color, 30%);
+$gray-400: colors.darken-color($_gray-base-color, 40%);
+$gray-500: colors.darken-color($_gray-base-color, 50%);
+$gray-600: colors.darken-color($_gray-base-color, 60%);
+$gray-700: colors.darken-color($_gray-base-color, 70%);
+$gray-800: colors.darken-color($_gray-base-color, 80%);
+$gray-900: colors.darken-color($_gray-base-color, 90%);
+
 $primary: #00778b;
-$secondary: #fa4616;
+$secondary: $gray-500;
+$selected: #007bff;
+
+$focus: color.scale($selected, $alpha: -50%);
+
+$transparent: transparent;
 
 $success: #28a745;
 $warning: #ffc107;
@@ -21,7 +37,6 @@ $note: #007bff;
 $white: #fff;
 $black: #000;
 
-// Derived color palette
 $primary-light: colors.lighten-color($primary, $_amount-light);
 $primary-dark: colors.darken-color($primary, $_amount-dark);
 $primary-darker: colors.darken-color($primary, $_amount-darker);
@@ -32,6 +47,11 @@ $secondary-dark: colors.darken-color($secondary, $_amount-dark);
 $secondary-darker: colors.darken-color($secondary, $_amount-darker);
 $on-secondary: $white;
 
+$selected-light: colors.lighten-color($selected, $_amount-light);
+$selected-dark: colors.darken-color($selected, $_amount-dark);
+$selected-darker: colors.darken-color($selected, $_amount-darker);
+$on-selected: $white;
+
 $success-light: colors.lighten-color($success, $_amount-light);
 $success-dark: colors.darken-color($success, $_amount-dark);
 $success-darker: colors.darken-color($success, $_amount-darker);
@@ -61,23 +81,3 @@ $note-light: colors.lighten-color($note, $_amount-light);
 $note-dark: colors.darken-color($note, $_amount-dark);
 $note-darker: colors.darken-color($note, $_amount-darker);
 $on-note: $white;
-
-$gray-50: colors.darken-color($_gray-base-color, 5%);
-$gray-100: colors.darken-color($_gray-base-color, 10%);
-$gray-200: colors.darken-color($_gray-base-color, 20%);
-$gray-300: colors.darken-color($_gray-base-color, 30%);
-$gray-400: colors.darken-color($_gray-base-color, 40%);
-$gray-500: colors.darken-color($_gray-base-color, 50%);
-$gray-600: colors.darken-color($_gray-base-color, 60%);
-$gray-700: colors.darken-color($_gray-base-color, 70%);
-$gray-800: colors.darken-color($_gray-base-color, 80%);
-$gray-900: colors.darken-color($_gray-base-color, 90%);
-
-$light: $white;
-$dark: $gray-700;
-$muted: $gray-500;
-
-$active: $note;
-$on-active: $on-note;
-$active-hover: $note-darker;
-$active-focus: color.adjust($note, $alpha: -0.75);

package/src/lib/styles/tools/_spacing.scss

@@ -11,7 +11,7 @@
     }
 }
 
-@mixin bottom($category: default) {
+@mixin bottom($category: base) {
     @if not map.has-key(spacing.$bottom, $category) {
         @error "Invalid spacing category specified! #{$category} doesn't exist. "
             + "Choose one of #{map.keys(spacing.$bottom)}.";

package/src/lib/styles/tools/form-fields/_box-field-elements.scss

@@ -3,6 +3,7 @@
 //    result width across browsers.
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
+// 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -93,8 +94,8 @@
     align-items: center;
     justify-content: center;
     width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
-    border-top-right-radius: theme.$box-border-radius;
-    border-bottom-right-radius: theme.$box-border-radius;
+    border-start-end-radius: theme.$box-border-radius;
+    border-end-end-radius: theme.$box-border-radius;
     pointer-events: none;
 }
 
@@ -122,3 +123,19 @@
         transform: scaleX(1);
     }
 }
+
+@mixin in-group-layout() {
+    .inputContainer {
+        display: block; // 5.
+    }
+
+    &:not(:first-child) .input {
+        border-start-start-radius: var(--rui-local-inner-border-radius);
+        border-end-start-radius: var(--rui-local-inner-border-radius);
+    }
+
+    &:not(:last-child) .input {
+        border-start-end-radius: var(--rui-local-inner-border-radius);
+        border-end-end-radius: var(--rui-local-inner-border-radius);
+    }
+}

package/src/lib/styles/tools/form-fields/_box-field-sizes.scss

@@ -1,19 +1,22 @@
 @use "sass:map";
 @use "../../theme/form-fields" as theme;
 
-@mixin size($size, $is-multiline: false) {
+@mixin size($size, $has-input: true, $is-multiline: false) {
     $size-properties: map.get(theme.$box-sizes, $size);
 
     --rui-local-padding-y: #{map.get($size-properties, padding-y)};
     --rui-local-padding-x: #{map.get($size-properties, padding-x)};
-    --rui-local-font-size: #{map.get($size-properties, font-size)};
 
-    .input {
-        @if $is-multiline {
-            height: auto;
-            min-height: map.get($size-properties, height);
-        } @else {
-            --rui-local-height: #{map.get($size-properties, height)};
+    @if $has-input {
+        --rui-local-font-size: #{map.get($size-properties, font-size)};
+
+        .input {
+            @if $is-multiline {
+                height: auto;
+                min-height: map.get($size-properties, height);
+            } @else {
+                --rui-local-height: #{map.get($size-properties, height)};
+            }
         }
     }
 }