@fluentui/react-label 9.0.0-beta.2 → 9.0.0-beta.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. package/CHANGELOG.json +257 -1
  2. package/CHANGELOG.md +62 -2
  3. package/Spec.md +33 -40
  4. package/dist/react-label.d.ts +15 -20
  5. package/lib/Label.js.map +1 -1
  6. package/lib/components/Label/Label.js +7 -7
  7. package/lib/components/Label/Label.js.map +1 -1
  8. package/lib/components/Label/Label.types.d.ts +9 -9
  9. package/lib/components/Label/Label.types.js.map +1 -1
  10. package/lib/components/Label/index.js.map +1 -1
  11. package/lib/components/Label/renderLabel.d.ts +1 -1
  12. package/lib/components/Label/renderLabel.js +8 -8
  13. package/lib/components/Label/renderLabel.js.map +1 -1
  14. package/lib/components/Label/useLabel.d.ts +4 -9
  15. package/lib/components/Label/useLabel.js +18 -27
  16. package/lib/components/Label/useLabel.js.map +1 -1
  17. package/lib/components/Label/useLabelStyles.d.ts +2 -1
  18. package/lib/components/Label/useLabelStyles.js +7 -5
  19. package/lib/components/Label/useLabelStyles.js.map +1 -1
  20. package/lib/index.js.map +1 -1
  21. package/lib-commonjs/Label.js +1 -1
  22. package/lib-commonjs/Label.js.map +1 -1
  23. package/lib-commonjs/components/Label/Label.js +8 -8
  24. package/lib-commonjs/components/Label/Label.js.map +1 -1
  25. package/lib-commonjs/components/Label/Label.types.d.ts +9 -9
  26. package/lib-commonjs/components/Label/Label.types.js.map +1 -1
  27. package/lib-commonjs/components/Label/index.js +1 -1
  28. package/lib-commonjs/components/Label/index.js.map +1 -1
  29. package/lib-commonjs/components/Label/renderLabel.d.ts +1 -1
  30. package/lib-commonjs/components/Label/renderLabel.js +12 -14
  31. package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
  32. package/lib-commonjs/components/Label/useLabel.d.ts +4 -9
  33. package/lib-commonjs/components/Label/useLabel.js +23 -33
  34. package/lib-commonjs/components/Label/useLabel.js.map +1 -1
  35. package/lib-commonjs/components/Label/useLabelStyles.d.ts +2 -1
  36. package/lib-commonjs/components/Label/useLabelStyles.js +12 -9
  37. package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
  38. package/lib-commonjs/index.js +1 -1
  39. package/lib-commonjs/index.js.map +1 -1
  40. package/package.json +9 -11
  41. package/lib/common/isConformant.d.ts +0 -4
  42. package/lib/common/isConformant.js +0 -11
  43. package/lib/common/isConformant.js.map +0 -1
  44. package/lib-commonjs/common/isConformant.d.ts +0 -4
  45. package/lib-commonjs/common/isConformant.js +0 -22
  46. package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,17 +1,12 @@
1
1
  import * as React from 'react';
2
- import type { LabelProps, LabelSlots, LabelState } from './Label.types';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
- export declare const labelShorthandProps: Array<keyof LabelSlots>;
2
+ import type { LabelProps, LabelState } from './Label.types';
8
3
  /**
9
4
  * Create the state required to render Label.
10
5
  *
11
- * The returned state can be modified with hooks such as useLabelStyles,
12
- * before being passed to renderLabel.
6
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
7
+ * before being passed to renderLabel_unstable.
13
8
  *
14
9
  * @param props - props from this instance of Label
15
10
  * @param ref - reference to root HTMLElement of Label
16
11
  */
17
- export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
12
+ export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
@@ -1,48 +1,39 @@
1
- import { __assign } from "tslib";
2
1
  import { getNativeElementProps } from '@fluentui/react-utilities';
3
2
  import { resolveShorthand } from '@fluentui/react-utilities';
4
- /**
5
- * Array of all shorthand properties listed in LabelShorthandProps
6
- * {@docCatergory Label}
7
- */
8
-
9
- export var labelShorthandProps = ['root', 'required'];
10
3
  /**
11
4
  * Create the state required to render Label.
12
5
  *
13
- * The returned state can be modified with hooks such as useLabelStyles,
14
- * before being passed to renderLabel.
6
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
7
+ * before being passed to renderLabel_unstable.
15
8
  *
16
9
  * @param props - props from this instance of Label
17
10
  * @param ref - reference to root HTMLElement of Label
18
11
  */
19
12
 
20
- export var useLabel = function (props, ref) {
21
- var _a = props.disabled,
22
- disabled = _a === void 0 ? false : _a,
23
- _b = props.required,
24
- required = _b === void 0 ? false : _b,
25
- _c = props.strong,
26
- strong = _c === void 0 ? false : _c,
27
- _d = props.size,
28
- size = _d === void 0 ? 'medium' : _d;
13
+ export const useLabel_unstable = (props, ref) => {
14
+ const {
15
+ disabled = false,
16
+ required = false,
17
+ strong = false,
18
+ size = 'medium'
19
+ } = props;
29
20
  return {
30
- disabled: disabled,
31
- required: resolveShorthand(required === false ? null : required, {
32
- required: !!required,
21
+ disabled,
22
+ required: resolveShorthand(required === true ? '*' : required || undefined, {
33
23
  defaultProps: {
34
- children: '*'
24
+ 'aria-hidden': 'true'
35
25
  }
36
26
  }),
37
- strong: strong,
38
- size: size,
27
+ strong,
28
+ size,
39
29
  components: {
40
30
  root: 'label',
41
31
  required: 'span'
42
32
  },
43
- root: getNativeElementProps('label', __assign({
44
- ref: ref
45
- }, props))
33
+ root: getNativeElementProps('label', {
34
+ ref,
35
+ ...props
36
+ })
46
37
  };
47
38
  };
48
39
  //# sourceMappingURL=useLabel.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;AAGG;;AACH,OAAO,IAAM,mBAAmB,GAA4B,CAAC,MAAD,EAAS,UAAT,CAArD;AAEP;;;;;;;;AAQG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAC7D,MAAA,EAAA,GAAwE,KAAK,CAA7D,QAAhB;AAAA,MAAA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAhB;AAAA,MAAkB,EAAA,GAAsD,KAAK,CAA3C,QAAlC;AAAA,MAAkB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlC;AAAA,MAAoC,EAAA,GAAoC,KAAK,CAA3B,MAAlD;AAAA,MAAoC,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlD;AAAA,MAAoD,EAAA,GAAoB,KAAK,CAAV,IAAnE;AAAA,MAAoD,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAnE;AACR,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7B,EAAuC;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAFiD,KAAvC,CAFrB;AAML,IAAA,MAAM,EAAA,MAND;AAOL,IAAA,IAAI,EAAA,IAPC;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAQ,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAAR;AATtB,GAAP;AAWD,CAbM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvC,EAAkD;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlD,CAFrB;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AARtB,GAAP;AAUD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { disabled = false, required = false, strong = false, size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n strong,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1,5 +1,6 @@
1
1
  import type { LabelState } from './Label.types';
2
+ export declare const labelClassName = "fui-Label";
2
3
  /**
3
4
  * Apply styling to the Label slots based on the state
4
5
  */
5
- export declare const useLabelStyles: (state: LabelState) => LabelState;
6
+ export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
@@ -1,9 +1,11 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const labelClassName = 'fui-Label';
2
4
  /**
3
5
  * Styles for the label
4
6
  */
5
7
 
6
- var useStyles = /*#__PURE__*/__styles({
8
+ const useStyles = /*#__PURE__*/__styles({
7
9
  "root": {
8
10
  "Bahqtrf": "fk6fouc",
9
11
  "sj55zd": "f19n0e5"
@@ -39,9 +41,9 @@ var useStyles = /*#__PURE__*/__styles({
39
41
  */
40
42
 
41
43
 
42
- export var useLabelStyles = function (state) {
43
- var styles = useStyles();
44
- state.root.className = mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
44
+ export const useLabelStyles_unstable = state => {
45
+ const styles = useStyles();
46
+ state.root.className = mergeClasses(labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
45
47
 
46
48
  if (state.required) {
47
49
  state.required.className = mergeClasses(styles.required, state.required.className);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFQ,EAGjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAH2B,EAIjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJU,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAfM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelState } from './Label.types';\n\nexport const labelClassName = 'fui-Label';\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: '4px', // TODO: Once spacing tokens are added, change this to Horizontal XS\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassName,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./components/Label/index"), exports);
10
10
  //# sourceMappingURL=Label.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Label.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["Label.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Label/index';\n"],"sourceRoot":"../src/"}
@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Label = void 0;
7
7
 
8
- var React = /*#__PURE__*/require("react");
8
+ const React = /*#__PURE__*/require("react");
9
9
 
10
- var useLabel_1 = /*#__PURE__*/require("./useLabel");
10
+ const useLabel_1 = /*#__PURE__*/require("./useLabel");
11
11
 
12
- var renderLabel_1 = /*#__PURE__*/require("./renderLabel");
12
+ const renderLabel_1 = /*#__PURE__*/require("./renderLabel");
13
13
 
14
- var useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
14
+ const useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
15
15
  /**
16
16
  * A label component provides a title or name to a component.
17
17
  */
18
18
 
19
19
 
20
- exports.Label = /*#__PURE__*/React.forwardRef(function (props, ref) {
21
- var state = useLabel_1.useLabel(props, ref);
22
- useLabelStyles_1.useLabelStyles(state);
23
- return renderLabel_1.renderLabel(state);
20
+ exports.Label = /*#__PURE__*/React.forwardRef((props, ref) => {
21
+ const state = useLabel_1.useLabel_unstable(props, ref);
22
+ useLabelStyles_1.useLabelStyles_unstable(state);
23
+ return renderLabel_1.renderLabel_unstable(state);
24
24
  });
25
25
  exports.Label.displayName = 'Label';
26
26
  //# sourceMappingURL=Label.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAChF,MAAM,KAAK,GAAG,UAAA,CAAA,QAAA,CAAS,KAAT,EAAgB,GAAhB,CAAd;AAEA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AACA,SAAO,aAAA,CAAA,WAAA,CAAY,KAAZ,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles';\nimport type { LabelProps } from './Label.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label: ForwardRefComponent<LabelProps> = React.forwardRef((props, ref) => {\n const state = useLabel_unstable(props, ref);\n\n useLabelStyles_unstable(state);\n return renderLabel_unstable(state);\n});\n\nLabel.displayName = 'Label';\n"],"sourceRoot":"../src/"}
@@ -1,9 +1,5 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
2
- import * as React from 'react';
3
- /**
4
- * Label Props
5
- */
6
- export declare type LabelCommons = {
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
+ declare type LabelCommons = {
7
3
  /**
8
4
  * Renders the label as disabled
9
5
  * @defaultvalue false
@@ -21,18 +17,22 @@ export declare type LabelCommons = {
21
17
  strong: boolean;
22
18
  };
23
19
  export declare type LabelSlots = {
24
- root: IntrinsicShorthandProps<'label'>;
25
- required?: IntrinsicShorthandProps<'span'>;
20
+ root: Slot<'label'>;
21
+ required?: Slot<'span'>;
26
22
  };
27
23
  /**
28
24
  * State used in rendering Label
29
25
  */
30
26
  export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
27
+ /**
28
+ * Label Props
29
+ */
31
30
  export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
32
31
  /**
33
32
  * Displays and indicator that the label is for a required field. The required prop can be set to true to display
34
33
  * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
35
34
  * @defaultvalue false
36
35
  */
37
- required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
36
+ required?: boolean | Slot<'span'>;
38
37
  };
38
+ export {};
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./Label"), exports);
10
10
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"],"sourceRoot":"../src/"}
@@ -2,4 +2,4 @@ import type { LabelState } from './Label.types';
2
2
  /**
3
3
  * Render the final JSX of Label
4
4
  */
5
- export declare const renderLabel: (state: LabelState) => JSX.Element;
5
+ export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
@@ -3,27 +3,25 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderLabel = void 0;
6
+ exports.renderLabel_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const React = /*#__PURE__*/require("react");
9
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");
10
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
15
11
  /**
16
12
  * Render the final JSX of Label
17
13
  */
18
14
 
19
15
 
20
- var renderLabel = function (state) {
21
- var _a = react_utilities_1.getSlots(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.root.children, React.createElement(slots.required, tslib_1.__assign({}, slotProps.required)));
16
+ const renderLabel_unstable = state => {
17
+ const {
18
+ slots,
19
+ slotProps
20
+ } = react_utilities_1.getSlots(state);
21
+ return React.createElement(slots.root, { ...slotProps.root
22
+ }, state.root.children, slots.required && React.createElement(slots.required, { ...slotProps.required
23
+ }));
26
24
  };
27
25
 
28
- exports.renderLabel = renderLabel;
26
+ exports.renderLabel_unstable = renderLabel_unstable;
29
27
  //# sourceMappingURL=renderLabel.js.map
@@ -1 +1 @@
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,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,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,IAAN,CAAW,QADd,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFrB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LabelState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelState) => {\n const { slots, slotProps } = getSlots<LabelSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.root.children}\n {slots.required && <slots.required {...slotProps.required} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1,17 +1,12 @@
1
1
  import * as React from 'react';
2
- import type { LabelProps, LabelSlots, LabelState } from './Label.types';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
- export declare const labelShorthandProps: Array<keyof LabelSlots>;
2
+ import type { LabelProps, LabelState } from './Label.types';
8
3
  /**
9
4
  * Create the state required to render Label.
10
5
  *
11
- * The returned state can be modified with hooks such as useLabelStyles,
12
- * before being passed to renderLabel.
6
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
7
+ * before being passed to renderLabel_unstable.
13
8
  *
14
9
  * @param props - props from this instance of Label
15
10
  * @param ref - reference to root HTMLElement of Label
16
11
  */
17
- export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
12
+ export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
@@ -3,58 +3,48 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useLabel = exports.labelShorthandProps = void 0;
6
+ exports.useLabel_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
 
10
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
- var react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
13
- /**
14
- * Array of all shorthand properties listed in LabelShorthandProps
15
- * {@docCatergory Label}
16
- */
17
-
18
-
19
- exports.labelShorthandProps = ['root', 'required'];
10
+ const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
20
11
  /**
21
12
  * Create the state required to render Label.
22
13
  *
23
- * The returned state can be modified with hooks such as useLabelStyles,
24
- * before being passed to renderLabel.
14
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
15
+ * before being passed to renderLabel_unstable.
25
16
  *
26
17
  * @param props - props from this instance of Label
27
18
  * @param ref - reference to root HTMLElement of Label
28
19
  */
29
20
 
30
- var useLabel = function (props, ref) {
31
- var _a = props.disabled,
32
- disabled = _a === void 0 ? false : _a,
33
- _b = props.required,
34
- required = _b === void 0 ? false : _b,
35
- _c = props.strong,
36
- strong = _c === void 0 ? false : _c,
37
- _d = props.size,
38
- size = _d === void 0 ? 'medium' : _d;
21
+
22
+ const useLabel_unstable = (props, ref) => {
23
+ const {
24
+ disabled = false,
25
+ required = false,
26
+ strong = false,
27
+ size = 'medium'
28
+ } = props;
39
29
  return {
40
- disabled: disabled,
41
- required: react_utilities_2.resolveShorthand(required === false ? null : required, {
42
- required: !!required,
30
+ disabled,
31
+ required: react_utilities_2.resolveShorthand(required === true ? '*' : required || undefined, {
43
32
  defaultProps: {
44
- children: '*'
33
+ 'aria-hidden': 'true'
45
34
  }
46
35
  }),
47
- strong: strong,
48
- size: size,
36
+ strong,
37
+ size,
49
38
  components: {
50
39
  root: 'label',
51
40
  required: 'span'
52
41
  },
53
- root: react_utilities_1.getNativeElementProps('label', tslib_1.__assign({
54
- ref: ref
55
- }, props))
42
+ root: react_utilities_1.getNativeElementProps('label', {
43
+ ref,
44
+ ...props
45
+ })
56
46
  };
57
47
  };
58
48
 
59
- exports.useLabel = useLabel;
49
+ exports.useLabel_unstable = useLabel_unstable;
60
50
  //# sourceMappingURL=useLabel.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,EAAS,UAAT,CAA/C;AAEb;;;;;;;;AAQG;;AACI,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAC7D,MAAA,EAAA,GAAwE,KAAK,CAA7D,QAAhB;AAAA,MAAA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAhB;AAAA,MAAkB,EAAA,GAAsD,KAAK,CAA3C,QAAlC;AAAA,MAAkB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlC;AAAA,MAAoC,EAAA,GAAoC,KAAK,CAA3B,MAAlD;AAAA,MAAoC,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlD;AAAA,MAAoD,EAAA,GAAoB,KAAK,CAAV,IAAnE;AAAA,MAAoD,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAnE;AACR,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7C,EAAuD;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAFiD,KAAvD,CAFL;AAML,IAAA,MAAM,EAAA,MAND;AAOL,IAAA,IAAI,EAAA,IAPC;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA6B,OAAA,CAAA,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAA7B;AATD,GAAP;AAWD,CAbM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}
1
+ {"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvD,EAAkE;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlE,CAFL;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA/B;AARD,GAAP;AAUD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { disabled = false, required = false, strong = false, size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n strong,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1,5 +1,6 @@
1
1
  import type { LabelState } from './Label.types';
2
+ export declare const labelClassName = "fui-Label";
2
3
  /**
3
4
  * Apply styling to the Label slots based on the state
4
5
  */
5
- export declare const useLabelStyles: (state: LabelState) => LabelState;
6
+ export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
@@ -3,15 +3,18 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useLabelStyles = void 0;
6
+ exports.useLabelStyles_unstable = exports.labelClassName = void 0;
7
7
 
8
- var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
+
12
+ exports.labelClassName = 'fui-Label';
9
13
  /**
10
14
  * Styles for the label
11
15
  */
12
16
 
13
-
14
- var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
17
+ const useStyles = /*#__PURE__*/react_1.__styles({
15
18
  "root": {
16
19
  "Bahqtrf": "fk6fouc",
17
20
  "sj55zd": "f19n0e5"
@@ -47,16 +50,16 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
47
50
  */
48
51
 
49
52
 
50
- var useLabelStyles = function (state) {
51
- var styles = useStyles();
52
- state.root.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
53
+ const useLabelStyles_unstable = state => {
54
+ const styles = useStyles();
55
+ state.root.className = react_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
53
56
 
54
57
  if (state.required) {
55
- state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
58
+ state.required.className = react_1.mergeClasses(styles.required, state.required.className);
56
59
  }
57
60
 
58
61
  return state;
59
62
  };
60
63
 
61
- exports.useLabelStyles = useLabelStyles;
64
+ exports.useLabelStyles_unstable = useLabelStyles_unstable;
62
65
  //# sourceMappingURL=useLabelStyles.js.map
@@ -1 +1 @@
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,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFJ,EAGrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHe,EAIrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJF,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;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
+ {"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelState } from './Label.types';\n\nexport const labelClassName = 'fui-Label';\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: '4px', // TODO: Once spacing tokens are added, change this to Horizontal XS\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassName,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./Label"), exports);
10
10
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAEA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAEA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fluentui/react-label",
3
- "version": "9.0.0-beta.2",
4
- "description": "Label component for FluentUI library.",
3
+ "version": "9.0.0-beta.7",
4
+ "description": "Fluent UI React Label component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
7
  "typings": "lib/index.d.ts",
@@ -19,17 +19,16 @@
19
19
  "just": "just-scripts",
20
20
  "lint": "just-scripts lint",
21
21
  "start": "yarn storybook",
22
- "test": "jest",
22
+ "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-label/src && yarn docs",
25
- "storybook": "start-storybook"
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-label/src && yarn docs",
25
+ "storybook": "node ../../scripts/storybook/runner",
26
+ "type-check": "tsc -b tsconfig.json"
26
27
  },
27
28
  "devDependencies": {
28
- "@fluentui/babel-make-styles": "9.0.0-beta.2",
29
29
  "@fluentui/eslint-plugin": "*",
30
- "@fluentui/jest-serializer-make-styles": "9.0.0-beta.2",
31
30
  "@fluentui/react-conformance": "*",
32
- "@fluentui/react-conformance-make-styles": "9.0.0-beta.2",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
33
32
  "@fluentui/scripts": "^1.0.0",
34
33
  "@types/enzyme": "3.10.3",
35
34
  "@types/enzyme-adapter-react-16": "1.0.3",
@@ -43,8 +42,8 @@
43
42
  "react-test-renderer": "^16.3.0"
44
43
  },
45
44
  "dependencies": {
46
- "@fluentui/react-make-styles": "9.0.0-beta.2",
47
- "@fluentui/react-utilities": "9.0.0-beta.2",
45
+ "@fluentui/react-utilities": "9.0.0-rc.3",
46
+ "@griffel/react": "1.0.0",
48
47
  "tslib": "^2.1.0"
49
48
  },
50
49
  "peerDependencies": {
@@ -54,7 +53,6 @@
54
53
  "react-dom": ">=16.8.0 <18.0.0"
55
54
  },
56
55
  "beachball": {
57
- "tag": "beta",
58
56
  "disallowedChangeTypes": [
59
57
  "major",
60
58
  "minor",
@@ -1,4 +0,0 @@
1
- import type { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
@@ -1,11 +0,0 @@
1
- import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
2
- import makeStylesTests from '@fluentui/react-conformance-make-styles';
3
- export function isConformant(testInfo) {
4
- var defaultOptions = {
5
- asPropHandlesRef: true,
6
- componentPath: module.parent.filename.replace('.test', ''),
7
- extraTests: makeStylesTests
8
- };
9
- baseIsConformant(defaultOptions, testInfo);
10
- }
11
- //# sourceMappingURL=isConformant.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}
@@ -1,4 +0,0 @@
1
- import type { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;