@automattic/date-range-picker 1.0.0 → 1.0.1
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 +9 -0
- package/dist/cjs/style.scss +72 -0
- package/dist/esm/style.scss +72 -0
- package/package.json +6 -3
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 1.0.1
|
|
4
|
+
|
|
5
|
+
- Fix packaging: include `style.scss` in `dist/esm/` and `dist/cjs/` so the compiled `import './style.scss'` resolves for consumers that don't use the `calypso:src` exports condition.
|
|
6
|
+
|
|
7
|
+
## 1.0.0
|
|
8
|
+
|
|
9
|
+
- Initial release ([#110712](https://github.com/Automattic/wp-calypso/pull/110712))
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/* Popover sizing */
|
|
2
|
+
.daterange-popover .components-popover__content {
|
|
3
|
+
overflow: visible;
|
|
4
|
+
width: auto;
|
|
5
|
+
max-width: calc( 100vw - 48px );
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Body rows */
|
|
9
|
+
.daterange-inputs {
|
|
10
|
+
margin-bottom: 12px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.daterange-input {
|
|
14
|
+
&__field {
|
|
15
|
+
// The extra class is to make sure it overrides the default button styles
|
|
16
|
+
&.components-button {
|
|
17
|
+
background: var( --dashboard-surface__background-color );
|
|
18
|
+
padding: $grid-unit-05 $grid-unit-05 $grid-unit-05 $grid-unit-10;
|
|
19
|
+
box-shadow: none;
|
|
20
|
+
border-radius: $radius-small;
|
|
21
|
+
border: 1px solid var(--dashboard-field__border-color, $gray-600);
|
|
22
|
+
}
|
|
23
|
+
svg {
|
|
24
|
+
color: var(--dashboard__text-color);
|
|
25
|
+
padding: $grid-unit-05;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
&__text {
|
|
29
|
+
color: var(--dashboard__text-color);
|
|
30
|
+
padding: 0 $grid-unit-05;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Mobile */
|
|
35
|
+
@media ( max-width: 600px ) {
|
|
36
|
+
.daterange-calendar {
|
|
37
|
+
display: flex;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Medium screens: presets and calendar should be centered with no awkward right margin */
|
|
44
|
+
@media ( min-width: 601px ) and ( max-width: 899px ) {
|
|
45
|
+
.daterange-body {
|
|
46
|
+
justify-content: space-between !important;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
|
|
51
|
+
@media ( min-width: 601px ) {
|
|
52
|
+
.daterange-presets {
|
|
53
|
+
min-width: 240px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
|
|
58
|
+
.preset-listbox__item .components-button {
|
|
59
|
+
width: 100%;
|
|
60
|
+
justify-content: flex-start;
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Hide native date picker icons inside our date inputs (visual only) */
|
|
67
|
+
.daterange-inputs input[type='date']::-webkit-calendar-picker-indicator {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
.daterange-inputs input[type='date']::-webkit-clear-button {
|
|
71
|
+
display: none;
|
|
72
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/* Popover sizing */
|
|
2
|
+
.daterange-popover .components-popover__content {
|
|
3
|
+
overflow: visible;
|
|
4
|
+
width: auto;
|
|
5
|
+
max-width: calc( 100vw - 48px );
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Body rows */
|
|
9
|
+
.daterange-inputs {
|
|
10
|
+
margin-bottom: 12px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.daterange-input {
|
|
14
|
+
&__field {
|
|
15
|
+
// The extra class is to make sure it overrides the default button styles
|
|
16
|
+
&.components-button {
|
|
17
|
+
background: var( --dashboard-surface__background-color );
|
|
18
|
+
padding: $grid-unit-05 $grid-unit-05 $grid-unit-05 $grid-unit-10;
|
|
19
|
+
box-shadow: none;
|
|
20
|
+
border-radius: $radius-small;
|
|
21
|
+
border: 1px solid var(--dashboard-field__border-color, $gray-600);
|
|
22
|
+
}
|
|
23
|
+
svg {
|
|
24
|
+
color: var(--dashboard__text-color);
|
|
25
|
+
padding: $grid-unit-05;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
&__text {
|
|
29
|
+
color: var(--dashboard__text-color);
|
|
30
|
+
padding: 0 $grid-unit-05;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Mobile */
|
|
35
|
+
@media ( max-width: 600px ) {
|
|
36
|
+
.daterange-calendar {
|
|
37
|
+
display: flex;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Medium screens: presets and calendar should be centered with no awkward right margin */
|
|
44
|
+
@media ( min-width: 601px ) and ( max-width: 899px ) {
|
|
45
|
+
.daterange-body {
|
|
46
|
+
justify-content: space-between !important;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
|
|
51
|
+
@media ( min-width: 601px ) {
|
|
52
|
+
.daterange-presets {
|
|
53
|
+
min-width: 240px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
|
|
58
|
+
.preset-listbox__item .components-button {
|
|
59
|
+
width: 100%;
|
|
60
|
+
justify-content: flex-start;
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Hide native date picker icons inside our date inputs (visual only) */
|
|
67
|
+
.daterange-inputs input[type='date']::-webkit-calendar-picker-indicator {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
.daterange-inputs input[type='date']::-webkit-clear-button {
|
|
71
|
+
display: none;
|
|
72
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/date-range-picker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A date-range picker built on top of @automattic/ui's DateRangeCalendar, with timezone-aware site-day handling, preset shortcuts, and accessible inputs.",
|
|
5
5
|
"homepage": "https://github.com/Automattic/wp-calypso",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"types": "dist/types",
|
|
40
40
|
"scripts": {
|
|
41
41
|
"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
|
|
42
|
-
"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
|
|
42
|
+
"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
|
|
43
43
|
"prepack": "yarn run clean && yarn run build"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
"react-dom": "^18.3.1"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
|
+
"@automattic/calypso-build": "^11.0.0",
|
|
61
62
|
"@automattic/calypso-typescript-config": "^1.0.0",
|
|
62
63
|
"@testing-library/dom": "^10.4.1",
|
|
63
64
|
"@testing-library/jest-dom": "^6.9.1",
|
|
@@ -66,6 +67,8 @@
|
|
|
66
67
|
"@types/react": "^18.3.18",
|
|
67
68
|
"jest": "^29.7.0",
|
|
68
69
|
"mockdate": "^2.0.5",
|
|
69
|
-
"
|
|
70
|
+
"postcss": "^8.5.3",
|
|
71
|
+
"typescript": "^5.8.3",
|
|
72
|
+
"webpack": "^5.99.8"
|
|
70
73
|
}
|
|
71
74
|
}
|