From b25093bc11874edc7df8ca2f481486adf15bd9d1 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Fri, 29 Sep 2023 12:28:54 +0200
Subject: [PATCH 1/2] Fix `Radio` and `InputGroup` in horizontal `FormLayout`
 in Chrome and Edge (#493)

Subgrid is now supported in all major browsers including Chrome and Edge 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 Chromium issue is resolved:

https://bugs.chromium.org/p/chromium/issues/detail?id=1473242

(cherry picked from commit 26cacd3ff2611eb5b1a55e5e1dc2e67b542a3070)
---
 src/lib/components/InputGroup/InputGroup.scss |  2 +-
 src/lib/components/Radio/Radio.scss           |  2 +-
 .../tools/form-fields/_box-field-layout.scss  | 40 ++++++++++++-------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/InputGroup/InputGroup.scss b/src/lib/components/InputGroup/InputGroup.scss
index 698425d0b..cd8da3938 100644
--- a/src/lib/components/InputGroup/InputGroup.scss
+++ b/src/lib/components/InputGroup/InputGroup.scss
@@ -75,7 +75,7 @@
 }
 
 .isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout($is-fieldset: true);
 }
 
 // Sizes
diff --git a/src/lib/components/Radio/Radio.scss b/src/lib/components/Radio/Radio.scss
index b36b3a096..0d6a214dc 100644
--- a/src/lib/components/Radio/Radio.scss
+++ b/src/lib/components/Radio/Radio.scss
@@ -84,5 +84,5 @@
 }
 
 .isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout($is-fieldset: true);
 }
diff --git a/src/lib/styles/tools/form-fields/_box-field-layout.scss b/src/lib/styles/tools/form-fields/_box-field-layout.scss
index 2dcaaa0ec..98f6dd235 100644
--- a/src/lib/styles/tools/form-fields/_box-field-layout.scss
+++ b/src/lib/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,

From e2d93e5aa796e642ae01a08fe7fb21da40ba340d Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 2 Oct 2023 19:29:23 +0200
Subject: [PATCH 2/2] Release v0.52.1

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d4855e74..0735d4885 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.52.0",
+  "version": "0.52.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 9987eb7af..dbedc5dfe 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.52.0",
+  "version": "0.52.1",
   "keywords": [
     "react",
     "ui",