@fluentui/react-label 9.0.0-beta.1 → 9.0.0-beta.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +423 -1
- package/CHANGELOG.md +112 -2
- package/README.md +2 -1
- package/Spec.md +33 -40
- package/dist/react-label.d.ts +19 -18
- 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 +8 -2
- package/lib/components/Label/useLabelStyles.js +16 -6
- package/lib/components/Label/useLabelStyles.js.map +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.js +2 -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 +8 -2
- package/lib-commonjs/components/Label/useLabelStyles.js +20 -9
- package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -2
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +18 -22
- 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
package/dist/react-label.d.ts
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
3
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
-
import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
5
|
-
import type { ObjectShorthandProps } from '@fluentui/react-utilities';
|
6
4
|
import * as React_2 from 'react';
|
5
|
+
import type { Slot } from '@fluentui/react-utilities';
|
6
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
7
7
|
|
8
8
|
/**
|
9
9
|
* A label component provides a title or name to a component.
|
@@ -11,9 +11,13 @@ import * as React_2 from 'react';
|
|
11
11
|
export declare const Label: ForwardRefComponent<LabelProps>;
|
12
12
|
|
13
13
|
/**
|
14
|
-
*
|
14
|
+
* @deprecated Use `labelClassNames.root` instead.
|
15
15
|
*/
|
16
|
-
export declare
|
16
|
+
export declare const labelClassName = "fui-Label";
|
17
|
+
|
18
|
+
export declare const labelClassNames: SlotClassNames<LabelSlots>;
|
19
|
+
|
20
|
+
declare type LabelCommons = {
|
17
21
|
/**
|
18
22
|
* Renders the label as disabled
|
19
23
|
* @defaultvalue false
|
@@ -31,24 +35,21 @@ export declare type LabelCommons = {
|
|
31
35
|
strong: boolean;
|
32
36
|
};
|
33
37
|
|
38
|
+
/**
|
39
|
+
* Label Props
|
40
|
+
*/
|
34
41
|
export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
|
35
42
|
/**
|
36
43
|
* Displays and indicator that the label is for a required field. The required prop can be set to true to display
|
37
44
|
* an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
|
38
45
|
* @defaultvalue false
|
39
46
|
*/
|
40
|
-
required?: boolean |
|
47
|
+
required?: boolean | Slot<'span'>;
|
41
48
|
};
|
42
49
|
|
43
|
-
/**
|
44
|
-
* Array of all shorthand properties listed in LabelShorthandProps
|
45
|
-
* {@docCatergory Label}
|
46
|
-
*/
|
47
|
-
export declare const labelShorthandProps: Array<keyof LabelSlots>;
|
48
|
-
|
49
50
|
export declare type LabelSlots = {
|
50
|
-
root:
|
51
|
-
required?:
|
51
|
+
root: Slot<'label'>;
|
52
|
+
required?: Slot<'span'>;
|
52
53
|
};
|
53
54
|
|
54
55
|
/**
|
@@ -59,22 +60,22 @@ export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
|
|
59
60
|
/**
|
60
61
|
* Render the final JSX of Label
|
61
62
|
*/
|
62
|
-
export declare const
|
63
|
+
export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
|
63
64
|
|
64
65
|
/**
|
65
66
|
* Create the state required to render Label.
|
66
67
|
*
|
67
|
-
* The returned state can be modified with hooks such as
|
68
|
-
* before being passed to
|
68
|
+
* The returned state can be modified with hooks such as useLabelStyles_unstable,
|
69
|
+
* before being passed to renderLabel_unstable.
|
69
70
|
*
|
70
71
|
* @param props - props from this instance of Label
|
71
72
|
* @param ref - reference to root HTMLElement of Label
|
72
73
|
*/
|
73
|
-
export declare const
|
74
|
+
export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
|
74
75
|
|
75
76
|
/**
|
76
77
|
* Apply styling to the Label slots based on the state
|
77
78
|
*/
|
78
|
-
export declare const
|
79
|
+
export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
|
79
80
|
|
80
81
|
export { }
|
package/lib/Label.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["Label.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Label/index';\n"]}
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { useLabel_unstable } from './useLabel';
|
3
|
+
import { renderLabel_unstable } from './renderLabel';
|
4
|
+
import { useLabelStyles_unstable } from './useLabelStyles';
|
5
5
|
/**
|
6
6
|
* A label component provides a title or name to a component.
|
7
7
|
*/
|
8
8
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
return
|
9
|
+
export const Label = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
+
const state = useLabel_unstable(props, ref);
|
11
|
+
useLabelStyles_unstable(state);
|
12
|
+
return renderLabel_unstable(state);
|
13
13
|
});
|
14
14
|
Label.displayName = 'Label';
|
15
15
|
//# sourceMappingURL=Label.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,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,"file":"Label.types.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ntype LabelCommons = {\n /**\n * Renders the label as disabled\n * @defaultvalue false\n */\n disabled: boolean;\n\n /**\n * A label supports different sizes.\n * @defaultvalue 'medium'\n */\n size: 'small' | 'medium' | 'large';\n\n /**\n * A label supports semibold/strong fontweight.\n * @defaultvalue false\n */\n strong: boolean;\n};\n\nexport type LabelSlots = {\n root: Slot<'label'>;\n required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & LabelCommons;\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &\n Partial<LabelCommons> & {\n /**\n * Displays and indicator that the label is for a required field. The required prop can be set to true to display\n * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n * @defaultvalue false\n */\n required?: boolean | Slot<'span'>;\n };\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
|
@@ -1,16 +1,16 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
4
|
-
import { labelShorthandProps } from './useLabel';
|
5
3
|
/**
|
6
4
|
* Render the final JSX of Label
|
7
5
|
*/
|
8
6
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
7
|
+
export const renderLabel_unstable = state => {
|
8
|
+
const {
|
9
|
+
slots,
|
10
|
+
slotProps
|
11
|
+
} = getSlots(state);
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
+
}, state.root.children, slots.required && /*#__PURE__*/React.createElement(slots.required, { ...slotProps.required
|
14
|
+
}));
|
15
15
|
};
|
16
16
|
//# sourceMappingURL=renderLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFrB,CADF;AAMD,CATM","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;
|
@@ -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,11 @@
|
|
1
|
-
import type { LabelState } from './Label.types';
|
1
|
+
import type { LabelSlots, LabelState } from './Label.types';
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* @deprecated Use `labelClassNames.root` instead.
|
5
|
+
*/
|
6
|
+
export declare const labelClassName = "fui-Label";
|
7
|
+
export declare const labelClassNames: SlotClassNames<LabelSlots>;
|
2
8
|
/**
|
3
9
|
* Apply styling to the Label slots based on the state
|
4
10
|
*/
|
5
|
-
export declare const
|
11
|
+
export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
|
@@ -1,9 +1,19 @@
|
|
1
|
-
import { __styles, mergeClasses } from '@
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
/**
|
4
|
+
* @deprecated Use `labelClassNames.root` instead.
|
5
|
+
*/
|
6
|
+
|
7
|
+
export const labelClassName = 'fui-Label';
|
8
|
+
export const labelClassNames = {
|
9
|
+
root: 'fui-Label',
|
10
|
+
required: 'fui-Label__required'
|
11
|
+
};
|
2
12
|
/**
|
3
13
|
* Styles for the label
|
4
14
|
*/
|
5
15
|
|
6
|
-
|
16
|
+
const useStyles = /*#__PURE__*/__styles({
|
7
17
|
"root": {
|
8
18
|
"Bahqtrf": "fk6fouc",
|
9
19
|
"sj55zd": "f19n0e5"
|
@@ -39,12 +49,12 @@ var useStyles = /*#__PURE__*/__styles({
|
|
39
49
|
*/
|
40
50
|
|
41
51
|
|
42
|
-
export
|
43
|
-
|
44
|
-
state.root.className = mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
|
52
|
+
export const useLabelStyles_unstable = state => {
|
53
|
+
const styles = useStyles();
|
54
|
+
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
|
45
55
|
|
46
56
|
if (state.required) {
|
47
|
-
state.required.className = mergeClasses(styles.required, state.required.className);
|
57
|
+
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.required.className);
|
48
58
|
}
|
49
59
|
|
50
60
|
return state;
|
@@ -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;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,QAAQ,EAAE;AAF+C,CAApD;AAKP;;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,eAAe,CAAC,IADiB,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,eAAe,CAAC,QAAjB,EAA2B,MAAM,CAAC,QAAlC,EAA4C,KAAK,CAAC,QAAN,CAAe,SAA3D,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `labelClassNames.root` instead.\n */\nexport const labelClassName = 'fui-Label';\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: '4px', // TODO: Once spacing tokens are added, change this to Horizontal XS\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.required.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export {};
|
2
|
-
export
|
1
|
+
export { Label, labelClassName, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable, } from './Label';
|
2
|
+
export type { LabelProps, LabelSlots, LabelState } from './Label';
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,KADF,EAEE;AACA,cAHF,EAIE,eAJF,EAKE,oBALF,EAME,uBANF,EAOE,iBAPF,QAQO,SARP","sourcesContent":["export {\n Label,\n // eslint-disable-next-line deprecation/deprecation\n labelClassName,\n labelClassNames,\n renderLabel_unstable,\n useLabelStyles_unstable,\n useLabel_unstable,\n} from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"],"sourceRoot":"../src/"}
|
package/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;
|