fixup! fixup! fixup! Create InputGroup component (#430)

Author: dacerondrej

package-lock.json

@@ -38,7 +38,7 @@ export const InputGroup = ({
   );
 
   return (
-    <label
+    <div
       className={classNames(
         styles.root,
         resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
@@ -71,9 +71,7 @@ export const InputGroup = ({
           </InputGroupContext.Provider>
         </div>
         {validationTexts && (
-          <div
-            className={styles.validationTexts}
-          >
+          <div className={styles.validationTexts}>
             {validationTexts.map((validationText) => (
               <Text blockLevel key={validationText}>
                 {validationText}
@@ -82,7 +80,7 @@ export const InputGroup = ({
           </div>
         )}
       </div>
-    </label>
+    </div>
   );
 };
 

src/lib/components/InputGroup/InputGroup.jsx

@@ -90,6 +90,10 @@
     @include box-field-layout.in-form-layout();
 }
 
+.isRootGrouped {
+    @include box-field-layout.in-group-layout();
+}
+
 // Sizes
 .isRootSizeSmall {
     @include box-field-sizes.size(small);
@@ -102,17 +106,3 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
-
-// Groups
-.isRootGrouped {
-    &:not(:first-child) .input {
-        margin-left: var(--rui-local-gap);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    &:not(:last-child) .input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-}

src/lib/components/SelectField/SelectField.scss

@@ -88,6 +88,10 @@
     @include box-field-layout.horizontal-with-small-input();
 }
 
+.isRootGrouped {
+    @include box-field-layout.in-group-layout();
+}
+
 // Sizes
 .isRootSizeSmall {
     @include box-field-sizes.size(small);
@@ -100,17 +104,3 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
-
-// Groups
-.isRootGrouped {
-    &:not(:first-child) .input {
-        margin-left: var(--rui-local-gap);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    &:not(:last-child) .input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-}

src/lib/components/TextField/TextField.scss

@@ -51,6 +51,9 @@
 //
 // 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).
 
 @use "../../settings/forms";
 @use "../../settings/form-fields" as settings;
@@ -227,3 +230,16 @@
         }
     }
 }
+
+@mixin in-group-layout() {
+    &: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/styles/tools/form-fields/_box-field-layout.scss

@@ -890,7 +890,7 @@
     // InputGroup
     // =======
 
-    --rui-InputGroup__gap: var(--rui-spacing-1);
+    --rui-InputGroup__gap: var(--rui-dimension-space-1);
 
     //
     // Modal