@atlaskit/lozenge 13.5.1 → 13.5.3
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 +14 -0
- package/dist/types/lozenge.d.ts +1 -1
- package/dist/types/new/types.d.ts +1 -1
- package/dist/types-ts4.5/lozenge.d.ts +1 -1
- package/dist/types-ts4.5/new/types.d.ts +1 -1
- package/lozenge.docs.tsx +88 -0
- package/package.json +11 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/lozenge
|
|
2
2
|
|
|
3
|
+
## 13.5.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`18245cbd990e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18245cbd990e3) -
|
|
8
|
+
Added motion to opening and closing of Popup
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 13.5.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 13.5.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/types/lozenge.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface LozengeProps {
|
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
/**
|
|
18
18
|
* Determines whether to apply the bold style or not.
|
|
19
|
-
* @deprecated
|
|
19
|
+
* @deprecated Deprecated. Will be removed in a future major release. Lozenge will be bold by default. For labels and categorization, use Tag instead.
|
|
20
20
|
*/
|
|
21
21
|
isBold?: boolean;
|
|
22
22
|
/**
|
|
@@ -54,7 +54,7 @@ type NewLozengeBaseProps = {
|
|
|
54
54
|
*/
|
|
55
55
|
testId?: string;
|
|
56
56
|
/**
|
|
57
|
-
* @deprecated
|
|
57
|
+
* @deprecated Deprecated. Will be removed in a future major release. Lozenge will be bold by default. For labels and categorization, use Tag instead.
|
|
58
58
|
*/
|
|
59
59
|
isBold?: boolean;
|
|
60
60
|
};
|
|
@@ -16,7 +16,7 @@ export interface LozengeProps {
|
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
/**
|
|
18
18
|
* Determines whether to apply the bold style or not.
|
|
19
|
-
* @deprecated
|
|
19
|
+
* @deprecated Deprecated. Will be removed in a future major release. Lozenge will be bold by default. For labels and categorization, use Tag instead.
|
|
20
20
|
*/
|
|
21
21
|
isBold?: boolean;
|
|
22
22
|
/**
|
|
@@ -54,7 +54,7 @@ type NewLozengeBaseProps = {
|
|
|
54
54
|
*/
|
|
55
55
|
testId?: string;
|
|
56
56
|
/**
|
|
57
|
-
* @deprecated
|
|
57
|
+
* @deprecated Deprecated. Will be removed in a future major release. Lozenge will be bold by default. For labels and categorization, use Tag instead.
|
|
58
58
|
*/
|
|
59
59
|
isBold?: boolean;
|
|
60
60
|
};
|
package/lozenge.docs.tsx
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Lozenge',
|
|
8
|
+
description:
|
|
9
|
+
"A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
|
|
10
|
+
status: 'general-availability', // beta lozenge is feature-flagged
|
|
11
|
+
import: {
|
|
12
|
+
name: 'Lozenge',
|
|
13
|
+
package: '@atlaskit/lozenge',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
17
|
+
},
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Subtle (default): for long tables and general use',
|
|
20
|
+
'Bold: use sparingly (e.g. Pipeline/Jira status)',
|
|
21
|
+
'Always combine color with a concise, accurate label',
|
|
22
|
+
'Use Badge for tallies/counts; use Tag for labels',
|
|
23
|
+
],
|
|
24
|
+
contentGuidelines: [
|
|
25
|
+
'Use clear, concise text; use accurate labels (e.g. "Error", "Warning")',
|
|
26
|
+
'Do not use for long text—lozenge is not focusable and truncation at ~200px is not accessible',
|
|
27
|
+
'Ensure text is meaningful and descriptive',
|
|
28
|
+
'Use consistent terminology across lozenges',
|
|
29
|
+
],
|
|
30
|
+
accessibilityGuidelines: [
|
|
31
|
+
'Do not rely on color alone; always pair with an accurate text label',
|
|
32
|
+
'Ensure sufficient color contrast for text readability',
|
|
33
|
+
'Do not use for long text—truncation is not accessible and lozenge is not focusable',
|
|
34
|
+
'Provide appropriate labels for screen readers',
|
|
35
|
+
'Consider color-blind users when choosing colors',
|
|
36
|
+
],
|
|
37
|
+
examples: [
|
|
38
|
+
{
|
|
39
|
+
name: 'Lozenge',
|
|
40
|
+
description: 'Lozenge example',
|
|
41
|
+
source: path.resolve(__dirname, './examples/ai/lozenge.tsx'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
keywords: ['lozenge', 'badge', 'label', 'status', 'indicator', 'pill'],
|
|
45
|
+
categories: ['status-indicators'],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'LozengeDropdownTrigger',
|
|
49
|
+
description:
|
|
50
|
+
"Lozenge dropdown trigger displays an item's status and enables switching through a menu.",
|
|
51
|
+
status: 'open-beta',
|
|
52
|
+
import: {
|
|
53
|
+
name: 'LozengeDropdownTrigger',
|
|
54
|
+
package: '@atlaskit/lozenge',
|
|
55
|
+
type: 'named',
|
|
56
|
+
packagePath: path.resolve(__dirname),
|
|
57
|
+
packageJson: require('./package.json'),
|
|
58
|
+
},
|
|
59
|
+
usageGuidelines: [
|
|
60
|
+
'Use for status switching—only open a dropdown or popup to allow quick status changes',
|
|
61
|
+
'Use spacious sizing when displayed alongside buttons',
|
|
62
|
+
"Don't use to communicate other information like additional status details; use lozenge instead",
|
|
63
|
+
],
|
|
64
|
+
contentGuidelines: [
|
|
65
|
+
'Use clear, concise status labels',
|
|
66
|
+
'Keep labels short—max 200px width causes truncation and lozenges are not focusable',
|
|
67
|
+
"Don't use color alone; use clear labels and supporting icons where relevant",
|
|
68
|
+
],
|
|
69
|
+
accessibilityGuidelines: [
|
|
70
|
+
"Don't use color alone to signify state; use clear labels and icons",
|
|
71
|
+
"Don't use long labels—truncation isn't accessible as lozenges can't be focused",
|
|
72
|
+
],
|
|
73
|
+
examples: [
|
|
74
|
+
{
|
|
75
|
+
name: 'Lozenge Dropdown Trigger',
|
|
76
|
+
description: 'LozengeDropdownTrigger example',
|
|
77
|
+
source: path.resolve(
|
|
78
|
+
__dirname,
|
|
79
|
+
'./examples/constellation/lozenge-dropdown-trigger-basic.tsx',
|
|
80
|
+
),
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
keywords: ['lozenge', 'dropdown', 'trigger', 'status', 'menu', 'interactive'],
|
|
84
|
+
categories: ['status-indicators'],
|
|
85
|
+
},
|
|
86
|
+
];
|
|
87
|
+
|
|
88
|
+
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/lozenge",
|
|
3
|
-
"version": "13.5.
|
|
3
|
+
"version": "13.5.3",
|
|
4
4
|
"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@atlaskit/analytics-next": "^11.
|
|
53
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
54
54
|
"@atlaskit/badge": "^18.4.0",
|
|
55
55
|
"@atlaskit/css": "^0.19.0",
|
|
56
56
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
57
|
-
"@atlaskit/icon": "^
|
|
57
|
+
"@atlaskit/icon": "^33.1.0",
|
|
58
58
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
59
|
-
"@atlaskit/primitives": "^18.
|
|
59
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
60
60
|
"@atlaskit/spinner": "^19.0.0",
|
|
61
|
-
"@atlaskit/tokens": "^11.
|
|
61
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
62
62
|
"@babel/runtime": "^7.0.0",
|
|
63
63
|
"@compiled/react": "^0.20.0"
|
|
64
64
|
},
|
|
@@ -69,13 +69,14 @@
|
|
|
69
69
|
"@af/accessibility-testing": "workspace:^",
|
|
70
70
|
"@af/integration-testing": "workspace:^",
|
|
71
71
|
"@af/visual-regression": "workspace:^",
|
|
72
|
-
"@atlaskit/docs": "^11.
|
|
73
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
72
|
+
"@atlaskit/docs": "^11.7.0",
|
|
73
|
+
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
74
74
|
"@atlaskit/heading": "^5.3.0",
|
|
75
75
|
"@atlaskit/link": "^3.3.0",
|
|
76
76
|
"@atlaskit/section-message": "^8.12.0",
|
|
77
77
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
78
78
|
"@atlassian/ssr-tests": "workspace:^",
|
|
79
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
79
80
|
"@testing-library/react": "^16.3.0",
|
|
80
81
|
"jscodeshift": "^17.0.0",
|
|
81
82
|
"react-dom": "^18.2.0"
|
|
@@ -108,6 +109,9 @@
|
|
|
108
109
|
},
|
|
109
110
|
"platform-dst-lozenge-tag-badge-visual-uplifts": {
|
|
110
111
|
"type": "boolean"
|
|
112
|
+
},
|
|
113
|
+
"platform-dst-motion-uplift": {
|
|
114
|
+
"type": "boolean"
|
|
111
115
|
}
|
|
112
116
|
},
|
|
113
117
|
"homepage": "https://atlassian.design/components/lozenge/"
|