@fluentui/react-label 9.0.0-beta.4 → 9.0.0-beta.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. package/CHANGELOG.json +181 -6
  2. package/CHANGELOG.md +48 -7
  3. package/README.md +2 -1
  4. package/Spec.md +33 -40
  5. package/dist/react-label.d.ts +13 -20
  6. package/lib/Label.js.map +1 -1
  7. package/lib/components/Label/Label.js +6 -6
  8. package/lib/components/Label/Label.js.map +1 -1
  9. package/lib/components/Label/Label.types.d.ts +9 -9
  10. package/lib/components/Label/Label.types.js.map +1 -1
  11. package/lib/components/Label/index.js.map +1 -1
  12. package/lib/components/Label/renderLabel.d.ts +1 -1
  13. package/lib/components/Label/renderLabel.js +5 -4
  14. package/lib/components/Label/renderLabel.js.map +1 -1
  15. package/lib/components/Label/useLabel.d.ts +4 -9
  16. package/lib/components/Label/useLabel.js +4 -12
  17. package/lib/components/Label/useLabel.js.map +1 -1
  18. package/lib/components/Label/useLabelStyles.d.ts +1 -1
  19. package/lib/components/Label/useLabelStyles.js +3 -2
  20. package/lib/components/Label/useLabelStyles.js.map +1 -1
  21. package/lib/index.js.map +1 -1
  22. package/lib-commonjs/Label.js.map +1 -1
  23. package/lib-commonjs/components/Label/Label.js +3 -3
  24. package/lib-commonjs/components/Label/Label.js.map +1 -1
  25. package/lib-commonjs/components/Label/Label.types.d.ts +9 -9
  26. package/lib-commonjs/components/Label/Label.types.js.map +1 -1
  27. package/lib-commonjs/components/Label/index.js.map +1 -1
  28. package/lib-commonjs/components/Label/renderLabel.d.ts +1 -1
  29. package/lib-commonjs/components/Label/renderLabel.js +7 -7
  30. package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
  31. package/lib-commonjs/components/Label/useLabel.d.ts +4 -9
  32. package/lib-commonjs/components/Label/useLabel.js +7 -15
  33. package/lib-commonjs/components/Label/useLabel.js.map +1 -1
  34. package/lib-commonjs/components/Label/useLabelStyles.d.ts +1 -1
  35. package/lib-commonjs/components/Label/useLabelStyles.js +9 -7
  36. package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
  37. package/lib-commonjs/index.js.map +1 -1
  38. package/package.json +10 -10
  39. package/lib/common/isConformant.d.ts +0 -4
  40. package/lib/common/isConformant.js +0 -11
  41. package/lib/common/isConformant.js.map +0 -1
  42. package/lib-commonjs/common/isConformant.d.ts +0 -4
  43. package/lib-commonjs/common/isConformant.js +0 -22
  44. package/lib-commonjs/common/isConformant.js.map +0 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,182 @@
2
2
  "name": "@fluentui/react-label",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 25 Nov 2021 08:31:32 GMT",
5
+ "date": "Tue, 01 Mar 2022 02:16:10 GMT",
6
+ "tag": "@fluentui/react-label_v9.0.0-beta.8",
7
+ "version": "9.0.0-beta.8",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-label",
13
+ "commit": "084d7408855f3e52b67cbca172da1acef9dcb98f",
14
+ "comment": "fix: Add react-theme as dependency"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-label",
19
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
20
+ "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
21
+ }
22
+ ],
23
+ "none": [
24
+ {
25
+ "author": "seanmonahan@microsoft.com",
26
+ "package": "@fluentui/react-label",
27
+ "commit": "2b8643c7bc1644ec5c5930f18e28440eeb8c8bd6",
28
+ "comment": "Update react-label README example"
29
+ }
30
+ ]
31
+ }
32
+ },
33
+ {
34
+ "date": "Fri, 18 Feb 2022 13:35:32 GMT",
35
+ "tag": "@fluentui/react-label_v9.0.0-beta.7",
36
+ "version": "9.0.0-beta.7",
37
+ "comments": {
38
+ "prerelease": [
39
+ {
40
+ "author": "lingfangao@hotmail.com",
41
+ "package": "@fluentui/react-label",
42
+ "commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
43
+ "comment": "fix: Source maps contain original source code"
44
+ },
45
+ {
46
+ "author": "beachball",
47
+ "package": "@fluentui/react-label",
48
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
49
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
50
+ },
51
+ {
52
+ "author": "beachball",
53
+ "package": "@fluentui/react-label",
54
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3",
55
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
56
+ }
57
+ ]
58
+ }
59
+ },
60
+ {
61
+ "date": "Thu, 10 Feb 2022 08:51:22 GMT",
62
+ "tag": "@fluentui/react-label_v9.0.0-beta.5",
63
+ "version": "9.0.0-beta.5",
64
+ "comments": {
65
+ "none": [
66
+ {
67
+ "author": "martinhochel@microsoft.com",
68
+ "package": "@fluentui/react-label",
69
+ "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
70
+ "comment": "chore: use storybook runner for all vNext packages"
71
+ },
72
+ {
73
+ "author": "elcraig@microsoft.com",
74
+ "package": "@fluentui/react-label",
75
+ "commit": "d892c7f79c543b6008634ecd669b75b5108cad46",
76
+ "comment": "Relocate comment about props to the correct type, and update spec to accurately reflect props"
77
+ },
78
+ {
79
+ "author": "bsunderhus@microsoft.com",
80
+ "package": "@fluentui/react-label",
81
+ "commit": "c0d4e63ee58e60e2c6674efbacc0783cd520984e",
82
+ "comment": "Updates components with nullRender changes"
83
+ },
84
+ {
85
+ "author": "elcraig@microsoft.com",
86
+ "package": "@fluentui/react-label",
87
+ "commit": "96d9c93544464bcc5ec36b7c5d724b77ae499c73",
88
+ "comment": "Update docs description"
89
+ },
90
+ {
91
+ "author": "andredias@microsoft.com",
92
+ "package": "@fluentui/react-label",
93
+ "commit": "084a7183511bae60a43e57fbd57979349c4736a4",
94
+ "comment": "Migrate package to use solution tsconfigs"
95
+ },
96
+ {
97
+ "author": "olfedias@microsoft.com",
98
+ "package": "@fluentui/react-label",
99
+ "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
100
+ "comment": "remove inline-style-expand-shorthand from tsconfigs"
101
+ }
102
+ ],
103
+ "prerelease": [
104
+ {
105
+ "author": "lingfangao@hotmail.com",
106
+ "package": "@fluentui/react-label",
107
+ "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
108
+ "comment": "Bump Fluent UI dependencies to 9.0.0-rc"
109
+ },
110
+ {
111
+ "author": "olfedias@microsoft.com",
112
+ "package": "@fluentui/react-label",
113
+ "commit": "742c191b7f2ea28505e49304117c090f9f36386c",
114
+ "comment": "Replace make-styles packages with griffel equivalents."
115
+ },
116
+ {
117
+ "author": "mgodbolt@microsoft.com",
118
+ "package": "@fluentui/react-label",
119
+ "commit": "839ec14849e112b85aa321d034739ec421199141",
120
+ "comment": "remove export of commons types"
121
+ },
122
+ {
123
+ "author": "Humberto.Morimoto@microsoft.com",
124
+ "package": "@fluentui/react-label",
125
+ "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
126
+ "comment": "Updating based on changes to composition types."
127
+ },
128
+ {
129
+ "author": "Humberto.Morimoto@microsoft.com",
130
+ "package": "@fluentui/react-label",
131
+ "commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
132
+ "comment": "Using ComponentSlotProps instead of ObjectShorthandProps."
133
+ },
134
+ {
135
+ "author": "behowell@microsoft.com",
136
+ "package": "@fluentui/react-label",
137
+ "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3",
138
+ "comment": "Refactor component Slot typings"
139
+ },
140
+ {
141
+ "author": "Humberto.Morimoto@microsoft.com",
142
+ "package": "@fluentui/react-label",
143
+ "commit": "a052fbc9204600669d32b0ac346032d2cd8d9204",
144
+ "comment": "react-label: Replacing use of functions in makeStyles with direct use of tokens."
145
+ },
146
+ {
147
+ "author": "behowell@microsoft.com",
148
+ "package": "@fluentui/react-label",
149
+ "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
150
+ "comment": "Remove component's shorthandProps array"
151
+ },
152
+ {
153
+ "author": "behowell@microsoft.com",
154
+ "package": "@fluentui/react-label",
155
+ "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
156
+ "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
157
+ },
158
+ {
159
+ "author": "Humberto.Morimoto@microsoft.com",
160
+ "package": "@fluentui/react-label",
161
+ "commit": "00a5d945904c896a0664de6ba72c145a255f0848",
162
+ "comment": "Updating use of tokens.fontWeight now that we don't need to use casting."
163
+ },
164
+ {
165
+ "author": "beachball",
166
+ "package": "@fluentui/react-label",
167
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
168
+ "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
169
+ },
170
+ {
171
+ "author": "beachball",
172
+ "package": "@fluentui/react-label",
173
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1",
174
+ "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
175
+ }
176
+ ]
177
+ }
178
+ },
179
+ {
180
+ "date": "Thu, 25 Nov 2021 08:34:14 GMT",
6
181
  "tag": "@fluentui/react-label_v9.0.0-beta.4",
7
182
  "version": "9.0.0-beta.4",
8
183
  "comments": {
@@ -17,31 +192,31 @@
17
192
  "author": "beachball",
18
193
  "package": "@fluentui/react-label",
19
194
  "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
20
- "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
195
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
21
196
  },
22
197
  {
23
198
  "author": "beachball",
24
199
  "package": "@fluentui/react-label",
25
200
  "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
26
- "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
201
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
27
202
  },
28
203
  {
29
204
  "author": "beachball",
30
205
  "package": "@fluentui/react-label",
31
206
  "comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
32
- "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
207
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
33
208
  },
34
209
  {
35
210
  "author": "beachball",
36
211
  "package": "@fluentui/react-label",
37
212
  "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4",
38
- "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
213
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
39
214
  },
40
215
  {
41
216
  "author": "beachball",
42
217
  "package": "@fluentui/react-label",
43
218
  "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4",
44
- "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
219
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
45
220
  }
46
221
  ]
47
222
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,63 @@
1
1
  # Change Log - @fluentui/react-label
2
2
 
3
- This log was last generated on Thu, 25 Nov 2021 08:31:32 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 01 Mar 2022 02:16:10 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.8)
8
+
9
+ Tue, 01 Mar 2022 02:16:10 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.7..@fluentui/react-label_v9.0.0-beta.8)
11
+
12
+ ### Changes
13
+
14
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
15
+ - Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
16
+
17
+ ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.7)
18
+
19
+ Fri, 18 Feb 2022 13:35:32 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.5..@fluentui/react-label_v9.0.0-beta.7)
21
+
22
+ ### Changes
23
+
24
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
25
+ - Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
26
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
27
+
28
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.5)
29
+
30
+ Thu, 10 Feb 2022 08:51:22 GMT
31
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.4..@fluentui/react-label_v9.0.0-beta.5)
32
+
33
+ ### Changes
34
+
35
+ - Bump Fluent UI dependencies to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
36
+ - Replace make-styles packages with griffel equivalents. ([PR #21430](https://github.com/microsoft/fluentui/pull/21430) by olfedias@microsoft.com)
37
+ - remove export of commons types ([PR #21660](https://github.com/microsoft/fluentui/pull/21660) by mgodbolt@microsoft.com)
38
+ - Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
39
+ - Using ComponentSlotProps instead of ObjectShorthandProps. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
40
+ - Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com)
41
+ - react-label: Replacing use of functions in makeStyles with direct use of tokens. ([PR #21046](https://github.com/microsoft/fluentui/pull/21046) by Humberto.Morimoto@microsoft.com)
42
+ - Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
43
+ - BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
44
+ - Updating use of tokens.fontWeight now that we don't need to use casting. ([PR #21217](https://github.com/microsoft/fluentui/pull/21217) by Humberto.Morimoto@microsoft.com)
45
+ - Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
46
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
47
+
7
48
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.4)
8
49
 
9
- Thu, 25 Nov 2021 08:31:32 GMT
50
+ Thu, 25 Nov 2021 08:34:14 GMT
10
51
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.3..@fluentui/react-label_v9.0.0-beta.4)
11
52
 
12
53
  ### Changes
13
54
 
14
55
  - Add aria-hidden to Label required field ([PR #20680](https://github.com/microsoft/fluentui/pull/20680) by ololubek@microsoft.com)
15
- - Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
16
- - Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
17
- - Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
18
- - Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
19
- - Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
56
+ - Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
57
+ - Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
58
+ - Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
59
+ - Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
60
+ - Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
20
61
 
21
62
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.3)
22
63
 
package/README.md CHANGED
@@ -11,9 +11,10 @@ To use the `Label` component import it from `@fluentui/react-label` and use it a
11
11
  ```tsx
12
12
  import * as React from 'react';
13
13
  import { Label } from '@fluentui/react-label';
14
+ import { useId } from '@fluentui/react-utilities';
14
15
 
15
16
  export const labelExample = () => {
16
- const inputId = React.useId('firstNameLabel');
17
+ const inputId = useId('firstNameLabel-');
17
18
 
18
19
  return (
19
20
  <>
package/Spec.md CHANGED
@@ -75,55 +75,48 @@ The Label component should be simple as shown below. It will just need the text
75
75
  ## API
76
76
 
77
77
  ```ts
78
- /**
79
- * Label Props
80
- */
81
- export type LabelProps = ComponentProps &
82
- React.LabelHTMLAttributes<HTMLElement> & {
83
- /**
84
- * Renders the label as disabled
85
- * @defaultvalue false
86
- */
87
- disabled?: boolean;
88
-
89
- /**
90
- * Whether the associated form field is required or not. If true it will be an asterisk, otherwise it will be what is provided.
91
- * @defaultvalue false
92
- */
93
- required?: boolean | ShorthandProps<ComponentProps>;
78
+ export type LabelCommons = {
79
+ /**
80
+ * Renders the label as disabled
81
+ * @defaultvalue false
82
+ */
83
+ disabled: boolean;
94
84
 
95
- /**
96
- * A label supports different font sizes, see tokens for reference.
97
- * @defaultvalue 'medium'
98
- */
99
- size?: 'small' | 'medium' | 'large';
85
+ /**
86
+ * A label supports different sizes.
87
+ * @defaultvalue 'medium'
88
+ */
89
+ size: 'small' | 'medium' | 'large';
100
90
 
101
- /**
102
- * A label supports semibold/strong fontweight. When size is set to large, label strong will be set by default.
103
- * @defaultvalue false
104
- */
105
- strong?: boolean;
106
- };
91
+ /**
92
+ * A label supports semibold/strong fontweight.
93
+ * @defaultvalue false
94
+ */
95
+ strong: boolean;
96
+ };
107
97
 
108
- /**
109
- * Names of the shorthand properties in LabelProps
110
- */
111
- export type LabelShorthandProps = 'required';
98
+ export type LabelSlots = {
99
+ root: IntrinsicSlotProps<'label'>;
100
+ required?: IntrinsicSlotProps<'span'>;
101
+ };
112
102
 
113
103
  /**
114
- * Names of LabelProps that have a default value in useLabel
104
+ * State used in rendering Label
115
105
  */
116
- export type LabelDefaultedProps = never;
106
+ export type LabelState = ComponentState<LabelSlots> & LabelCommons;
117
107
 
118
108
  /**
119
- * State used in rendering Label
109
+ * Label Props
120
110
  */
121
- export type LabelState = ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
122
- /**
123
- * Ref to the root element
124
- */
125
- ref: React.Ref<HTMLElement>;
126
- };
111
+ export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &
112
+ Partial<LabelCommons> & {
113
+ /**
114
+ * Displays and 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
+ * @defaultvalue false
117
+ */
118
+ required?: boolean | IntrinsicSlotProps<'span'> | React.ReactNode;
119
+ };
127
120
  ```
128
121
 
129
122
  ## Structure
package/dist/react-label.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import type { ComponentProps } from '@fluentui/react-utilities';
2
2
  import type { ComponentState } from '@fluentui/react-utilities';
3
3
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
4
- import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
5
- import type { ObjectShorthandProps } from '@fluentui/react-utilities';
6
4
  import * as React_2 from 'react';
5
+ import type { Slot } from '@fluentui/react-utilities';
7
6
 
8
7
  /**
9
8
  * A label component provides a title or name to a component.
@@ -12,10 +11,7 @@ export declare const Label: ForwardRefComponent<LabelProps>;
12
11
 
13
12
  export declare const labelClassName = "fui-Label";
14
13
 
15
- /**
16
- * Label Props
17
- */
18
- export declare type LabelCommons = {
14
+ declare type LabelCommons = {
19
15
  /**
20
16
  * Renders the label as disabled
21
17
  * @defaultvalue false
@@ -33,24 +29,21 @@ export declare type LabelCommons = {
33
29
  strong: boolean;
34
30
  };
35
31
 
32
+ /**
33
+ * Label Props
34
+ */
36
35
  export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
37
36
  /**
38
37
  * Displays and indicator that the label is for a required field. The required prop can be set to true to display
39
38
  * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
40
39
  * @defaultvalue false
41
40
  */
42
- required?: boolean | ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>> | React_2.ReactNode;
41
+ required?: boolean | Slot<'span'>;
43
42
  };
44
43
 
45
- /**
46
- * Array of all shorthand properties listed in LabelShorthandProps
47
- * {@docCatergory Label}
48
- */
49
- export declare const labelShorthandProps: Array<keyof LabelSlots>;
50
-
51
44
  export declare type LabelSlots = {
52
- root: IntrinsicShorthandProps<'label'>;
53
- required?: IntrinsicShorthandProps<'span'>;
45
+ root: Slot<'label'>;
46
+ required?: Slot<'span'>;
54
47
  };
55
48
 
56
49
  /**
@@ -61,22 +54,22 @@ export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
61
54
  /**
62
55
  * Render the final JSX of Label
63
56
  */
64
- export declare const renderLabel: (state: LabelState) => JSX.Element;
57
+ export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
65
58
 
66
59
  /**
67
60
  * Create the state required to render Label.
68
61
  *
69
- * The returned state can be modified with hooks such as useLabelStyles,
70
- * before being passed to renderLabel.
62
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
63
+ * before being passed to renderLabel_unstable.
71
64
  *
72
65
  * @param props - props from this instance of Label
73
66
  * @param ref - reference to root HTMLElement of Label
74
67
  */
75
- export declare const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
68
+ export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
76
69
 
77
70
  /**
78
71
  * Apply styling to the Label slots based on the state
79
72
  */
80
- export declare const useLabelStyles: (state: LabelState) => LabelState;
73
+ export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
81
74
 
82
75
  export { }
package/lib/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"","sources":["../src/Label.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["Label.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Label/index';\n"]}
package/lib/components/Label/Label.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { useLabel } from './useLabel';
3
- import { renderLabel } from './renderLabel';
4
- import { useLabelStyles } from './useLabelStyles';
2
+ import { useLabel_unstable } from './useLabel';
3
+ import { renderLabel_unstable } from './renderLabel';
4
+ import { useLabelStyles_unstable } from './useLabelStyles';
5
5
  /**
6
6
  * A label component provides a title or name to a component.
7
7
  */
8
8
 
9
9
  export const Label = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const state = useLabel(props, ref);
11
- useLabelStyles(state);
12
- return renderLabel(state);
10
+ const state = useLabel_unstable(props, ref);
11
+ useLabelStyles_unstable(state);
12
+ return renderLabel_unstable(state);
13
13
  });
14
14
  Label.displayName = 'Label';
15
15
  //# sourceMappingURL=Label.js.map
package/lib/components/Label/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AAEA,EAAA,cAAc,CAAC,KAAD,CAAd;AACA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
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;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,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/"}
package/lib/components/Label/Label.types.d.ts CHANGED
@@ -1,9 +1,5 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
2
- import * as React from 'react';
3
- /**
4
- * Label Props
5
- */
6
- export declare type LabelCommons = {
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
+ declare type LabelCommons = {
7
3
  /**
8
4
  * Renders the label as disabled
9
5
  * @defaultvalue false
@@ -21,18 +17,22 @@ export declare type LabelCommons = {
21
17
  strong: boolean;
22
18
  };
23
19
  export declare type LabelSlots = {
24
- root: IntrinsicShorthandProps<'label'>;
25
- required?: IntrinsicShorthandProps<'span'>;
20
+ root: Slot<'label'>;
21
+ required?: Slot<'span'>;
26
22
  };
27
23
  /**
28
24
  * State used in rendering Label
29
25
  */
30
26
  export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
27
+ /**
28
+ * Label Props
29
+ */
31
30
  export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
32
31
  /**
33
32
  * Displays and indicator that the label is for a required field. The required prop can be set to true to display
34
33
  * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
35
34
  * @defaultvalue false
36
35
  */
37
- required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
36
+ required?: boolean | Slot<'span'>;
38
37
  };
38
+ export {};
package/lib/components/Label/Label.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.types.js","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ntype LabelCommons = {\n /**\n * Renders the label as disabled\n * @defaultvalue false\n */\n disabled: boolean;\n\n /**\n * A label supports different sizes.\n * @defaultvalue 'medium'\n */\n size: 'small' | 'medium' | 'large';\n\n /**\n * A label supports semibold/strong fontweight.\n * @defaultvalue false\n */\n strong: boolean;\n};\n\nexport type LabelSlots = {\n root: Slot<'label'>;\n required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & LabelCommons;\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &\n Partial<LabelCommons> & {\n /**\n * Displays and indicator that the label is for a required field. The required prop can be set to true to display\n * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n * @defaultvalue false\n */\n required?: boolean | Slot<'span'>;\n };\n"]}
package/lib/components/Label/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
package/lib/components/Label/renderLabel.d.ts CHANGED
@@ -2,4 +2,4 @@ import type { LabelState } from './Label.types';
2
2
  /**
3
3
  * Render the final JSX of Label
4
4
  */
5
- export declare const renderLabel: (state: LabelState) => JSX.Element;
5
+ export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
package/lib/components/Label/renderLabel.js CHANGED
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import { getSlots } from '@fluentui/react-utilities';
3
- import { labelShorthandProps } from './useLabel';
4
3
  /**
5
4
  * Render the final JSX of Label
6
5
  */
7
6
 
8
- export const renderLabel = state => {
7
+ export const renderLabel_unstable = state => {
9
8
  const {
10
9
  slots,
11
10
  slotProps
12
- } = getSlots(state, labelShorthandProps);
13
- return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), state.root.children, /*#__PURE__*/React.createElement(slots.required, Object.assign({}, slotProps.required)));
11
+ } = getSlots(state);
12
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
+ }, state.root.children, slots.required && /*#__PURE__*/React.createElement(slots.required, { ...slotProps.required
14
+ }));
14
15
  };
15
16
  //# sourceMappingURL=renderLabel.js.map
package/lib/components/Label/renderLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,mBAAT,QAAoC,YAApC;AAGA;;AAEG;;AACH,OAAO,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,EAAoB,mBAApB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFF,CADF;AAMD,CATM","sourceRoot":""}
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;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,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/"}
package/lib/components/Label/useLabel.d.ts CHANGED
@@ -1,17 +1,12 @@
1
1
  import * as React from 'react';
2
- import type { LabelProps, LabelSlots, LabelState } from './Label.types';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
- export declare const labelShorthandProps: Array<keyof LabelSlots>;
2
+ import type { LabelProps, LabelState } from './Label.types';
8
3
  /**
9
4
  * Create the state required to render Label.
10
5
  *
11
- * The returned state can be modified with hooks such as useLabelStyles,
12
- * before being passed to renderLabel.
6
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
7
+ * before being passed to renderLabel_unstable.
13
8
  *
14
9
  * @param props - props from this instance of Label
15
10
  * @param ref - reference to root HTMLElement of Label
16
11
  */
17
- export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
12
+ export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
package/lib/components/Label/useLabel.js CHANGED
@@ -1,22 +1,16 @@
1
1
  import { getNativeElementProps } from '@fluentui/react-utilities';
2
2
  import { resolveShorthand } from '@fluentui/react-utilities';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
-
8
- export const labelShorthandProps = ['root', 'required'];
9
3
  /**
10
4
  * Create the state required to render Label.
11
5
  *
12
- * The returned state can be modified with hooks such as useLabelStyles,
13
- * before being passed to renderLabel.
6
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
7
+ * before being passed to renderLabel_unstable.
14
8
  *
15
9
  * @param props - props from this instance of Label
16
10
  * @param ref - reference to root HTMLElement of Label
17
11
  */
18
12
 
19
- export const useLabel = (props, ref) => {
13
+ export const useLabel_unstable = (props, ref) => {
20
14
  const {
21
15
  disabled = false,
22
16
  required = false,
@@ -25,10 +19,8 @@ export const useLabel = (props, ref) => {
25
19
  } = props;
26
20
  return {
27
21
  disabled,
28
- required: resolveShorthand(required === false ? null : required, {
29
- required: !!required,
22
+ required: resolveShorthand(required === true ? '*' : required || undefined, {
30
23
  defaultProps: {
31
- children: '*',
32
24
  'aria-hidden': 'true'
33
25
  }
34
26
  }),
package/lib/components/Label/useLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;AAGG;;AACH,OAAO,MAAM,mBAAmB,GAA4B,CAAC,MAAD,EAAS,UAAT,CAArD;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AACrF,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7B,EAAuC;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,GAAZ;AAAiB,uBAAe;AAAhC;AAFiD,KAAvC,CAFrB;AAML,IAAA,MANK;AAOL,IAAA,IAPK;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AATtB,GAAP;AAWD,CAbM","sourceRoot":""}
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;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvC,EAAkD;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlD,CAFrB;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AARtB,GAAP;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, strong = false, size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n strong,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Label/useLabelStyles.d.ts CHANGED
@@ -3,4 +3,4 @@ export declare const labelClassName = "fui-Label";
3
3
  /**
4
4
  * Apply styling to the Label slots based on the state
5
5
  */
6
- export declare const useLabelStyles: (state: LabelState) => LabelState;
6
+ export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
package/lib/components/Label/useLabelStyles.js CHANGED
@@ -1,4 +1,5 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
2
3
  export const labelClassName = 'fui-Label';
3
4
  /**
4
5
  * Styles for the label
@@ -40,7 +41,7 @@ const useStyles = /*#__PURE__*/__styles({
40
41
  */
41
42
 
42
43
 
43
- export const useLabelStyles = state => {
44
+ export const useLabelStyles_unstable = state => {
44
45
  const styles = useStyles();
45
46
  state.root.className = mergeClasses(labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
46
47
 
package/lib/components/Label/useLabelStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,MAAM,cAAc,GAAI,KAAD,IAAkC;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelState } from './Label.types';\n\nexport const labelClassName = 'fui-Label';\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 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 strong: {\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 labelClassName,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
package/lib-commonjs/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Label.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["Label.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Label/index';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Label/Label.js CHANGED
@@ -18,9 +18,9 @@ const useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
18
18
 
19
19
 
20
20
  exports.Label = /*#__PURE__*/React.forwardRef((props, ref) => {
21
- const state = useLabel_1.useLabel(props, ref);
22
- useLabelStyles_1.useLabelStyles(state);
23
- return renderLabel_1.renderLabel(state);
21
+ const state = useLabel_1.useLabel_unstable(props, ref);
22
+ useLabelStyles_1.useLabelStyles_unstable(state);
23
+ return renderLabel_1.renderLabel_unstable(state);
24
24
  });
25
25
  exports.Label.displayName = 'Label';
26
26
  //# sourceMappingURL=Label.js.map
package/lib-commonjs/components/Label/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/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;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,QAAA,CAAS,KAAT,EAAgB,GAAhB,CAAd;AAEA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AACA,SAAO,aAAA,CAAA,WAAA,CAAY,KAAZ,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}
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;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,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/"}
package/lib-commonjs/components/Label/Label.types.d.ts CHANGED
@@ -1,9 +1,5 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
2
- import * as React from 'react';
3
- /**
4
- * Label Props
5
- */
6
- export declare type LabelCommons = {
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
+ declare type LabelCommons = {
7
3
  /**
8
4
  * Renders the label as disabled
9
5
  * @defaultvalue false
@@ -21,18 +17,22 @@ export declare type LabelCommons = {
21
17
  strong: boolean;
22
18
  };
23
19
  export declare type LabelSlots = {
24
- root: IntrinsicShorthandProps<'label'>;
25
- required?: IntrinsicShorthandProps<'span'>;
20
+ root: Slot<'label'>;
21
+ required?: Slot<'span'>;
26
22
  };
27
23
  /**
28
24
  * State used in rendering Label
29
25
  */
30
26
  export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
27
+ /**
28
+ * Label Props
29
+ */
31
30
  export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
32
31
  /**
33
32
  * Displays and indicator that the label is for a required field. The required prop can be set to true to display
34
33
  * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
35
34
  * @defaultvalue false
36
35
  */
37
- required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
36
+ required?: boolean | Slot<'span'>;
38
37
  };
38
+ export {};
package/lib-commonjs/components/Label/Label.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
package/lib-commonjs/components/Label/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Label/renderLabel.d.ts CHANGED
@@ -2,4 +2,4 @@ import type { LabelState } from './Label.types';
2
2
  /**
3
3
  * Render the final JSX of Label
4
4
  */
5
- export declare const renderLabel: (state: LabelState) => JSX.Element;
5
+ export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
package/lib-commonjs/components/Label/renderLabel.js CHANGED
@@ -3,25 +3,25 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderLabel = void 0;
6
+ exports.renderLabel_unstable = void 0;
7
7
 
8
8
  const React = /*#__PURE__*/require("react");
9
9
 
10
10
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
- const useLabel_1 = /*#__PURE__*/require("./useLabel");
13
11
  /**
14
12
  * Render the final JSX of Label
15
13
  */
16
14
 
17
15
 
18
- const renderLabel = state => {
16
+ const renderLabel_unstable = state => {
19
17
  const {
20
18
  slots,
21
19
  slotProps
22
- } = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps);
23
- return React.createElement(slots.root, Object.assign({}, slotProps.root), state.root.children, React.createElement(slots.required, Object.assign({}, slotProps.required)));
20
+ } = react_utilities_1.getSlots(state);
21
+ return React.createElement(slots.root, { ...slotProps.root
22
+ }, state.root.children, slots.required && React.createElement(slots.required, { ...slotProps.required
23
+ }));
24
24
  };
25
25
 
26
- exports.renderLabel = renderLabel;
26
+ exports.renderLabel_unstable = renderLabel_unstable;
27
27
  //# sourceMappingURL=renderLabel.js.map
package/lib-commonjs/components/Label/renderLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}
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;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,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/"}
package/lib-commonjs/components/Label/useLabel.d.ts CHANGED
@@ -1,17 +1,12 @@
1
1
  import * as React from 'react';
2
- import type { LabelProps, LabelSlots, LabelState } from './Label.types';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
- export declare const labelShorthandProps: Array<keyof LabelSlots>;
2
+ import type { LabelProps, LabelState } from './Label.types';
8
3
  /**
9
4
  * Create the state required to render Label.
10
5
  *
11
- * The returned state can be modified with hooks such as useLabelStyles,
12
- * before being passed to renderLabel.
6
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
7
+ * before being passed to renderLabel_unstable.
13
8
  *
14
9
  * @param props - props from this instance of Label
15
10
  * @param ref - reference to root HTMLElement of Label
16
11
  */
17
- export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
12
+ export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
package/lib-commonjs/components/Label/useLabel.js CHANGED
@@ -3,29 +3,23 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useLabel = exports.labelShorthandProps = void 0;
6
+ exports.useLabel_unstable = void 0;
7
7
 
8
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
 
10
10
  const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
11
- /**
12
- * Array of all shorthand properties listed in LabelShorthandProps
13
- * {@docCatergory Label}
14
- */
15
-
16
-
17
- exports.labelShorthandProps = ['root', 'required'];
18
11
  /**
19
12
  * Create the state required to render Label.
20
13
  *
21
- * The returned state can be modified with hooks such as useLabelStyles,
22
- * before being passed to renderLabel.
14
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
15
+ * before being passed to renderLabel_unstable.
23
16
  *
24
17
  * @param props - props from this instance of Label
25
18
  * @param ref - reference to root HTMLElement of Label
26
19
  */
27
20
 
28
- const useLabel = (props, ref) => {
21
+
22
+ const useLabel_unstable = (props, ref) => {
29
23
  const {
30
24
  disabled = false,
31
25
  required = false,
@@ -34,10 +28,8 @@ const useLabel = (props, ref) => {
34
28
  } = props;
35
29
  return {
36
30
  disabled,
37
- required: react_utilities_2.resolveShorthand(required === false ? null : required, {
38
- required: !!required,
31
+ required: react_utilities_2.resolveShorthand(required === true ? '*' : required || undefined, {
39
32
  defaultProps: {
40
- children: '*',
41
33
  'aria-hidden': 'true'
42
34
  }
43
35
  }),
@@ -54,5 +46,5 @@ const useLabel = (props, ref) => {
54
46
  };
55
47
  };
56
48
 
57
- exports.useLabel = useLabel;
49
+ exports.useLabel_unstable = useLabel_unstable;
58
50
  //# sourceMappingURL=useLabel.js.map
package/lib-commonjs/components/Label/useLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,EAAS,UAAT,CAA/C;AAEb;;;;;;;;AAQG;;AACI,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AACrF,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7C,EAAuD;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,GAAZ;AAAiB,uBAAe;AAAhC;AAFiD,KAAvD,CAFL;AAML,IAAA,MANK;AAOL,IAAA,IAPK;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA/B;AATD,GAAP;AAWD,CAbM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}
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;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvD,EAAkE;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlE,CAFL;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA/B;AARD,GAAP;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, strong = false, size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n strong,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Label/useLabelStyles.d.ts CHANGED
@@ -3,4 +3,4 @@ export declare const labelClassName = "fui-Label";
3
3
  /**
4
4
  * Apply styling to the Label slots based on the state
5
5
  */
6
- export declare const useLabelStyles: (state: LabelState) => LabelState;
6
+ export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
package/lib-commonjs/components/Label/useLabelStyles.js CHANGED
@@ -3,16 +3,18 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useLabelStyles = exports.labelClassName = void 0;
6
+ exports.useLabelStyles_unstable = exports.labelClassName = void 0;
7
7
 
8
- const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
11
 
10
12
  exports.labelClassName = 'fui-Label';
11
13
  /**
12
14
  * Styles for the label
13
15
  */
14
16
 
15
- const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
17
+ const useStyles = /*#__PURE__*/react_1.__styles({
16
18
  "root": {
17
19
  "Bahqtrf": "fk6fouc",
18
20
  "sj55zd": "f19n0e5"
@@ -48,16 +50,16 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
48
50
  */
49
51
 
50
52
 
51
- const useLabelStyles = state => {
53
+ const useLabelStyles_unstable = state => {
52
54
  const styles = useStyles();
53
- state.root.className = react_make_styles_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
55
+ state.root.className = react_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
54
56
 
55
57
  if (state.required) {
56
- state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
58
+ state.required.className = react_1.mergeClasses(styles.required, state.required.className);
57
59
  }
58
60
 
59
61
  return state;
60
62
  };
61
63
 
62
- exports.useLabelStyles = useLabelStyles;
64
+ exports.useLabelStyles_unstable = useLabelStyles_unstable;
63
65
  //# sourceMappingURL=useLabelStyles.js.map
package/lib-commonjs/components/Label/useLabelStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,MAAM,cAAc,GAAI,KAAD,IAAkC;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
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;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelState } from './Label.types';\n\nexport const labelClassName = 'fui-Label';\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 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 strong: {\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 labelClassName,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAEA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAEA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fluentui/react-label",
3
- "version": "9.0.0-beta.4",
4
- "description": "Label component for FluentUI library.",
3
+ "version": "9.0.0-beta.8",
4
+ "description": "Fluent UI React Label component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
7
  "typings": "lib/index.d.ts",
@@ -19,17 +19,16 @@
19
19
  "just": "just-scripts",
20
20
  "lint": "just-scripts lint",
21
21
  "start": "yarn storybook",
22
- "test": "jest",
22
+ "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-label/src && yarn docs",
25
- "storybook": "start-storybook"
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-label/src && yarn docs",
25
+ "storybook": "node ../../scripts/storybook/runner",
26
+ "type-check": "tsc -b tsconfig.json"
26
27
  },
27
28
  "devDependencies": {
28
- "@fluentui/babel-make-styles": "9.0.0-beta.4",
29
29
  "@fluentui/eslint-plugin": "*",
30
- "@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
31
30
  "@fluentui/react-conformance": "*",
32
- "@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
33
32
  "@fluentui/scripts": "^1.0.0",
34
33
  "@types/enzyme": "3.10.3",
35
34
  "@types/enzyme-adapter-react-16": "1.0.3",
@@ -43,8 +42,9 @@
43
42
  "react-test-renderer": "^16.3.0"
44
43
  },
45
44
  "dependencies": {
46
- "@fluentui/react-make-styles": "9.0.0-beta.4",
47
- "@fluentui/react-utilities": "9.0.0-beta.4",
45
+ "@fluentui/react-theme": "9.0.0-rc.3",
46
+ "@fluentui/react-utilities": "9.0.0-rc.4",
47
+ "@griffel/react": "1.0.0",
48
48
  "tslib": "^2.1.0"
49
49
  },
50
50
  "peerDependencies": {
package/lib/common/isConformant.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import type { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
package/lib/common/isConformant.js DELETED
@@ -1,11 +0,0 @@
1
- import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
2
- import makeStylesTests from '@fluentui/react-conformance-make-styles';
3
- export function isConformant(testInfo) {
4
- const defaultOptions = {
5
- asPropHandlesRef: true,
6
- componentPath: module.parent.filename.replace('.test', ''),
7
- extraTests: makeStylesTests
8
- };
9
- baseIsConformant(defaultOptions, testInfo);
10
- }
11
- //# sourceMappingURL=isConformant.js.map
package/lib/common/isConformant.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,QAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}
package/lib-commonjs/common/isConformant.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import type { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
package/lib-commonjs/common/isConformant.js DELETED
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.isConformant = void 0;
7
-
8
- const react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
9
-
10
- const react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
11
-
12
- function isConformant(testInfo) {
13
- const defaultOptions = {
14
- asPropHandlesRef: true,
15
- componentPath: module.parent.filename.replace('.test', ''),
16
- extraTests: react_conformance_make_styles_1.default
17
- };
18
- react_conformance_1.isConformant(defaultOptions, testInfo);
19
- }
20
-
21
- exports.isConformant = isConformant;
22
- //# sourceMappingURL=isConformant.js.map
package/lib-commonjs/common/isConformant.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,MAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,QAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,+BAAA,CAAA;AAH+C,GAA7D;AAMA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAVD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}