Skip to content

Commit 2a0f664

Browse files
devongovettdevongovett
authored
Calendar updates (#2264)
* Update styling of Calendar * Improve RangeCalendar behavior on touch devices * Support for displaying multiple months in Calendar * Fast path for date/time conversion * Optimize performance of mergeProps * Refactor to handle different visible duration and align selection * Add tests for different visible durations * Improve Japanese era handling * Fix test * Fix parsing in docs transformer * Remove eslint suppressions
1 parent 9b0ee02 commit 2a0f664

Some content is hidden

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

56 files changed

+2658
-936
lines changed

‎packages/@adobe/spectrum-css-temp/components/calendar/index.css‎

Lines changed: 61 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,52 +19,66 @@ governing permissions and limitations under the License.
1919
--spectrum-calendar-margin-x: 32px;
2020
--spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
2121
--spectrum-calendar-button-gap: var(--spectrum-global-dimension-size-40);
22+
--spectrum-calendar-title-margin-x: var(--spectrum-global-dimension-size-75);
2223
}
2324

2425
.spectrum-Calendar {
25-
width: var(--spectrum-calendar-width);
26-
display: inline-block;
26+
display: block;
27+
touch-action: none;
2728
}
2829

2930
.spectrum-Calendar--padded {
3031
margin: var(--spectrum-calendar-margin-x) var(--spectrum-calendar-margin-y);
3132
}
3233

3334
.spectrum-Calendar-header {
34-
display: flex;
35+
display: grid;
36+
grid-auto-flow: column;
37+
grid-auto-columns: 1fr;
3538
width: 100%;
36-
align-items: center;
39+
gap: var(--spectrum-global-dimension-size-300);
40+
}
41+
42+
.spectrum-Calendar-monthHeader {
43+
display: grid;
44+
grid-template-areas: 'prev title next';
45+
grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
46+
align-content: start;
47+
width: var(--spectrum-calendar-width);
48+
padding: 0 var(--spectrum-calendar-button-gap);
49+
box-sizing: border-box;
3750
}
3851

3952
.spectrum-Calendar-title {
4053
font-size: var(--spectrum-calendar-title-text-size);
4154
font-weight: bold;
4255

4356
line-height: var(--spectrum-calendar-title-height);
44-
margin: 0;
45-
order: 1;
46-
flex-grow: 1;
47-
57+
margin: 0 var(--spectrum-calendar-title-margin-x);
58+
grid-area: title;
4859

4960
text-align: center;
5061
overflow: hidden;
5162
white-space: nowrap;
5263
text-overflow: ellipsis;
5364
}
5465

55-
.spectrum-Calendar {
56-
.spectrum-Calendar-prevMonth,
57-
.spectrum-Calendar-nextMonth {
58-
margin: 0 var(--spectrum-calendar-button-gap);
59-
}
60-
}
61-
6266
.spectrum-Calendar-prevMonth {
63-
order: 0;
67+
grid-area: prev;
68+
justify-self: start;
6469
}
6570

6671
.spectrum-Calendar-nextMonth {
67-
order: 2;
72+
grid-area: next;
73+
justify-self: end;
74+
}
75+
76+
.spectrum-Calendar-months {
77+
display: grid;
78+
grid-auto-flow: column;
79+
grid-auto-columns: 1fr;
80+
gap: var(--spectrum-global-dimension-size-300);
81+
align-items: start;
6882
}
6983

7084
.spectrum-Calendar-dayOfWeek {
@@ -101,7 +115,7 @@ governing permissions and limitations under the License.
101115

102116
.spectrum-Calendar-table {
103117
table-layout: fixed;
104-
/*width: 100%;*/
118+
width: var(--spectrum-calendar-width);
105119

106120
border-collapse: collapse;
107121
border-spacing: 0;
@@ -140,18 +154,17 @@ governing permissions and limitations under the License.
140154
margin: var(--spectrum-calendar-day-padding);
141155

142156
border-radius: var(--spectrum-calendar-day-width);
143-
border: var(--spectrum-calendar-day-border-size-key-focus) solid transparent;
144157

145158
font-size: var(--spectrum-calendar-day-text-size);
146-
line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size-key-focus) * 2);
159+
line-height: var(--spectrum-calendar-day-height);
147160
white-space: nowrap;
148161

149162
cursor: default;
150163

151164
transition: background var(--spectrum-global-animation-duration-100) ease-in-out,
152165
color var(--spectrum-global-animation-duration-100) ease-in-out,
153166
border-color var(--spectrum-global-animation-duration-100) ease-in-out;
154-
167+
155168
&:focus {
156169
outline: 0;
157170
}
@@ -169,31 +182,29 @@ governing permissions and limitations under the License.
169182
visibility: hidden;
170183
}
171184

185+
/* focus ring */
172186
&:before {
187+
border-radius: calc(var(--spectrum-calendar-day-width) + var(--spectrum-alias-focus-ring-gap));
173188
content: '';
189+
display: block;
174190
position: absolute;
175191
top: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
176192
left: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
177-
box-sizing: border-box;
178-
width: var(--spectrum-calendar-day-width);
179-
height: var(--spectrum-calendar-day-height);
180-
border-radius: var(--spectrum-calendar-day-width);
181-
border: var(--spectrum-calendar-day-border-size-key-focus) solid transparent;
182-
}
193+
width: calc(var(--spectrum-calendar-day-width) + var(--spectrum-alias-focus-ring-gap) * 2);
194+
height: calc(var(--spectrum-calendar-day-height) + var(--spectrum-alias-focus-ring-gap) * 2);
195+
margin: 0;
196+
transform: translateX(0); /* Forces FF to render on the pixel grid */
183197

184-
&.is-selected:not(.is-range-selection) {
185-
font-weight: var(--spectrum-calendar-day-text-font-weight-selected);
198+
transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
199+
margin var(--spectrum-global-animation-duration-100) ease-out;
200+
}
186201

202+
&.is-focused {
187203
&:before {
188-
/* No highlight for lone selections */
189-
display: none;
204+
margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
190205
}
191206
}
192207

193-
&.is-today {
194-
font-weight: var(--spectrum-calendar-day-today-text-font-weight);
195-
}
196-
197208
&.is-range-selection {
198209
/* overrides to make the cells appear connected */
199210
margin: var(--spectrum-calendar-day-padding) 0;
@@ -211,23 +222,21 @@ governing permissions and limitations under the License.
211222
width: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
212223
}
213224

214-
&.is-selection-start,
215-
&.is-selection-end {
216-
font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected);
217-
218-
&:after {
219-
position: absolute;
220-
top: 0;
225+
/* hover and selected states */
226+
&:after {
227+
position: absolute;
228+
top: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
229+
left: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
221230

222-
display: block;
231+
display: block;
223232

224-
height: var(--spectrum-calendar-day-height);
225-
width: var(--spectrum-calendar-day-width);
233+
height: var(--spectrum-calendar-day-height);
234+
width: var(--spectrum-calendar-day-width);
226235

227-
border-radius: var(--spectrum-calendar-day-width);
236+
border-radius: var(--spectrum-calendar-day-width);
228237

229-
content: '';
230-
}
238+
content: '';
239+
z-index: -1;
231240
}
232241

233242
&.is-range-start,
@@ -266,3 +275,7 @@ governing permissions and limitations under the License.
266275
}
267276
}
268277
}
278+
279+
.spectrum-Calendar-body.is-range-selecting .spectrum-Calendar-date {
280+
transition: none;
281+
}

‎packages/@adobe/spectrum-css-temp/components/calendar/skin.css‎

Lines changed: 67 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -23,120 +23,105 @@ governing permissions and limitations under the License.
2323
}
2424

2525
.spectrum-Calendar-date {
26-
&:hover {
27-
color: var(--spectrum-calendar-day-text-color-hover);
28-
29-
&:not(.is-selection-end):not(.is-selection-start) {
30-
&:before {
31-
background: var(--spectrum-calendar-day-background-color-hover);
32-
}
33-
}
34-
35-
&.is-selected {
36-
color: var(--spectrum-calendar-day-text-color-selected-hover);
37-
&:not(.is-selection-end):not(.is-selection-start) {
38-
&:before {
39-
background: var(--spectrum-calendar-day-background-color-selected-hover);
40-
}
41-
}
42-
}
26+
--spectrum-calendar-day-background-color-cap-selected: var(--spectrum-global-color-blue-400);
27+
--spectrum-calendar-day-background-color-cap-selected-hover: var(--spectrum-global-color-blue-500);
28+
--spectrum-calendar-day-background-color-cap-selected-down: var(--spectrum-global-color-blue-600);
29+
--spectrum-calendar-day-text-color-cap-selected: white;
30+
--spectrum-calendar-day-text-color-cap-selected-hover: white;
31+
--spectrum-calendar-day-today-background-color: var(--spectrum-global-color-gray-300);
32+
--spectrum-calendar-day-today-background-color-hover: var(--spectrum-global-color-gray-400);
33+
--spectrum-calendar-day-today-background-color-down: var(--spectrum-global-color-gray-500);
34+
35+
--background: transparent;
36+
background: var(--background);
37+
38+
&.is-range-selection {
39+
background: var(--spectrum-calendar-day-background-color-selected);
4340

44-
&.is-range-selection {
45-
&:before {
46-
background: var(--spectrum-calendar-day-background-color-selected-hover);
47-
}
41+
&:after {
42+
background: var(--background);
4843
}
4944
}
5045

51-
&:active {
52-
background-color: var(--spectrum-calendar-day-background-color-down);
53-
}
54-
55-
&.is-selected {
56-
color: var(--spectrum-calendar-day-text-color-selected);
57-
background: var(--spectrum-calendar-day-background-color-selected);
46+
&.is-today {
47+
color: var(--spectrum-calendar-day-today-text-color);
48+
border-color: var(--spectrum-calendar-day-today-background-color);
49+
--background: var(--spectrum-calendar-day-today-background-color);
5850
}
5951

60-
&.is-selected:not(.is-range-selection) {
61-
background: var(--spectrum-calendar-day-background-color-cap-selected);
52+
&.is-selected:not(.is-range-selection),
53+
&.is-selection-start,
54+
&.is-selection-end {
55+
color: var(--spectrum-calendar-day-text-color-cap-selected);
56+
--background: var(--spectrum-calendar-day-background-color-cap-selected);
6257
}
6358

64-
&.is-today {
65-
color: var(--spectrum-calendar-day-today-text-color);
66-
border-color: var(--spectrum-calendar-day-today-border-color);
59+
&:hover {
60+
color: var(--spectrum-calendar-day-text-color-hover);
61+
--background: var(--spectrum-calendar-day-background-color-hover);
6762

68-
&:before {
69-
border-color: var(--spectrum-calendar-day-today-border-color);
63+
&.is-range-selection {
64+
color: var(--spectrum-calendar-day-text-color-selected-hover);
65+
--background: var(--spectrum-alias-highlight-selected);
7066
}
7167

72-
&:hover {
73-
&.is-selected:not(.is-range-selection) {
74-
&:before {
75-
background: var(--spectrum-calendar-day-today-background-color-selected-hover);
76-
}
77-
}
68+
&.is-today {
69+
--background: var(--spectrum-calendar-day-today-background-color-hover);
7870
}
7971

80-
&.is-disabled {
81-
color: var(--spectrum-calendar-day-today-text-color-disabled);
82-
border-color: var(--spectrum-calendar-day-today-border-color-disabled);
83-
84-
&:before {
85-
border-color: var(--spectrum-calendar-day-today-border-color-disabled);
86-
}
72+
&.is-selected:not(.is-range-selection),
73+
&.is-selection-start,
74+
&.is-selection-end {
75+
color: var(--spectrum-calendar-day-text-color-cap-selected-hover);
76+
--background: var(--spectrum-calendar-day-background-color-cap-selected-hover);
8777
}
8878
}
8979

90-
&.is-focused:not(.is-range-selection) {
91-
background: var(--spectrum-calendar-day-background-color-key-focus);
92-
border-color: var(--spectrum-calendar-day-border-color-key-focus);
93-
color: var(--spectrum-calendar-day-text-color-key-focus);
80+
&.is-pressed {
81+
color: var(--spectrum-calendar-day-text-color-hover);
82+
--background: var(--spectrum-calendar-day-background-color-down);
9483

95-
&.is-today {
96-
border-color: var(--spectrum-calendar-day-border-color-key-focus);
84+
&.is-range-selection {
85+
color: var(--spectrum-calendar-day-text-color-selected-hover);
86+
--background: var(--spectrum-alias-highlight-selected-hover);
87+
}
9788

98-
&:before {
99-
border-color: var(--spectrum-calendar-day-border-color-key-focus);
100-
}
89+
&.is-today {
90+
--background: var(--spectrum-calendar-day-today-background-color-down);
10191
}
10292

103-
&:active,
104-
&.is-selected {
105-
color: var(--spectrum-calendar-day-text-color-selected);
106-
background: var(--spectrum-calendar-day-background-color-cap-selected);
107-
border-color: var(--spectrum-calendar-day-border-color-key-focus);
93+
&.is-selected:not(.is-range-selection),
94+
&.is-selection-start,
95+
&.is-selection-end {
96+
color: var(--spectrum-calendar-day-text-color-cap-selected-hover);
97+
--background: var(--spectrum-calendar-day-background-color-cap-selected-down);
10898
}
10999
}
110100

111101
&.is-focused {
112-
&.is-selected {
113-
&:before {
114-
background: var(--spectrum-calendar-day-background-color-selected-hover);
115-
}
116-
}
117-
118-
&.is-range-selection {
119-
&:before {
120-
border-color: var(--spectrum-calendar-day-border-color-key-focus);
121-
background: var(--spectrum-calendar-day-background-color-selected-hover);
122-
}
102+
&:before {
103+
box-shadow: 0 0 0 var(--spectrum-calendar-day-border-size-key-focus) var(--spectrum-calendar-day-border-color-key-focus);
123104
}
124105
}
125106

126107
&.is-disabled {
127-
color: var(--spectrum-calendar-day-text-color-disabled);
128-
}
108+
&,
109+
&.is-today {
110+
--background: var(--spectrum-calendar-day-background-color-disabled);
111+
}
129112

130-
&.is-selection-start,
131-
&.is-selection-end {
132-
color: var(--spectrum-calendar-day-text-color-cap-selected);
113+
&,
114+
&.is-today,
115+
&.is-selected {
116+
color: var(--spectrum-calendar-day-text-color-disabled);
117+
}
133118

134-
&:after {
135-
background-color: var(--spectrum-calendar-day-background-color-selected);
119+
&.is-range-selection {
120+
background: var(--spectrum-global-color-gray-200);
136121
}
137122

138-
&.is-disabled {
139-
color: var(--spectrum-calendar-day-text-color-disabled);
123+
&.is-selected {
124+
--background: var(--spectrum-global-color-gray-200);
140125
}
141126
}
142127
}

0 commit comments

Comments
 (0)