Skip to content

feat(fieldlabel): required asterisk vertical alignment #2166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pfulton merged 3 commits into from
Sep 15, 2023
Merged

feat(fieldlabel): required asterisk vertical alignment #2166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7fb33c
feat(fieldlabel): required icon vertical-align
jawinn Sep 12, 2023
d96cc23
docs(fieldlabel): note and change regarding extra inline space
jawinn Sep 12, 2023
7afa5e1
docs(fieldlabel): add stories for required asterisk
jawinn Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 4 additions & 13 deletions components/fieldlabel/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,12 @@ governing permissions and limitations under the License.

-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
font-smoothing: subpixel-antialiased;

color: var(--spectrum-fieldlabel-color);
}

/* international lang support */
.spectrum-FieldLabel {

&:lang(ja),
&:lang(zh),
&:lang(ko) {
Expand All @@ -109,24 +107,18 @@ governing permissions and limitations under the License.
.spectrum-FieldLabel-requiredIcon {
margin-block: 0;
margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
}

.spectrum-FieldLabel--left {
.spectrum-FieldLabel--left,
.spectrum-FieldLabel--right {
display: inline-block;
padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));

& .spectrum-FieldLabel-requiredIcon {
margin-block: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
}
}

.spectrum-FieldLabel--right {
display: inline-block;
text-align: end;
padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
}

.spectrum-Form {
Expand All @@ -151,7 +143,6 @@ governing permissions and limitations under the License.
}

/* disabled state */

.spectrum-FieldLabel,
.spectrum-Form-itemLabel {
&.is-disabled {
Expand All @@ -176,7 +167,7 @@ governing permissions and limitations under the License.
display: flex;
flex-direction: column;

&+.spectrum-Form-item {
& + .spectrum-Form-item {
margin-block-start: var(--mod-field-label-top-to-asterisk, var(--spectrum-field-label-top-to-asterisk));
Copy link
Copy Markdown
Collaborator Author

@jawinn jawinn Sep 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: all usages of --spectrum-field-label-top-to-asterisk can probably be removed from this file, as this margin within the Labels Above form appears to be using the wrong token and is the last place it's used. I'll make a cleanup update for the .spectrum-Form related styles in a followup PR, as that was starting to escape the bounds of this PR's issue.

}
}
Expand Down
42 changes: 22 additions & 20 deletions components/fieldlabel/metadata/fieldlabel.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sections:
- name: Migration Guide
description: |
### T-shirt sizing
Field Label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
examples:
- id: fieldlabel-sizing
name: Sizing
Expand All @@ -16,15 +16,15 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life Story</label>
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story</label>
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
</div>
Expand All @@ -33,7 +33,7 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life Story</label>
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
</div>
Expand All @@ -42,7 +42,7 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life Story</label>
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
</div>
Expand All @@ -51,66 +51,68 @@ examples:
- id: fieldlabel-standard
name: Standard
markup: |
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story</label>
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
</div>

<label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life Story</label>
<label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life story</label>
<div class="spectrum-Textfield is-disabled">
<input id="lifestory2" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>
- id: fieldlabel-side-left
name: Left
description: A left aligned field label.
description: A left aligned Field label.
markup: |
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life Story</label>
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life story</label>

<div class="spectrum-Textfield spectrum-Textfield--multiline">
<textarea id="lifestory3" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>
- id: fieldlabel-side-right
name: Right
description: A right aligned field label.
description: A right aligned Field label.
markup: |
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life Story</label>
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life story</label>

<div class="spectrum-Textfield spectrum-Textfield--multiline">
<textarea id="lifestory4" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>
- id: fieldlabel-required
name: Required
description: Field label for a required field.
description: A Field label for a required field can display either the text "(required)", or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin.
markup: |
<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story
<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
Life story<svg
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Asterisk100" />
</svg>
</label>
<div class="spectrum-Textfield">
<input id="lifestory5" name="field" value="" class="spectrum-Textfield-input">
</div>

<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story (Required)</label>
<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story (required)</label>
<div class="spectrum-Textfield">
<input id="lifestory6" name="field" value="" class="spectrum-Textfield-input">
</div>

<br/>
<br/>

<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">Life Story
<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">
Life story<svg
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Asterisk100" />
</svg>
</label>
<div class="spectrum-Textfield spectrum-Textfield--multiline">
<textarea id="lifestory7" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>


<label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life Story
<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
<label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">
Life story<svg
class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Asterisk100" />
</svg>
</label>
Expand Down
31 changes: 16 additions & 15 deletions components/fieldlabel/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
| Modifiable Custom Properties |
| ------------------------------------- |
| `--mod-disabled-content-color` |
| `--mod-field-label-text-to-asterisk` |
| `--mod-field-label-top-to-asterisk` |
| `--mod-fieldlabel-font-size` |
| `--mod-fieldlabel-font-weight` |
| `--mod-fieldlabel-line-height` |
| `--mod-fieldlabel-line-height-cjk` |
| `--mod-fieldlabel-min-height` |
| `--mod-fieldlabel-side-padding-right` |
| `--mod-fieldlabel-side-padding-top` |
| `--mod-spacing-300` |
| `--mod-tableform-border-spacing` |
| `--mod-tableform-margin` |
| Modifiable Custom Properties |
| ------------------------------------------- |
| `--mod-disabled-content-color` |
| `--mod-field-label-asterisk-vertical-align` |
| `--mod-field-label-text-to-asterisk` |
| `--mod-field-label-top-to-asterisk` |
| `--mod-fieldlabel-font-size` |
Comment on lines +6 to +7
Copy link
Copy Markdown
Collaborator

@pfulton pfulton Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hadn't noticed it before, but our naming is inconsistent here, and I'm on the fence as to whether we should leave it alone or update it so that things are consistent. I think we might just want to leave it alone.

| `--mod-fieldlabel-font-weight` |
| `--mod-fieldlabel-line-height` |
| `--mod-fieldlabel-line-height-cjk` |
| `--mod-fieldlabel-min-height` |
| `--mod-fieldlabel-side-padding-right` |
| `--mod-fieldlabel-side-padding-top` |
| `--mod-spacing-300` |
| `--mod-tableform-border-spacing` |
| `--mod-tableform-margin` |
16 changes: 16 additions & 0 deletions components/fieldlabel/stories/fieldlabel.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,19 @@ RightAligned.args = {
alignment: "right",
style: { width: "72px" },
};

export const Required = Template.bind({});
Required.args = {
label: "Label example",
alignment: "left",
isRequired: true,
style: { width: "200px" },
};

export const WrappingAndRequired = Template.bind({});
WrappingAndRequired.args = {
label: "Label example with longer text that will wrap to the next line. And with an asterisk that marks it as required.",
alignment: "left",
isRequired: true,
style: { width: "200px" },
};
5 changes: 2 additions & 3 deletions components/fieldlabel/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,12 @@ export const Template = ({
id=${ifDefined(id)}
for=${ifDefined(forInput)}
>
${label}
${isRequired
${label}${isRequired
? Icon({
...globals,
size,
iconName,
customClasses: [`${rootClass}-UIIcon`],
customClasses: [`${rootClass}-UIIcon`, `${rootClass}-requiredIcon`],
})
: ""}
</label>
Expand Down