@simplybusiness/mobius-datepicker 9.1.4 → 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/package.json +3 -3
- package/src/components/DatePicker/DatePicker.css +159 -157
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 10.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- fc4ed44: ### BREAKING CHANGE: All component CSS is now wrapped in `@layer` declarations
|
|
8
|
+
|
|
9
|
+
All CSS across mobius, mobius-datepicker, mobius-journey, mobius-interventions, mobius-chat-ui, and mobius-chatbot is now wrapped in `@layer atoms` or `@layer organisms`. The layer order preamble is declared in theme-core.
|
|
10
|
+
|
|
11
|
+
**What this means for consumers:**
|
|
12
|
+
- **Good news:** You no longer need specificity hacks (e.g. `.Foo.Foo`) to override Mobius styles. Your unlayered CSS automatically wins the cascade, regardless of import order.
|
|
13
|
+
- **Action required if you support older browsers:** `@layer` is supported in Chrome 99+, Firefox 97+, and Safari 15.4+ (all shipped early 2022). If you need to support browsers older than this, you must add your own `@layer` polyfill at the build level. Mobius intentionally does not ship a polyfill — doing so would cause polyfilled styles to become unlayered and override your app styles, defeating the purpose.
|
|
14
|
+
- **Custom layer ordering:** If you need to insert your own layers between Mobius layers, declare your own `@layer` order before importing theme-core. Your declaration must include all Mobius layers: `@layer reset, base, atoms, your-layer, organisms, theme;`
|
|
15
|
+
|
|
16
|
+
**What changed:**
|
|
17
|
+
- 204 CSS files wrapped in `@layer` blocks
|
|
18
|
+
- `@layer reset, base, atoms, organisms, theme;` preamble added to theme-core
|
|
19
|
+
- New `@simplybusiness/stylelint-plugin` enforces layer wrapping in CI
|
|
20
|
+
- `lint-css.js` now resolves stylelint config per-package instead of using a hardcoded central config
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies [fc4ed44]
|
|
25
|
+
- @simplybusiness/mobius@10.0.0
|
|
26
|
+
- @simplybusiness/icons@5.0.3
|
|
27
|
+
- @simplybusiness/mobius-hooks@0.1.1
|
|
28
|
+
|
|
3
29
|
## 9.1.4
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplybusiness/mobius-datepicker",
|
|
3
3
|
"license": "UNLICENSED",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "10.0.0",
|
|
5
5
|
"description": "Mobius date picker component",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@eslint/compat": "^2.0.2",
|
|
64
64
|
"@eslint/eslintrc": "^3.3.4",
|
|
65
65
|
"@eslint/js": "^9.39.3",
|
|
66
|
-
"@simplybusiness/build-scripts": "^
|
|
66
|
+
"@simplybusiness/build-scripts": "^3.0.0",
|
|
67
67
|
"@simplybusiness/eslint-config": "^2.0.4",
|
|
68
68
|
"@testing-library/dom": "^10.4.1",
|
|
69
69
|
"@testing-library/jest-dom": "6.9.1",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
},
|
|
98
98
|
"dependencies": {
|
|
99
99
|
"@simplybusiness/icons": "^5.0.3",
|
|
100
|
-
"@simplybusiness/mobius": "^
|
|
100
|
+
"@simplybusiness/mobius": "^10.0.0",
|
|
101
101
|
"@simplybusiness/mobius-hooks": "^0.1.1",
|
|
102
102
|
"classnames": "^2.5.1",
|
|
103
103
|
"date-fns": "^4.1.0",
|
|
@@ -1,195 +1,197 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
@layer atoms {
|
|
2
|
+
.mobius-date-picker__container {
|
|
3
|
+
position: relative;
|
|
4
|
+
|
|
5
|
+
&:not(.--is-touch-device) {
|
|
6
|
+
/* Hide default calendar icon */
|
|
7
|
+
& .mobius-text-field__input::-webkit-calendar-picker-indicator {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
3
11
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
12
|
+
&.--is-touch-device {
|
|
13
|
+
/* Fix date input height on touch devices */
|
|
14
|
+
& .mobius-text-field__input {
|
|
15
|
+
min-height: 52px;
|
|
16
|
+
}
|
|
8
17
|
}
|
|
9
18
|
}
|
|
10
19
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
min-height: 52px;
|
|
20
|
+
.mobius-date-picker {
|
|
21
|
+
&.mobius-text-field__input {
|
|
22
|
+
line-height: 1;
|
|
15
23
|
}
|
|
16
24
|
}
|
|
17
|
-
}
|
|
18
25
|
|
|
19
|
-
.mobius-date-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
.mobius-date-picker__field-button {
|
|
27
|
+
min-width: var(--size-xxl);
|
|
28
|
+
transition: none;
|
|
29
|
+
border-top-left-radius: 0;
|
|
30
|
+
border-top-right-radius: var(--input-border-radius);
|
|
31
|
+
border-bottom-left-radius: 0;
|
|
32
|
+
border-bottom-right-radius: var(--input-border-radius);
|
|
33
|
+
|
|
34
|
+
&:hover:not(.--is-disabled):not(&.--is-valid):not(&.--is-invalid),
|
|
35
|
+
&:focus-visible:not(.--is-disabled):not(&.--is-valid):not(&.--is-invalid) {
|
|
36
|
+
background-color: var(--color-primary-hover);
|
|
37
|
+
}
|
|
24
38
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
border-top-right-radius: var(--input-border-radius);
|
|
30
|
-
border-bottom-left-radius: 0;
|
|
31
|
-
border-bottom-right-radius: var(--input-border-radius);
|
|
32
|
-
|
|
33
|
-
&:hover:not(.--is-disabled):not(&.--is-valid):not(&.--is-invalid),
|
|
34
|
-
&:focus-visible:not(.--is-disabled):not(&.--is-valid):not(&.--is-invalid) {
|
|
35
|
-
background-color: var(--color-primary-hover);
|
|
39
|
+
&.--is-invalid:not(.--is-disabled) {
|
|
40
|
+
background-color: var(--color-error);
|
|
41
|
+
border-color: var(--color-error);
|
|
42
|
+
}
|
|
36
43
|
}
|
|
37
44
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
45
|
+
.mobius-date-picker__modal {
|
|
46
|
+
position: absolute;
|
|
47
|
+
margin-top: 14px;
|
|
48
|
+
display: none;
|
|
49
|
+
font-family: var(--font-family);
|
|
50
|
+
min-width: 280px;
|
|
51
|
+
background-color: var(--color-background-light);
|
|
52
|
+
border: var(--border-default);
|
|
53
|
+
border-radius: var(--input-border-radius);
|
|
54
|
+
box-shadow:
|
|
55
|
+
0 1px 1px hsl(0deg 0% 0% / 0.075),
|
|
56
|
+
0 2px 2px hsl(0deg 0% 0% / 0.075),
|
|
57
|
+
0 4px 4px hsl(0deg 0% 0% / 0.075),
|
|
58
|
+
0 8px 8px hsl(0deg 0% 0% / 0.075),
|
|
59
|
+
0 16px 16px hsl(0deg 0% 0% / 0.075);
|
|
60
|
+
|
|
61
|
+
&.--is-open {
|
|
62
|
+
display: inline-block;
|
|
63
|
+
z-index: 2;
|
|
64
|
+
}
|
|
41
65
|
}
|
|
42
|
-
}
|
|
43
66
|
|
|
44
|
-
.mobius-date-
|
|
45
|
-
|
|
46
|
-
margin-top: 14px;
|
|
47
|
-
display: none;
|
|
48
|
-
font-family: var(--font-family);
|
|
49
|
-
min-width: 280px;
|
|
50
|
-
background-color: var(--color-background-light);
|
|
51
|
-
border: var(--border-default);
|
|
52
|
-
border-radius: var(--input-border-radius);
|
|
53
|
-
box-shadow:
|
|
54
|
-
0 1px 1px hsl(0deg 0% 0% / 0.075),
|
|
55
|
-
0 2px 2px hsl(0deg 0% 0% / 0.075),
|
|
56
|
-
0 4px 4px hsl(0deg 0% 0% / 0.075),
|
|
57
|
-
0 8px 8px hsl(0deg 0% 0% / 0.075),
|
|
58
|
-
0 16px 16px hsl(0deg 0% 0% / 0.075);
|
|
59
|
-
|
|
60
|
-
&.--is-open {
|
|
61
|
-
display: inline-block;
|
|
62
|
-
z-index: 2;
|
|
67
|
+
.mobius-date-picker__months {
|
|
68
|
+
position: relative;
|
|
63
69
|
}
|
|
64
|
-
}
|
|
65
70
|
|
|
66
|
-
.mobius-date-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.mobius-date-picker__nav {
|
|
71
|
-
width: 100%;
|
|
72
|
-
display: flex;
|
|
73
|
-
justify-content: space-between;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.mobius-date-picker__nav-button {
|
|
77
|
-
appearance: none;
|
|
78
|
-
cursor: pointer;
|
|
79
|
-
border: none;
|
|
80
|
-
color: var(--color-primary);
|
|
81
|
-
background-color: transparent;
|
|
82
|
-
margin: var(--size-xs);
|
|
83
|
-
padding: 0;
|
|
84
|
-
|
|
85
|
-
& .mobius-icon {
|
|
86
|
-
padding: var(--size-xxs) 6px;
|
|
87
|
-
border: var(--border-default);
|
|
88
|
-
border-radius: 50%;
|
|
71
|
+
.mobius-date-picker__nav {
|
|
72
|
+
width: 100%;
|
|
73
|
+
display: flex;
|
|
74
|
+
justify-content: space-between;
|
|
89
75
|
}
|
|
90
76
|
|
|
91
|
-
|
|
92
|
-
|
|
77
|
+
.mobius-date-picker__nav-button {
|
|
78
|
+
appearance: none;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
border: none;
|
|
81
|
+
color: var(--color-primary);
|
|
82
|
+
background-color: transparent;
|
|
83
|
+
margin: var(--size-xs);
|
|
84
|
+
padding: 0;
|
|
93
85
|
|
|
94
86
|
& .mobius-icon {
|
|
95
|
-
|
|
87
|
+
padding: var(--size-xxs) 6px;
|
|
88
|
+
border: var(--border-default);
|
|
89
|
+
border-radius: 50%;
|
|
96
90
|
}
|
|
97
|
-
}
|
|
98
91
|
|
|
99
|
-
|
|
100
|
-
|
|
92
|
+
&:hover {
|
|
93
|
+
color: var(--color-primary-hover);
|
|
101
94
|
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
& .mobius-icon {
|
|
96
|
+
border-color: var(--color-primary-hover);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:focus-visible {
|
|
101
|
+
outline: none;
|
|
102
|
+
|
|
103
|
+
& .mobius-icon {
|
|
104
|
+
box-shadow: var(--box-shadow-default);
|
|
105
|
+
}
|
|
104
106
|
}
|
|
105
107
|
}
|
|
106
|
-
}
|
|
107
108
|
|
|
108
|
-
.mobius-date-picker__caption {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
109
|
+
.mobius-date-picker__caption {
|
|
110
|
+
min-height: 43px;
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
justify-content: center;
|
|
114
|
+
position: absolute;
|
|
115
|
+
top: 0;
|
|
116
|
+
left: calc(var(--size-lg) + var(--size-xs));
|
|
117
|
+
right: calc(var(--size-lg) + var(--size-xs));
|
|
118
|
+
margin: 0 var(--size-xs);
|
|
119
|
+
}
|
|
119
120
|
|
|
120
|
-
.mobius-date-picker__caption-label {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
121
|
+
.mobius-date-picker__caption-label {
|
|
122
|
+
font-weight: normal;
|
|
123
|
+
font-size: var(--font-size-lead);
|
|
124
|
+
color: var(--color-primary);
|
|
125
|
+
text-transform: uppercase;
|
|
126
|
+
margin: 0;
|
|
127
|
+
}
|
|
127
128
|
|
|
128
|
-
.mobius-date-picker__month-grid {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
129
|
+
.mobius-date-picker__month-grid {
|
|
130
|
+
width: 100%;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
border-collapse: collapse;
|
|
133
|
+
border-spacing: 0;
|
|
134
|
+
border-bottom-left-radius: var(--input-border-radius);
|
|
135
|
+
border-bottom-right-radius: var(--input-border-radius);
|
|
136
|
+
}
|
|
136
137
|
|
|
137
|
-
.mobius-date-picker__weekday {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}
|
|
138
|
+
.mobius-date-picker__weekday {
|
|
139
|
+
color: var(--color-text-medium);
|
|
140
|
+
font-size: var(--font-size-small-print);
|
|
141
|
+
padding: var(--size-xs) var(--size-xxs);
|
|
142
|
+
}
|
|
142
143
|
|
|
143
|
-
.mobius-date-picker__day-button {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
144
|
+
.mobius-date-picker__day-button {
|
|
145
|
+
display: flex;
|
|
146
|
+
justify-content: center;
|
|
147
|
+
place-items: center;
|
|
148
|
+
width: var(--date-picker-day-size);
|
|
149
|
+
height: var(--date-picker-day-size);
|
|
150
|
+
font-family: var(--font-family);
|
|
151
|
+
font-size: var(--font-size-3);
|
|
152
|
+
color: var(--color-text);
|
|
153
|
+
border: none;
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
}
|
|
155
156
|
|
|
156
|
-
.mobius-date-picker__day {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
157
|
+
.mobius-date-picker__day {
|
|
158
|
+
&.--is-focused {
|
|
159
|
+
& .mobius-date-picker__day-button {
|
|
160
|
+
border-radius: var(--radius-1);
|
|
161
|
+
outline: solid var(--size-focus-ring) var(--color-focus);
|
|
162
|
+
}
|
|
161
163
|
}
|
|
162
|
-
}
|
|
163
164
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
165
|
+
&.--is-selected {
|
|
166
|
+
& .mobius-date-picker__day-button {
|
|
167
|
+
background-color: var(--color-primary);
|
|
168
|
+
color: var(--color-text-inverted);
|
|
169
|
+
border-radius: var(--radius-1);
|
|
170
|
+
}
|
|
169
171
|
}
|
|
170
|
-
}
|
|
171
172
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
173
|
+
/* Unavailable day */
|
|
174
|
+
&.--is-outside,
|
|
175
|
+
&.--is-disabled {
|
|
176
|
+
& .mobius-date-picker__day-button {
|
|
177
|
+
opacity: 0.3;
|
|
178
|
+
cursor: not-allowed;
|
|
179
|
+
}
|
|
178
180
|
}
|
|
179
|
-
}
|
|
180
181
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
182
|
+
/* Default state (not outside, disabled, or selected) */
|
|
183
|
+
&:not(&.--is-outside):not(&.--is-disabled):not(&.--is-selected) {
|
|
184
|
+
& .mobius-date-picker__day-button {
|
|
185
|
+
background-color: var(--color-background);
|
|
186
|
+
}
|
|
185
187
|
}
|
|
186
188
|
}
|
|
187
|
-
}
|
|
188
189
|
|
|
189
|
-
/* Placeholder */
|
|
190
|
-
input[type="date"]::-webkit-datetime-edit-text,
|
|
191
|
-
input[type="date"]::-webkit-datetime-edit-month-field,
|
|
192
|
-
input[type="date"]::-webkit-datetime-edit-day-field,
|
|
193
|
-
input[type="date"]::-webkit-datetime-edit-year-field {
|
|
194
|
-
|
|
195
|
-
}
|
|
190
|
+
/* Placeholder */
|
|
191
|
+
input[type="date"]::-webkit-datetime-edit-text,
|
|
192
|
+
input[type="date"]::-webkit-datetime-edit-month-field,
|
|
193
|
+
input[type="date"]::-webkit-datetime-edit-day-field,
|
|
194
|
+
input[type="date"]::-webkit-datetime-edit-year-field {
|
|
195
|
+
color: var(--color-text);
|
|
196
|
+
}
|
|
197
|
+
}
|