@fluentui/react-label 9.0.0-alpha.8 → 9.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/CHANGELOG.json +1624 -1
  2. package/CHANGELOG.md +561 -2
  3. package/README.md +2 -1
  4. package/Spec.md +23 -33
  5. package/dist/react-label.d.ts +34 -52
  6. package/lib/components/Label/Label.d.ts +3 -4
  7. package/lib/components/Label/Label.js +8 -8
  8. package/lib/components/Label/Label.js.map +1 -1
  9. package/lib/components/Label/Label.types.d.ts +20 -35
  10. package/lib/components/Label/Label.types.js.map +1 -1
  11. package/lib/components/Label/renderLabel.d.ts +2 -3
  12. package/lib/components/Label/renderLabel.js +9 -8
  13. package/lib/components/Label/renderLabel.js.map +1 -1
  14. package/lib/components/Label/useLabel.d.ts +4 -12
  15. package/lib/components/Label/useLabel.js +30 -42
  16. package/lib/components/Label/useLabel.js.map +1 -1
  17. package/lib/components/Label/useLabelStyles.d.ts +8 -2
  18. package/lib/components/Label/useLabelStyles.js +53 -37
  19. package/lib/components/Label/useLabelStyles.js.map +1 -1
  20. package/lib/index.d.ts +2 -2
  21. package/lib/index.js +2 -1
  22. package/lib/index.js.map +1 -1
  23. package/lib/tsdoc-metadata.json +1 -1
  24. package/lib-commonjs/Label.js +7 -2
  25. package/lib-commonjs/Label.js.map +1 -1
  26. package/lib-commonjs/components/Label/Label.d.ts +3 -4
  27. package/lib-commonjs/components/Label/Label.js +18 -10
  28. package/lib-commonjs/components/Label/Label.js.map +1 -1
  29. package/lib-commonjs/components/Label/Label.types.d.ts +20 -35
  30. package/lib-commonjs/components/Label/Label.types.js +4 -1
  31. package/lib-commonjs/components/Label/Label.types.js.map +1 -1
  32. package/lib-commonjs/components/Label/index.js +11 -2
  33. package/lib-commonjs/components/Label/index.js.map +1 -1
  34. package/lib-commonjs/components/Label/renderLabel.d.ts +2 -3
  35. package/lib-commonjs/components/Label/renderLabel.js +21 -13
  36. package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
  37. package/lib-commonjs/components/Label/useLabel.d.ts +4 -12
  38. package/lib-commonjs/components/Label/useLabel.js +40 -45
  39. package/lib-commonjs/components/Label/useLabel.js.map +1 -1
  40. package/lib-commonjs/components/Label/useLabelStyles.d.ts +8 -2
  41. package/lib-commonjs/components/Label/useLabelStyles.js +63 -40
  42. package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
  43. package/lib-commonjs/index.d.ts +2 -2
  44. package/lib-commonjs/index.js +45 -3
  45. package/lib-commonjs/index.js.map +1 -1
  46. package/package.json +23 -23
  47. package/config/api-extractor.json +0 -3
  48. package/config/tests.js +0 -7
  49. package/etc/react-label.api.md +0 -51
  50. package/just.config.ts +0 -3
  51. package/lib/common/isConformant.d.ts +0 -4
  52. package/lib/common/isConformant.js +0 -9
  53. package/lib/common/isConformant.js.map +0 -1
  54. package/lib-amd/Label.d.ts +0 -1
  55. package/lib-amd/Label.js +0 -6
  56. package/lib-amd/Label.js.map +0 -1
  57. package/lib-amd/common/isConformant.d.ts +0 -4
  58. package/lib-amd/common/isConformant.js +0 -14
  59. package/lib-amd/common/isConformant.js.map +0 -1
  60. package/lib-amd/components/Label/Label.d.ts +0 -7
  61. package/lib-amd/components/Label/Label.js +0 -16
  62. package/lib-amd/components/Label/Label.js.map +0 -1
  63. package/lib-amd/components/Label/Label.types.d.ts +0 -53
  64. package/lib-amd/components/Label/Label.types.js +0 -5
  65. package/lib-amd/components/Label/Label.types.js.map +0 -1
  66. package/lib-amd/components/Label/index.d.ts +0 -5
  67. package/lib-amd/components/Label/index.js +0 -10
  68. package/lib-amd/components/Label/index.js.map +0 -1
  69. package/lib-amd/components/Label/renderLabel.d.ts +0 -6
  70. package/lib-amd/components/Label/renderLabel.js +0 -17
  71. package/lib-amd/components/Label/renderLabel.js.map +0 -1
  72. package/lib-amd/components/Label/useLabel.d.ts +0 -20
  73. package/lib-amd/components/Label/useLabel.js +0 -55
  74. package/lib-amd/components/Label/useLabel.js.map +0 -1
  75. package/lib-amd/components/Label/useLabelStyles.d.ts +0 -5
  76. package/lib-amd/components/Label/useLabelStyles.js +0 -51
  77. package/lib-amd/components/Label/useLabelStyles.js.map +0 -1
  78. package/lib-amd/index.d.ts +0 -2
  79. package/lib-amd/index.js +0 -6
  80. package/lib-amd/index.js.map +0 -1
  81. package/lib-commonjs/common/isConformant.d.ts +0 -4
  82. package/lib-commonjs/common/isConformant.js +0 -13
  83. package/lib-commonjs/common/isConformant.js.map +0 -1
  84. package/src/components/Label/Label.types.ts +0 -61
@@ -1,50 +1,73 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useLabelStyles = void 0;
4
- var react_make_styles_1 = require("@fluentui/react-make-styles");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useLabelStyles_unstable = exports.labelClassNames = exports.labelClassName = void 0;
7
+
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
+ /**
12
+ * @deprecated Use `labelClassNames.root` instead.
13
+ */
14
+
15
+
16
+ exports.labelClassName = 'fui-Label';
17
+ exports.labelClassNames = {
18
+ root: 'fui-Label',
19
+ required: 'fui-Label__required'
20
+ };
5
21
  /**
6
22
  * Styles for the label
7
23
  */
8
- var useStyles = react_make_styles_1.makeStyles({
9
- root: function (theme) { return ({
10
- fontFamily: theme.global.type.fontFamilies.base,
11
- fontSize: theme.global.type.fontSizes.base[300],
12
- color: theme.alias.color.neutral.neutralForeground1,
13
- display: 'inline-flex',
14
- alignItems: 'flex-end',
15
- }); },
16
- disabled: function (theme) { return ({
17
- color: theme.alias.color.neutral.neutralForegroundDisabled,
18
- }); },
19
- required: function (theme) { return ({
20
- color: theme.alias.color.red.foreground3,
21
- // TODO: Once spacing tokens are added, change this to Horizontal XS
22
- paddingLeft: '4px',
23
- }); },
24
- small: function (theme) { return ({
25
- fontSize: theme.global.type.fontSizes.base[200],
26
- }); },
27
- medium: function (theme) { return ({
28
- fontSize: theme.global.type.fontSizes.base[300],
29
- }); },
30
- large: function (theme) { return ({
31
- fontSize: theme.global.type.fontSizes.base[400],
32
- fontWeight: theme.global.type.fontWeights.semibold,
33
- }); },
34
- strong: function (theme) { return ({
35
- fontWeight: theme.global.type.fontWeights.semibold,
36
- }); },
24
+
25
+ const useStyles = /*#__PURE__*/react_1.__styles({
26
+ "root": {
27
+ "Bahqtrf": "fk6fouc",
28
+ "sj55zd": "f19n0e5"
29
+ },
30
+ "disabled": {
31
+ "sj55zd": "f1s2aq7o"
32
+ },
33
+ "required": {
34
+ "sj55zd": "f1whyuy6",
35
+ "uwmqm3": ["fycuoez", "f8wuabp"]
36
+ },
37
+ "small": {
38
+ "Be2twd7": "fy9rknc",
39
+ "Bg96gwp": "fwrc4pm"
40
+ },
41
+ "medium": {
42
+ "Be2twd7": "fkhj508",
43
+ "Bg96gwp": "f1i3iumi"
44
+ },
45
+ "large": {
46
+ "Be2twd7": "fod5ikn",
47
+ "Bg96gwp": "faaz57k",
48
+ "Bhrd7zp": "fl43uef"
49
+ },
50
+ "strong": {
51
+ "Bhrd7zp": "fl43uef"
52
+ }
53
+ }, {
54
+ "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fycuoez{padding-left:4px;}", ".f8wuabp{padding-right:4px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
37
55
  });
38
56
  /**
39
57
  * Apply styling to the Label slots based on the state
40
58
  */
41
- var useLabelStyles = function (state) {
42
- var styles = useStyles();
43
- state.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
44
- if (state.required) {
45
- state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
46
- }
47
- return state;
59
+
60
+
61
+ const useLabelStyles_unstable = state => {
62
+ const styles = useStyles();
63
+ state.root.className = react_1.mergeClasses(exports.labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
64
+
65
+ if (state.required) {
66
+ state.required.className = react_1.mergeClasses(exports.labelClassNames.required, styles.required, state.required.className);
67
+ }
68
+
69
+ return state;
48
70
  };
49
- exports.useLabelStyles = useLabelStyles;
71
+
72
+ exports.useLabelStyles_unstable = useLabelStyles_unstable;
50
73
  //# sourceMappingURL=useLabelStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useLabelStyles.js","sourceRoot":"../src/","sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;AAAA,iEAAuE;AAGvE;;GAEG;AACH,IAAM,SAAS,GAAG,8BAAU,CAAC;IAC3B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QACd,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI;QAC/C,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;QAC/C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;QACnD,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,UAAU;KACvB,CAAC,EANa,CAMb;IAEF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QAClB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;KAC3D,CAAC,EAFiB,CAEjB;IAEF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QAClB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW;QACxC,oEAAoE;QACpE,WAAW,EAAE,KAAK;KACnB,CAAC,EAJiB,CAIjB;IAEF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;KAChD,CAAC,EAFc,CAEd;IAEF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;KAChD,CAAC,EAFe,CAEf;IAEF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;QAC/C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;KACnD,CAAC,EAHc,CAGd;IAEF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;QAChB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;KACnD,CAAC,EAFe,CAEf;CACH,CAAC,CAAC;AAEH;;GAEG;AACI,IAAM,cAAc,GAAG,UAAC,KAAiB;IAC9C,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,SAAS,GAAG,gCAAY,CAC5B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACjC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAClB,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,EAC7B,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,KAAK,CAAC,QAAQ,CAAC,SAAS,GAAG,gCAAY,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;KACpF;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAfW,QAAA,cAAc,kBAezB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { LabelState } from './Label.types';\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: theme => ({\n fontFamily: theme.global.type.fontFamilies.base,\n fontSize: theme.global.type.fontSizes.base[300],\n color: theme.alias.color.neutral.neutralForeground1,\n display: 'inline-flex',\n alignItems: 'flex-end',\n }),\n\n disabled: theme => ({\n color: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n\n required: theme => ({\n color: theme.alias.color.red.foreground3,\n // TODO: Once spacing tokens are added, change this to Horizontal XS\n paddingLeft: '4px',\n }),\n\n small: theme => ({\n fontSize: theme.global.type.fontSizes.base[200],\n }),\n\n medium: theme => ({\n fontSize: theme.global.type.fontSizes.base[300],\n }),\n\n large: theme => ({\n fontSize: theme.global.type.fontSizes.base[400],\n fontWeight: theme.global.type.fontWeights.semibold,\n }),\n\n strong: theme => ({\n fontWeight: theme.global.type.fontWeights.semibold,\n }),\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.className = mergeClasses(\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"]}
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;;AAEG;;;AACU,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,QAAQ,EAAE;AAF+C,CAA9C;AAKb;;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,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,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,OAAA,CAAA,eAAA,CAAgB,QAA7B,EAAuC,MAAM,CAAC,QAA9C,EAAwD,KAAK,CAAC,QAAN,CAAe,SAAvE,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 { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `labelClassNames.root` instead.\n */\nexport const labelClassName = 'fui-Label';\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 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 labelClassNames.root,\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(labelClassNames.required, styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1,2 +1,2 @@
1
- export {};
2
- export * from './Label';
1
+ export { Label, labelClassName, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable, } from './Label';
2
+ export type { LabelProps, LabelSlots, LabelState } from './Label';
@@ -1,5 +1,47 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Label"), exports);
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useLabel_unstable = exports.useLabelStyles_unstable = exports.renderLabel_unstable = exports.labelClassNames = exports.labelClassName = exports.Label = void 0;
7
+
8
+ var Label_1 = /*#__PURE__*/require("./Label");
9
+
10
+ Object.defineProperty(exports, "Label", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return Label_1.Label;
14
+ }
15
+ }); // eslint-disable-next-line deprecation/deprecation
16
+
17
+ Object.defineProperty(exports, "labelClassName", {
18
+ enumerable: true,
19
+ get: function () {
20
+ return Label_1.labelClassName;
21
+ }
22
+ });
23
+ Object.defineProperty(exports, "labelClassNames", {
24
+ enumerable: true,
25
+ get: function () {
26
+ return Label_1.labelClassNames;
27
+ }
28
+ });
29
+ Object.defineProperty(exports, "renderLabel_unstable", {
30
+ enumerable: true,
31
+ get: function () {
32
+ return Label_1.renderLabel_unstable;
33
+ }
34
+ });
35
+ Object.defineProperty(exports, "useLabelStyles_unstable", {
36
+ enumerable: true,
37
+ get: function () {
38
+ return Label_1.useLabelStyles_unstable;
39
+ }
40
+ });
41
+ Object.defineProperty(exports, "useLabel_unstable", {
42
+ enumerable: true,
43
+ get: function () {
44
+ return Label_1.useLabel_unstable;
45
+ }
46
+ });
5
47
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAEA,kDAAwB","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n Label,\n // eslint-disable-next-line deprecation/deprecation\n labelClassName,\n labelClassNames,\n renderLabel_unstable,\n useLabelStyles_unstable,\n useLabel_unstable,\n} from './Label';\nexport type { LabelProps, LabelSlots, LabelState } 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-alpha.8",
4
- "description": "Label component for FluentUI library.",
3
+ "version": "9.0.0-beta.10",
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",
@@ -13,34 +13,28 @@
13
13
  "license": "MIT",
14
14
  "scripts": {
15
15
  "build": "just-scripts build",
16
+ "bundle-size": "bundle-size measure",
16
17
  "clean": "just-scripts clean",
17
18
  "code-style": "just-scripts code-style",
18
19
  "just": "just-scripts",
19
20
  "lint": "just-scripts lint",
20
- "start": "just-scripts dev:storybook",
21
- "start-test": "just-scripts jest-watch",
22
- "test": "just-scripts test",
23
- "update-snapshots": "just-scripts jest -u"
21
+ "start": "yarn storybook",
22
+ "test": "jest --passWithNoTests",
23
+ "docs": "api-extractor run --config=config/api-extractor.local.json --local",
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"
24
27
  },
25
28
  "devDependencies": {
26
- "@fluentui/eslint-plugin": "^1.3.1",
27
- "@fluentui/jest-serializer-make-styles": "^9.0.0-alpha.18",
28
- "@fluentui/react-conformance": "^0.4.1",
29
- "@fluentui/scripts": "^1.0.0",
30
- "@types/enzyme": "3.10.3",
31
- "@types/enzyme-adapter-react-16": "1.0.3",
32
- "@types/react": "16.9.42",
33
- "@types/react-dom": "16.9.10",
34
- "@types/react-test-renderer": "^16.0.0",
35
- "enzyme": "~3.10.0",
36
- "enzyme-adapter-react-16": "^1.15.0",
37
- "react": "16.8.6",
38
- "react-dom": "16.8.6",
39
- "react-test-renderer": "^16.3.0"
29
+ "@fluentui/eslint-plugin": "*",
30
+ "@fluentui/react-conformance": "*",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
32
+ "@fluentui/scripts": "^1.0.0"
40
33
  },
41
34
  "dependencies": {
42
- "@fluentui/react-make-styles": "^9.0.0-alpha.42",
43
- "@fluentui/react-utilities": "^9.0.0-alpha.29",
35
+ "@fluentui/react-theme": "9.0.0-rc.5",
36
+ "@fluentui/react-utilities": "9.0.0-rc.6",
37
+ "@griffel/react": "1.0.3",
44
38
  "tslib": "^2.1.0"
45
39
  },
46
40
  "peerDependencies": {
@@ -50,11 +44,17 @@
50
44
  "react-dom": ">=16.8.0 <18.0.0"
51
45
  },
52
46
  "beachball": {
53
- "tag": "alpha",
54
47
  "disallowedChangeTypes": [
55
48
  "major",
56
49
  "minor",
57
50
  "patch"
58
51
  ]
52
+ },
53
+ "exports": {
54
+ ".": {
55
+ "types": "./lib/index.d.ts",
56
+ "import": "./lib/index.js",
57
+ "require": "./lib-commonjs/index.js"
58
+ }
59
59
  }
60
60
  }
@@ -1,3 +0,0 @@
1
- {
2
- "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
3
- }
package/config/tests.js DELETED
@@ -1,7 +0,0 @@
1
- /** Jest test setup file. */
2
-
3
- const { configure } = require('enzyme');
4
- const Adapter = require('enzyme-adapter-react-16');
5
-
6
- // Configure enzyme.
7
- configure({ adapter: new Adapter() });
@@ -1,51 +0,0 @@
1
- ## API Report File for "@fluentui/react-label"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- import { ComponentProps } from '@fluentui/react-utilities';
8
- import { ComponentState } from '@fluentui/react-utilities';
9
- import { ObjectShorthandProps } from '@fluentui/react-utilities';
10
- import * as React_2 from 'react';
11
- import { ShorthandProps } from '@fluentui/react-utilities';
12
-
13
- // @public
14
- export const Label: React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLElement>>;
15
-
16
- // @public
17
- export type LabelDefaultedProps = 'size';
18
-
19
- // @public
20
- export interface LabelProps extends ComponentProps, React_2.LabelHTMLAttributes<HTMLLabelElement> {
21
- disabled?: boolean;
22
- required?: boolean | ShorthandProps<ComponentProps>;
23
- size?: 'small' | 'medium' | 'large';
24
- strong?: boolean;
25
- }
26
-
27
- // @public
28
- export type LabelShorthandProps = 'required';
29
-
30
- // @public
31
- export const labelShorthandProps: LabelShorthandProps[];
32
-
33
- // @public
34
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
35
- ref: React_2.Ref<HTMLElement>;
36
- required?: ObjectShorthandProps<ComponentProps>;
37
- }
38
-
39
- // @public
40
- export const renderLabel: (state: LabelState) => JSX.Element;
41
-
42
- // @public
43
- export const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
44
-
45
- // @public
46
- export const useLabelStyles: (state: LabelState) => LabelState;
47
-
48
-
49
- // (No @packageDocumentation comment for this package)
50
-
51
- ```
package/just.config.ts DELETED
@@ -1,3 +0,0 @@
1
- import { preset } from '@fluentui/scripts';
2
-
3
- preset();
@@ -1,4 +0,0 @@
1
- import { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
@@ -1,9 +0,0 @@
1
- import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
2
- export function isConformant(testInfo) {
3
- var defaultOptions = {
4
- asPropHandlesRef: true,
5
- componentPath: module.parent.filename.replace('.test', ''),
6
- };
7
- baseIsConformant(defaultOptions, testInfo);
8
- }
9
- //# sourceMappingURL=isConformant.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -1 +0,0 @@
1
- export * from './components/Label/index';
package/lib-amd/Label.js DELETED
@@ -1,6 +0,0 @@
1
- define(["require", "exports", "tslib", "./components/Label/index"], function (require, exports, tslib_1, index_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(index_1, exports);
5
- });
6
- //# sourceMappingURL=Label.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["Label.ts"],"names":[],"mappings":";;;IAAA,uCAAyC","sourcesContent":["export * from './components/Label/index';\n"]}
@@ -1,4 +0,0 @@
1
- import { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
@@ -1,14 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.isConformant = void 0;
5
- function isConformant(testInfo) {
6
- var defaultOptions = {
7
- asPropHandlesRef: true,
8
- componentPath: module.parent.filename.replace('.test', ''),
9
- };
10
- react_conformance_1.isConformant(defaultOptions, testInfo);
11
- }
12
- exports.isConformant = isConformant;
13
- });
14
- //# sourceMappingURL=isConformant.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC7D,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IATD,oCASC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import { LabelProps } from './Label.types';
3
- /**
4
- * A label component provides a title or name to a component.
5
- * {@docCategory Label}
6
- */
7
- export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
@@ -1,16 +0,0 @@
1
- define(["require", "exports", "react", "./useLabel", "./renderLabel", "./useLabelStyles"], function (require, exports, React, useLabel_1, renderLabel_1, useLabelStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.Label = void 0;
5
- /**
6
- * A label component provides a title or name to a component.
7
- * {@docCategory Label}
8
- */
9
- exports.Label = React.forwardRef(function (props, ref) {
10
- var state = useLabel_1.useLabel(props, ref);
11
- useLabelStyles_1.useLabelStyles(state);
12
- return renderLabel_1.renderLabel(state);
13
- });
14
- exports.Label.displayName = 'Label';
15
- });
16
- //# sourceMappingURL=Label.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,UAAC,KAAK,EAAE,GAAG;QACxE,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEnC,+BAAc,CAAC,KAAK,CAAC,CAAC;QACtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useLabel } from './useLabel';\nimport { LabelProps } from './Label.types';\nimport { renderLabel } from './renderLabel';\nimport { useLabelStyles } from './useLabelStyles';\n\n/**\n * A label component provides a title or name to a component.\n * {@docCategory Label}\n */\nexport const Label = React.forwardRef<HTMLElement, LabelProps>((props, ref) => {\n const state = useLabel(props, ref);\n\n useLabelStyles(state);\n return renderLabel(state);\n});\n\nLabel.displayName = 'Label';\n"]}
@@ -1,53 +0,0 @@
1
- import * as React from 'react';
2
- import { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
3
- /**
4
- * Label Props
5
- * {@docCategory Label}
6
- */
7
- export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
8
- /**
9
- * Renders the label as disabled
10
- * @defaultvalue false
11
- */
12
- disabled?: boolean;
13
- /**
14
- * Displays and indicator that the label is for a required field. The required prop can be set to true to display
15
- * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
16
- * @defaultvalue false
17
- */
18
- required?: boolean | ShorthandProps<ComponentProps>;
19
- /**
20
- * A label supports different sizes.
21
- * @defaultvalue 'medium'
22
- */
23
- size?: 'small' | 'medium' | 'large';
24
- /**
25
- * A label supports semibold/strong fontweight.
26
- * @defaultvalue false
27
- */
28
- strong?: boolean;
29
- }
30
- /**
31
- * Names of the shorthand properties in LabelProps
32
- * {@docCategory Label}
33
- */
34
- export declare type LabelShorthandProps = 'required';
35
- /**
36
- * Names of LabelProps that have a default value in useLabel
37
- * {@docCategory Label}
38
- */
39
- export declare type LabelDefaultedProps = 'size';
40
- /**
41
- * State used in rendering Label
42
- * {@docCategory Label}
43
- */
44
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
45
- /**
46
- * Ref to the root element
47
- */
48
- ref: React.Ref<HTMLElement>;
49
- /**
50
- * The required prop resolved to a slot object
51
- */
52
- required?: ObjectShorthandProps<ComponentProps>;
53
- }
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=Label.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n * {@docCategory Label}\n */\nexport interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {\n /**\n * Renders the label as disabled\n * @defaultvalue false\n */\n disabled?: boolean;\n\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 | ShorthandProps<ComponentProps>;\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\n/**\n * Names of the shorthand properties in LabelProps\n * {@docCategory Label}\n */\nexport type LabelShorthandProps = 'required';\n\n/**\n * Names of LabelProps that have a default value in useLabel\n * {@docCategory Label}\n */\nexport type LabelDefaultedProps = 'size';\n\n/**\n * State used in rendering Label\n * {@docCategory Label}\n */\nexport interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {\n /**\n * Ref to the root element\n */\n ref: React.Ref<HTMLElement>;\n\n /**\n * The required prop resolved to a slot object\n */\n required?: ObjectShorthandProps<ComponentProps>;\n}\n"]}
@@ -1,5 +0,0 @@
1
- export * from './Label';
2
- export * from './Label.types';
3
- export * from './renderLabel';
4
- export * from './useLabel';
5
- export * from './useLabelStyles';
@@ -1,10 +0,0 @@
1
- define(["require", "exports", "tslib", "./Label", "./Label.types", "./renderLabel", "./useLabel", "./useLabelStyles"], function (require, exports, tslib_1, Label_1, Label_types_1, renderLabel_1, useLabel_1, useLabelStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Label_1, exports);
5
- tslib_1.__exportStar(Label_types_1, exports);
6
- tslib_1.__exportStar(renderLabel_1, exports);
7
- tslib_1.__exportStar(useLabel_1, exports);
8
- tslib_1.__exportStar(useLabelStyles_1, exports);
9
- });
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
@@ -1,6 +0,0 @@
1
- import { LabelState } from './Label.types';
2
- /**
3
- * Render the final JSX of Label
4
- * {@docCategory Label}
5
- */
6
- export declare const renderLabel: (state: LabelState) => JSX.Element;
@@ -1,17 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useLabel"], function (require, exports, tslib_1, React, react_utilities_1, useLabel_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderLabel = void 0;
5
- /**
6
- * Render the final JSX of Label
7
- * {@docCategory Label}
8
- */
9
- var renderLabel = function (state) {
10
- var _a = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
11
- return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
12
- state.children,
13
- state.required && React.createElement(slots.required, tslib_1.__assign({}, slotProps.required))));
14
- };
15
- exports.renderLabel = renderLabel;
16
- });
17
- //# sourceMappingURL=renderLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderLabel.js","sourceRoot":"../src/","sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,KAAuB,0BAAQ,CAAC,KAAK,EAAE,8BAAmB,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAClD,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,WAAW,eAStB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { LabelState } from './Label.types';\nimport { labelShorthandProps } from './useLabel';\n\n/**\n * Render the final JSX of Label\n * {@docCategory Label}\n */\nexport const renderLabel = (state: LabelState) => {\n const { slots, slotProps } = getSlots(state, labelShorthandProps);\n\n return (\n <slots.root {...slotProps.root}>\n {state.children}\n {state.required && <slots.required {...slotProps.required} />}\n </slots.root>\n );\n};\n"]}
@@ -1,20 +0,0 @@
1
- import * as React from 'react';
2
- import { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
- export declare const labelShorthandProps: LabelShorthandProps[];
8
- /**
9
- * Create the state required to render Label.
10
- *
11
- * The returned state can be modified with hooks such as useLabelStyles,
12
- * before being passed to renderLabel.
13
- *
14
- * @param props - props from this instance of Label
15
- * @param ref - reference to root HTMLElement of Label
16
- * @param defaultProps - (optional) default prop values provided by the implementing type
17
- *
18
- * {@docCategory Label}
19
- */
20
- export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;