Skip to content

Commit 7de0da2

Browse files
jenndiazjenndiaz
authored
refactor(datepicker)!: migrate to use spectrum-tokens (#2185)
BREAKING CHANGE: migrates DatePicker to use `@adobe/spectrum-tokens` Additionally: * chore(datepicker): build changes * chore(datepicker): use new tokens wip 1 * chore(datepicker): use new tokens and mods * fix(datepicker): invalid icon overlap * fix(datepicker): correct package.json * chore(datepicker): add custom tokens for scale * fix(datepicker): invalid input padding end * chore(datepicker): corrects quiet variant widths * chore(datepicker): refactor index.css * feat(datepicker): add quiet variant to storybook * feat(datepicker): adds whcm * refactor(datepicker): clean up css * chore(datepicker): use themes file over custom tokens * chore(datepicker): update popover dependency * docs(datepicker): add non range invalid to docs * chore(datepicker): update padding inline for non range * chore(datepicker): clean up css * feat(Datepicker): btn border color match input * chore(datepicker): remove unneeded classes * feat(datepicker): enabled readonly in storybook * feat(datepicker): add range to stories * chore(datepicker): add themes to template * chore(datepicker): address PR feedback * chore(datepicker): rename combobox custom property * chore(datepicker): border radius custom properties * chore(datepicker): mods updates * chore(datepicker): remove unneeded custom token * chore(datepicker): regen mods.md * fix(datepicker): update package json * refactor(datepicker): css for invalid icon position * refactor(datepicker): storybook improvements * fix(datepicker): add back isValid and isRequired
1 parent 7e464f6 commit 7de0da2

File tree

11 files changed

+390
-234
lines changed

11 files changed

+390
-234
lines changed

‎components/datepicker/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

‎components/datepicker/index.css

Lines changed: 175 additions & 137 deletions
Large diffs are not rendered by default.

‎components/datepicker/metadata/datepicker.yml

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ sections:
88
The classes containing `InputGroup` have been renamed or removed. For details, see the "renamed" and "removed" sections below or the example markup.
99
1010
### New Picker markup
11-
Instead of a `.spectrum-Picker`, Combobox now uses `.spectrum-PickerButton`. Refer to the example markup for usage details.
11+
Instead of a `.spectrum-Picker`, DatePicker now uses `.spectrum-PickerButton`. Refer to the example markup for usage details.
1212
1313
### Workflow icon size changed to medium
1414
If your markup is still using the small icon, replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
@@ -28,7 +28,7 @@ examples:
2828
- id: datepicker
2929
name: Standard
3030
markup: |
31-
<div aria-disabled="false" aria-invalid="false" class="spectrum-DatePicker spectrum-DatePicker" aria-readonly="false" aria-required="false" aria-haspopup="dialog">
31+
<div aria-disabled="false" aria-invalid="false" class="spectrum-DatePicker" aria-readonly="false" aria-required="false" aria-haspopup="dialog">
3232
<div class="spectrum-Textfield spectrum-DatePicker-textfield">
3333
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input" aria-invalid="false" placeholder="Choose a date" value="">
3434
</div>
@@ -43,7 +43,7 @@ examples:
4343
- id: datepicker-readonly
4444
name: Read-only
4545
markup: |
46-
<div aria-disabled="false" aria-invalid="false" class="spectrum-DatePicker spectrum-DatePicker" aria-readonly="true" aria-required="false">
46+
<div aria-disabled="false" aria-invalid="false" class="spectrum-DatePicker" aria-readonly="true" aria-required="false">
4747
<div class="spectrum-Textfield spectrum-DatePicker-textfield is-readOnly">
4848
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input" placeholder="Choose a date" value="02/14/2020" readonly="readonly">
4949
</div>
@@ -63,10 +63,61 @@ examples:
6363
</div>
6464
</button>
6565
</div>
66+
- id: datepicker-invalid
67+
name: Invalid
68+
markup: |
69+
<div class="spectrum-Examples" style="justify-content: space-evenly;">
70+
<div class="spectrum-Examples-item">
71+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Standard</h4>
72+
73+
<div class="spectrum-Examples-itemGroup">
74+
<div aria-invalid="true" class="spectrum-DatePicker is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
75+
<div class="spectrum-Textfield is-invalid spectrum-DatePicker-textfield">
76+
<svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
77+
<use xlink:href="#spectrum-icon-18-Alert" />
78+
</svg>
79+
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input" aria-invalid="true" placeholder="Choose a date" name="end" value="">
80+
</div>
81+
<button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--right spectrum-DatePicker-button is-invalid" aria-haspopup="dialog">
82+
<div class="spectrum-PickerButton-fill">
83+
<svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
84+
<use xlink:href="#spectrum-icon-18-Calendar" />
85+
</svg>
86+
</div>
87+
</button>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="spectrum-Examples-item">
92+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Quiet</h4>
93+
94+
<div aria-disabled="false" aria-invalid="false" class="spectrum-DatePicker spectrum-DatePicker--quiet spectrum-DatePicker is-invalid" aria-readonly="false" aria-required="false" aria-haspopup="dialog">
95+
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-DatePicker-textfield is-invalid">
96+
<svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
97+
<use xlink:href="#spectrum-icon-18-Alert" />
98+
</svg>
99+
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input" aria-invalid="true" placeholder="Choose a date" value="">
100+
</div>
101+
<button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--quiet spectrum-PickerButton--right spectrum-DatePicker-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
102+
<div class="spectrum-PickerButton-fill">
103+
<svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
104+
<use xlink:href="#spectrum-icon-18-Calendar" />
105+
</svg>
106+
</div>
107+
</button>
108+
</div>
109+
<div class="spectrum-Examples-itemGroup">
110+
111+
</div>
112+
</div>
113+
</div>
114+
115+
116+
66117
- id: datepicker-range
67118
name: Range
68119
markup: |
69-
<div aria-invalid="false" class="spectrum-DatePicker spectrum-DatePicker spectrum-DatePicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
120+
<div aria-invalid="false" class="spectrum-DatePicker spectrum-DatePicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
70121
<div class="spectrum-Textfield spectrum-DatePicker-textfield">
71122
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input spectrum-DatePicker-startField" placeholder="mm/dd/yyyy" name="start" value="">
72123
</div>
@@ -85,7 +136,7 @@ examples:
85136
86137
<p/>
87138
88-
<div aria-invalid="true" class="spectrum-DatePicker spectrum-DatePicker spectrum-DatePicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
139+
<div aria-invalid="true" class="spectrum-DatePicker spectrum-DatePicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
89140
<div class="spectrum-Textfield is-invalid spectrum-DatePicker-textfield">
90141
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input spectrum-DatePicker-startField" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="">
91142
</div>
@@ -107,7 +158,7 @@ examples:
107158
108159
<p/>
109160
110-
<div aria-disabled="true" class="spectrum-DatePicker spectrum-DatePicker spectrum-DatePicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
161+
<div aria-disabled="true" class="spectrum-DatePicker spectrum-DatePicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
111162
<div class="spectrum-Textfield spectrum-DatePicker-textfield is-disabled">
112163
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input spectrum-DatePicker-startField" placeholder="mm/dd/yyyy" name="start" value="" disabled>
113164
</div>
@@ -126,7 +177,7 @@ examples:
126177
127178
<p/>
128179
129-
<div class="spectrum-DatePicker spectrum-DatePicker spectrum-DatePicker--range spectrum-DatePicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
180+
<div class="spectrum-DatePicker spectrum-DatePicker--range spectrum-DatePicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
130181
<div class="spectrum-Textfield spectrum-DatePicker-textfield">
131182
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input spectrum-DatePicker-startField" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
132183
</div>
@@ -144,7 +195,7 @@ examples:
144195
</div>
145196
<p/>
146197
147-
<div class="spectrum-DatePicker spectrum-DatePicker spectrum-DatePicker--range spectrum-DatePicker--datetimeRange is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
198+
<div class="spectrum-DatePicker spectrum-DatePicker--range spectrum-DatePicker--datetimeRange is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
148199
<div class="spectrum-Textfield spectrum-DatePicker-textfield is-invalid">
149200
<input type="text" class="spectrum-Textfield-input spectrum-DatePicker-input spectrum-DatePicker-startField" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
150201
</div>

‎components/datepicker/metadata/mods.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------------------------- |
3+
| `--mod-datepicker-border-color-disabled` |
4+
| `--mod-datepicker-border-radius` |
5+
| `--mod-datepicker-border-radius-quiet` |
6+
| `--mod-datepicker-dash-color-disabled` |
7+
| `--mod-datepicker-dash-font-size` |
8+
| `--mod-datepicker-dash-line-height` |
9+
| `--mod-datepicker-datetime-input-width` |
10+
| `--mod-datepicker-datetime-input-width-first` |
11+
| `--mod-datepicker-datetime-quiet-input-width` |
12+
| `--mod-datepicker-datetime-quiet-input-width-first` |
13+
| `--mod-datepicker-focus-animation` |
14+
| `--mod-datepicker-focus-line-gap` |
15+
| `--mod-datepicker-focus-ring-color` |
16+
| `--mod-datepicker-focus-ring-gap` |
17+
| `--mod-datepicker-focus-ring-width` |
18+
| `--mod-datepicker-focus-thickness` |
19+
| `--mod-datepicker-generic-padding` |
20+
| `--mod-datepicker-input-width` |
21+
| `--mod-datepicker-input-width-quiet` |
22+
| `--mod-datepicker-invalid-quiet-color` |
23+
| `--mod-datepicker-min-width` |
24+
| `--mod-datepicker-padding-inline` |
25+
| `--mod-datepicker-padding-inline-end-invalid` |
26+
| `--mod-datepicker-padding-inline-end-invalid-quiet` |
27+
| `--mod-datepicker-padding-inline-end-quiet` |
28+
| `--mod-datepicker-pickerbutton-border-color` |
29+
| `--mod-datepicker-pickerbutton-border-color-invalid` |
30+
| `--mod-datepicker-quiet-border-color-hover` |
31+
| `--mod-datepicker-quiet-button-offset` |
32+
| `--mod-datepicker-range-dash-margin-left` |
33+
| `--mod-datepicker-range-dash-padding-top` |
34+
| `--mod-datepicker-range-input-width-first` |
35+
| `--mod-datepicker-range-input-width-quiet-first` |

‎components/datepicker/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
},
2020
"peerDependencies": {
2121
"@spectrum-css/pickerbutton": ">=3",
22-
"@spectrum-css/popover": ">=5 <=6",
23-
"@spectrum-css/vars": ">=9"
22+
"@spectrum-css/popover": ">=5",
23+
"@spectrum-css/tokens": ">=12"
2424
},
2525
"devDependencies": {
26-
"@spectrum-css/component-builder": "^4.0.14",
26+
"@spectrum-css/component-builder-simple": "^2.0.17",
2727
"@spectrum-css/icon": "^4.0.3",
2828
"@spectrum-css/menu": "^4.0.50",
29-
"@spectrum-css/pickerbutton": "^3.0.34",
29+
"@spectrum-css/pickerbutton": "^4.0.15",
3030
"@spectrum-css/popover": "^6.0.79",
3131
"@spectrum-css/textfield": "^6.0.25",
32-
"@spectrum-css/vars": "^9.0.8",
32+
"@spectrum-css/tokens": "^12.0.0",
3333
"gulp": "^4.0.0"
3434
},
3535
"publishConfig": {

‎components/datepicker/skin.css

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎components/datepicker/stories/datepicker.stories.js

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calen
55

66
const ignoreProps = ["rootClass", "isDisabled"];
77

8-
// @todo add support for date *range*
98
export default {
109
title: "Components/Date picker",
1110
description:
@@ -44,6 +43,16 @@ export default {
4443
control: "boolean",
4544
if: { arg: "isInvalid", truthy: false },
4645
},
46+
isDateTimeRange: {
47+
name: "Date and Time styling",
48+
type: { name: "boolean" },
49+
table: {
50+
type: { summary: "boolean" },
51+
category: "Component",
52+
},
53+
control: "boolean",
54+
if: { arg: "isRange", truthy: true },
55+
},
4756
isInvalid: {
4857
name: "Invalid",
4958
type: { name: "boolean" },
@@ -82,11 +91,14 @@ export default {
8291
control: "boolean",
8392
},
8493
content: { table: { disable: true } },
94+
isRange: { table: {disable: true} },
8595
},
8696
args: {
8797
rootClass: "spectrum-DatePicker",
8898
isOpen: true,
8999
isQuiet: false,
100+
isRange: false,
101+
isDateTimeRange: false,
90102
isInvalid: false,
91103
isValid: false,
92104
isDisabled: false,
@@ -112,3 +124,23 @@ Default.args = {
112124
year: 2023,
113125
content: [{}],
114126
};
127+
128+
export const Quiet = Template.bind({});
129+
Quiet.args = {
130+
month: "March",
131+
selectedDay: 1,
132+
year: 2023,
133+
content: [{}],
134+
isQuiet: true,
135+
};
136+
137+
export const Range = Template.bind({});
138+
Range.args = {
139+
month: "March",
140+
selectedDay: 1,
141+
year: 2023,
142+
lastDay: 3,
143+
content: [{}],
144+
isRange: true,
145+
isOpen: false,
146+
};

0 commit comments

Comments
 (0)