@fluentui/react-label 9.0.0-rc.5 → 9.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +98 -1
- package/CHANGELOG.md +38 -2
- package/MIGRATION.md +19 -6
- package/README.md +12 -4
- package/Spec.md +26 -67
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Label/renderLabel.js.map +1 -1
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/components/Label/Label.js.map +1 -1
- package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -8
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,104 @@
|
|
2
2
|
"name": "@fluentui/react-label",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "Tue,
|
5
|
+
"date": "Tue, 28 Jun 2022 17:37:49 GMT",
|
6
|
+
"tag": "@fluentui/react-label_v9.0.1",
|
7
|
+
"version": "9.0.1",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "lingfangao@hotmail.com",
|
12
|
+
"package": "@fluentui/react-label",
|
13
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
|
14
|
+
"comment": "fix: Use caret dependency range for Griffel"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-label",
|
19
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
|
20
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
21
|
+
}
|
22
|
+
]
|
23
|
+
}
|
24
|
+
},
|
25
|
+
{
|
26
|
+
"date": "Tue, 28 Jun 2022 15:13:38 GMT",
|
27
|
+
"tag": "@fluentui/react-label_v9.0.0",
|
28
|
+
"version": "9.0.0",
|
29
|
+
"comments": {
|
30
|
+
"prerelease": [
|
31
|
+
{
|
32
|
+
"author": "lingfangao@hotmail.com",
|
33
|
+
"package": "@fluentui/react-label",
|
34
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
35
|
+
"comment": "Bump Griffel dependencies"
|
36
|
+
},
|
37
|
+
{
|
38
|
+
"author": "lingfangao@hotmail.com",
|
39
|
+
"package": "@fluentui/react-label",
|
40
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
41
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
42
|
+
}
|
43
|
+
],
|
44
|
+
"none": [
|
45
|
+
{
|
46
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
47
|
+
"package": "@fluentui/react-label",
|
48
|
+
"commit": "4ae21ade4ca5a355bf891ca4e023512385c1a0bf",
|
49
|
+
"comment": "docs: README, spec and migration guide cleanup for react-label."
|
50
|
+
},
|
51
|
+
{
|
52
|
+
"author": "tristan.watanabe@gmail.com",
|
53
|
+
"package": "@fluentui/react-label",
|
54
|
+
"commit": "57e13311818a89aa3e14ef95f2a6df0a8ea6dead",
|
55
|
+
"comment": "chore: Move Label stories to folder with index entry."
|
56
|
+
}
|
57
|
+
],
|
58
|
+
"patch": [
|
59
|
+
{
|
60
|
+
"author": "lingfangao@hotmail.com",
|
61
|
+
"package": "@fluentui/react-label",
|
62
|
+
"commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
|
63
|
+
"comment": "feat: Initial 9.0.0 release"
|
64
|
+
},
|
65
|
+
{
|
66
|
+
"author": "beachball",
|
67
|
+
"package": "@fluentui/react-label",
|
68
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0",
|
69
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
70
|
+
},
|
71
|
+
{
|
72
|
+
"author": "beachball",
|
73
|
+
"package": "@fluentui/react-label",
|
74
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0",
|
75
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
76
|
+
},
|
77
|
+
{
|
78
|
+
"author": "beachball",
|
79
|
+
"package": "@fluentui/react-label",
|
80
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
|
81
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
82
|
+
}
|
83
|
+
]
|
84
|
+
}
|
85
|
+
},
|
86
|
+
{
|
87
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
88
|
+
"tag": "@fluentui/react-label_v9.0.0-rc.6",
|
89
|
+
"version": "9.0.0-rc.6",
|
90
|
+
"comments": {
|
91
|
+
"prerelease": [
|
92
|
+
{
|
93
|
+
"author": "beachball",
|
94
|
+
"package": "@fluentui/react-label",
|
95
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
96
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
97
|
+
}
|
98
|
+
]
|
99
|
+
}
|
100
|
+
},
|
101
|
+
{
|
102
|
+
"date": "Tue, 31 May 2022 21:28:39 GMT",
|
6
103
|
"tag": "@fluentui/react-label_v9.0.0-rc.5",
|
7
104
|
"version": "9.0.0-rc.5",
|
8
105
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,48 @@
|
|
1
1
|
# Change Log - @fluentui/react-label
|
2
2
|
|
3
|
-
This log was last generated on Tue,
|
3
|
+
This log was last generated on Tue, 28 Jun 2022 17:37:49 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.1)
|
8
|
+
|
9
|
+
Tue, 28 Jun 2022 17:37:49 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0..@fluentui/react-label_v9.0.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
|
15
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
16
|
+
|
17
|
+
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0)
|
18
|
+
|
19
|
+
Tue, 28 Jun 2022 15:13:38 GMT
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.6..@fluentui/react-label_v9.0.0)
|
21
|
+
|
22
|
+
### Patches
|
23
|
+
|
24
|
+
- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
|
25
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
26
|
+
- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
28
|
+
|
29
|
+
### Changes
|
30
|
+
|
31
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
32
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
33
|
+
|
34
|
+
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.6)
|
35
|
+
|
36
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
37
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.5..@fluentui/react-label_v9.0.0-rc.6)
|
38
|
+
|
39
|
+
### Changes
|
40
|
+
|
41
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
42
|
+
|
7
43
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.5)
|
8
44
|
|
9
|
-
Tue, 31 May 2022 21:
|
45
|
+
Tue, 31 May 2022 21:28:39 GMT
|
10
46
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.4..@fluentui/react-label_v9.0.0-rc.5)
|
11
47
|
|
12
48
|
### Changes
|
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
|
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
|
-
**
|
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
|
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
|
-
|
20
|
-
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
36
|
-
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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
|
-
|
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
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
1
|
+
{"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles';\nimport type { LabelProps } from './Label.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label: ForwardRefComponent<LabelProps> = React.forwardRef((props, ref) => {\n const state = useLabel_unstable(props, ref);\n\n useLabelStyles_unstable(state);\n return renderLabel_unstable(state);\n});\n\nLabel.displayName = 'Label';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;
|
1
|
+
{"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAFrB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LabelState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelState) => {\n const { slots, slotProps } = getSlots<LabelSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.root.children}\n {slots.required && <slots.required {...slotProps.required} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;
|
1
|
+
{"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,QAAQ,GAAG,KAA/B;IAAsC,MAAM,GAAG,SAA/C;IAA0D,IAAI,GAAG;EAAjE,IAA8E,KAApF;EACA,OAAO;IACL,QADK;IAEL,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvC,EAAkD;MAC1E,YAAY,EAAE;QAAE,eAAe;MAAjB;IAD4D,CAAlD,CAFrB;IAKL,MALK;IAML,IANK;IAOL,UAAU,EAAE;MAAE,IAAI,EAAE,OAAR;MAAiB,QAAQ,EAAE;IAA3B,CAPP;IAQL,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;MAAE,GAAF;MAAO,GAAG;IAAV,CAAV;EARtB,CAAP;AAUD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n weight,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,eAAe,GAA+B;
|
1
|
+
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,QAAQ,EAAE;AAF+C,CAApD;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAwCA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QALL,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,eAAe,CAAC,QADqB,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,gBAHY,EAIrC,KAAK,CAAC,QAAN,CAAe,SAJsB,CAAvC;EAMD;;EAED,OAAO,KAAP;AACD,CArBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: '4px', // TODO: Once spacing tokens are added, change this to Horizontal XS\n },\n\n requiredDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.requiredDisabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
1
|
+
{"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles';\nimport type { LabelProps } from './Label.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label: ForwardRefComponent<LabelProps> = React.forwardRef((props, ref) => {\n const state = useLabel_unstable(props, ref);\n\n useLabelStyles_unstable(state);\n return renderLabel_unstable(state);\n});\n\nLabel.displayName = 'Label';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;
|
1
|
+
{"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAFrB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LabelState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelState) => {\n const { slots, slotProps } = getSlots<LabelSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.root.children}\n {slots.required && <slots.required {...slotProps.required} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;
|
1
|
+
{"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,QAAQ,GAAG,KAA/B;IAAsC,MAAM,GAAG,SAA/C;IAA0D,IAAI,GAAG;EAAjE,IAA8E,KAApF;EACA,OAAO;IACL,QADK;IAEL,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvD,EAAkE;MAC1E,YAAY,EAAE;QAAE,eAAe;MAAjB;IAD4D,CAAlE,CAFL;IAKL,MALK;IAML,IANK;IAOL,UAAU,EAAE;MAAE,IAAI,EAAE,OAAR;MAAiB,QAAQ,EAAE;IAA3B,CAPP;IAQL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;MAAE,GAAF;MAAO,GAAG;IAAV,CAA/B;EARD,CAAP;AAUD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n weight,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;
|
1
|
+
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,QAAQ,EAAE;AAF+C,CAA9C;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAwCA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QALjB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EASA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,eAAA,CAAgB,QADS,EAEzB,MAAM,CAAC,QAFkB,EAGzB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,gBAHA,EAIzB,KAAK,CAAC,QAAN,CAAe,SAJU,CAA3B;EAMD;;EAED,OAAO,KAAP;AACD,CArBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: '4px', // TODO: Once spacing tokens are added, change this to Horizontal XS\n },\n\n requiredDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.requiredDisabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-label",
|
3
|
-
"version": "9.0.
|
3
|
+
"version": "9.0.1",
|
4
4
|
"description": "Fluent UI React Label component",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -28,13 +28,13 @@
|
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.10",
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
|
-
"@fluentui/react-theme": "9.0.0
|
36
|
-
"@fluentui/react-utilities": "9.0.0
|
37
|
-
"@griffel/react": "1.
|
35
|
+
"@fluentui/react-theme": "^9.0.0",
|
36
|
+
"@fluentui/react-utilities": "^9.0.0",
|
37
|
+
"@griffel/react": "^1.2.0",
|
38
38
|
"tslib": "^2.1.0"
|
39
39
|
},
|
40
40
|
"peerDependencies": {
|
@@ -45,9 +45,7 @@
|
|
45
45
|
},
|
46
46
|
"beachball": {
|
47
47
|
"disallowedChangeTypes": [
|
48
|
-
"major"
|
49
|
-
"minor",
|
50
|
-
"patch"
|
48
|
+
"major"
|
51
49
|
]
|
52
50
|
},
|
53
51
|
"exports": {
|