@fluentui/react-label 9.0.0-alpha.4 → 9.0.0-alpha.43

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 +956 -1
  2. package/CHANGELOG.md +388 -2
  3. package/MIGRATION.md +25 -0
  4. package/README.md +22 -0
  5. package/Spec.md +146 -34
  6. package/dist/react-label.d.ts +42 -9
  7. package/lib/Label.js.map +1 -1
  8. package/lib/common/isConformant.d.ts +1 -1
  9. package/lib/common/isConformant.js +7 -5
  10. package/lib/common/isConformant.js.map +1 -1
  11. package/lib/components/Label/Label.d.ts +6 -2
  12. package/lib/components/Label/Label.js +5 -4
  13. package/lib/components/Label/Label.js.map +1 -1
  14. package/lib/components/Label/Label.types.d.ts +32 -7
  15. package/lib/components/Label/Label.types.js.map +1 -1
  16. package/lib/components/Label/index.js.map +1 -1
  17. package/lib/components/Label/renderLabel.d.ts +1 -1
  18. package/lib/components/Label/renderLabel.js +7 -3
  19. package/lib/components/Label/renderLabel.js.map +1 -1
  20. package/lib/components/Label/useLabel.d.ts +2 -1
  21. package/lib/components/Label/useLabel.js +43 -8
  22. package/lib/components/Label/useLabel.js.map +1 -1
  23. package/lib/components/Label/useLabelStyles.d.ts +1 -1
  24. package/lib/components/Label/useLabelStyles.js +43 -11
  25. package/lib/components/Label/useLabelStyles.js.map +1 -1
  26. package/lib/index.js.map +1 -1
  27. package/lib/tsdoc-metadata.json +1 -1
  28. package/lib-commonjs/Label.js +7 -2
  29. package/lib-commonjs/Label.js.map +1 -1
  30. package/lib-commonjs/common/isConformant.d.ts +1 -1
  31. package/lib-commonjs/common/isConformant.js +16 -7
  32. package/lib-commonjs/common/isConformant.js.map +1 -1
  33. package/lib-commonjs/components/Label/Label.d.ts +6 -2
  34. package/lib-commonjs/components/Label/Label.js +18 -9
  35. package/lib-commonjs/components/Label/Label.js.map +1 -1
  36. package/lib-commonjs/components/Label/Label.types.d.ts +32 -7
  37. package/lib-commonjs/components/Label/Label.types.js +4 -1
  38. package/lib-commonjs/components/Label/Label.types.js.map +1 -1
  39. package/lib-commonjs/components/Label/index.js +11 -2
  40. package/lib-commonjs/components/Label/index.js.map +1 -1
  41. package/lib-commonjs/components/Label/renderLabel.d.ts +1 -1
  42. package/lib-commonjs/components/Label/renderLabel.js +20 -7
  43. package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
  44. package/lib-commonjs/components/Label/useLabel.d.ts +2 -1
  45. package/lib-commonjs/components/Label/useLabel.js +52 -10
  46. package/lib-commonjs/components/Label/useLabel.js.map +1 -1
  47. package/lib-commonjs/components/Label/useLabelStyles.d.ts +1 -1
  48. package/lib-commonjs/components/Label/useLabelStyles.js +50 -12
  49. package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
  50. package/lib-commonjs/index.js +7 -2
  51. package/lib-commonjs/index.js.map +1 -1
  52. package/package.json +14 -10
  53. package/config/api-extractor.json +0 -3
  54. package/config/tests.js +0 -7
  55. package/etc/react-label.api.md +0 -44
  56. package/just.config.ts +0 -3
  57. package/lib-amd/Label.d.ts +0 -1
  58. package/lib-amd/Label.js +0 -6
  59. package/lib-amd/Label.js.map +0 -1
  60. package/lib-amd/common/isConformant.d.ts +0 -4
  61. package/lib-amd/common/isConformant.js +0 -14
  62. package/lib-amd/common/isConformant.js.map +0 -1
  63. package/lib-amd/components/Label/Label.d.ts +0 -6
  64. package/lib-amd/components/Label/Label.js +0 -15
  65. package/lib-amd/components/Label/Label.js.map +0 -1
  66. package/lib-amd/components/Label/Label.types.d.ts +0 -24
  67. package/lib-amd/components/Label/Label.types.js +0 -5
  68. package/lib-amd/components/Label/Label.types.js.map +0 -1
  69. package/lib-amd/components/Label/index.d.ts +0 -5
  70. package/lib-amd/components/Label/index.js +0 -10
  71. package/lib-amd/components/Label/index.js.map +0 -1
  72. package/lib-amd/components/Label/renderLabel.d.ts +0 -5
  73. package/lib-amd/components/Label/renderLabel.js +0 -14
  74. package/lib-amd/components/Label/renderLabel.js.map +0 -1
  75. package/lib-amd/components/Label/useLabel.d.ts +0 -17
  76. package/lib-amd/components/Label/useLabel.js +0 -30
  77. package/lib-amd/components/Label/useLabel.js.map +0 -1
  78. package/lib-amd/components/Label/useLabelStyles.d.ts +0 -5
  79. package/lib-amd/components/Label/useLabelStyles.js +0 -25
  80. package/lib-amd/components/Label/useLabelStyles.js.map +0 -1
  81. package/lib-amd/index.d.ts +0 -2
  82. package/lib-amd/index.js +0 -6
  83. package/lib-amd/index.js.map +0 -1
  84. package/src/components/Label/Label.types.ts +0 -33
@@ -1,24 +1,49 @@
1
1
  import * as React from 'react';
2
- import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
2
+ import type { ComponentPropsCompat, ComponentStateCompat, ObjectShorthandPropsCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
3
3
  /**
4
4
  * Label Props
5
5
  */
6
- export interface LabelProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
7
- }
6
+ export declare type LabelProps = ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
7
+ /**
8
+ * Renders the label as disabled
9
+ * @defaultvalue false
10
+ */
11
+ disabled?: boolean;
12
+ /**
13
+ * Displays and indicator that the label is for a required field. The required prop can be set to true to display
14
+ * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
15
+ * @defaultvalue false
16
+ */
17
+ required?: boolean | ShorthandPropsCompat<ComponentPropsCompat>;
18
+ /**
19
+ * A label supports different sizes.
20
+ * @defaultvalue 'medium'
21
+ */
22
+ size?: 'small' | 'medium' | 'large';
23
+ /**
24
+ * A label supports semibold/strong fontweight.
25
+ * @defaultvalue false
26
+ */
27
+ strong?: boolean;
28
+ };
8
29
  /**
9
30
  * Names of the shorthand properties in LabelProps
10
31
  */
11
- export declare type LabelShorthandProps = never;
32
+ export declare type LabelShorthandProps = 'required';
12
33
  /**
13
34
  * Names of LabelProps that have a default value in useLabel
14
35
  */
15
- export declare type LabelDefaultedProps = never;
36
+ export declare type LabelDefaultedProps = 'size';
16
37
  /**
17
38
  * State used in rendering Label
18
39
  */
19
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
40
+ export declare type LabelState = ComponentStateCompat<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
20
41
  /**
21
42
  * Ref to the root element
22
43
  */
23
44
  ref: React.Ref<HTMLElement>;
24
- }
45
+ /**
46
+ * The required prop resolved to a slot object
47
+ */
48
+ required?: ObjectShorthandPropsCompat<ComponentPropsCompat>;
49
+ };
@@ -1,3 +1,6 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  //# sourceMappingURL=Label.types.js.map
@@ -1 +1 @@
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 } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport interface LabelProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {\n /*\n * TODO Add props and slots here\n * Any slot property should be listed in the labelShorthandProps array below\n * Any property that has a default value should be listed in LabelDefaultedProps as e.g. 'size' | 'icon'\n */\n}\n\n/**\n * Names of the shorthand properties in LabelProps\n */\nexport type LabelShorthandProps = never; // TODO add shorthand property names\n\n/**\n * Names of LabelProps that have a default value in useLabel\n */\nexport type LabelDefaultedProps = never; // TODO add names of properties with default values\n\n/**\n * State used in rendering 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"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
@@ -1,9 +1,18 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var tslib_1 = /*#__PURE__*/require("tslib");
8
+
4
9
  tslib_1.__exportStar(require("./Label"), exports);
10
+
5
11
  tslib_1.__exportStar(require("./Label.types"), exports);
12
+
6
13
  tslib_1.__exportStar(require("./renderLabel"), exports);
14
+
7
15
  tslib_1.__exportStar(require("./useLabel"), exports);
16
+
8
17
  tslib_1.__exportStar(require("./useLabelStyles"), exports);
9
18
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,wDAA8B;AAC9B,wDAA8B;AAC9B,qDAA2B;AAC3B,2DAAiC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
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,4 +1,4 @@
1
- import { LabelState } from './Label.types';
1
+ import type { LabelState } from './Label.types';
2
2
  /**
3
3
  * Render the final JSX of Label
4
4
  */
@@ -1,16 +1,29 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.renderLabel = void 0;
4
- var tslib_1 = require("tslib");
5
- var React = require("react");
6
- var react_utilities_1 = require("@fluentui/react-utilities");
7
- var useLabel_1 = require("./useLabel");
7
+
8
+ var tslib_1 = /*#__PURE__*/require("tslib");
9
+
10
+ var React = /*#__PURE__*/require("react");
11
+
12
+ var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
13
+
14
+ var useLabel_1 = /*#__PURE__*/require("./useLabel");
8
15
  /**
9
16
  * Render the final JSX of Label
10
17
  */
18
+
19
+
11
20
  var renderLabel = function (state) {
12
- var _a = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
13
- return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.children));
21
+ var _a = react_utilities_1.getSlotsCompat(state, useLabel_1.labelShorthandProps),
22
+ slots = _a.slots,
23
+ slotProps = _a.slotProps;
24
+
25
+ return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.children, state.required && React.createElement(slots.required, tslib_1.__assign({}, slotProps.required)));
14
26
  };
27
+
15
28
  exports.renderLabel = renderLabel;
16
29
  //# sourceMappingURL=renderLabel.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"renderLabel.js","sourceRoot":"../src/","sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,6DAAqD;AAErD,uCAAiD;AAEjD;;GAEG;AACI,IAAM,WAAW,GAAG,UAAC,KAAiB;IACrC,IAAA,KAAuB,0BAAQ,CAAC,KAAK,EAAE,8BAAmB,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;IAElE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAE3B,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CAAC;AATW,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 */\nexport const renderLabel = (state: LabelState) => {\n const { slots, slotProps } = getSlots(state, labelShorthandProps);\n\n return (\n <slots.root {...slotProps.root}>\n {/* TODO Add additional slots in the appropriate place */}\n {state.children}\n </slots.root>\n );\n};\n"]}
1
+ {"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,UAAA,CAAA,mBAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFrB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}
@@ -1,7 +1,8 @@
1
1
  import * as React from 'react';
2
- import { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
2
+ import type { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
3
3
  /**
4
4
  * Array of all shorthand properties listed in LabelShorthandProps
5
+ * {@docCatergory Label}
5
6
  */
6
7
  export declare const labelShorthandProps: LabelShorthandProps[];
7
8
  /**
@@ -1,14 +1,23 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.useLabel = exports.labelShorthandProps = void 0;
4
- var react_utilities_1 = require("@fluentui/react-utilities");
7
+
8
+ var tslib_1 = /*#__PURE__*/require("tslib");
9
+
10
+ var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
5
11
  /**
6
12
  * Array of all shorthand properties listed in LabelShorthandProps
13
+ * {@docCatergory Label}
7
14
  */
8
- exports.labelShorthandProps = [
9
- /* TODO add shorthand property names */
10
- ];
11
- var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.labelShorthandProps });
15
+
16
+
17
+ exports.labelShorthandProps = ['required'];
18
+ var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({
19
+ deepMerge: exports.labelShorthandProps
20
+ });
12
21
  /**
13
22
  * Create the state required to render Label.
14
23
  *
@@ -19,11 +28,44 @@ var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.labelShor
19
28
  * @param ref - reference to root HTMLElement of Label
20
29
  * @param defaultProps - (optional) default prop values provided by the implementing type
21
30
  */
31
+
22
32
  var useLabel = function (props, ref, defaultProps) {
23
- var state = mergeProps({
24
- ref: ref,
25
- }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.labelShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.labelShorthandProps));
26
- return state;
33
+ var state = mergeProps({
34
+ ref: ref,
35
+ as: 'label',
36
+ size: 'medium',
37
+ required: {
38
+ as: 'span'
39
+ }
40
+ }, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
41
+ return state;
27
42
  };
43
+
28
44
  exports.useLabel = useLabel;
45
+ /**
46
+ * Label will first need to check if required is a boolean or shorthandprops,
47
+ * this allows for the required prop to handle both the default asterisk for required
48
+ * or a custom required text.
49
+ */
50
+
51
+ var resolveLabelShorthandProps = function (props) {
52
+ var propsNormalized;
53
+
54
+ if (props.required === true) {
55
+ propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), {
56
+ required: {
57
+ children: '*'
58
+ }
59
+ });
60
+ } else if (props.required === false) {
61
+ propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), {
62
+ required: undefined
63
+ });
64
+ } else {
65
+ // TypeScript needs a nudge to figure out that props.required won't be a boolean here
66
+ propsNormalized = props;
67
+ }
68
+
69
+ return react_utilities_1.resolveShorthandProps(propsNormalized, exports.labelShorthandProps);
70
+ };
29
71
  //# sourceMappingURL=useLabel.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useLabel.js","sourceRoot":"../src/","sources":["components/Label/useLabel.ts"],"names":[],"mappings":";;;AACA,6DAAkF;AAGlF;;GAEG;AACU,QAAA,mBAAmB,GAA0B;AACxD,uCAAuC;CACxC,CAAC;AAEF,IAAM,UAAU,GAAG,gCAAc,CAAa,EAAE,SAAS,EAAE,2BAAmB,EAAE,CAAC,CAAC;AAElF;;;;;;;;;GASG;AACI,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;IAChG,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,KAAA;KACJ,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,2BAAmB,CAAC,EACxE,uCAAqB,CAAC,KAAK,EAAE,2BAAmB,CAAC,CAClD,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAVW,QAAA,QAAQ,YAUnB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { LabelProps, LabelShorthandProps, LabelState } from './Label.types';\n\n/**\n * Array of all shorthand properties listed in LabelShorthandProps\n */\nexport const labelShorthandProps: LabelShorthandProps[] = [\n /* TODO add shorthand property names */\n];\n\nconst mergeProps = makeMergeProps<LabelState>({ deepMerge: labelShorthandProps });\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles,\n * before being passed to renderLabel.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const useLabel = (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps): LabelState => {\n const state = mergeProps(\n {\n ref,\n },\n defaultProps && resolveShorthandProps(defaultProps, labelShorthandProps),\n resolveShorthandProps(props, labelShorthandProps),\n );\n\n return state;\n};\n"]}
1
+ {"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA6C,CAAC,UAAD,CAA7C;AAEb,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,CAA2B;AAAE,EAAA,SAAS,EAAE,OAAA,CAAA;AAAb,CAA3B,CAAnB;AAEA;;;;;;;;;AASG;;AACI,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAiD,YAAjD,EAA0E;AAChG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,OAFN;AAGE,IAAA,IAAI,EAAE,QAHR;AAIE,IAAA,QAAQ,EAAE;AACR,MAAA,EAAE,EAAE;AADI;AAJZ,GADsB,EAStB,YAAY,IAAI,0BAA0B,CAAC,YAAD,CATpB,EAUtB,0BAA0B,CAAC,KAAD,CAVJ,CAAxB;AAaA,SAAO,KAAP;AACD,CAfM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR;AAiBb;;;;AAIG;;AACH,IAAM,0BAA0B,GAAG,UAAC,KAAD,EAAkB;AACnD,MAAI,eAAJ;;AACA,MAAI,KAAK,CAAC,QAAN,KAAmB,IAAvB,EAA6B;AAC3B,IAAA,eAAe,GAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAAZ,KAAb,CAAf;AACD,GAFD,MAEO,IAAI,KAAK,CAAC,QAAN,KAAmB,KAAvB,EAA8B;AACnC,IAAA,eAAe,GAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CAAf;AACD,GAFM,MAEA;AACL;AACA,IAAA,eAAe,GAAG,KAAlB;AACD;;AAED,SAAO,iBAAA,CAAA,qBAAA,CAAsB,eAAtB,EAAuC,OAAA,CAAA,mBAAvC,CAAP;AACD,CAZD","sourceRoot":""}
@@ -1,4 +1,4 @@
1
- import { LabelState } from './Label.types';
1
+ import type { LabelState } from './Label.types';
2
2
  /**
3
3
  * Apply styling to the Label slots based on the state
4
4
  */
@@ -1,24 +1,62 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.useLabelStyles = void 0;
4
- var react_make_styles_1 = require("@fluentui/react-make-styles");
7
+
8
+ var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
5
9
  /**
6
- * Styles for the root slot
10
+ * Styles for the label
7
11
  */
8
- var useStyles = react_make_styles_1.makeStyles({
9
- root: function (theme) { return ({
10
- // TODO Add default styles for the root element
11
- }); },
12
+
13
+
14
+ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
15
+ "root": {
16
+ "Bahqtrf": "f1kx028l",
17
+ "sj55zd": "f16th3vw"
18
+ },
19
+ "disabled": {
20
+ "sj55zd": "f1eu23ty"
21
+ },
22
+ "required": {
23
+ "sj55zd": "f1pp183j",
24
+ "uwmqm3": ["fycuoez", "f8wuabp"]
25
+ },
26
+ "small": {
27
+ "Be2twd7": "ft25vac",
28
+ "Bg96gwp": "f6u047o"
29
+ },
30
+ "medium": {
31
+ "Be2twd7": "flcnb0",
32
+ "Bg96gwp": "f1syuwty"
33
+ },
34
+ "large": {
35
+ "Be2twd7": "f1y5x3qd",
36
+ "Bg96gwp": "f1r32vcg",
37
+ "Bhrd7zp": "fss2gpl"
38
+ },
39
+ "strong": {
40
+ "Bhrd7zp": "fss2gpl"
41
+ }
42
+ }, {
43
+ "d": [".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".f16th3vw{color:var(--alias-color-neutral-neutralForeground1);}", ".f1eu23ty{color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1pp183j{color:var(--alias-color-red-foreground3);}", ".fycuoez{padding-left:4px;}", ".f8wuabp{padding-right:4px;}", ".ft25vac{font-size:var(--global-type-fontSizes-base-200);}", ".f6u047o{line-height:var(--global-type-lineHeights-base-200);}", ".flcnb0{font-size:var(--global-type-fontSizes-base-300);}", ".f1syuwty{line-height:var(--global-type-lineHeights-base-300);}", ".f1y5x3qd{font-size:var(--global-type-fontSizes-base-400);}", ".f1r32vcg{line-height:var(--global-type-lineHeights-base-400);}", ".fss2gpl{font-weight:var(--global-type-fontWeights-semibold);}"]
12
44
  });
13
45
  /**
14
46
  * Apply styling to the Label slots based on the state
15
47
  */
48
+
49
+
16
50
  var useLabelStyles = function (state) {
17
- var styles = useStyles();
18
- state.className = react_make_styles_1.mergeClasses(styles.root, state.className);
19
- // TODO Add class names to slots, for example:
20
- // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
21
- return state;
51
+ var styles = useStyles();
52
+ state.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
53
+
54
+ if (state.required) {
55
+ state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
56
+ }
57
+
58
+ return state;
22
59
  };
60
+
23
61
  exports.useLabelStyles = useLabelStyles;
24
62
  //# 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;IACd,+CAA+C;KAChD,CAAC,EAFa,CAEb;CAGH,CAAC,CAAC;AAEH;;GAEG;AACI,IAAM,cAAc,GAAG,UAAC,KAAiB;IAC9C,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,SAAS,GAAG,gCAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE7D,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AARW,QAAA,cAAc,kBAQzB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { LabelState } from './Label.types';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: theme => ({\n // TODO Add default styles for the root element\n }),\n\n // TODO add additional classes for different states and/or slots\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(styles.root, state.className);\n\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n return state;\n};\n"]}
1
+ {"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,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,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,MAAM,CAAC,IADS,EAEhB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFT,EAGhB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHU,EAIhB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJP,EAKhB,KAAK,CAAC,SALU,CAAlB;;AAQA,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,CAfM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
@@ -1,5 +1,10 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var tslib_1 = /*#__PURE__*/require("tslib");
8
+
4
9
  tslib_1.__exportStar(require("./Label"), exports);
5
10
  //# 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":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAEA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-label",
3
- "version": "9.0.0-alpha.4",
3
+ "version": "9.0.0-alpha.43",
4
4
  "description": "Label component for FluentUI library.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,19 +13,23 @@
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",
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
26
  },
25
27
  "devDependencies": {
26
- "@fluentui/eslint-plugin": "^1.3.0",
27
- "@fluentui/jest-serializer-make-styles": "^9.0.0-alpha.15",
28
- "@fluentui/react-conformance": "^0.4.0",
28
+ "@fluentui/babel-make-styles": "9.0.0-alpha.52",
29
+ "@fluentui/eslint-plugin": "*",
30
+ "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.45",
31
+ "@fluentui/react-conformance": "*",
32
+ "@fluentui/react-conformance-make-styles": "9.0.0-alpha.14",
29
33
  "@fluentui/scripts": "^1.0.0",
30
34
  "@types/enzyme": "3.10.3",
31
35
  "@types/enzyme-adapter-react-16": "1.0.3",
@@ -39,8 +43,8 @@
39
43
  "react-test-renderer": "^16.3.0"
40
44
  },
41
45
  "dependencies": {
42
- "@fluentui/react-make-styles": "^9.0.0-alpha.39",
43
- "@fluentui/react-utilities": "^9.0.0-alpha.26",
46
+ "@fluentui/react-make-styles": "9.0.0-alpha.70",
47
+ "@fluentui/react-utilities": "9.0.0-alpha.50",
44
48
  "tslib": "^2.1.0"
45
49
  },
46
50
  "peerDependencies": {
@@ -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,44 +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 * as React_2 from 'react';
10
-
11
- // @public
12
- export const Label: React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLElement>>;
13
-
14
- // @public
15
- export type LabelDefaultedProps = never;
16
-
17
- // @public
18
- export interface LabelProps extends ComponentProps, React_2.HTMLAttributes<HTMLElement> {
19
- }
20
-
21
- // @public
22
- export type LabelShorthandProps = never;
23
-
24
- // @public
25
- export const labelShorthandProps: LabelShorthandProps[];
26
-
27
- // @public
28
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
29
- ref: React_2.Ref<HTMLElement>;
30
- }
31
-
32
- // @public
33
- export const renderLabel: (state: LabelState) => JSX.Element;
34
-
35
- // @public
36
- export const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
37
-
38
- // @public
39
- export const useLabelStyles: (state: LabelState) => LabelState;
40
-
41
-
42
- // (No @packageDocumentation comment for this package)
43
-
44
- ```
package/just.config.ts DELETED
@@ -1,3 +0,0 @@
1
- import { preset } from '@fluentui/scripts';
2
-
3
- preset();
@@ -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,6 +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
- */
6
- export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
@@ -1,15 +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
- */
8
- exports.Label = React.forwardRef(function (props, ref) {
9
- var state = useLabel_1.useLabel(props, ref);
10
- useLabelStyles_1.useLabelStyles(state);
11
- return renderLabel_1.renderLabel(state);
12
- });
13
- exports.Label.displayName = 'Label';
14
- });
15
- //# sourceMappingURL=Label.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;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 */\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,24 +0,0 @@
1
- import * as React from 'react';
2
- import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
3
- /**
4
- * Label Props
5
- */
6
- export interface LabelProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
7
- }
8
- /**
9
- * Names of the shorthand properties in LabelProps
10
- */
11
- export declare type LabelShorthandProps = never;
12
- /**
13
- * Names of LabelProps that have a default value in useLabel
14
- */
15
- export declare type LabelDefaultedProps = never;
16
- /**
17
- * State used in rendering Label
18
- */
19
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
20
- /**
21
- * Ref to the root element
22
- */
23
- ref: React.Ref<HTMLElement>;
24
- }
@@ -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 } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport interface LabelProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {\n /*\n * TODO Add props and slots here\n * Any slot property should be listed in the labelShorthandProps array below\n * Any property that has a default value should be listed in LabelDefaultedProps as e.g. 'size' | 'icon'\n */\n}\n\n/**\n * Names of the shorthand properties in LabelProps\n */\nexport type LabelShorthandProps = never; // TODO add shorthand property names\n\n/**\n * Names of LabelProps that have a default value in useLabel\n */\nexport type LabelDefaultedProps = never; // TODO add names of properties with default values\n\n/**\n * State used in rendering 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"]}
@@ -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,5 +0,0 @@
1
- import { LabelState } from './Label.types';
2
- /**
3
- * Render the final JSX of Label
4
- */
5
- export declare const renderLabel: (state: LabelState) => JSX.Element;