Introduce smaller border radius for TextField and SelectField inside InputGroup

Author: adamkudrna

src/lib/components/InputGroup/InputGroup.scss

@@ -4,7 +4,6 @@
 
 @use "../../styles/tools/form-fields/box-field-elements";
 @use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/box-field-sizes";
 @use "../../styles/tools/form-fields/foundation";
 @use "../../styles/tools/form-fields/variants";
 @use "../../styles/tools/accessibility";
@@ -19,6 +18,8 @@
 }
 
 .inputGroup {
+    --rui-local-inner-border-radius: #{theme.$inner-border-radius};
+
     display: flex; // 2.
     gap: theme.$gap;
 }

src/lib/components/InputGroup/README.mdx

@@ -254,6 +254,7 @@ interactive and helps to improve its accessibility.
 | Custom Property                                                    | Description                                    |
 |--------------------------------------------------------------------|------------------------------------------------|
 | `--rui-InputGroup__gap`                                            | Gap between elements                           |
+| `--rui-InputGroup__inner-border-radius`                            | Inner border radius of elements                |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
 [div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

src/lib/components/InputGroup/_theme.scss

@@ -1 +1,2 @@
 $gap: var(--rui-InputGroup__gap);
+$inner-border-radius: var(--rui-InputGroup__inner-border-radius);

src/lib/components/Modal/_settings.scss

@@ -3,7 +3,7 @@
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
 
-$border-radius: borders.$radius;
+$border-radius: borders.$radius-2;
 $z-index: z-indexes.$modal;
 $backdrop-z-index: z-indexes.$modal-backdrop;
 $title-font-size: map.get(typography.$font-size-values, 2);

src/lib/components/SelectField/SelectField.scss

@@ -90,10 +90,6 @@
     @include box-field-layout.in-form-layout();
 }
 
-.isRootGrouped {
-    @include box-field-layout.in-group-layout();
-}
-
 // Sizes
 .isRootSizeSmall {
     @include box-field-sizes.size(small);
@@ -106,3 +102,8 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
+
+// Groups
+.isRootGrouped {
+    @include box-field-elements.in-group-layout();
+}

src/lib/components/TextField/TextField.scss

@@ -88,10 +88,6 @@
     @include box-field-layout.horizontal-with-small-input();
 }
 
-.isRootGrouped {
-    @include box-field-layout.in-group-layout();
-}
-
 // Sizes
 .isRootSizeSmall {
     @include box-field-sizes.size(small);
@@ -104,3 +100,8 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
+
+// Groups
+.isRootGrouped {
+    @include box-field-elements.in-group-layout();
+}

src/lib/styles/theme/_borders.scss

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

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);
+    }
+}

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

@@ -51,11 +51,6 @@
 //
 // 13. Label and field are vertically aligned to top (start) by default (see 10.). Vertical
 //     alignment of each block can be changed by theme configuration.
-//
-// 14. Inner corners of TextField and SelectField components inside the InputGroup component are sharp
-//     (their radius is set to 0).
-//
-// 15. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
 
 @use "../../settings/forms";
 @use "../../settings/form-fields" as settings;
@@ -232,20 +227,3 @@
         }
     }
 }
-
-@mixin in-group-layout() {
-    .inputContainer {
-        display: block; // 15.
-    }
-
-    &:not(:first-child) .input {
-        margin-left: var(--rui-local-gap);
-        border-top-left-radius: 0; // 14.
-        border-bottom-left-radius: 0; // 14.
-    }
-
-    &:not(:last-child) .input {
-        border-top-right-radius: 0; // 14.
-        border-bottom-right-radius: 0; // 14.
-    }
-}

src/lib/theme.scss

@@ -30,7 +30,8 @@
     --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l};
 
     // Radii
-    --rui-dimension-radius-1: 0.25rem;
+    --rui-dimension-radius-1: 0.125rem;
+    --rui-dimension-radius-2: 0.25rem;
 
     // Spacing
     --rui-dimension-space-0: 0;
@@ -259,7 +260,7 @@
     --rui-Alert__padding: var(--rui-dimension-space-3);
     --rui-Alert__font-weight: var(--rui-font-weight-base);
     --rui-Alert__border-width: var(--rui-dimension-border-width-1);
-    --rui-Alert__border-radius: var(--rui-dimension-radius-1);
+    --rui-Alert__border-radius: var(--rui-dimension-radius-2);
     --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold);
     --rui-Alert__stripe__width: var(--rui-dimension-border-width-1);
 
@@ -312,7 +313,7 @@
     --rui-Button__letter-spacing: 0;
     --rui-Button__text-transform: none;
     --rui-Button__border-width: var(--rui-dimension-border-width-1);
-    --rui-Button__border-radius: var(--rui-dimension-radius-1);
+    --rui-Button__border-radius: var(--rui-dimension-radius-2);
     --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity);
     --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed);
     --rui-Button--feedback__opacity: 1;
@@ -730,7 +731,7 @@
 
     --rui-Card__padding: var(--rui-dimension-space-4);
     --rui-Card__border-width: var(--rui-dimension-border-width-1);
-    --rui-Card__border-radius: var(--rui-dimension-radius-1);
+    --rui-Card__border-radius: var(--rui-dimension-radius-2);
     --rui-Card--dense__padding: var(--rui-dimension-space-2);
     --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
     --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
@@ -834,7 +835,7 @@
 
     // Form fields: box fields
     --rui-FormField--box__border-width: var(--rui-dimension-border-width-1);
-    --rui-FormField--box__border-radius: var(--rui-dimension-radius-1);
+    --rui-FormField--box__border-radius: var(--rui-dimension-radius-2);
     --rui-FormField--box__input__width: auto; // 1.
     --rui-FormField--box__input__min-width: 240px; // 1.
     --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary);
@@ -915,6 +916,7 @@
     // =======
 
     --rui-InputGroup__gap: var(--rui-dimension-space-1);
+    --rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1);
 
     //
     // Modal
@@ -947,7 +949,7 @@
     --rui-Paper__padding: var(--rui-dimension-space-4);
     --rui-Paper__border-width: 0;
     --rui-Paper__border-color: transparent;
-    --rui-Paper__border-radius: var(--rui-dimension-radius-1);
+    --rui-Paper__border-radius: var(--rui-dimension-radius-2);
     --rui-Paper__background-color: var(--rui-color-background-layer-1);
     --rui-Paper--muted__background-color: var(--rui-color-background-disabled);
     --rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity);
@@ -961,7 +963,7 @@
     --rui-Popover__padding: var(--rui-dimension-space-3);
     --rui-Popover__border-width: 0;
     --rui-Popover__border-color: transparent;
-    --rui-Popover__border-radius: var(--rui-dimension-radius-1);
+    --rui-Popover__border-radius: var(--rui-dimension-radius-2);
     --rui-Popover__color: var(--rui-color-text-primary);
     --rui-Popover__background-color: var(--rui-color-background-layer-2);
     --rui-Popover__box-shadow: var(--rui-shadow-layer-2);
@@ -989,7 +991,7 @@
         var(--rui-color-border-secondary)
         transparent
         var(--rui-color-border-secondary);
-    --rui-Tabs__item__border-radius: var(--rui-dimension-radius-1);
+    --rui-Tabs__item__border-radius: var(--rui-dimension-radius-2);
     --rui-Tabs__item__background-color: var(--rui-color-background-layer-1);
     --rui-Tabs__item__box-shadow: none;
     --rui-Tabs__item__icon__gap: var(--rui-dimension-space-2);