From 0fc6f866edee4da116551275fb1f9203070ec248 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Fri, 29 Sep 2023 12:28:54 +0200
Subject: [PATCH] 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
---
 src/components/InputGroup/InputGroup.scss     |  2 +-
 src/components/Radio/Radio.scss               |  2 +-
 .../tools/form-fields/_box-field-layout.scss  | 40 ++++++++++++-------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/InputGroup/InputGroup.scss b/src/components/InputGroup/InputGroup.scss
index 488d76ab..e103922c 100644
--- 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
index d102dfec..b0dae8c8 100644
--- 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
index 2dcaaa0e..98f6dd23 100644
--- 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,