Skip to content

Commit a089ce0

Browse files
lazdlazd
authored
fix: Checkbox and Radio margins, docs, and typography (#897)
* fix: typography styles for Checkbox, fixes #243 * fix: remove Checkbox and Radio margin, fixes #124 BREAKING CHANGE: Checkbox and Radio no longer have margin on their own, must use FieldGroup * feat: add .spectrum-Example to wrap sub-examples * docs: show all combinations of Checkbox/Radio states, closes #707 * fix: typography styles for Radio, related to #243 * docs: put disabled last * docs: fix Form examples, missing FieldGroup dependency * fix: invalid Radio button text color, fixes #251 * fix: add missing color animation to Checkbox * feat: add margin to items, require --horizontal BREAKING CHANGE: The spectrum-FieldGroup--horizontal is now required for horizontal field groups * feat: remove hit area from Radio/Checkbox
1 parent db7b8b2 commit a089ce0

File tree

10 files changed

+506
-330
lines changed

10 files changed

+506
-330
lines changed

‎components/checkbox/index.css

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ governing permissions and limitations under the License.
3131
min-block-size: var(--spectrum-checkbox-height);
3232
max-inline-size: 100%;
3333

34-
margin-inline-end: calc(var(--spectrum-checkbox-cursor-hit-x) * 2);
35-
3634
vertical-align: top;
3735
}
3836

@@ -54,11 +52,8 @@ governing permissions and limitations under the License.
5452
/* Remove the padding for [type="checkbox"] in IE 10-. */
5553
padding: 0;
5654

57-
/* Hit area */
5855
position: absolute;
59-
inset-block-start: 0;
60-
inset-inline-start: calc(var(--spectrum-checkbox-cursor-hit-x) * -1);
61-
inline-size: calc(100% + var(--spectrum-checkbox-cursor-hit-x) * 2);
56+
inline-size: 100%;
6257
block-size: 100%;
6358

6459
opacity: .0001;
@@ -114,9 +109,13 @@ governing permissions and limitations under the License.
114109
text-align: start;
115110
margin-inline-start: var(--spectrum-checkbox-text-gap);
116111
margin-block-start: var(--spectrum-checkbox-label-margin-top);
112+
117113
font-size: var(--spectrum-checkbox-text-size);
118114
font-weight: var(--spectrum-checkbox-text-font-weight);
119-
line-height: var(--spectrum-checkbox-label-line-height);
115+
font-style: var(--spectrum-checkbox-text-font-style);
116+
line-height: var(--spectrum-checkbox-text-line-height);
117+
118+
transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
120119
}
121120

122121
.spectrum-Checkbox-box {

‎components/checkbox/metadata/checkbox.yml

Lines changed: 294 additions & 174 deletions
Large diffs are not rendered by default.

‎components/fieldgroup/index.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13+
:root {
14+
--spectrum-fieldgroup-margin: var(--spectrum-global-dimension-size-200);
15+
}
16+
1317
@import '../commons/index.css';
1418

1519
.spectrum-FieldGroup {
@@ -18,6 +22,12 @@ governing permissions and limitations under the License.
1822
flex-wrap: wrap;
1923
}
2024

25+
.spectrum-FieldGroup--horizontal {
26+
.spectrum-FieldGroup-item + .spectrum-FieldGroup-item {
27+
margin: 0 0 0 var(--spectrum-fieldgroup-margin);
28+
}
29+
}
30+
2131
.spectrum-FieldGroup--vertical {
2232
display: inline-flex;
2333
flex-direction: column;

‎components/fieldgroup/metadata/fieldgroup.yml

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ examples:
44
- id: fieldgroup
55
name: Standard
66
markup: |
7-
<div class="spectrum-FieldGroup">
8-
<div class="spectrum-Radio">
7+
<div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
8+
<div class="spectrum-Radio spectrum-FieldGroup-item">
99
<input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
1010
<span class="spectrum-Radio-button"></span>
1111
<label class="spectrum-Radio-label" for="radio-0">Kittens</label>
1212
</div>
13-
<div class="spectrum-Radio">
13+
<div class="spectrum-Radio spectrum-FieldGroup-item">
1414
<input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1">
1515
<span class="spectrum-Radio-button"></span>
1616
<label class="spectrum-Radio-label" for="radio-1">Dogs</label>
1717
</div>
1818
</div>
19-
<div class="spectrum-FieldGroup">
20-
<label class="spectrum-Checkbox">
19+
<div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
20+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
2121
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
2222
<span class="spectrum-Checkbox-box">
2323
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -26,7 +26,7 @@ examples:
2626
</span>
2727
<span class="spectrum-Checkbox-label">Checkbox</span>
2828
</label>
29-
<label class="spectrum-Checkbox">
29+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
3030
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
3131
<span class="spectrum-Checkbox-box">
3232
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -36,46 +36,25 @@ examples:
3636
<span class="spectrum-Checkbox-label">Checkbox</span>
3737
</label>
3838
</div>
39-
- id: fieldgroup-labelsbelow
40-
name: Labels below
41-
description: Put the labels below by adding the modifier class to the field itself.
42-
markup: |
43-
<div class="spectrum-FieldGroup">
44-
<div class="spectrum-Radio spectrum-Radio--labelBelow">
45-
<input type="radio" name="rating" class="spectrum-Radio-input" id="radio-2">
46-
<span class="spectrum-Radio-button"></span>
47-
<label class="spectrum-Radio-label" for="radio-2">1</label>
48-
</div>
49-
<div class="spectrum-Radio spectrum-Radio--labelBelow">
50-
<input type="radio" name="rating" class="spectrum-Radio-input" id="radio-3">
51-
<span class="spectrum-Radio-button"></span>
52-
<label class="spectrum-Radio-label" for="radio-3">2</label>
53-
</div>
54-
<div class="spectrum-Radio spectrum-Radio--labelBelow">
55-
<input type="radio" name="rating" class="spectrum-Radio-input" id="radio-4">
56-
<span class="spectrum-Radio-button"></span>
57-
<label class="spectrum-Radio-label" for="radio-4">3</label>
58-
</div>
59-
</div>
6039
- id: fieldgroup-vertical
6140
name: Vertical
6241
description: A vertical group of fields.
6342
markup: |
6443
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
65-
<div class="spectrum-Radio">
44+
<div class="spectrum-Radio spectrum-FieldGroup-item">
6645
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-fieldgroup-vertical-1">
6746
<span class="spectrum-Radio-button"></span>
6847
<label class="spectrum-Radio-label" for="radio-fieldgroup-vertical-1">Kittens</label>
6948
</div>
70-
<div class="spectrum-Radio">
49+
<div class="spectrum-Radio spectrum-FieldGroup-item">
7150
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-fieldgroup-vertical-2">
7251
<span class="spectrum-Radio-button"></span>
7352
<label class="spectrum-Radio-label" for="radio-fieldgroup-vertical-2">Dogs</label>
7453
</div>
7554
</div>
7655
7756
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
78-
<label class="spectrum-Checkbox">
57+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
7958
<input type="checkbox" class="spectrum-Checkbox-input">
8059
<span class="spectrum-Checkbox-box">
8160
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -84,7 +63,7 @@ examples:
8463
</span>
8564
<span class="spectrum-Checkbox-label">Kibble</span>
8665
</label>
87-
<label class="spectrum-Checkbox">
66+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
8867
<input type="checkbox" class="spectrum-Checkbox-input" checked>
8968
<span class="spectrum-Checkbox-box">
9069
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -94,3 +73,25 @@ examples:
9473
<span class="spectrum-Checkbox-label">Bits</span>
9574
</label>
9675
</div>
76+
77+
- id: fieldgroup-labelsbelow
78+
name: Radios with labels below
79+
description: Put the labels below by adding the modifier class to the field itself.
80+
markup: |
81+
<div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
82+
<div class="spectrum-Radio spectrum-Radio--labelBelow spectrum-FieldGroup-item">
83+
<input type="radio" name="rating" class="spectrum-Radio-input" id="radio-2">
84+
<span class="spectrum-Radio-button"></span>
85+
<label class="spectrum-Radio-label" for="radio-2">1</label>
86+
</div>
87+
<div class="spectrum-Radio spectrum-Radio--labelBelow spectrum-FieldGroup-item">
88+
<input type="radio" name="rating" class="spectrum-Radio-input" id="radio-3">
89+
<span class="spectrum-Radio-button"></span>
90+
<label class="spectrum-Radio-label" for="radio-3">2</label>
91+
</div>
92+
<div class="spectrum-Radio spectrum-Radio--labelBelow spectrum-FieldGroup-item">
93+
<input type="radio" name="rating" class="spectrum-Radio-input" id="radio-4">
94+
<span class="spectrum-Radio-button"></span>
95+
<label class="spectrum-Radio-label" for="radio-4">3</label>
96+
</div>
97+
</div>

‎components/fieldlabel/metadata/form.yml

Lines changed: 12 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -40,36 +40,23 @@ examples:
4040
<label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
4141
<div class="spectrum-Form-itemField">
4242
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
43-
<div class="spectrum-Radio">
44-
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
45-
<span class="spectrum-Radio-button"></span>
46-
<label class="spectrum-Radio-label" for="radio-5">Kittens</label>
47-
</div>
48-
<div class="spectrum-Radio">
49-
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
50-
<span class="spectrum-Radio-button"></span>
51-
<label class="spectrum-Radio-label" for="radio-6">Dogs</label>
52-
</div>
53-
</div>
54-
55-
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
56-
<label class="spectrum-Checkbox">
43+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
5744
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
5845
<span class="spectrum-Checkbox-box">
5946
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
6047
<use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
6148
</svg>
6249
</span>
63-
<span class="spectrum-Checkbox-label">Checkbox</span>
50+
<span class="spectrum-Checkbox-label">Kittens</span>
6451
</label>
65-
<label class="spectrum-Checkbox">
52+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
6653
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
6754
<span class="spectrum-Checkbox-box">
6855
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
6956
<use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
7057
</svg>
7158
</span>
72-
<span class="spectrum-Checkbox-label">Checkbox</span>
59+
<span class="spectrum-Checkbox-label">Dogs</span>
7360
</label>
7461
</div>
7562
</div>
@@ -137,36 +124,23 @@ examples:
137124
<label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Interests</label>
138125
<div class="spectrum-Form-itemField">
139126
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
140-
<div class="spectrum-Radio">
141-
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
142-
<span class="spectrum-Radio-button"></span>
143-
<label class="spectrum-Radio-label" for="radio-5">Kittens</label>
144-
</div>
145-
<div class="spectrum-Radio">
146-
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
147-
<span class="spectrum-Radio-button"></span>
148-
<label class="spectrum-Radio-label" for="radio-6">Dogs</label>
149-
</div>
150-
</div>
151-
152-
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
153-
<label class="spectrum-Checkbox">
127+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
154128
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
155129
<span class="spectrum-Checkbox-box">
156130
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
157131
<use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
158132
</svg>
159133
</span>
160-
<span class="spectrum-Checkbox-label">Checkbox</span>
134+
<span class="spectrum-Checkbox-label">Kittens</span>
161135
</label>
162-
<label class="spectrum-Checkbox">
136+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
163137
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
164138
<span class="spectrum-Checkbox-box">
165139
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
166140
<use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
167141
</svg>
168142
</span>
169-
<span class="spectrum-Checkbox-label">Checkbox</span>
143+
<span class="spectrum-Checkbox-label">Dogs</span>
170144
</label>
171145
</div>
172146
</div>
@@ -234,20 +208,20 @@ examples:
234208
<label class="spectrum-Form-itemLabel" for="spectrum-textinput-instance">Interests</label>
235209
<div class="spectrum-Form-itemField">
236210
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
237-
<div class="spectrum-Radio">
211+
<div class="spectrum-Radio spectrum-FieldGroup-item">
238212
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
239213
<span class="spectrum-Radio-button"></span>
240214
<label class="spectrum-Radio-label" for="radio-5">Kittens</label>
241215
</div>
242-
<div class="spectrum-Radio">
216+
<div class="spectrum-Radio spectrum-FieldGroup-item">
243217
<input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
244218
<span class="spectrum-Radio-button"></span>
245219
<label class="spectrum-Radio-label" for="radio-6">Dogs</label>
246220
</div>
247221
</div>
248222
249223
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
250-
<label class="spectrum-Checkbox">
224+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
251225
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
252226
<span class="spectrum-Checkbox-box">
253227
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -256,7 +230,7 @@ examples:
256230
</span>
257231
<span class="spectrum-Checkbox-label">Checkbox</span>
258232
</label>
259-
<label class="spectrum-Checkbox">
233+
<label class="spectrum-Checkbox spectrum-FieldGroup-item">
260234
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
261235
<span class="spectrum-Checkbox-box">
262236
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">

‎components/fieldlabel/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@spectrum-css/vars": "^2.0.0"
2121
},
2222
"devDependencies": {
23+
"@spectrum-css/fieldgroup": "^3.0.0-beta.3",
2324
"@spectrum-css/checkbox": "^3.0.0-beta.3",
2425
"@spectrum-css/component-builder": "^1.2.0",
2526
"@spectrum-css/picker": "^1.0.0-beta.0",

‎components/radio/index.css

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,6 @@ governing permissions and limitations under the License.
4343
min-block-size: var(--spectrum-radio-height);
4444
max-inline-size: 100%;
4545

46-
margin-inline-end: calc(var(--spectrum-radio-cursor-hit-x) * 2);
47-
4846
vertical-align: top;
4947
}
5048

@@ -66,11 +64,8 @@ governing permissions and limitations under the License.
6664
/* Remove the padding for [type="radio"] in IE 10-. */
6765
padding: 0;
6866

69-
/* Hit area */
7067
position: absolute;
71-
inset-block-start: 0;
72-
inset-inline-start: calc(var(--spectrum-radio-cursor-hit-x) * -1);
73-
inline-size: calc(100% + var(--spectrum-radio-cursor-hit-x) * 2);
68+
inline-size: 100%;
7469
block-size: 100%;
7570

7671
opacity: 0.0001;
@@ -102,8 +97,12 @@ governing permissions and limitations under the License.
10297
margin-inline-start: var(--spectrum-radio-text-gap);
10398
/* Hardcoded as no good way to calculate this */
10499
margin-block-start: var(--spectrum-radio-label-margin-top);
100+
105101
font-size: var(--spectrum-radio-text-size);
106-
line-height: var(--spectrum-radio-label-line-height);
102+
font-weight: var(--spectrum-radio-text-font-weight);
103+
font-style: var(--spectrum-radio-text-font-style);
104+
line-height: var(--spectrum-radio-text-line-height);
105+
107106
transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
108107
}
109108

0 commit comments

Comments
 (0)