@fluentui/react-label 9.0.0-alpha.9 → 9.0.0-beta.11
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 +1644 -1
- package/CHANGELOG.md +570 -9
- package/README.md +2 -1
- package/Spec.md +23 -33
- package/dist/index.d.ts +81 -0
- package/lib/components/Label/Label.d.ts +3 -4
- package/lib/components/Label/Label.js +8 -8
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Label/Label.types.d.ts +20 -35
- package/lib/components/Label/Label.types.js.map +1 -1
- package/lib/components/Label/renderLabel.d.ts +2 -3
- package/lib/components/Label/renderLabel.js +9 -8
- package/lib/components/Label/renderLabel.js.map +1 -1
- package/lib/components/Label/useLabel.d.ts +4 -12
- package/lib/components/Label/useLabel.js +30 -42
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.d.ts +8 -2
- package/lib/components/Label/useLabelStyles.js +56 -35
- 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/tsdoc-metadata.json +1 -1
- package/lib-commonjs/Label.js +7 -2
- package/lib-commonjs/Label.js.map +1 -1
- package/lib-commonjs/components/Label/Label.d.ts +3 -4
- package/lib-commonjs/components/Label/Label.js +18 -10
- package/lib-commonjs/components/Label/Label.js.map +1 -1
- package/lib-commonjs/components/Label/Label.types.d.ts +20 -35
- package/lib-commonjs/components/Label/Label.types.js +4 -1
- package/lib-commonjs/components/Label/Label.types.js.map +1 -1
- package/lib-commonjs/components/Label/index.js +11 -2
- package/lib-commonjs/components/Label/index.js.map +1 -1
- package/lib-commonjs/components/Label/renderLabel.d.ts +2 -3
- package/lib-commonjs/components/Label/renderLabel.js +21 -13
- package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.d.ts +4 -12
- package/lib-commonjs/components/Label/useLabel.js +40 -45
- 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 +66 -38
- package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -2
- package/lib-commonjs/index.js +45 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +23 -23
- package/config/api-extractor.json +0 -3
- package/config/tests.js +0 -7
- package/dist/react-label.d.ts +0 -99
- package/etc/react-label.api.md +0 -51
- package/just.config.ts +0 -3
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -9
- package/lib/common/isConformant.js.map +0 -1
- package/lib-amd/Label.d.ts +0 -1
- package/lib-amd/Label.js +0 -6
- package/lib-amd/Label.js.map +0 -1
- package/lib-amd/common/isConformant.d.ts +0 -4
- package/lib-amd/common/isConformant.js +0 -14
- package/lib-amd/common/isConformant.js.map +0 -1
- package/lib-amd/components/Label/Label.d.ts +0 -7
- package/lib-amd/components/Label/Label.js +0 -16
- package/lib-amd/components/Label/Label.js.map +0 -1
- package/lib-amd/components/Label/Label.types.d.ts +0 -53
- package/lib-amd/components/Label/Label.types.js +0 -5
- package/lib-amd/components/Label/Label.types.js.map +0 -1
- package/lib-amd/components/Label/index.d.ts +0 -5
- package/lib-amd/components/Label/index.js +0 -10
- package/lib-amd/components/Label/index.js.map +0 -1
- package/lib-amd/components/Label/renderLabel.d.ts +0 -6
- package/lib-amd/components/Label/renderLabel.js +0 -17
- package/lib-amd/components/Label/renderLabel.js.map +0 -1
- package/lib-amd/components/Label/useLabel.d.ts +0 -20
- package/lib-amd/components/Label/useLabel.js +0 -55
- package/lib-amd/components/Label/useLabel.js.map +0 -1
- package/lib-amd/components/Label/useLabelStyles.d.ts +0 -5
- package/lib-amd/components/Label/useLabelStyles.js +0 -49
- package/lib-amd/components/Label/useLabelStyles.js.map +0 -1
- package/lib-amd/index.d.ts +0 -2
- package/lib-amd/index.js +0 -6
- package/lib-amd/index.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -13
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/src/components/Label/Label.types.ts +0 -61
package/README.md
CHANGED
@@ -11,9 +11,10 @@ To use the `Label` component import it from `@fluentui/react-label` and use it a
|
|
11
11
|
```tsx
|
12
12
|
import * as React from 'react';
|
13
13
|
import { Label } from '@fluentui/react-label';
|
14
|
+
import { useId } from '@fluentui/react-utilities';
|
14
15
|
|
15
16
|
export const labelExample = () => {
|
16
|
-
const inputId =
|
17
|
+
const inputId = useId('firstNameLabel-');
|
17
18
|
|
18
19
|
return (
|
19
20
|
<>
|
package/Spec.md
CHANGED
@@ -75,58 +75,48 @@ The Label component should be simple as shown below. It will just need the text
|
|
75
75
|
## API
|
76
76
|
|
77
77
|
```ts
|
78
|
-
|
79
|
-
* Label Props
|
80
|
-
* {@docCategory Label}
|
81
|
-
*/
|
82
|
-
export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLElement> {
|
78
|
+
export type LabelCommons = {
|
83
79
|
/**
|
84
80
|
* Renders the label as disabled
|
85
81
|
* @defaultvalue false
|
86
82
|
*/
|
87
|
-
disabled
|
88
|
-
|
89
|
-
/**
|
90
|
-
* Whether the associated form field is required or not. If true it will be an asterisk, otherwise it will be what is provided.
|
91
|
-
* @defaultvalue false
|
92
|
-
*/
|
93
|
-
required?: boolean | ShorthandProps<ComponentProps>;
|
83
|
+
disabled: boolean;
|
94
84
|
|
95
85
|
/**
|
96
|
-
* A label supports different
|
86
|
+
* A label supports different sizes.
|
97
87
|
* @defaultvalue 'medium'
|
98
88
|
*/
|
99
|
-
size
|
89
|
+
size: 'small' | 'medium' | 'large';
|
100
90
|
|
101
91
|
/**
|
102
|
-
* A label supports semibold/strong fontweight.
|
92
|
+
* A label supports semibold/strong fontweight.
|
103
93
|
* @defaultvalue false
|
104
94
|
*/
|
105
|
-
strong
|
106
|
-
}
|
95
|
+
strong: boolean;
|
96
|
+
};
|
107
97
|
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
export type LabelShorthandProps = 'required';
|
98
|
+
export type LabelSlots = {
|
99
|
+
root: IntrinsicSlotProps<'label'>;
|
100
|
+
required?: IntrinsicSlotProps<'span'>;
|
101
|
+
};
|
113
102
|
|
114
103
|
/**
|
115
|
-
*
|
116
|
-
* {@docCategory Label}
|
104
|
+
* State used in rendering Label
|
117
105
|
*/
|
118
|
-
export type
|
106
|
+
export type LabelState = ComponentState<LabelSlots> & LabelCommons;
|
119
107
|
|
120
108
|
/**
|
121
|
-
*
|
122
|
-
* {@docCategory Label}
|
109
|
+
* Label Props
|
123
110
|
*/
|
124
|
-
export
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
111
|
+
export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &
|
112
|
+
Partial<LabelCommons> & {
|
113
|
+
/**
|
114
|
+
* Displays and indicator that the label is for a required field. The required prop can be set to true to display
|
115
|
+
* an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
|
116
|
+
* @defaultvalue false
|
117
|
+
*/
|
118
|
+
required?: boolean | IntrinsicSlotProps<'span'> | React.ReactNode;
|
119
|
+
};
|
130
120
|
```
|
131
121
|
|
132
122
|
## Structure
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,81 @@
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
+
import * as React_2 from 'react';
|
5
|
+
import type { Slot } from '@fluentui/react-utilities';
|
6
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
7
|
+
|
8
|
+
/**
|
9
|
+
* A label component provides a title or name to a component.
|
10
|
+
*/
|
11
|
+
export declare const Label: ForwardRefComponent<LabelProps>;
|
12
|
+
|
13
|
+
/**
|
14
|
+
* @deprecated Use `labelClassNames.root` instead.
|
15
|
+
*/
|
16
|
+
export declare const labelClassName = "fui-Label";
|
17
|
+
|
18
|
+
export declare const labelClassNames: SlotClassNames<LabelSlots>;
|
19
|
+
|
20
|
+
declare type LabelCommons = {
|
21
|
+
/**
|
22
|
+
* Renders the label as disabled
|
23
|
+
* @defaultvalue false
|
24
|
+
*/
|
25
|
+
disabled: boolean;
|
26
|
+
/**
|
27
|
+
* A label supports different sizes.
|
28
|
+
* @defaultvalue 'medium'
|
29
|
+
*/
|
30
|
+
size: 'small' | 'medium' | 'large';
|
31
|
+
/**
|
32
|
+
* A label supports semibold/strong fontweight.
|
33
|
+
* @defaultvalue false
|
34
|
+
*/
|
35
|
+
strong: boolean;
|
36
|
+
};
|
37
|
+
|
38
|
+
/**
|
39
|
+
* Label Props
|
40
|
+
*/
|
41
|
+
export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
|
42
|
+
/**
|
43
|
+
* Displays and indicator that the label is for a required field. The required prop can be set to true to display
|
44
|
+
* an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
|
45
|
+
* @defaultvalue false
|
46
|
+
*/
|
47
|
+
required?: boolean | Slot<'span'>;
|
48
|
+
};
|
49
|
+
|
50
|
+
export declare type LabelSlots = {
|
51
|
+
root: Slot<'label'>;
|
52
|
+
required?: Slot<'span'>;
|
53
|
+
};
|
54
|
+
|
55
|
+
/**
|
56
|
+
* State used in rendering Label
|
57
|
+
*/
|
58
|
+
export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
|
59
|
+
|
60
|
+
/**
|
61
|
+
* Render the final JSX of Label
|
62
|
+
*/
|
63
|
+
export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Create the state required to render Label.
|
67
|
+
*
|
68
|
+
* The returned state can be modified with hooks such as useLabelStyles_unstable,
|
69
|
+
* before being passed to renderLabel_unstable.
|
70
|
+
*
|
71
|
+
* @param props - props from this instance of Label
|
72
|
+
* @param ref - reference to root HTMLElement of Label
|
73
|
+
*/
|
74
|
+
export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
|
75
|
+
|
76
|
+
/**
|
77
|
+
* Apply styling to the Label slots based on the state
|
78
|
+
*/
|
79
|
+
export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
|
80
|
+
|
81
|
+
export { }
|
@@ -1,7 +1,6 @@
|
|
1
|
-
import
|
2
|
-
import {
|
1
|
+
import type { LabelProps } from './Label.types';
|
2
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
3
|
/**
|
4
4
|
* A label component provides a title or name to a component.
|
5
|
-
* {@docCategory Label}
|
6
5
|
*/
|
7
|
-
export declare const Label:
|
6
|
+
export declare const Label: ForwardRefComponent<LabelProps>;
|
@@ -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
|
-
* {@docCategory Label}
|
8
7
|
*/
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
8
|
+
|
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,"
|
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,53 +1,38 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Label Props
|
5
|
-
* {@docCategory Label}
|
6
|
-
*/
|
7
|
-
export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
+
declare type LabelCommons = {
|
8
3
|
/**
|
9
4
|
* Renders the label as disabled
|
10
5
|
* @defaultvalue false
|
11
6
|
*/
|
12
|
-
disabled
|
13
|
-
/**
|
14
|
-
* Displays and indicator that the label is for a required field. The required prop can be set to true to display
|
15
|
-
* an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
|
16
|
-
* @defaultvalue false
|
17
|
-
*/
|
18
|
-
required?: boolean | ShorthandProps<ComponentProps>;
|
7
|
+
disabled: boolean;
|
19
8
|
/**
|
20
9
|
* A label supports different sizes.
|
21
10
|
* @defaultvalue 'medium'
|
22
11
|
*/
|
23
|
-
size
|
12
|
+
size: 'small' | 'medium' | 'large';
|
24
13
|
/**
|
25
14
|
* A label supports semibold/strong fontweight.
|
26
15
|
* @defaultvalue false
|
27
16
|
*/
|
28
|
-
strong
|
29
|
-
}
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
export declare type LabelShorthandProps = 'required';
|
17
|
+
strong: boolean;
|
18
|
+
};
|
19
|
+
export declare type LabelSlots = {
|
20
|
+
root: Slot<'label'>;
|
21
|
+
required?: Slot<'span'>;
|
22
|
+
};
|
35
23
|
/**
|
36
|
-
*
|
37
|
-
* {@docCategory Label}
|
24
|
+
* State used in rendering Label
|
38
25
|
*/
|
39
|
-
export declare type
|
26
|
+
export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
|
40
27
|
/**
|
41
|
-
*
|
42
|
-
* {@docCategory Label}
|
28
|
+
* Label Props
|
43
29
|
*/
|
44
|
-
export
|
30
|
+
export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
|
45
31
|
/**
|
46
|
-
*
|
47
|
-
|
48
|
-
|
49
|
-
/**
|
50
|
-
* The required prop resolved to a slot object
|
32
|
+
* Displays and indicator that the label is for a required field. The required prop can be set to true to display
|
33
|
+
* an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
|
34
|
+
* @defaultvalue false
|
51
35
|
*/
|
52
|
-
required?:
|
53
|
-
}
|
36
|
+
required?: boolean | Slot<'span'>;
|
37
|
+
};
|
38
|
+
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import
|
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,6 +1,5 @@
|
|
1
|
-
import { LabelState } from './Label.types';
|
1
|
+
import type { LabelState } from './Label.types';
|
2
2
|
/**
|
3
3
|
* Render the final JSX of Label
|
4
|
-
* {@docCategory Label}
|
5
4
|
*/
|
6
|
-
export declare const
|
5
|
+
export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
|
@@ -1,15 +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
|
-
* {@docCategory Label}
|
8
5
|
*/
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
6
|
+
|
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
|
+
}));
|
14
15
|
};
|
15
16
|
//# sourceMappingURL=renderLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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,20 +1,12 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { LabelProps,
|
3
|
-
/**
|
4
|
-
* Array of all shorthand properties listed in LabelShorthandProps
|
5
|
-
* {@docCatergory Label}
|
6
|
-
*/
|
7
|
-
export declare const labelShorthandProps: LabelShorthandProps[];
|
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
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
17
|
-
*
|
18
|
-
* {@docCategory Label}
|
19
11
|
*/
|
20
|
-
export declare const
|
12
|
+
export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
|
@@ -1,51 +1,39 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
/**
|
4
|
-
* Array of all shorthand properties listed in LabelShorthandProps
|
5
|
-
* {@docCatergory Label}
|
6
|
-
*/
|
7
|
-
export var labelShorthandProps = ['required'];
|
8
|
-
var mergeProps = makeMergeProps({ deepMerge: labelShorthandProps });
|
1
|
+
import { getNativeElementProps } from '@fluentui/react-utilities';
|
2
|
+
import { resolveShorthand } from '@fluentui/react-utilities';
|
9
3
|
/**
|
10
4
|
* Create the state required to render Label.
|
11
5
|
*
|
12
|
-
* The returned state can be modified with hooks such as
|
13
|
-
* before being passed to
|
6
|
+
* The returned state can be modified with hooks such as useLabelStyles_unstable,
|
7
|
+
* before being passed to renderLabel_unstable.
|
14
8
|
*
|
15
9
|
* @param props - props from this instance of Label
|
16
10
|
* @param ref - reference to root HTMLElement of Label
|
17
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
18
|
-
*
|
19
|
-
* {@docCategory Label}
|
20
|
-
*/
|
21
|
-
export var useLabel = function (props, ref, defaultProps) {
|
22
|
-
var state = mergeProps({
|
23
|
-
ref: ref,
|
24
|
-
as: 'label',
|
25
|
-
size: 'medium',
|
26
|
-
required: {
|
27
|
-
as: 'span',
|
28
|
-
},
|
29
|
-
}, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
|
30
|
-
return state;
|
31
|
-
};
|
32
|
-
/**
|
33
|
-
* Label will first need to check if required is a boolean or shorthandprops,
|
34
|
-
* this allows for the required prop to handle both the default asterisk for required
|
35
|
-
* or a custom required text.
|
36
11
|
*/
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
12
|
+
|
13
|
+
export const useLabel_unstable = (props, ref) => {
|
14
|
+
const {
|
15
|
+
disabled = false,
|
16
|
+
required = false,
|
17
|
+
strong = false,
|
18
|
+
size = 'medium'
|
19
|
+
} = props;
|
20
|
+
return {
|
21
|
+
disabled,
|
22
|
+
required: resolveShorthand(required === true ? '*' : required || undefined, {
|
23
|
+
defaultProps: {
|
24
|
+
'aria-hidden': 'true'
|
25
|
+
}
|
26
|
+
}),
|
27
|
+
strong,
|
28
|
+
size,
|
29
|
+
components: {
|
30
|
+
root: 'label',
|
31
|
+
required: 'span'
|
32
|
+
},
|
33
|
+
root: getNativeElementProps('label', {
|
34
|
+
ref,
|
35
|
+
...props
|
36
|
+
})
|
37
|
+
};
|
50
38
|
};
|
51
39
|
//# sourceMappingURL=useLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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 { 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,44 +1,65 @@
|
|
1
|
-
import {
|
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
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
15
|
+
|
16
|
+
const useStyles = /*#__PURE__*/__styles({
|
17
|
+
"root": {
|
18
|
+
"Bahqtrf": "fk6fouc",
|
19
|
+
"sj55zd": "f19n0e5"
|
20
|
+
},
|
21
|
+
"disabled": {
|
22
|
+
"sj55zd": "f1s2aq7o"
|
23
|
+
},
|
24
|
+
"required": {
|
25
|
+
"sj55zd": "f1whyuy6",
|
26
|
+
"uwmqm3": ["fycuoez", "f8wuabp"]
|
27
|
+
},
|
28
|
+
"requiredDisabled": {
|
29
|
+
"sj55zd": "f1s2aq7o"
|
30
|
+
},
|
31
|
+
"small": {
|
32
|
+
"Be2twd7": "fy9rknc",
|
33
|
+
"Bg96gwp": "fwrc4pm"
|
34
|
+
},
|
35
|
+
"medium": {
|
36
|
+
"Be2twd7": "fkhj508",
|
37
|
+
"Bg96gwp": "f1i3iumi"
|
38
|
+
},
|
39
|
+
"large": {
|
40
|
+
"Be2twd7": "fod5ikn",
|
41
|
+
"Bg96gwp": "faaz57k",
|
42
|
+
"Bhrd7zp": "fl43uef"
|
43
|
+
},
|
44
|
+
"strong": {
|
45
|
+
"Bhrd7zp": "fl43uef"
|
46
|
+
}
|
47
|
+
}, {
|
48
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fycuoez{padding-left:4px;}", ".f8wuabp{padding-right:4px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
|
32
49
|
});
|
33
50
|
/**
|
34
51
|
* Apply styling to the Label slots based on the state
|
35
52
|
*/
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
53
|
+
|
54
|
+
|
55
|
+
export const useLabelStyles_unstable = state => {
|
56
|
+
const styles = useStyles();
|
57
|
+
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
|
58
|
+
|
59
|
+
if (state.required) {
|
60
|
+
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.requiredDisabled, state.required.className);
|
61
|
+
}
|
62
|
+
|
63
|
+
return state;
|
43
64
|
};
|
44
65
|
//# sourceMappingURL=useLabelStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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;AAAA;AAAA;AAAA,EAAlB;AAwCA;;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,CACrC,eAAe,CAAC,QADqB,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,gBAHY,EAIrC,KAAK,CAAC,QAAN,CAAe,SAJsB,CAAvC;AAMD;;AAED,SAAO,KAAP;AACD,CArBM","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 requiredDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\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(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.requiredDisabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|