Fix Radio and InputGroup in horizontal FormLayout (#493)

Subgrid is now supported in all major browsers including Chrome joining as last in August's version 117. However, there is some fieldset/legend magic that prevents subgrid from being used on `<fieldset>` element (as per the spec (sic!), the magic adds an additional virtual box which breaks the subgrid). As a result, subgrid cannot be used on `<fieldset>` elements until the following Chrome issue is resolved: https://bugs.chromium.org/p/chromium/issues/detail?id=1473242
react-ui-org · Sep 29, 2023 · 0fc6f86 · 0fc6f86
1 parent 2e8b1ac
commit 0fc6f86
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/components/InputGroup/InputGroup.scss b/src/components/InputGroup/InputGroup.scss
@@ -70,7 +70,7 @@
 }
 
 .isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout($is-fieldset: true);
 }
 
 // Sizes

diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.scss
@@ -79,5 +79,5 @@
 }
 
 .isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout($is-fieldset: true);
 }
diff --git a/src/styles/tools/form-fields/_box-field-layout.scss b/src/styles/tools/form-fields/_box-field-layout.scss
@@ -26,8 +26,12 @@
 //     Reverted for full-width fields.
 //
 // 8.  Grid settings are inherited from horizontal FormLayout and applied using `subgrid`.
-//     A fallback is supplied to browsers that don't support `subgrid` yet. See FormLayout styles
-//     for more.
+//     A fallback is supplied to browsers that don't support `subgrid` yet.
+//
+//     Chrome 117+ supports `subgrid` but it doesn't work for `<fieldset>`. This is why we always
+//     use the fallback for `<fieldset>`.
+//
+//     https://bugs.chromium.org/p/chromium/issues/detail?id=1473242
 //     https://github.com/react-ui-org/react-ui/issues/232
 //
 // 9.  Help texts and validation messages can take up full width of FormLayout. There is no reason
@@ -180,7 +184,7 @@
     }
 }
 
-@mixin in-form-layout() {
+@mixin in-form-layout($is-fieldset: false) {
     justify-self: start; // 12.
 
     .field {
@@ -192,19 +196,27 @@
             width: auto; // 11.
         }
 
-        &.isRootLayoutHorizontal,
-        &.isRootLayoutHorizontal.hasRootSmallInput {
-            grid: inherit; // 8.
-            grid-template-columns: subgrid; // 8.
-            grid-column: span 2; // 8.
-
-            @supports not (grid-template-columns: subgrid) {
-                display: contents; // 8.
+        // 8.
+        @if $is-fieldset {
+            &.isRootLayoutHorizontal,
+            &.isRootLayoutHorizontal.hasRootSmallInput {
+                display: contents;
+            }
+        } @else {
+            &.isRootLayoutHorizontal,
+            &.isRootLayoutHorizontal.hasRootSmallInput {
+                grid: inherit;
+                grid-template-columns: subgrid;
+                grid-column: span 2;
+
+                @supports not (grid-template-columns: subgrid) {
+                    display: contents;
+                }
             }
-        }
 
-        &.isRootLayoutHorizontal.isRootFullWidth {
-            grid-template-columns: subgrid; // 8.
+            &.isRootLayoutHorizontal.isRootFullWidth {
+                grid-template-columns: subgrid;
+            }
         }
 
         &.isRootLayoutHorizontal .label,