From 6815f6c8963d5df126e502247a51b3422a87dfa4 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 31 Mar 2025 20:55:30 +0000 Subject: [PATCH 1/2] chore: update dependency @spectrum-css/fieldgroup to v6.0.1 --- packages/field-group/src/field-group-overrides.css | 5 ----- packages/field-group/src/spectrum-field-group.css | 1 + tools/styles/tokens-v2/system-theme-bridge.css | 2 -- tools/styles/tokens/express/system-theme-bridge.css | 2 -- tools/styles/tokens/spectrum/system-theme-bridge.css | 2 -- 5 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css index 49f1cf3e2d2..02fb71ea34c 100644 --- a/packages/field-group/src/field-group-overrides.css +++ b/packages/field-group/src/field-group-overrides.css @@ -9,8 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-fieldgroup-margin: var(--system-field-group-margin); - --spectrum-fieldgroup-readonly-delimiter: var(--system-field-group-readonly-delimiter); -} diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index f5317cbd74c..adc43b7cd53 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -11,6 +11,7 @@ */ .group { + --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); flex-flow: column wrap; display: flex; } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 2ab1aa83de3..7813af4dff9 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -317,8 +317,6 @@ --system-divider-background-color-static-white: var(--spectrum-transparent-white-200); --system-divider-background-color-static-black: var(--spectrum-transparent-black-200); --system-drop-zone-border-color: var(--spectrum-gray-200); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index a5bde1ea167..2f4822a5195 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -318,8 +318,6 @@ --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: 0; --system-infield-button-border-color: transparent; --system-infield-button-border-radius: var(--spectrum-corner-radius-75); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 2a1ab6eb9c9..629abe59150 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -318,8 +318,6 @@ --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); From d050841961c8318bfb3e6335ead66613ba152ad2 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Mon, 31 Mar 2025 17:41:02 -0400 Subject: [PATCH 2/2] fix(field-group,styles): use latest CSS --- .changeset/cruel-hotels-accept.md | 6 ++++++ packages/field-group/src/field-group.css | 12 ++---------- packages/field-group/src/spectrum-field-group.css | 3 +-- 3 files changed, 9 insertions(+), 12 deletions(-) create mode 100644 .changeset/cruel-hotels-accept.md diff --git a/.changeset/cruel-hotels-accept.md b/.changeset/cruel-hotels-accept.md new file mode 100644 index 00000000000..d89a8a0474f --- /dev/null +++ b/.changeset/cruel-hotels-accept.md @@ -0,0 +1,6 @@ +--- +'@spectrum-web-components/field-group': patch +'@spectrum-web-components/styles': patch +--- + +Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer. diff --git a/packages/field-group/src/field-group.css b/packages/field-group/src/field-group.css index c1c4c6f496e..d009db759b8 100644 --- a/packages/field-group/src/field-group.css +++ b/packages/field-group/src/field-group.css @@ -11,16 +11,8 @@ */ @import url("./spectrum-field-group.css"); -@import url("./field-group-overrides.css"); -:host([horizontal][dir="rtl"]) slot:not([name])::slotted(*:not(:last-child)), -:host([dir="rtl"]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) { +:host(:not([vertical])) .group { /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */ - margin: 0 0 0 var(--spectrum-fieldgroup-margin); -} - -:host([horizontal][dir="ltr"]) slot:not([name])::slotted(*:not(:last-child)), -:host([dir="ltr"]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) { - /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */ - margin: 0 var(--spectrum-fieldgroup-margin) 0 0; + gap: var(--spectrum-spacing-300); } diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index adc43b7cd53..0771e1cadb2 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -11,7 +11,6 @@ */ .group { - --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); flex-flow: column wrap; display: flex; } @@ -38,7 +37,7 @@ } :host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) { - margin-inline-end: var(--spectrum-fieldgroup-margin); + margin-inline-end: var(--spectrum-spacing-300); } :host([horizontal]) .group .spectrum-HelpText {