@atlaskit/skeleton 2.1.10 → 3.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 +33 -0
- package/README.md +5 -2
- package/dist/types/ui/index.d.ts +9 -0
- package/package.json +9 -19
- package/skeleton.docs.tsx +42 -40
- package/dist/types-ts4.5/index.d.ts +0 -1
- package/dist/types-ts4.5/ui/index.d.ts +0 -38
- package/offerings.json +0 -36
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,38 @@
|
|
|
1
1
|
# @atlaskit/skeleton
|
|
2
2
|
|
|
3
|
+
## 3.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
|
|
8
|
+
Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
|
|
9
|
+
|
|
10
|
+
Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
|
|
11
|
+
|
|
12
|
+
Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
|
|
13
|
+
|
|
14
|
+
```diff
|
|
15
|
+
- "typesVersions": {
|
|
16
|
+
- ">=4.5 <4.9": {
|
|
17
|
+
- "*": [
|
|
18
|
+
- "dist/types-ts4.5/*",
|
|
19
|
+
- "dist/types-ts4.5/index.d.ts"
|
|
20
|
+
- ]
|
|
21
|
+
- }
|
|
22
|
+
- },
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
29
|
+
## 2.2.0
|
|
30
|
+
|
|
31
|
+
### Minor Changes
|
|
32
|
+
|
|
33
|
+
- [`455d238d83ce3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/455d238d83ce3) -
|
|
34
|
+
Promote `@atlaskit/skeleton` to general availability and add usage and props documentation.
|
|
35
|
+
|
|
3
36
|
## 2.1.10
|
|
4
37
|
|
|
5
38
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
A skeleton acts as a placeholder for content, usually while the content loads.
|
|
4
4
|
|
|
5
|
+
## Release stage: General availability
|
|
6
|
+
|
|
7
|
+
This package is supported for production use.
|
|
8
|
+
|
|
5
9
|
## Usage
|
|
6
10
|
|
|
7
11
|
`import Skeleton from '@atlaskit/skeleton';`
|
|
8
12
|
|
|
9
|
-
Detailed docs and example usage can be found
|
|
10
|
-
[here](https://atlaskit.atlassian.com/packages/design-system/skeleton).
|
|
13
|
+
Detailed docs and example usage can be found [here](https://atlassian.design/components/skeleton).
|
package/dist/types/ui/index.d.ts
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
type SkeletonProps = {
|
|
2
|
+
/**
|
|
3
|
+
* Width of the skeleton.
|
|
4
|
+
*/
|
|
2
5
|
width: string | number;
|
|
6
|
+
/**
|
|
7
|
+
* Height of the skeleton.
|
|
8
|
+
*/
|
|
3
9
|
height: string | number;
|
|
4
10
|
/**
|
|
5
11
|
* Controls the border radius, or rounding of the skeleton's corners.
|
|
@@ -24,6 +30,9 @@ type SkeletonProps = {
|
|
|
24
30
|
* ```
|
|
25
31
|
*/
|
|
26
32
|
groupName?: string;
|
|
33
|
+
/**
|
|
34
|
+
* A test id for automated testing.
|
|
35
|
+
*/
|
|
27
36
|
testId?: string;
|
|
28
37
|
};
|
|
29
38
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/skeleton",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "A skeleton acts as a placeholder for content, usually while the content loads.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,14 +27,11 @@
|
|
|
27
27
|
"team": "Design System Team",
|
|
28
28
|
"website": {
|
|
29
29
|
"name": "Skeleton",
|
|
30
|
-
"category": "Loading"
|
|
31
|
-
"status": {
|
|
32
|
-
"type": "alpha"
|
|
33
|
-
}
|
|
30
|
+
"category": "Loading"
|
|
34
31
|
}
|
|
35
32
|
},
|
|
36
33
|
"dependencies": {
|
|
37
|
-
"@atlaskit/tokens": "^
|
|
34
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
38
35
|
"@babel/runtime": "^7.0.0",
|
|
39
36
|
"@compiled/react": "^0.20.0"
|
|
40
37
|
},
|
|
@@ -45,13 +42,14 @@
|
|
|
45
42
|
"@af/accessibility-testing": "workspace:^",
|
|
46
43
|
"@af/integration-testing": "workspace:^",
|
|
47
44
|
"@af/visual-regression": "workspace:^",
|
|
48
|
-
"@atlaskit/docs": "^
|
|
49
|
-
"@atlaskit/link": "^
|
|
50
|
-
"@atlaskit/primitives": "^
|
|
51
|
-
"@atlaskit/section-message": "^
|
|
45
|
+
"@atlaskit/docs": "^12.0.0",
|
|
46
|
+
"@atlaskit/link": "^4.0.0",
|
|
47
|
+
"@atlaskit/primitives": "^20.0.0",
|
|
48
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
52
49
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
53
50
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
54
51
|
"@testing-library/react": "^16.3.0",
|
|
52
|
+
"react": "^18.2.0",
|
|
55
53
|
"react-dom": "^18.2.0"
|
|
56
54
|
},
|
|
57
55
|
"techstack": {
|
|
@@ -89,13 +87,5 @@
|
|
|
89
87
|
]
|
|
90
88
|
}
|
|
91
89
|
},
|
|
92
|
-
"homepage": "https://atlassian.design/components/skeleton"
|
|
93
|
-
"typesVersions": {
|
|
94
|
-
">=4.5 <4.9": {
|
|
95
|
-
"*": [
|
|
96
|
-
"dist/types-ts4.5/*",
|
|
97
|
-
"dist/types-ts4.5/index.d.ts"
|
|
98
|
-
]
|
|
99
|
-
}
|
|
100
|
-
}
|
|
90
|
+
"homepage": "https://atlassian.design/components/skeleton"
|
|
101
91
|
}
|
package/skeleton.docs.tsx
CHANGED
|
@@ -1,48 +1,50 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
|
|
9
|
-
status: 'early-access',
|
|
10
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
11
8
|
name: 'Skeleton',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
packageJson: require('./package.json'),
|
|
16
|
-
},
|
|
17
|
-
usageGuidelines: [
|
|
18
|
-
'Use to indicate content is loading',
|
|
19
|
-
'Match skeleton structure to actual content layout',
|
|
20
|
-
'Use appropriate animation and timing',
|
|
21
|
-
'Replace with actual content when ready',
|
|
22
|
-
'Consider different skeleton patterns for different content types',
|
|
23
|
-
],
|
|
24
|
-
contentGuidelines: [
|
|
25
|
-
'Use skeleton patterns that represent actual content structure',
|
|
26
|
-
'Maintain consistent skeleton styling',
|
|
27
|
-
'Consider content hierarchy in skeleton design',
|
|
28
|
-
'Use appropriate animation timing',
|
|
29
|
-
],
|
|
30
|
-
accessibilityGuidelines: [
|
|
31
|
-
'Provide appropriate loading announcements',
|
|
32
|
-
'Use skeleton patterns that match actual content structure',
|
|
33
|
-
'Ensure skeleton content is not announced as actual content',
|
|
34
|
-
'Consider screen reader experience during loading states',
|
|
35
|
-
],
|
|
36
|
-
examples: [
|
|
37
|
-
{
|
|
9
|
+
description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
38
12
|
name: 'Skeleton',
|
|
39
|
-
|
|
40
|
-
|
|
13
|
+
package: '@atlaskit/skeleton',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
41
17
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use to indicate content is loading',
|
|
20
|
+
'Match skeleton structure to actual content layout',
|
|
21
|
+
'Use appropriate animation and timing',
|
|
22
|
+
'Replace with actual content when ready',
|
|
23
|
+
'Consider different skeleton patterns for different content types',
|
|
24
|
+
],
|
|
25
|
+
contentGuidelines: [
|
|
26
|
+
'Use skeleton patterns that represent actual content structure',
|
|
27
|
+
'Maintain consistent skeleton styling',
|
|
28
|
+
'Consider content hierarchy in skeleton design',
|
|
29
|
+
'Use appropriate animation timing',
|
|
30
|
+
],
|
|
31
|
+
accessibilityGuidelines: [
|
|
32
|
+
'Provide appropriate loading announcements',
|
|
33
|
+
'Use skeleton patterns that match actual content structure',
|
|
34
|
+
'Ensure skeleton content is not announced as actual content',
|
|
35
|
+
'Consider screen reader experience during loading states',
|
|
36
|
+
],
|
|
37
|
+
examples: [
|
|
38
|
+
{
|
|
39
|
+
name: 'Skeleton',
|
|
40
|
+
description: 'Skeleton example',
|
|
41
|
+
source: path.resolve(__dirname, './examples/ai/skeleton.tsx'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
keywords: ['skeleton', 'placeholder', 'loading', 'content', 'shimmer', 'animation'],
|
|
45
|
+
categories: ['loading'],
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
};
|
|
47
49
|
|
|
48
50
|
export default documentation;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './ui';
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
type SkeletonProps = {
|
|
2
|
-
width: string | number;
|
|
3
|
-
height: string | number;
|
|
4
|
-
/**
|
|
5
|
-
* Controls the border radius, or rounding of the skeleton's corners.
|
|
6
|
-
*/
|
|
7
|
-
borderRadius?: string | number;
|
|
8
|
-
/**
|
|
9
|
-
* Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
|
|
10
|
-
*/
|
|
11
|
-
color?: string;
|
|
12
|
-
/**
|
|
13
|
-
* Overrides the default shimmering ending color of skeleton.
|
|
14
|
-
*/
|
|
15
|
-
ShimmeringEndColor?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Enables the shimmering animation.
|
|
18
|
-
*/
|
|
19
|
-
isShimmering?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Applied as a data-attribute. Use this to target groups of skeletons with the same name (e.g. for applying custom styles)
|
|
22
|
-
* ```
|
|
23
|
-
* groupName="my-skeleton" -> <div data-my-skeleton>
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
groupName?: string;
|
|
27
|
-
testId?: string;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* __Skeleton__
|
|
31
|
-
*
|
|
32
|
-
* A skeleton acts as a placeholder for content, usually while the content loads.
|
|
33
|
-
*
|
|
34
|
-
* - [Examples](https://atlassian.design/components/skeleton/examples)
|
|
35
|
-
* - [Code](https://atlassian.design/components/skeleton/code)
|
|
36
|
-
*/
|
|
37
|
-
declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => JSX.Element;
|
|
38
|
-
export default Skeleton;
|
package/offerings.json
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"name": "Skeleton",
|
|
4
|
-
"package": "@atlaskit/skeleton",
|
|
5
|
-
"import": {
|
|
6
|
-
"name": "Skeleton",
|
|
7
|
-
"package": "@atlaskit/skeleton",
|
|
8
|
-
"type": "default"
|
|
9
|
-
},
|
|
10
|
-
"keywords": ["skeleton", "placeholder", "loading", "content", "shimmer", "animation"],
|
|
11
|
-
"categories": ["loading"],
|
|
12
|
-
"shortDescription": "A skeleton acts as a placeholder for content, usually while the content loads.",
|
|
13
|
-
"status": "early-access",
|
|
14
|
-
"accessibilityGuidelines": [
|
|
15
|
-
"Provide appropriate loading announcements",
|
|
16
|
-
"Use skeleton patterns that match actual content structure",
|
|
17
|
-
"Ensure skeleton content is not announced as actual content",
|
|
18
|
-
"Consider screen reader experience during loading states"
|
|
19
|
-
],
|
|
20
|
-
"usageGuidelines": [
|
|
21
|
-
"Use to indicate content is loading",
|
|
22
|
-
"Match skeleton structure to actual content layout",
|
|
23
|
-
"Use appropriate animation and timing",
|
|
24
|
-
"Replace with actual content when ready",
|
|
25
|
-
"Consider different skeleton patterns for different content types"
|
|
26
|
-
],
|
|
27
|
-
"contentGuidelines": [
|
|
28
|
-
"Use skeleton patterns that represent actual content structure",
|
|
29
|
-
"Maintain consistent skeleton styling",
|
|
30
|
-
"Consider content hierarchy in skeleton design",
|
|
31
|
-
"Use appropriate animation timing"
|
|
32
|
-
],
|
|
33
|
-
"generativeInstructions": "./docs/ai/skeleton-instructions.md",
|
|
34
|
-
"examples": ["./examples/ai/skeleton.tsx"]
|
|
35
|
-
}
|
|
36
|
-
]
|