Skip to content

Commit bab8e26

Browse files
brandonferruabrandonferrua
committed
fix(datepicker): provide styles when adjacent month is selected within a week range
1 parent 7d8a09d commit bab8e26

File tree

3 files changed

+126
-41
lines changed

3 files changed

+126
-41
lines changed

‎ui/components/datepickers/base/_index.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
cursor: pointer;
5959
}
6060

61-
&:focus:not(.slds-disabled-text) {
61+
&:focus {
6262
outline: 0;
6363

6464
> .slds-day {
@@ -72,13 +72,15 @@
7272
* @selector .slds-is-selected
7373
* @restrict .slds-datepicker td
7474
*/
75-
&.slds-is-selected:not(.slds-disabled-text):not(.slds-is-today) > .slds-day {
75+
&.slds-is-selected:not(.slds-is-today) > .slds-day {
7676
background: $color-background-button-brand-hover;
7777
color: $color-text-button-brand-hover;
7878
}
7979

80-
&.slds-is-selected:not(.slds-disabled-text):focus > .slds-day {
80+
&.slds-is-selected:focus > .slds-day {
81+
background: $color-background-row-hover;
8182
box-shadow: $color-border-brand-dark 0 0 3px;
83+
color: currentColor;
8284
}
8385
}
8486

‎ui/components/datepickers/base/example.jsx

Lines changed: 62 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -135,66 +135,105 @@ export let DatePicker = props =>
135135
</Week>
136136
<Week className={classNames(
137137
{
138-
'slds-has-multi-selection': props.dateRange == 'week',
139-
'slds-has-multi-row-selection': props.dateRange == 'weeks'
138+
'slds-has-multi-selection': props.dateRange == 'week-4',
139+
'slds-has-multi-row-selection': props.dateRangeMulti
140140
}
141141
)}>
142142
<Day aria-selected="false">21</Day>
143143
<Day aria-selected="false">22</Day>
144144
<Day aria-selected="false">23</Day>
145145
<Day
146-
aria-selected={props.dateSelected ? 'true' : 'false'}
146+
aria-selected={props.dateSelected && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
147147
className={classNames(
148148
{
149-
'slds-is-selected': props.dateSelected,
150-
'slds-is-selected-multi': props.dateSelected && props.dateRange
149+
'slds-is-selected': props.dateSelected === 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5'),
150+
'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5')
151151
}
152152
)}
153153
>
154154
24
155155
</Day>
156156
<Day
157-
aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
157+
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
158158
className={classNames(
159159
{
160-
'slds-is-selected slds-is-selected-multi': props.dateSelected && props.dateRange,
160+
'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5'),
161161
'slds-is-today': props.todayActiveInRange
162162
}
163163
)}
164164
>
165165
25
166166
</Day>
167167
<Day
168-
aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
169-
className={props.dateSelected && props.dateRange ? 'slds-is-selected slds-is-selected-multi' : null}
168+
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
169+
className={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
170170
>
171171
26
172172
</Day>
173173
<Day
174-
aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
175-
className={props.dateSelected && props.dateRange ? 'slds-is-selected slds-is-selected-multi' : null}
174+
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
175+
className={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
176176
>
177177
27
178178
</Day>
179179
</Week>
180-
<Week className={props.dateRange == 'weeks' ? 'slds-has-multi-row-selection' : null}>
180+
<Week className={classNames(
181+
{
182+
'slds-has-multi-selection': props.dateRange == 'week-5',
183+
'slds-has-multi-row-selection': props.dateRangeMulti
184+
}
185+
)}>
181186
<Day
182-
aria-selected={props.dateSelected && props.dateRange == 'weeks' ? 'true' : 'false'}
183-
className={props.dateSelected && props.dateRange == 'weeks' ? 'slds-is-selected slds-is-selected-multi' : null}
187+
aria-selected={props.dateSelected && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
188+
className={classNames(
189+
{
190+
'slds-is-selected': props.dateSelected === 'single' && props.dateRange === 'week-5',
191+
'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5')
192+
}
193+
)}
184194
>
185195
28
186196
</Day>
187197
<Day
188-
aria-selected={props.dateSelected && props.dateRange == 'weeks' ? 'true' : 'false'}
189-
className={props.dateSelected && props.dateRange == 'weeks' ? 'slds-is-selected slds-is-selected-multi' : null}
198+
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
199+
className={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
190200
>
191201
29
192202
</Day>
193-
<Day aria-selected="false">30</Day>
194-
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">1</Day>
195-
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">2</Day>
196-
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">3</Day>
197-
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">4</Day>
203+
<Day
204+
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
205+
className={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
206+
>
207+
30
208+
</Day>
209+
<Day
210+
aria-disabled="true"
211+
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
212+
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
213+
>
214+
1
215+
</Day>
216+
<Day
217+
aria-disabled="true"
218+
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
219+
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
220+
>
221+
2
222+
</Day>
223+
<Day
224+
aria-disabled="true"
225+
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
226+
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
227+
>
228+
3
229+
</Day>
230+
<Day
231+
aria-disabled="true"
232+
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
233+
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
234+
>
235+
4
236+
</Day>
198237
</Week>
199238
</tbody>
200239
</table>
@@ -237,9 +276,9 @@ export let states = [
237276
label="Date"
238277
inputId={dateInputId}
239278
inputIcon="right"
240-
dropdown={<DatePicker todayActive dateSelected />}
279+
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
241280
>
242-
<Input id={dateInputId} placeholder=" " value="06/23/2014" />
281+
<Input id={dateInputId} placeholder=" " value="06/24/2014" />
243282
<ButtonIcon
244283
className="slds-input__icon slds-input__icon_right"
245284
symbol="event"

‎ui/components/datepickers/range/example.jsx

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,9 @@ export let states = [
8484
label="Start Date"
8585
inputId={dateRangeInputId01}
8686
inputIcon="right"
87-
dropdown={<DatePicker todayActive dateSelected />}
87+
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
8888
>
89-
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
89+
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
9090
<ButtonIcon
9191
className="slds-input__icon slds-input__icon--right"
9292
symbol="event"
@@ -99,7 +99,7 @@ export let states = [
9999
label="End Date"
100100
inputId={dateRangeInputId02}
101101
inputIcon="right"
102-
dropdown={<DatePicker todayActive dateSelected />}
102+
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
103103
>
104104
<Input id={dateRangeInputId02} placeholder=" " />
105105
<ButtonIcon
@@ -128,9 +128,9 @@ export let states = [
128128
label="Start Date"
129129
inputId={dateRangeInputId01}
130130
inputIcon="right"
131-
dropdown={<DatePicker todayActive dateSelected />}
131+
dropdown={<DatePicker todayActive dateSelected dateRange="week-4" />}
132132
>
133-
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
133+
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
134134
<ButtonIcon
135135
className="slds-input__icon slds-input__icon--right"
136136
symbol="event"
@@ -143,7 +143,7 @@ export let states = [
143143
label="End Date"
144144
inputId={dateRangeInputId02}
145145
inputIcon="right"
146-
dropdown={<DatePicker todayActive dateSelected dateRange="week" />}
146+
dropdown={<DatePicker todayActive dateSelected dateRange="week-4" />}
147147
>
148148
<Input id={dateRangeInputId02} placeholder=" " value="06/27/2014" />
149149
<ButtonIcon
@@ -168,13 +168,13 @@ export let states = [
168168
<div className="slds-form-element__group">
169169
<div className="slds-form-element__row">
170170
<FormElement
171-
className="slds-dropdown-trigger slds-dropdown-trigger--click"
171+
className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
172172
label="Start Date"
173173
inputId={dateRangeInputId01}
174174
inputIcon="right"
175-
dropdown={<DatePicker todayActive dateSelected />}
175+
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" dateRangeMulti />}
176176
>
177-
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
177+
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
178178
<ButtonIcon
179179
className="slds-input__icon slds-input__icon--right"
180180
symbol="event"
@@ -187,9 +187,9 @@ export let states = [
187187
label="End Date"
188188
inputId={dateRangeInputId02}
189189
inputIcon="right"
190-
dropdown={<DatePicker todayActive dateSelected dateRange="weeks" />}
190+
dropdown={<DatePicker todayActive dateSelected dateRange="week-4-5" dateRangeMulti />}
191191
>
192-
<Input id={dateRangeInputId02} placeholder=" " value="06/29/2014" />
192+
<Input id={dateRangeInputId02} placeholder=" " value="06/30/2014" />
193193
<ButtonIcon
194194
className="slds-input__icon slds-input__icon--right"
195195
symbol="event"
@@ -216,9 +216,53 @@ export let states = [
216216
label="Start Date"
217217
inputId={dateRangeInputId01}
218218
inputIcon="right"
219-
dropdown={<DatePicker todayActiveInRange dateSelected />}
219+
dropdown={<DatePicker todayActiveInRange dateSelected="single" dateRange="week-4" dateRangeMulti />}
220+
>
221+
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
222+
<ButtonIcon
223+
className="slds-input__icon slds-input__icon--right"
224+
symbol="event"
225+
assistiveText="Select a date"
226+
title="Select a date"
227+
/>
228+
</FormElement>
229+
<FormElement
230+
className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
231+
label="End Date"
232+
inputId={dateRangeInputId02}
233+
inputIcon="right"
234+
dropdown={<DatePicker todayActiveInRange dateSelected dateRange="week-4-5" dateRangeMulti />}
235+
>
236+
<Input id={dateRangeInputId02} placeholder=" " value="06/30/2014" />
237+
<ButtonIcon
238+
className="slds-input__icon slds-input__icon--right"
239+
symbol="event"
240+
assistiveText="Select a date"
241+
title="Select a date"
242+
/>
243+
</FormElement>
244+
</div>
245+
</div>
246+
</fieldset>
247+
</div>
248+
},
249+
{
250+
id: 'span-across-month-in-range',
251+
label: 'Current and adjacent month in selected range',
252+
element:
253+
<div className="slds-form slds-form--compound">
254+
<fieldset className="slds-form-element">
255+
<legend className="slds-form-element__label">Start and End Date</legend>
256+
<div className="slds-form-element__group">
257+
<div className="slds-form-element__row">
258+
<FormElement
259+
className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
260+
label="Start Date"
261+
inputId={dateRangeInputId01}
262+
inputIcon="right"
263+
dropdown={<DatePicker dateSelected="single" dateRange="week-5" />}
220264
>
221-
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
265+
<Input id={dateRangeInputId01} placeholder=" " value="06/28/2014" />
222266
<ButtonIcon
223267
className="slds-input__icon slds-input__icon--right"
224268
symbol="event"
@@ -231,9 +275,9 @@ export let states = [
231275
label="End Date"
232276
inputId={dateRangeInputId02}
233277
inputIcon="right"
234-
dropdown={<DatePicker todayActiveInRange dateSelected dateRange="weeks" />}
278+
dropdown={<DatePicker dateSelected dateRange="week-5" />}
235279
>
236-
<Input id={dateRangeInputId02} placeholder=" " value="06/29/2014" />
280+
<Input id={dateRangeInputId02} placeholder=" " value="07/04/2014" />
237281
<ButtonIcon
238282
className="slds-input__icon slds-input__icon--right"
239283
symbol="event"

0 commit comments

Comments
 (0)