@fluentui/react-label 9.0.0-beta.2 → 9.0.0-beta.7
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.
- package/CHANGELOG.json +257 -1
- package/CHANGELOG.md +62 -2
- package/Spec.md +33 -40
- package/dist/react-label.d.ts +15 -20
- package/lib/Label.js.map +1 -1
- package/lib/components/Label/Label.js +7 -7
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Label/Label.types.d.ts +9 -9
- package/lib/components/Label/Label.types.js.map +1 -1
- package/lib/components/Label/index.js.map +1 -1
- package/lib/components/Label/renderLabel.d.ts +1 -1
- package/lib/components/Label/renderLabel.js +8 -8
- package/lib/components/Label/renderLabel.js.map +1 -1
- package/lib/components/Label/useLabel.d.ts +4 -9
- package/lib/components/Label/useLabel.js +18 -27
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.d.ts +2 -1
- package/lib/components/Label/useLabelStyles.js +7 -5
- package/lib/components/Label/useLabelStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Label.js +1 -1
- package/lib-commonjs/Label.js.map +1 -1
- package/lib-commonjs/components/Label/Label.js +8 -8
- package/lib-commonjs/components/Label/Label.js.map +1 -1
- package/lib-commonjs/components/Label/Label.types.d.ts +9 -9
- package/lib-commonjs/components/Label/Label.types.js.map +1 -1
- package/lib-commonjs/components/Label/index.js +1 -1
- package/lib-commonjs/components/Label/index.js.map +1 -1
- package/lib-commonjs/components/Label/renderLabel.d.ts +1 -1
- package/lib-commonjs/components/Label/renderLabel.js +12 -14
- package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.d.ts +4 -9
- package/lib-commonjs/components/Label/useLabel.js +23 -33
- package/lib-commonjs/components/Label/useLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.d.ts +2 -1
- package/lib-commonjs/components/Label/useLabelStyles.js +12 -9
- package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -11
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -11
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -22
- package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,17 +1,12 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import type { LabelProps,
|
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
|
12
|
-
* before being passed to
|
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
|
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
|
14
|
-
* before being passed to
|
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
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
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
|
31
|
-
required: resolveShorthand(required ===
|
32
|
-
required: !!required,
|
21
|
+
disabled,
|
22
|
+
required: resolveShorthand(required === true ? '*' : required || undefined, {
|
33
23
|
defaultProps: {
|
34
|
-
|
24
|
+
'aria-hidden': 'true'
|
35
25
|
}
|
36
26
|
}),
|
37
|
-
strong
|
38
|
-
size
|
27
|
+
strong,
|
28
|
+
size,
|
39
29
|
components: {
|
40
30
|
root: 'label',
|
41
31
|
required: 'span'
|
42
32
|
},
|
43
|
-
root: getNativeElementProps('label',
|
44
|
-
ref
|
45
|
-
|
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":["
|
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
|
6
|
+
export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
|
@@ -1,9 +1,11 @@
|
|
1
|
-
import { __styles, mergeClasses } from '@
|
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
|
-
|
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
|
43
|
-
|
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":["
|
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":["
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
|
package/lib-commonjs/Label.js
CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
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":["
|
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
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
10
|
+
const useLabel_1 = /*#__PURE__*/require("./useLabel");
|
11
11
|
|
12
|
-
|
12
|
+
const renderLabel_1 = /*#__PURE__*/require("./renderLabel");
|
13
13
|
|
14
|
-
|
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(
|
21
|
-
|
22
|
-
useLabelStyles_1.
|
23
|
-
return renderLabel_1.
|
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":["
|
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,
|
2
|
-
|
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:
|
25
|
-
required?:
|
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 |
|
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/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
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/"}
|
@@ -3,27 +3,25 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.renderLabel_unstable = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
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
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
return React.createElement(slots.root,
|
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.
|
26
|
+
exports.renderLabel_unstable = renderLabel_unstable;
|
29
27
|
//# sourceMappingURL=renderLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
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,
|
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
|
12
|
-
* before being passed to
|
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
|
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.
|
6
|
+
exports.useLabel_unstable = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
9
|
|
10
|
-
|
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
|
24
|
-
* before being passed to
|
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
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
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
|
41
|
-
required: react_utilities_2.resolveShorthand(required ===
|
42
|
-
required: !!required,
|
30
|
+
disabled,
|
31
|
+
required: react_utilities_2.resolveShorthand(required === true ? '*' : required || undefined, {
|
43
32
|
defaultProps: {
|
44
|
-
|
33
|
+
'aria-hidden': 'true'
|
45
34
|
}
|
46
35
|
}),
|
47
|
-
strong
|
48
|
-
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',
|
54
|
-
ref
|
55
|
-
|
42
|
+
root: react_utilities_1.getNativeElementProps('label', {
|
43
|
+
ref,
|
44
|
+
...props
|
45
|
+
})
|
56
46
|
};
|
57
47
|
};
|
58
48
|
|
59
|
-
exports.
|
49
|
+
exports.useLabel_unstable = useLabel_unstable;
|
60
50
|
//# sourceMappingURL=useLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
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
|
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.
|
6
|
+
exports.useLabelStyles_unstable = exports.labelClassName = void 0;
|
7
7
|
|
8
|
-
|
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
|
-
|
51
|
-
|
52
|
-
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 =
|
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.
|
64
|
+
exports.useLabelStyles_unstable = useLabelStyles_unstable;
|
62
65
|
//# sourceMappingURL=useLabelStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelState } from './Label.types';\n\nexport const labelClassName = 'fui-Label';\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: '4px', // TODO: Once spacing tokens are added, change this to Horizontal XS\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassName,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAEA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-label",
|
3
|
-
"version": "9.0.0-beta.
|
4
|
-
"description": "
|
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": "
|
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-
|
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-
|
47
|
-
"@
|
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,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":""}
|