Skip to content

Commit d4e1c36

Browse files
fix: provide field label modifier
Because now the field label is inside of sp-textfield, its width is dependent on the width of sp-textfield. Figma/CSS/React/Design Guidelines all indicate that this is the correct pattern. In case this has a negative effect on any consumer who relied on the textfield and label having indpendent widths, a mod custom property has been provided to override this behavior.
1 parent 9cc446a commit d4e1c36

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

1st-gen/packages/field-label/src/field-label-mixin.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
}
4747

4848
label {
49+
--spectrum-field-label-width: 100%;
50+
}
51+
52+
label {
53+
inline-size: var(--mod-field-label-width, var(--spectrum-field-label-width));
4954
box-sizing: border-box;
5055
min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
5156
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)));

0 commit comments

Comments
 (0)