Skip to content

Commit b74dbb8

Browse files
GarthDBGarthDB
committed
fix: wip fix more components
2 parents 6281862 + 0b2064c commit b74dbb8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+2554
-2536
lines changed

‎backstop_data/packageDependentMap.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
[
8181
"@spectrum-css/buttongroup",
8282
[
83+
"@spectrum-css/dialog",
8384
"@spectrum-css/rule"
8485
]
8586
],

‎components/actiongroup/index.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,17 @@ governing permissions and limitations under the License.
2323
flex-shrink: 0;
2424
}
2525

26-
.spectrum-ActionGroup-item + .spectrum-ActionGroup-item {
27-
margin-inline-start: var(--spectrum-actionbuttongroup-text-button-gap-x);
26+
&:not(.spectrum-ActionGroup--vertical)&:not(.spectrum-ActionGroup--compact) {
27+
margin-block-start: calc(-1 * var(--spectrum-actionbuttongroup-text-button-gap-y));
28+
29+
.spectrum-ActionGroup-item {
30+
flex-shrink: 0;
31+
margin-block-start: var(--spectrum-actionbuttongroup-text-button-gap-y);
32+
33+
&:not(:last-child) {
34+
margin-inline-end: var(--spectrum-actionbuttongroup-text-button-gap-x);
35+
}
36+
}
2837
}
2938
}
3039

‎components/assetlist/index.css

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ 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-
@import '../commons/index.css';
13+
@import "../commons/index.css";
1414

1515
:root {
1616
--spectrum-miller-column-chevron-height: 10px;
@@ -35,24 +35,26 @@ governing permissions and limitations under the License.
3535
block-size: var(--spectrum-miller-column-item-height);
3636

3737
padding-block: 0;
38-
padding-inline: var(--spectrum-miller-column-item-padding-left) var(--spectrum-miller-column-item-padding-right);
38+
padding-inline: var(--spectrum-miller-column-item-padding-left)
39+
var(--spectrum-miller-column-item-padding-right);
3940
margin-block: 0 var(--spectrum-miller-column-item-margin-bottom);
4041
margin-inline: 0;
4142

4243
border-radius: var(--spectrum-miller-column-item-border-radius);
4344

44-
transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;
45+
transition: background-color var(--spectrum-global-animation-duration-100)
46+
ease-in-out;
4547

46-
font-size: var(--spectrum-selectlist-option-text-size);
47-
font-weight: var(--spectrum-selectlist-option-text-font-weight);
48+
font-size: var(--spectrum-listitem-option-text-size);
49+
font-weight: var(--spectrum-listitem-option-text-font-weight);
4850
font-style: normal;
4951

5052
cursor: pointer;
5153

5254
outline: none;
5355

5456
&::before {
55-
content: '';
57+
content: "";
5658

5759
position: absolute;
5860
inset-inline-start: 0;

‎components/breadcrumb/index.css

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ 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-
@import '../commons/index.css';
13+
@import "../commons/index.css";
1414

1515
.spectrum-Breadcrumbs {
1616
display: flex;
@@ -31,8 +31,8 @@ governing permissions and limitations under the License.
3131
/* Fix alignment, it's not quite centered */
3232
inset-block-start: var(--spectrum-global-dimension-size-10);
3333

34-
inline-size: var(--spectrum-breadcrumb-ui-icon-width);
35-
block-size: var(--spectrum-breadcrumb-ui-icon-height);
34+
inline-size: var(--spectrum-breadcrumb-separator-icon-width);
35+
block-size: var(--spectrum-breadcrumb-separator-icon-height);
3636

3737
transform: logical scale(1) rotate(0deg);
3838

@@ -98,7 +98,6 @@ governing permissions and limitations under the License.
9898
}
9999
}
100100

101-
102101
.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,
103102
.spectrum-Breadcrumbs-itemLink:focus-ring:before {
104103
position: absolute;
@@ -114,7 +113,7 @@ governing permissions and limitations under the License.
114113
border-style: solid;
115114
border-radius: var(--spectrum-breadcrumb-item-border-radius);
116115

117-
content: '';
116+
content: "";
118117
pointer-events: none;
119118
}
120119

‎components/breadcrumb/skin.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Breadcrumbs-item {
14-
color: var(--spectrum-breadcrumb-text-color);
14+
color: var(--spectrum-breadcrumb-item-text-color);
1515

1616
&.is-dragged {
1717
.spectrum-Breadcrumbs-itemLink {
@@ -25,48 +25,48 @@ governing permissions and limitations under the License.
2525
}
2626

2727
.spectrum-Breadcrumbs-itemSeparator {
28-
color: var(--spectrum-breadcrumb-ui-icon-color);
28+
color: var(--spectrum-breadcrumb-separator-icon-color);
2929
}
3030

3131
.spectrum-Breadcrumbs-itemLink {
3232
color: inherit;
3333

3434
&:hover {
35-
color: var(--spectrum-breadcrumb-text-color-hover);
35+
color: var(--spectrum-breadcrumb-item-text-color-hover);
3636
}
3737

3838
&:focus-ring {
39-
color: var(--spectrum-breadcrumb-text-color-key-focus);
39+
color: var(--spectrum-breadcrumb-item-text-color-key-focus);
4040

4141
&:before {
4242
border-color: var(--spectrum-breadcrumb-item-border-color-key-focus);
4343
}
4444
}
4545

4646
&:active {
47-
color: var(--spectrum-breadcrumb-text-color-down);
47+
color: var(--spectrum-breadcrumb-item-text-color-down);
4848
border-block-end: 0;
4949
}
5050

5151
&.is-disabled {
52-
color: var(--spectrum-label-text-color-disabled);
52+
color: var(--spectrum-breadcrumb-item-text-color-disabled);
5353
}
5454
}
5555

5656
&.is-selected,
5757
&:last-of-type {
58-
color: var(--spectrum-breadcrumb-text-color-down);
58+
color: var(--spectrum-breadcrumb-item-text-color-down);
5959
}
6060

6161
&.is-selected {
6262
~ .spectrum-Breadcrumb {
6363
&:last-of-type {
64-
color: var(--spectrum-breadcrumb-text-color);
64+
color: var(--spectrum-breadcrumb-item-text-color);
6565
}
6666
}
6767
.spectrum-Breadcrumbs-itemLink {
6868
&:focus-ring {
69-
color: var(--spectrum-breadcrumb-text-color-down);
69+
color: var(--spectrum-breadcrumb-item-text-color-down);
7070
border-block-end: 0;
7171
}
7272
}

‎components/button/skin.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,10 @@ governing permissions and limitations under the License.
347347
box-shadow: 0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus) var(--spectrum-actionbutton-border-color-key-focus);
348348
color: var(--spectrum-actionbutton-text-color-key-focus);
349349

350+
&:active {
351+
border-color: var(--spectrum-actionbutton-border-color-key-focus);
352+
}
353+
350354
.spectrum-Icon {
351355
color: var(--spectrum-actionbutton-icon-color-key-focus);
352356
}
@@ -395,6 +399,10 @@ governing permissions and limitations under the License.
395399
border-color: var(--spectrum-actionbutton-border-color-selected-key-focus);
396400
color: var(--spectrum-actionbutton-text-color-selected-key-focus);
397401

402+
&:active {
403+
border-color: var(--spectrum-actionbutton-border-color-key-focus);
404+
}
405+
398406
.spectrum-Icon {
399407
color: var(--spectrum-actionbutton-icon-color-selected-key-focus);
400408
}

‎components/calendar/index.css

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,23 @@ 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-
@import '../commons/index.css';
13+
@import "../commons/index.css";
1414

1515
:root {
1616
--spectrum-calendar-border-radius-reset: 0;
1717
--spectrum-calendar-border-width-reset: 0;
1818
--spectrum-calendar-margin-y: 24px;
1919
--spectrum-calendar-margin-x: 32px;
20-
--spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
20+
--spectrum-calendar-width: calc(
21+
(
22+
var(--spectrum-calendar-day-width) +
23+
var(--spectrum-calendar-day-padding) * 2
24+
) * 7
25+
);
2126
--spectrum-calendar-button-gap: var(--spectrum-global-dimension-size-40);
22-
--spectrum-calendar-title-text-letter-spacing: var(--spectrum-detail-text-letter-spacing);
27+
--spectrum-calendar-title-text-letter-spacing: var(
28+
--spectrum-detail-m-text-letter-spacing
29+
);
2330
}
2431

2532
.spectrum-Calendar {
@@ -46,7 +53,6 @@ governing permissions and limitations under the License.
4653
order: 1;
4754
flex-grow: 1;
4855

49-
5056
text-align: center;
5157
overflow: hidden;
5258
white-space: nowrap;
@@ -154,12 +160,17 @@ governing permissions and limitations under the License.
154160
border: var(--spectrum-calendar-day-border-size-key-focus) solid transparent;
155161

156162
font-size: var(--spectrum-calendar-day-text-size);
157-
line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size-key-focus) * 2);
163+
line-height: calc(
164+
var(--spectrum-calendar-day-width) -
165+
var(--spectrum-calendar-day-border-size-key-focus) * 2
166+
);
158167
white-space: nowrap;
159168

160169
cursor: pointer;
161170

162-
&:lang(ja), &:lang(zh), &:lang(ko) {
171+
&:lang(ja),
172+
&:lang(zh),
173+
&:lang(ko) {
163174
font-size: var(--spectrum-calendar-day-text-size-han);
164175
}
165176

@@ -173,10 +184,12 @@ governing permissions and limitations under the License.
173184
}
174185

175186
&:before {
176-
content: '';
187+
content: "";
177188
position: absolute;
178189
inset-block-start: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
179-
inset-inline-start: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
190+
inset-inline-start: calc(
191+
50% - calc(var(--spectrum-calendar-day-width) / 2)
192+
);
180193
box-sizing: border-box;
181194
inline-size: var(--spectrum-calendar-day-width);
182195
block-size: var(--spectrum-calendar-day-height);
@@ -205,13 +218,19 @@ governing permissions and limitations under the License.
205218
border-radius: var(--spectrum-calendar-border-radius-reset);
206219

207220
/* Todo: Calculate this */
208-
inline-size: calc(var(--spectrum-calendar-day-width) + calc(var(--spectrum-calendar-day-padding) * 2));
221+
inline-size: calc(
222+
var(--spectrum-calendar-day-width) +
223+
calc(var(--spectrum-calendar-day-padding) * 2)
224+
);
209225

210226
&.is-range-start,
211227
&.is-range-end,
212228
&.is-selection-start,
213229
&.is-selection-end {
214-
inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
230+
inline-size: calc(
231+
var(--spectrum-calendar-day-width) +
232+
var(--spectrum-calendar-day-padding)
233+
);
215234
}
216235

217236
&.is-selection-start,
@@ -229,7 +248,7 @@ governing permissions and limitations under the License.
229248

230249
border-radius: var(--spectrum-calendar-day-width);
231250

232-
content: '';
251+
content: "";
233252
}
234253
}
235254

‎components/checkbox/metadata/checkbox.yml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: Checkbox
22
status: Verified
3-
description: 'Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.'
3+
description: "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected."
44
SpectrumSiteSlug: https://spectrum.adobe.com/page/checkbox/
55
examples:
66
- id: checkbox-default
@@ -55,10 +55,10 @@ examples:
5555
</span>
5656
<span class="spectrum-Checkbox-label">Checkbox with an extraordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
5757
</label>
58-
- id: checkbox-quiet
59-
name: Quiet
58+
- id: checkbox-emphasized
59+
name: Emphasized
6060
markup: |
61-
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
61+
<label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
6262
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
6363
<span class="spectrum-Checkbox-box">
6464
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -70,7 +70,7 @@ examples:
7070
</span>
7171
<span class="spectrum-Checkbox-label">Checkbox</span>
7272
</label>
73-
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
73+
<label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
7474
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
7575
<span class="spectrum-Checkbox-box">
7676
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -82,7 +82,7 @@ examples:
8282
</span>
8383
<span class="spectrum-Checkbox-label">Checkbox</span>
8484
</label>
85-
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-indeterminate">
85+
<label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-indeterminate">
8686
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
8787
<span class="spectrum-Checkbox-box">
8888
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -95,7 +95,7 @@ examples:
9595
<span class="spectrum-Checkbox-label">Checkbox</span>
9696
</label>
9797
<br>
98-
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
98+
<label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
9999
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
100100
<span class="spectrum-Checkbox-box">
101101
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">

0 commit comments

Comments
 (0)