diff --git a/.changeset/honest-animals-stop.md b/.changeset/honest-animals-stop.md new file mode 100644 index 00000000000..b0ed21b7a14 --- /dev/null +++ b/.changeset/honest-animals-stop.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/fieldlabel": patch +--- + +#### Fix fieldlabel required icon wrapping + +Addresses case where fieldlabel required icon could appear on its own line when wrapping by applying text-wrap: pretty; to the parent label class and adding a non-breaking space character between the label content and required marker. diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index 174875f109a..ba6692619ff 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -85,6 +85,7 @@ .spectrum-FieldLabel { display: block; + text-wrap: pretty; box-sizing: border-box; min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 296ef716310..ebf8fa948ae 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -104,6 +104,8 @@ RightAligned.storyName = "Right-aligned"; * Field labels for required inputs can be marked with an asterisk at the end of the label. Optional inputs would then be understood to not have the asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `` element in the markup. Extra space should not be added in addition to the inline margin. * * The field label for a required field can display either the text “(required)”, or an asterisk. + * + * When marking a field as required, a word-joiner character (e.g. `U+2060` or `⁠`) should be placed between the label text and the required marker to prevent the marker from appearing on its own line. */ export const Required = Template.bind({}); Required.args = { diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index d5e4a14b42e..3420504c4d7 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -60,8 +60,7 @@ export const Template = ({ data-testid=${ifDefined(testId)} for=${ifDefined(forInput)} > - ${label} - ${when(isRequired, () => icon)} + ${label?.trim()}${when(isRequired, () => html`⁠${icon}`)} `; };