From f968505f1918c668cdda6e7b9bd1d3e8c3e6d23c Mon Sep 17 00:00:00 2001 From: Bedrich Schindler Date: Tue, 6 Oct 2026 19:35:01 +0200 Subject: [PATCH] Remove `subgrid` fallbacks (#127) --- src/components/FormLayout/FormLayout.module.scss | 10 ++++------ src/components/FormLayout/README.md | 7 ------- src/styles/tools/form-fields/_box-field-layout.scss | 13 +++++-------- .../tools/form-fields/_inline-field-elements.scss | 7 ------- .../tools/form-fields/_inline-field-layout.scss | 8 -------- 5 files changed, 9 insertions(+), 36 deletions(-) diff --git a/src/components/FormLayout/FormLayout.module.scss b/src/components/FormLayout/FormLayout.module.scss index f946a71f7..a91ca9204 100644 --- a/src/components/FormLayout/FormLayout.module.scss +++ b/src/components/FormLayout/FormLayout.module.scss @@ -1,17 +1,15 @@ // 1. Form field label width is defined using custom property. FormLayout variants are created just // by adjusting this value, either through a particular modification class, or manually through -// a prop. Form fields then inherit the layout using the `subgrid` feature which makes it -// possible to turn on automatic size of grid column with labels (in supporting browsers, see 4). +// a prop. Form fields then inherit the layout using `subgrid` (or `display: contents` for +// `
`) which makes it possible to turn on automatic size of grid column with labels, +// see 4. // // 2. By default, form field label width is set to a configurable global value. // // 3. Custom label width can be entered individually through a prop for each use of FormLayout. // // 4. FormLayout can also automatically adjust the width of column with labels according to the -// longest label (which is possible only with `subgrid`). However, this feature is currently -// supported only in Firefox so a fallback value is necessary for non-supporting browsers -// (a global default which can be customised per use). -// https://github.com/react-ui-org/react-ui/issues/232 +// longest label. @use "../../styles/settings/forms"; @use "../../styles/tools/breakpoint"; diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md index ba00a03d8..a5cc79d33 100644 --- a/src/components/FormLayout/README.md +++ b/src/components/FormLayout/README.md @@ -40,11 +40,6 @@ the job: the [CSS grid layout][grid]. Do **not** try to put any custom HTML or React components directly into FormLayout without wrapping it with the FormLayoutCustomField first. -👉 For usage in auto-width Modal, you may need to turn on the `autoWidth` option -for your FormLayout. This prevents FormLayout from unexpectedly growing in -browsers that [don't support][rui-232] [CSS subgrid][subgrid] in cases when -there are longer validation messages or help texts. - ## Supported Form Fields The FormLayout supports buttons and all React UI form fields: @@ -467,6 +462,4 @@ FormLayoutCustomField can be styled using a small subset of [fragments]: https://reactjs.org/docs/fragments.html [grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout [React common props]: https://react.dev/reference/react-dom/components/common#common-props -[rui-232]: https://github.com/react-ui-org/react-ui/issues/232 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265 -[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid diff --git a/src/styles/tools/form-fields/_box-field-layout.scss b/src/styles/tools/form-fields/_box-field-layout.scss index 1ab157f1d..d88616c4f 100644 --- a/src/styles/tools/form-fields/_box-field-layout.scss +++ b/src/styles/tools/form-fields/_box-field-layout.scss @@ -26,12 +26,13 @@ // 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. // -// Chrome 117+ supports `subgrid` but it doesn't work for `
`. This is why we always -// use the fallback for `
`. +// `
` cannot be a subgrid: the HTML spec wraps its content in an anonymous box which +// breaks it, and Chrome doesn't support it at all. This is why `
` uses +// `display: contents` instead. // -// https://bugs.chromium.org/p/chromium/issues/detail?id=1473242 +// https://issues.chromium.org/issues/40278914 +// https://github.com/whatwg/html/issues/11546 // 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 @@ -213,10 +214,6 @@ grid: inherit; grid-template-columns: subgrid; grid-column: span 2; - - @supports not (grid-template-columns: subgrid) { - display: contents; - } } &.isRootLayoutHorizontal.isRootFullWidth { diff --git a/src/styles/tools/form-fields/_inline-field-elements.scss b/src/styles/tools/form-fields/_inline-field-elements.scss index 1abeb2474..36f7c9a6f 100644 --- a/src/styles/tools/form-fields/_inline-field-elements.scss +++ b/src/styles/tools/form-fields/_inline-field-elements.scss @@ -6,8 +6,6 @@ // // 3. Reset extra space previously added to symmetrically pad the field in FormLayout context as // there already is a sufficient row gap provided by FormLayout. -// -// 4. Destroy tap target when subgrid is not supported. @use "../../theme/typography"; @use "../../theme/form-fields" as theme; @@ -101,11 +99,6 @@ &.isRootInFormLayout.isRootLayoutHorizontal::before { grid-column-start: 2; - - // 4. - @supports not (grid-template-columns: subgrid) { - display: none; - } } } } diff --git a/src/styles/tools/form-fields/_inline-field-layout.scss b/src/styles/tools/form-fields/_inline-field-layout.scss index aa8bdf913..5219454b4 100644 --- a/src/styles/tools/form-fields/_inline-field-layout.scss +++ b/src/styles/tools/form-fields/_inline-field-layout.scss @@ -73,10 +73,6 @@ grid: inherit; grid-template-columns: subgrid; grid-column: span 2; - - @supports not (grid-template-columns: subgrid) { - display: contents; - } } &.isRootLayoutHorizontal .field { @@ -102,10 +98,6 @@ &.isRootLayoutHorizontal .validationText { width: auto; max-width: 100%; - - @supports not (grid-template-columns: subgrid) { - margin-top: calc(-1 * var(--rui-FormLayout__row-gap)); - } } &.isRootLayoutHorizontal.hasRootLabelBefore .label {