-
Notifications
You must be signed in to change notification settings - Fork 241
feat: style field label mixin for textfield, textarea #5898
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.
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
Closed
rise-erpelding
wants to merge
15
commits into
nikkimk/form-field-mixin
from
rise-erpelding/swc-1316-textfield-label-styling
Closed
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
97220e3
fix(fieldlabel): remove curly bracket
rise-erpelding 918f8c6
fix: allow inheritance of parent styles
rise-erpelding 0843a9e
feat: add separate field label mixin styles
rise-erpelding c1be5d2
docs: adjust textarea labels to match vrts
rise-erpelding 7ad1d8c
fix(textfield,numberfield): inline sizing
rise-erpelding 86ebe3e
fix: help text respects input size
rise-erpelding a6d1136
Revert "fix: help text respects input size"
rise-erpelding 9cc446a
Revert "fix(textfield,numberfield): inline sizing"
rise-erpelding d4e1c36
fix: provide field label modifier
rise-erpelding dfa846e
docs: adjust field label width to pass vrts
rise-erpelding 4816776
docs: use field label mixin on dialog wrapper
rise-erpelding 1ebab8c
fix: align textfield css with spectrum-css
rise-erpelding d163ab5
docs: remove inline styles from dialog wrapper story
rise-erpelding 362b49c
fix: dialog wrapper side label css with lots of comments
rise-erpelding 23ef380
fix: more things
rise-erpelding File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| /** | ||
| * 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 | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| @import url("./field-label-overrides.css"); | ||
|
|
||
| :host, | ||
| :host([size="m"]) { | ||
| --spectrum-field-label-min-height: var(--spectrum-component-height-75); | ||
| --spectrum-field-label-font-size: var(--spectrum-font-size-75); | ||
| --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); | ||
| --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); | ||
| --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); | ||
| } | ||
|
|
||
| :host([size="s"]) { | ||
| --spectrum-field-label-min-height: var(--spectrum-component-height-75); | ||
| --spectrum-field-label-font-size: var(--spectrum-font-size-75); | ||
| --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small); | ||
| --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100); | ||
| --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); | ||
| } | ||
|
|
||
| :host([size="l"]) { | ||
| --spectrum-field-label-min-height: var(--spectrum-component-height-100); | ||
| --spectrum-field-label-font-size: var(--spectrum-font-size-100); | ||
| --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large); | ||
| --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); | ||
| --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); | ||
| } | ||
|
|
||
| :host([size="xl"]) { | ||
| --spectrum-field-label-min-height: var(--spectrum-component-height-200); | ||
| --spectrum-field-label-font-size: var(--spectrum-font-size-200); | ||
| --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); | ||
| --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); | ||
| --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); | ||
| } | ||
|
|
||
| label { | ||
| --spectrum-field-label-width: 100%; | ||
| } | ||
|
|
||
| label { | ||
| inline-size: var(--mod-field-label-width, var(--spectrum-field-label-width)); | ||
| box-sizing: border-box; | ||
| min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height)); | ||
| padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))); | ||
| padding-inline: 0; | ||
| padding-inline: var(--mod-fieldlabel-padding-inline, 0); | ||
| margin-block: 0; | ||
| margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0)); | ||
| margin-inline: 0; | ||
| margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0)); | ||
| font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size)); | ||
| font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight)); | ||
| line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100)); | ||
| -webkit-font-smoothing: subpixel-antialiased; | ||
| -moz-osx-font-smoothing: auto; | ||
| color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))); | ||
| display: inline-block; | ||
|
|
||
| /* styles from .spectrum-FieldLabel */ | ||
| grid-row: 1; | ||
| grid-column: 1 / span 1; | ||
| } | ||
|
|
||
| label[hidden] { | ||
| display: none; | ||
| } | ||
|
|
||
| label:lang(ja), | ||
| label:lang(ko), | ||
| label:lang(zh) { | ||
| --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100)); | ||
| } | ||
|
|
||
| :host([disabled]) label { | ||
| --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)); | ||
| } | ||
|
|
||
| .required-icon { | ||
| color: inherit; | ||
| margin-block: 0; | ||
| margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0; | ||
| vertical-align: initial; | ||
| vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); | ||
| } | ||
|
|
||
| :host([side-aligned="start"]), | ||
| :host([side-aligned="end"]) { | ||
| column-gap: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right)); | ||
| margin-block-end: calc(var(--swc-scale-factor) * 12px); /* mimics row-gap westbrook had in the stories file */ | ||
| grid-template-rows: auto auto; /* 2 rows instead of 3 */ | ||
| grid-template-columns: 1fr 2fr auto; /* still haven't figured out what the 3rd column is for */ | ||
| inline-size: 100%; | ||
| } | ||
|
|
||
| :host([side-aligned="start"]) input, | ||
| :host([side-aligned="end"]) input { | ||
| inline-size: 240px; | ||
| } | ||
|
|
||
| :host([side-aligned="start"]) label, | ||
| :host([side-aligned="end"]) label { | ||
| vertical-align: top; | ||
| margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start)); | ||
| margin-block-end: 0; | ||
|
|
||
| /* margin-inline-end is set in the host's column-gap property */ | ||
| display: inline-block; | ||
|
|
||
| /* styles from .spectrum-Textfield--sideLabel */ | ||
| grid-row: 1 / span 2; | ||
| grid-column: 1 / span 1; | ||
| } | ||
|
|
||
| :host([side-aligned="end"]) label { | ||
| text-align: end; | ||
| } | ||
|
|
||
| :host([side-aligned="start"]) ::slotted(sp-help-text), | ||
| :host([side-aligned="end"]) ::slotted(sp-help-text) { | ||
| grid-area: 2 / 2 / auto / span 1; | ||
| } | ||
|
|
||
| @media (forced-colors: active) { | ||
| :host([disabled]) label { | ||
| --highcontrast-field-label-content-color: GrayText; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this cheating to make the VRTs pass for this story? Yes. 😆
After poking around at CSS, React, Figma, and the design guidelines, I think the expected behavior for the field label is that its width is the same as the text input rather than being completely independent of it.
However, I realize this could potentially cause problems for consumers who expected the field label to behave the other way, so we can optionally provide a way to get around this, if we want.
Happy to have feedback on this.