From a4788cd01d63e5f47cb5cf09383ccabca28ef964 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Wed, 15 Oct 2025 14:34:14 -0500 Subject: [PATCH] updated offset value (#1486) * updated offset value * reverted and updated the components directly * fixed offset * update changelog --------- Co-authored-by: Cory LaViska Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> --- packages/webawesome/docs/docs/resources/changelog.md | 1 + .../webawesome/src/styles/component/form-control.css | 10 +++++----- packages/webawesome/src/styles/themes/awesome.css | 2 +- packages/webawesome/src/styles/themes/default.css | 2 +- packages/webawesome/src/styles/themes/shoelace.css | 2 +- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index f7f14c12d..b88fdfb12 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -34,6 +34,7 @@ Components with the Experimental badge sh - Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401] - Fixed a bug in `` that caused icon buttons to render when non-text nodes were slotted in [issue:1475] - Fixed a bug in `` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595] +- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `` and `` [issue:1472] - Improved autofill styles in `` so they span the entire width of the visual input [issue:1439] - Modified `` to only show the tooltip on the handle being dragged when in range mode [issue:1320] diff --git a/packages/webawesome/src/styles/component/form-control.css b/packages/webawesome/src/styles/component/form-control.css index 181ce63b2..21df8803e 100644 --- a/packages/webawesome/src/styles/component/form-control.css +++ b/packages/webawesome/src/styles/component/form-control.css @@ -10,12 +10,12 @@ font-weight: var(--wa-form-control-label-font-weight); line-height: var(--wa-form-control-label-line-height); margin-block-end: 0.5em; +} - :host([required]) &::after { - content: var(--wa-form-control-required-content); - margin-inline-start: var(--wa-form-control-required-content-offset); - color: var(--wa-form-control-required-content-color); - } +:host([required]) slot:is([name='label'], [part='label'])::after { + content: var(--wa-form-control-required-content); + margin-inline-start: var(--wa-form-control-required-content-offset); + color: var(--wa-form-control-required-content-color); } /* Help text */ diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css index dcb2eb068..d06f25b66 100644 --- a/packages/webawesome/src/styles/themes/awesome.css +++ b/packages/webawesome/src/styles/themes/awesome.css @@ -332,7 +332,7 @@ --wa-form-control-required-content: '*'; --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; + --wa-form-control-required-content-offset: 0.1em; --wa-form-control-padding-block: 1em; --wa-form-control-padding-inline: 1.25em; diff --git a/packages/webawesome/src/styles/themes/default.css b/packages/webawesome/src/styles/themes/default.css index eb305577a..8cd6b15c9 100644 --- a/packages/webawesome/src/styles/themes/default.css +++ b/packages/webawesome/src/styles/themes/default.css @@ -326,7 +326,7 @@ --wa-form-control-required-content: '*'; --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; + --wa-form-control-required-content-offset: 0.1em; --wa-form-control-padding-block: 0.75em; --wa-form-control-padding-inline: 1em; diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css index 0faccadba..d138f23ca 100644 --- a/packages/webawesome/src/styles/themes/shoelace.css +++ b/packages/webawesome/src/styles/themes/shoelace.css @@ -332,7 +332,7 @@ --wa-form-control-required-content: '*'; --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; + --wa-form-control-required-content-offset: 0.1em; --wa-form-control-padding-block: 0.75em; --wa-form-control-padding-inline: 1em;