@fluentui/react-skeleton 9.0.36 → 9.0.37

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.
Files changed (4) hide show
  1. package/CHANGELOG.json +22 -1
  2. package/CHANGELOG.md +12 -2
  3. package/package.json +3 -3
  4. package/SPEC.md +0 -105
package/CHANGELOG.json CHANGED
@@ -2,7 +2,28 @@
2
2
  "name": "@fluentui/react-skeleton",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 18 Oct 2023 17:47:35 GMT",
5
+ "date": "Sat, 28 Oct 2023 23:32:06 GMT",
6
+ "tag": "@fluentui/react-skeleton_v9.0.37",
7
+ "version": "9.0.37",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-skeleton",
13
+ "comment": "Bump @fluentui/react-field to v9.1.39",
14
+ "commit": "555b0fae3ec7f052e765557ae243c58000514f92"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-skeleton",
19
+ "comment": "Bump @fluentui/react-shared-contexts to v9.11.0",
20
+ "commit": "555b0fae3ec7f052e765557ae243c58000514f92"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Wed, 18 Oct 2023 17:54:06 GMT",
6
27
  "tag": "@fluentui/react-skeleton_v9.0.36",
7
28
  "version": "9.0.36",
8
29
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,22 @@
1
1
  # Change Log - @fluentui/react-skeleton
2
2
 
3
- This log was last generated on Wed, 18 Oct 2023 17:47:35 GMT and should not be manually modified.
3
+ This log was last generated on Sat, 28 Oct 2023 23:32:06 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.37)
8
+
9
+ Sat, 28 Oct 2023 23:32:06 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.36..@fluentui/react-skeleton_v9.0.37)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-field to v9.1.39 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
15
+ - Bump @fluentui/react-shared-contexts to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
16
+
7
17
  ## [9.0.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.36)
8
18
 
9
- Wed, 18 Oct 2023 17:47:35 GMT
19
+ Wed, 18 Oct 2023 17:54:06 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.35..@fluentui/react-skeleton_v9.0.36)
11
21
 
12
22
  ### Patches
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-skeleton",
3
- "version": "9.0.36",
3
+ "version": "9.0.37",
4
4
  "description": "Converged v9 Skeleton Component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -32,9 +32,9 @@
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-field": "^9.1.38",
35
+ "@fluentui/react-field": "^9.1.39",
36
36
  "@fluentui/react-jsx-runtime": "^9.0.18",
37
- "@fluentui/react-shared-contexts": "^9.10.0",
37
+ "@fluentui/react-shared-contexts": "^9.11.0",
38
38
  "@fluentui/react-theme": "^9.1.14",
39
39
  "@fluentui/react-utilities": "^9.15.1",
40
40
  "@griffel/react": "^1.5.14",
package/SPEC.md DELETED
@@ -1,105 +0,0 @@
1
- # @fluentui/react-skeleton Spec
2
-
3
- ## Background
4
-
5
- The `Skeleton` component is a temporary placeholder for UI that is in a loading state.
6
-
7
- ## Prior Art
8
-
9
- | Library | Component Name | Spec Link | Notes |
10
- | ----------- | -------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11
- | Ant Design | Skeleton | [Skeleton](https://ant.design/components/skeleton/) | Has an `avatar`, `button`, `list`, and `togglebutton`. Has animated and non-animated versions, and shape variants for the component skeletons(rounded or rectangular). |
12
- | Fast | Skeleton | [Skeleton](https://explore.fast.design/components/fast-skeleton) | Has three components: `Avatar`, `List`, and `Button`. No shape variants. |
13
- | Semantic UI | Placeholder | [Placeholder](https://react.semantic-ui.com/elements/placeholder/) | Has `Header` and `Paragraph` subcomponents. The `Header` can take in an image as a prop |
14
- | UI Fabric | Shimmer | [Shimmer](https://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer) | Shimmer has a way to pass in custom elements as well as the defaults. There is also a prop to change the colors of the Skeleton components. |
15
-
16
- ### Comparison of v8 and v0
17
-
18
- The existing components are:
19
-
20
- - v8
21
- - `Shimmer`
22
- - v0
23
- - Does not have an existing `Skeleton` component.
24
-
25
- ## Sample Code
26
-
27
- Basic example:
28
-
29
- ```jsx
30
- import { Skeleton, SkeletonItem } from '@fluentui/react-skeleton';
31
-
32
- function App() {
33
- return (
34
- <Skeleton>
35
- <SkeletonItem shape="circle" size={24} />
36
- <SkeletonItem shape="rectangle" size={16} />
37
- </Skeleton>
38
- );
39
- }
40
- ```
41
-
42
- ## Variants
43
-
44
- - There are three basic `Skeleton` shapes
45
- - `Rectangle`
46
- - `Circle`
47
- - `Square`
48
-
49
- ### Shape
50
-
51
- The `Skeleton` is a combination of any of the two shapes in order to represent the content that will be loaded onto the screen. That is, it is a combination of rectangles and circles that is a visual representation of the wireframe of a page.
52
-
53
- ## API
54
-
55
- ### Slots
56
-
57
- - `root` - The root slot of the `Skeleton` is the container that will contain the items that make up a `Skeleton` in representation of the data that is loading. The default html element is a `svg`.
58
-
59
- ### Props
60
-
61
- See API at:
62
-
63
- - [Skeleton.types.ts](./src/components/Skeleton/Skeleton.types.ts).
64
- - [SkeletonItem.types.ts](./src/components/SkeletonItem/SkeletonItem.types.ts).
65
-
66
- ## Structure
67
-
68
- ```html
69
- <!-- Container for Skeleton -->
70
-
71
- <div class="fui-Skeleton">
72
- <!-- Container for SkeletonElement -->
73
-
74
- <div class="fui-SkeletonItem" />
75
- </div>
76
- ```
77
-
78
- ## Migration
79
-
80
- See [MIGRATION.md](./MIGRATION.md).
81
-
82
- ## Behaviors
83
-
84
- ### States
85
-
86
- - **Display** - The `Skeleton` will use the following priority:
87
-
88
- - The `appearance` prop will allow the use of a `translucent` appearance.
89
- - Specifying `wave` or `pulse` will change the animation style of the `Skeleton`
90
- - The component also has `rtl` support and will animate the `Skeleton` from right to left if set.
91
- - Setting the `shape` prop in `<SkeletonItem />` will render a `rectangle`, `square`, or a `circle` (default is `rectangle`).
92
- - Setting the `size` prop in `<SkeletonItem />` will allow the user to specify the size of the element (default is 16).
93
-
94
- ### Interaction
95
-
96
- The Skeleton is non-interactive.
97
-
98
- - **Keyboard** - Not keyboard focusable.
99
- - **Mouse** - Nothing
100
-
101
- - **Touch** - Nothing
102
-
103
- ## Accessibility
104
-
105
- - An `aria-label` is added to the `Skeleton` container to let users know that content is loading