Skip to content

Commit ec2fa8f

Browse files
jawinnjawinn
committed
refactor(fieldlabel): spectrum-Form cleanup and fixes
- Fixes missing spacing between form items in Labels Above variant. This was using the wrong token (top-to-asterisk) - Removes --spectrum-field-label-top-to-asterisk as it is no longer used - Cleans up the CSS and its custom properties a bit - Removed two comments that were no longer applicable. One mentioned a docs file that does not seem to exist anymore, and the other mentioned a token value of 20px but it doesn't equal 20px. - Fixes form negative margin being too large and it moving outside its container. Instead use same value as border-spacing to remove the extra space, to make this like a margin top and bottom of zero which seems like the original intention.
1 parent 6e95f44 commit ec2fa8f

File tree

2 files changed

+49
-44
lines changed

2 files changed

+49
-44
lines changed

‎components/fieldlabel/index.css

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ governing permissions and limitations under the License.
1414
--spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
1515
--spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
1616

17-
--spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-medium);
1817
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
1918

2019
--spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
@@ -31,7 +30,6 @@ governing permissions and limitations under the License.
3130
--spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
3231
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
3332

34-
--spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-small);
3533
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
3634
}
3735

@@ -44,7 +42,6 @@ governing permissions and limitations under the License.
4442
--spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
4543
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
4644

47-
--spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-medium);
4845
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
4946
}
5047

@@ -57,7 +54,6 @@ governing permissions and limitations under the License.
5754
--spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-100);
5855
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
5956

60-
--spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-large);
6157
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
6258
}
6359

@@ -70,7 +66,6 @@ governing permissions and limitations under the License.
7066
--spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-200);
7167
--spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
7268

73-
--spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-extra-large);
7469
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
7570
}
7671

@@ -79,7 +74,7 @@ governing permissions and limitations under the License.
7974
box-sizing: border-box;
8075
min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
8176

82-
padding-block: var(--spectrum-fieldlabel-top-to-text) var(--spectrum-fieldlabel-bottom-to-text);
77+
padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
8378
padding-inline: 0;
8479

8580
font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
@@ -121,12 +116,11 @@ governing permissions and limitations under the License.
121116
text-align: end;
122117
}
123118

119+
/* Form: two column alignment via display: table */
124120
.spectrum-Form {
125-
/* for /docs/form.html to set field-label inside form */
126-
--spectrum-tableform-border-spacing: 0 var(--mod-spacing-300, var(--spectrum-spacing-300));
127-
/* matching 20px, missing global token for 20px */
128-
--spectrum-tableform-margin-calc: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-200));
129-
--spectrum-tableform-margin: calc(var(--spectrum-tableform-margin-calc) * -1) 0;
121+
--spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300);
122+
--spectrum-tableform-border-spacing: 0 var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing));
123+
--spectrum-tableform-margin: calc(var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing)) * -1) 0; /* TODO get 20px question? */
130124

131125
display: table;
132126
border-collapse: separate;
@@ -138,37 +132,45 @@ governing permissions and limitations under the License.
138132
display: table-row;
139133
}
140134

141-
.spectrum-Form-itemLabel {
135+
.spectrum-Form-itemLabel,
136+
.spectrum-Form-itemField {
142137
display: table-cell;
143138
}
144139

145-
/* disabled state */
146-
.spectrum-FieldLabel,
147-
.spectrum-Form-itemLabel {
148-
&.is-disabled {
149-
color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
150-
151-
.spectrum-FieldLabel-requiredIcon {
152-
color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
153-
}
154-
}
155-
}
156-
157-
.spectrum-Form-itemField {
158-
display: table-cell;
140+
/* Fix extra space after inline-flex elements such as stepper. */
141+
.spectrum-Form-itemField > * {
142+
vertical-align: top;
159143
}
160144

145+
/* Form: stacked alignment via display: flex */
161146
.spectrum-Form--labelsAbove {
147+
--mod-tableform-margin: var(--mod-tableform-margin-labels-above, 0);
162148
display: flex;
163149
flex-direction: column;
164-
margin: 0;
165150

166151
.spectrum-Form-item {
167152
display: flex;
168153
flex-direction: column;
169154

155+
.spectrum-Form-itemLabel,
156+
.spectrum-Form-itemField {
157+
display: block;
158+
}
159+
170160
& + .spectrum-Form-item {
171-
margin-block-start: var(--mod-field-label-top-to-asterisk, var(--spectrum-field-label-top-to-asterisk));
161+
margin-block-start: var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200));
162+
}
163+
}
164+
}
165+
166+
/* Disabled state */
167+
.spectrum-FieldLabel,
168+
.spectrum-Form-itemLabel {
169+
&.is-disabled {
170+
color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
171+
172+
.spectrum-FieldLabel-requiredIcon {
173+
color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
172174
}
173175
}
174176
}

‎components/fieldlabel/metadata/mods.md

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
| Modifiable Custom Properties |
2-
| ------------------------------------------- |
3-
| `--mod-disabled-content-color` |
4-
| `--mod-field-label-asterisk-vertical-align` |
5-
| `--mod-field-label-text-to-asterisk` |
6-
| `--mod-field-label-top-to-asterisk` |
7-
| `--mod-fieldlabel-font-size` |
8-
| `--mod-fieldlabel-font-weight` |
9-
| `--mod-fieldlabel-line-height` |
10-
| `--mod-fieldlabel-line-height-cjk` |
11-
| `--mod-fieldlabel-min-height` |
12-
| `--mod-fieldlabel-side-padding-right` |
13-
| `--mod-fieldlabel-side-padding-top` |
14-
| `--mod-spacing-300` |
15-
| `--mod-tableform-border-spacing` |
16-
| `--mod-tableform-margin` |
1+
| Modifiable Custom Properties |
2+
| ------------------------------------------------- |
3+
| `--mod-disabled-content-color` |
4+
| `--mod-field-label-asterisk-vertical-align` |
5+
| `--mod-field-label-bottom-to-text` |
6+
| `--mod-field-label-text-to-asterisk` |
7+
| `--mod-field-label-top-to-text` |
8+
| `--mod-fieldlabel-font-size` |
9+
| `--mod-fieldlabel-font-weight` |
10+
| `--mod-fieldlabel-line-height` |
11+
| `--mod-fieldlabel-line-height-cjk` |
12+
| `--mod-fieldlabel-min-height` |
13+
| `--mod-fieldlabel-side-padding-right` |
14+
| `--mod-fieldlabel-side-padding-top` |
15+
| `--mod-tableform-border-spacing` |
16+
| `--mod-tableform-item-block-spacing` |
17+
| `--mod-tableform-item-block-spacing-labels-above` |
18+
| `--mod-tableform-margin` |
19+
| `--mod-tableform-margin-labels-above` |

0 commit comments

Comments
 (0)