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

Sign up to get free protection for your applications and to get access to all the features.
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;