@atlaskit/date-label 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 +6 -0
- package/constellation/date-label-dropdown-trigger/usage.mdx +13 -13
- package/date-label.docs.tsx +85 -0
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -57,20 +57,20 @@ Date label dropdown trigger should only open a dropdown to allow for switching b
|
|
|
57
57
|
image={{
|
|
58
58
|
url: dateLabelDropdownDo1Light,
|
|
59
59
|
urlDarkMode: dateLabelDropdownDo1Dark,
|
|
60
|
-
alt: 'Use
|
|
60
|
+
alt: 'Use to enable date selection.',
|
|
61
61
|
}}
|
|
62
62
|
>
|
|
63
|
-
Use
|
|
63
|
+
Use to enable date selection.
|
|
64
64
|
</DoDont>
|
|
65
65
|
<DoDont
|
|
66
66
|
type="dont"
|
|
67
67
|
image={{
|
|
68
68
|
url: dateLabelDropdownDont1Light,
|
|
69
69
|
urlDarkMode: dateLabelDropdownDont1Dark,
|
|
70
|
-
alt: "Don't use
|
|
70
|
+
alt: "Don't use to communicate other information, such as more information about the date.",
|
|
71
71
|
}}
|
|
72
72
|
>
|
|
73
|
-
Don't use
|
|
73
|
+
Don't use to communicate other information, such as more information about the date.
|
|
74
74
|
</DoDont>
|
|
75
75
|
</DoDontGrid>
|
|
76
76
|
|
|
@@ -85,27 +85,27 @@ elements, such as when it appears alongside other buttons.
|
|
|
85
85
|
image={{
|
|
86
86
|
url: dateLabelDropdownDo2Light,
|
|
87
87
|
urlDarkMode: dateLabelDropdownDo2Dark,
|
|
88
|
-
alt: 'Use
|
|
88
|
+
alt: 'Use a spacious date label dropdown trigger alongside other buttons.',
|
|
89
89
|
}}
|
|
90
90
|
>
|
|
91
|
-
Use
|
|
91
|
+
Use a spacious date label dropdown trigger alongside other buttons.
|
|
92
92
|
</DoDont>
|
|
93
93
|
<DoDont
|
|
94
94
|
type="dont"
|
|
95
95
|
image={{
|
|
96
96
|
url: dateLabelDropdownDont2Light,
|
|
97
97
|
urlDarkMode: dateLabelDropdownDont2Dark,
|
|
98
|
-
alt: "Don't use
|
|
98
|
+
alt: "Don't use a default date label dropdown trigger alongside other buttons.",
|
|
99
99
|
}}
|
|
100
100
|
>
|
|
101
|
-
Don't use
|
|
101
|
+
Don't use a default date label dropdown trigger alongside other buttons.
|
|
102
102
|
</DoDont>
|
|
103
103
|
</DoDontGrid>
|
|
104
104
|
|
|
105
105
|
### Use date time picker for date entry in forms
|
|
106
106
|
|
|
107
107
|
Date label dropdown trigger is designed to sit alongside other labels like lozenge and tag. It is
|
|
108
|
-
not a form input. For date entry in forms, use a date time picker.
|
|
108
|
+
not a form input. For date entry in forms, use a [date time picker](/components/datetime-picker).
|
|
109
109
|
|
|
110
110
|
<DoDontGrid>
|
|
111
111
|
<DoDont
|
|
@@ -113,20 +113,20 @@ not a form input. For date entry in forms, use a date time picker.
|
|
|
113
113
|
image={{
|
|
114
114
|
url: dateLabelDropdownDo3Light,
|
|
115
115
|
urlDarkMode: dateLabelDropdownDo3Dark,
|
|
116
|
-
alt: 'Use date label dropdown trigger alongside other labels in
|
|
116
|
+
alt: 'Use date label dropdown trigger to display dates alongside other labels in a view.',
|
|
117
117
|
}}
|
|
118
118
|
>
|
|
119
|
-
Use date label dropdown trigger alongside other labels in
|
|
119
|
+
Use date label dropdown trigger to display dates alongside other labels in a view.
|
|
120
120
|
</DoDont>
|
|
121
121
|
<DoDont
|
|
122
122
|
type="dont"
|
|
123
123
|
image={{
|
|
124
124
|
url: dateLabelDropdownDont3Light,
|
|
125
125
|
urlDarkMode: dateLabelDropdownDont3Dark,
|
|
126
|
-
alt: "Don't use date label dropdown trigger
|
|
126
|
+
alt: "Don't use date label dropdown trigger for date entry in forms.",
|
|
127
127
|
}}
|
|
128
128
|
>
|
|
129
|
-
Don't use date label dropdown trigger
|
|
129
|
+
Don't use date label dropdown trigger for date entry in forms.
|
|
130
130
|
</DoDont>
|
|
131
131
|
</DoDontGrid>
|
|
132
132
|
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
|
+
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
8
|
+
name: 'DateLabel',
|
|
9
|
+
description:
|
|
10
|
+
'A date label displays a date as a label, with an optional appearance to communicate a meaningful condition such as a due or overdue date.',
|
|
11
|
+
status: 'open-beta',
|
|
12
|
+
import: {
|
|
13
|
+
name: 'DateLabel',
|
|
14
|
+
package: '@atlaskit/date-label',
|
|
15
|
+
type: 'default',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
18
|
+
},
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use to display a date as a label on an object (for example a due date), not for entering or selecting a date.',
|
|
21
|
+
'Use the appearance to communicate a meaningful condition: neutral by default, warning for approaching dates, and danger for overdue or critical dates.',
|
|
22
|
+
'A leading icon is shown by default and is appearance-driven (calendar, warning, or danger). Set `hasIconBefore={false}` to hide it.',
|
|
23
|
+
'Use spacious sizing when the date label is displayed alongside buttons.',
|
|
24
|
+
'For entering or selecting a date in a form, use DatePicker from @atlaskit/datetime-picker instead.',
|
|
25
|
+
],
|
|
26
|
+
contentGuidelines: [
|
|
27
|
+
'Keep the date format concise and consistent with the surrounding experience.',
|
|
28
|
+
'Pair the appearance with a label that makes the condition clear; do not rely on color alone.',
|
|
29
|
+
'Use a single date value per label.',
|
|
30
|
+
],
|
|
31
|
+
accessibilityGuidelines: [
|
|
32
|
+
'Do not rely on color alone to convey a date’s condition; ensure the date text is meaningful on its own.',
|
|
33
|
+
'Ensure sufficient color contrast for the date text across all appearances.',
|
|
34
|
+
'Provide clear, descriptive text for screen readers.',
|
|
35
|
+
],
|
|
36
|
+
examples: [
|
|
37
|
+
{
|
|
38
|
+
name: 'Date label',
|
|
39
|
+
description: 'Basic date label example',
|
|
40
|
+
source: path.resolve(__dirname, './examples/0-basic.tsx'),
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
keywords: ['date', 'label', 'date label', 'due date', 'overdue', 'lozenge'],
|
|
44
|
+
categories: ['status-indicators'],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: 'DateLabelDropdownTrigger',
|
|
48
|
+
description:
|
|
49
|
+
'Date label dropdown trigger displays a date as a label and enables changing the date through a menu or popup.',
|
|
50
|
+
status: 'open-beta',
|
|
51
|
+
import: {
|
|
52
|
+
name: 'DateLabelDropdownTrigger',
|
|
53
|
+
package: '@atlaskit/date-label',
|
|
54
|
+
type: 'named',
|
|
55
|
+
packagePath: path.resolve(__dirname),
|
|
56
|
+
packageJson: require('./package.json'),
|
|
57
|
+
},
|
|
58
|
+
usageGuidelines: [
|
|
59
|
+
'Use to enable date selection—only open a dropdown or popup to allow changing the date.',
|
|
60
|
+
'Use spacious sizing when displayed alongside buttons.',
|
|
61
|
+
'Do not use to communicate other information about the date; use DateLabel instead.',
|
|
62
|
+
'Do not use for date entry in forms; use DatePicker from @atlaskit/datetime-picker instead.',
|
|
63
|
+
],
|
|
64
|
+
contentGuidelines: [
|
|
65
|
+
'Keep the date format concise and consistent with the surrounding experience.',
|
|
66
|
+
'Do not rely on color alone; pair the appearance with clear date text.',
|
|
67
|
+
],
|
|
68
|
+
accessibilityGuidelines: [
|
|
69
|
+
'Do not rely on color alone to convey a date’s condition; ensure the date text is meaningful on its own.',
|
|
70
|
+
'Ensure the trigger is operable by keyboard and exposes an accessible name.',
|
|
71
|
+
],
|
|
72
|
+
examples: [
|
|
73
|
+
{
|
|
74
|
+
name: 'Date label dropdown trigger',
|
|
75
|
+
description: 'DateLabelDropdownTrigger example',
|
|
76
|
+
source: path.resolve(__dirname, './examples/4-dropdown-trigger.tsx'),
|
|
77
|
+
},
|
|
78
|
+
],
|
|
79
|
+
keywords: ['date', 'label', 'dropdown', 'trigger', 'date label', 'menu', 'interactive'],
|
|
80
|
+
categories: ['status-indicators'],
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
+
"name": "@atlaskit/date-label",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Date label is a non-interactive label that displays a date and optionally, visually communicates its status.",
|
|
5
|
+
"author": "Atlassian Pty Ltd",
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"registry": "https://registry.npmjs.org/"
|
|
9
|
+
},
|
|
2
10
|
"atlassian": {
|
|
3
11
|
"team": "Design System Team",
|
|
4
12
|
"website": {
|
|
@@ -28,9 +36,9 @@
|
|
|
28
36
|
"dependencies": {
|
|
29
37
|
"@atlaskit/css": "^1.0.0",
|
|
30
38
|
"@atlaskit/icon": "^36.0.0",
|
|
31
|
-
"@atlaskit/icon-lab": "^7.
|
|
39
|
+
"@atlaskit/icon-lab": "^7.1.0",
|
|
32
40
|
"@atlaskit/spinner": "^20.0.0",
|
|
33
|
-
"@atlaskit/tokens": "^
|
|
41
|
+
"@atlaskit/tokens": "^15.0.0",
|
|
34
42
|
"@babel/runtime": "^7.0.0",
|
|
35
43
|
"@compiled/react": "^0.20.0"
|
|
36
44
|
},
|
|
@@ -83,13 +91,5 @@
|
|
|
83
91
|
"import-no-extraneous-disable-for-examples-and-docs"
|
|
84
92
|
]
|
|
85
93
|
}
|
|
86
|
-
},
|
|
87
|
-
"name": "@atlaskit/date-label",
|
|
88
|
-
"version": "1.0.0",
|
|
89
|
-
"description": "A Date label is a label that displays a date and optionally, visually communicates its status. And a Date label dropdown trigger is an interactive date label that opens a dropdown for date selection.",
|
|
90
|
-
"author": "Atlassian Pty Ltd",
|
|
91
|
-
"license": "Apache-2.0",
|
|
92
|
-
"publishConfig": {
|
|
93
|
-
"registry": "https://registry.npmjs.org/"
|
|
94
94
|
}
|
|
95
95
|
}
|