@fluentui/react-label 0.0.0-nightly-20220607-0421.1 → 0.0.0-nightly-20220610-0420.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.
Files changed (6) hide show
  1. package/CHANGELOG.json +13 -5
  2. package/CHANGELOG.md +5 -5
  3. package/MIGRATION.md +19 -6
  4. package/README.md +12 -4
  5. package/Spec.md +26 -67
  6. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,16 +2,24 @@
2
2
  "name": "@fluentui/react-label",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 07 Jun 2022 04:34:28 GMT",
6
- "tag": "@fluentui/react-label_v0.0.0-nightly-20220607-0421.1",
7
- "version": "0.0.0-nightly-20220607-0421.1",
5
+ "date": "Fri, 10 Jun 2022 04:35:06 GMT",
6
+ "tag": "@fluentui/react-label_v0.0.0-nightly-20220610-0420.1",
7
+ "version": "0.0.0-nightly-20220610-0420.1",
8
8
  "comments": {
9
+ "none": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui/react-label",
13
+ "commit": "4ae21ade4ca5a355bf891ca4e023512385c1a0bf",
14
+ "comment": "docs: README, spec and migration guide cleanup for react-label."
15
+ }
16
+ ],
9
17
  "prerelease": [
10
18
  {
11
19
  "author": "beachball",
12
20
  "package": "@fluentui/react-label",
13
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1",
14
- "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
21
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220610-0420.1",
22
+ "commit": "f6d5f8cebb6e0b532670f90508886c9c033cd443"
15
23
  }
16
24
  ]
17
25
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,17 @@
1
1
  # Change Log - @fluentui/react-label
2
2
 
3
- This log was last generated on Tue, 07 Jun 2022 04:34:28 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 10 Jun 2022 04:35:06 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220607-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly-20220607-0421.1)
7
+ ## [0.0.0-nightly-20220610-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly-20220610-0420.1)
8
8
 
9
- Tue, 07 Jun 2022 04:34:28 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.5..@fluentui/react-label_v0.0.0-nightly-20220607-0421.1)
9
+ Fri, 10 Jun 2022 04:35:06 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.5..@fluentui/react-label_v0.0.0-nightly-20220610-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
14
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220610-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/f6d5f8cebb6e0b532670f90508886c9c033cd443) by beachball)
15
15
 
16
16
  ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.5)
17
17
 
package/MIGRATION.md CHANGED
@@ -1,19 +1,15 @@
1
1
  # Label Migration
2
2
 
3
- ## STATUS: WIP
4
-
5
- This Migration guide is a work in progress and is not yet ready for use.
6
-
7
3
  ## Migration from v8
8
4
 
9
5
  - `Label`
10
- - `componentRef` => Not supported.
6
+ - `componentRef` => Not supported. Consider using `ref` instead.
11
7
  - `disabled` => `disabled`.
12
8
  - `required` => `required`.
13
9
 
14
10
  ## Migration from v0
15
11
 
16
- The converged API does not support many of the features offered in v0. Some could potentially by addressed by already made slots or by adding either the additional features or more slots if needed.
12
+ The v9 API does not support many of the features offered in v0. Some could potentially be addressed by using the already existing slots or by adding either the additional features or more slots if needed.
17
13
 
18
14
  - `Label`
19
15
  - `circular` => Not supported. Consider using `Badge` component.
@@ -23,3 +19,20 @@ The converged API does not support many of the features offered in v0. Some coul
23
19
  - `fluid` => Not supported. Use CSS styling such as flex-grow.
24
20
  - `icon`, `iconPosition` => Not supported. Consider using `Badge` component or add as a child.
25
21
  - `image`, `imagePosition` => Not supported. Add as a child.
22
+
23
+ ## Property mapping
24
+
25
+ | v8 `Label` | v0 `Label` | v9 `Label` |
26
+ | -------------- | --------------- | ---------- |
27
+ | `children` | `content` | `children` |
28
+ | | `circular` | |
29
+ | | `color` | |
30
+ | `componentRef` | `ref` | `ref` |
31
+ | | `design` | |
32
+ | `disabled` | | `disabled` |
33
+ | | `fluid` | |
34
+ | | `icon` | |
35
+ | | `iconPosition` | |
36
+ | | `image` | |
37
+ | | `imagePosition` | |
38
+ | `required` | | `required` |
package/README.md CHANGED
@@ -1,14 +1,18 @@
1
1
  # @fluentui/react-label
2
2
 
3
- **React Label components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
4
-
5
- These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
3
+ **Label components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
6
4
 
7
5
  Labels provide a name or title to a component or group of components, e.g., text fields, checkboxes, radio buttons, and dropdown menus.
8
6
 
9
7
  ## Usage
10
8
 
11
- To use the `Label` component import it from `@fluentui/react-components` and use it as shown below.
9
+ To import `Label`:
10
+
11
+ ```js
12
+ import { Label } from '@fluentui/react-components';
13
+ ```
14
+
15
+ ### Examples
12
16
 
13
17
  ```tsx
14
18
  import * as React from 'react';
@@ -39,3 +43,7 @@ Alternatively, run Storybook locally with:
39
43
  ### Specification
40
44
 
41
45
  See [Spec.md](./Spec.md).
46
+
47
+ ### Migration Guide
48
+
49
+ If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Label implementation.
package/Spec.md CHANGED
@@ -16,14 +16,15 @@ Labels provide a name or title to a component or group of components, e.g., text
16
16
  ```
17
17
 
18
18
  Props used in v8 Label:
19
- |Prop|Description|
20
- |---|---|
21
- |as|Element type to render Label as|
22
- |componentRef|Optional callback to access the ILabel interface. Use this instead of ref for accessing the public methods and properties of the component|
23
- |disabled|Renders label as disabled, changing the Label's foreground color|
24
- |required|Renders an asterisk next to the given text|
25
- |styles|Custom styles for the Label|
26
- |theme|Theme provided by HOC|
19
+
20
+ | Prop | Description |
21
+ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
22
+ | as | Element type to render Label as |
23
+ | componentRef | Optional callback to access the ILabel interface. Use this instead of ref for accessing the public methods and properties of the component |
24
+ | disabled | Renders label as disabled, changing the Label's foreground color |
25
+ | required | Renders an asterisk next to the given text |
26
+ | styles | Custom styles for the Label |
27
+ | theme | Theme provided by HOC |
27
28
 
28
29
  ### Label in Northstar/v0
29
30
 
@@ -32,21 +33,22 @@ Props used in v8 Label:
32
33
  ```
33
34
 
34
35
  Props used in v0 Label:
35
- |Prop|Description|
36
- |---|---|
37
- |accessibility| Prop to override accessibility behavior|
38
- |as|Element type to render Label as|
39
- |circular|Renders Label with round corners|
40
- |className|Additional CSS class name to apply|
41
- |color|Color for the background of the label|
42
- |content|Label content|
43
- |fluid|Make it so Label takes the width of its container|
44
- |icon|Adds an icon to the label|
45
- |iconPosition|Choose where the icon is placed (Start or End)|
46
- |image|Adds an image to the label|
47
- |imagePosition|Choose where the image is placed (Start or End)|
48
- |styles|Additional custom styles for the component|
49
- |variables|Allows override of theme variables|
36
+
37
+ | Prop | Description |
38
+ | ------------- | ------------------------------------------------- |
39
+ | accessibility | Prop to override accessibility behavior |
40
+ | as | Element type to render Label as |
41
+ | circular | Renders Label with round corners |
42
+ | className | Additional CSS class name to apply |
43
+ | color | Color for the background of the label |
44
+ | content | Label content |
45
+ | fluid | Make it so Label takes the width of its container |
46
+ | icon | Adds an icon to the label |
47
+ | iconPosition | Choose where the icon is placed (Start or End) |
48
+ | image | Adds an image to the label |
49
+ | imagePosition | Choose where the image is placed (Start or End) |
50
+ | styles | Additional custom styles for the component |
51
+ | variables | Allows override of theme variables |
50
52
 
51
53
  ### Conclusion
52
54
 
@@ -74,50 +76,7 @@ The Label component should be simple as shown below. It will just need the text
74
76
 
75
77
  ## API
76
78
 
77
- ```ts
78
- export type LabelCommons = {
79
- /**
80
- * Renders the label as disabled
81
- * @default false
82
- */
83
- disabled: boolean;
84
-
85
- /**
86
- * A label supports different sizes.
87
- * @default 'medium'
88
- */
89
- size: 'small' | 'medium' | 'large';
90
-
91
- /**
92
- * A label supports semibold/strong fontweight.
93
- * @default false
94
- */
95
- strong: boolean;
96
- };
97
-
98
- export type LabelSlots = {
99
- root: IntrinsicSlotProps<'label'>;
100
- required?: IntrinsicSlotProps<'span'>;
101
- };
102
-
103
- /**
104
- * State used in rendering Label
105
- */
106
- export type LabelState = ComponentState<LabelSlots> & LabelCommons;
107
-
108
- /**
109
- * Label Props
110
- */
111
- export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &
112
- Partial<LabelCommons> & {
113
- /**
114
- * Displays an indicator that the label is for a required field. The required prop can be set to true to display
115
- * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
116
- * @default false
117
- */
118
- required?: boolean | Slot<'span'>;
119
- };
120
- ```
79
+ See API at [Label.types.ts](./src/components/Label/Label.types.ts).
121
80
 
122
81
  ## Structure
123
82
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-label",
3
- "version": "0.0.0-nightly-20220607-0421.1",
3
+ "version": "0.0.0-nightly-20220610-0420.1",
4
4
  "description": "Fluent UI React Label component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,12 +28,12 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220607-0421.0",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220610-0420.0",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-theme": "0.0.0-nightly-20220607-0421.0",
36
- "@fluentui/react-utilities": "0.0.0-nightly-20220607-0421.1",
35
+ "@fluentui/react-theme": "0.0.0-nightly-20220610-0420.0",
36
+ "@fluentui/react-utilities": "0.0.0-nightly-20220610-0420.1",
37
37
  "@griffel/react": "1.1.0",
38
38
  "tslib": "^2.1.0"
39
39
  },