@fluentui/react-label 9.0.0-rc.2 → 9.0.0-rc.5
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +78 -1
- package/CHANGELOG.md +33 -2
- package/dist/index.d.ts +4 -9
- package/lib/components/Label/Label.types.js.map +1 -1
- package/lib/components/Label/useLabel.js +2 -2
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.js +2 -7
- package/lib/components/Label/useLabelStyles.js.map +1 -1
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.js +2 -2
- package/lib-commonjs/components/Label/useLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.js +3 -8
- package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,84 @@
|
|
|
2
2
|
"name": "@fluentui/react-label",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 31 May 2022 21:26:34 GMT",
|
|
6
|
+
"tag": "@fluentui/react-label_v9.0.0-rc.5",
|
|
7
|
+
"version": "9.0.0-rc.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-label",
|
|
13
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-label",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
20
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-label",
|
|
25
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
26
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Thu, 26 May 2022 21:01:25 GMT",
|
|
33
|
+
"tag": "@fluentui/react-label_v9.0.0-rc.4",
|
|
34
|
+
"version": "9.0.0-rc.4",
|
|
35
|
+
"comments": {
|
|
36
|
+
"prerelease": [
|
|
37
|
+
{
|
|
38
|
+
"author": "esteban.230@hotmail.com",
|
|
39
|
+
"package": "@fluentui/react-label",
|
|
40
|
+
"commit": "a83d94f03515a893750637eb4e8e97d24dd2d915",
|
|
41
|
+
"comment": "Renaming strong prop to weight to align with Text."
|
|
42
|
+
}
|
|
43
|
+
],
|
|
44
|
+
"none": [
|
|
45
|
+
{
|
|
46
|
+
"author": "olfedias@microsoft.com",
|
|
47
|
+
"package": "@fluentui/react-label",
|
|
48
|
+
"commit": "f3f38785ed2cd5fda98b03672d6e7ba70c05b5da",
|
|
49
|
+
"comment": "remove a notice about unstable"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"date": "Mon, 23 May 2022 18:56:45 GMT",
|
|
56
|
+
"tag": "@fluentui/react-label_v9.0.0-rc.3",
|
|
57
|
+
"version": "9.0.0-rc.3",
|
|
58
|
+
"comments": {
|
|
59
|
+
"prerelease": [
|
|
60
|
+
{
|
|
61
|
+
"author": "esteban.230@hotmail.com",
|
|
62
|
+
"package": "@fluentui/react-label",
|
|
63
|
+
"commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
|
|
64
|
+
"comment": "Removing <componentName>ClassName exports."
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "beachball",
|
|
68
|
+
"package": "@fluentui/react-label",
|
|
69
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
|
|
70
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"author": "beachball",
|
|
74
|
+
"package": "@fluentui/react-label",
|
|
75
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
|
|
76
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"date": "Mon, 23 May 2022 12:14:19 GMT",
|
|
6
83
|
"tag": "@fluentui/react-label_v9.0.0-rc.2",
|
|
7
84
|
"version": "9.0.0-rc.2",
|
|
8
85
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,43 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-label
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 31 May 2022 21:26:34 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.5)
|
|
8
|
+
|
|
9
|
+
Tue, 31 May 2022 21:26:34 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.4..@fluentui/react-label_v9.0.0-rc.5)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.4)
|
|
19
|
+
|
|
20
|
+
Thu, 26 May 2022 21:01:25 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.3..@fluentui/react-label_v9.0.0-rc.4)
|
|
22
|
+
|
|
23
|
+
### Changes
|
|
24
|
+
|
|
25
|
+
- Renaming strong prop to weight to align with Text. ([PR #23250](https://github.com/microsoft/fluentui/pull/23250) by esteban.230@hotmail.com)
|
|
26
|
+
|
|
27
|
+
## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.3)
|
|
28
|
+
|
|
29
|
+
Mon, 23 May 2022 18:56:45 GMT
|
|
30
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-rc.2..@fluentui/react-label_v9.0.0-rc.3)
|
|
31
|
+
|
|
32
|
+
### Changes
|
|
33
|
+
|
|
34
|
+
- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
|
|
35
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
36
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
37
|
+
|
|
7
38
|
## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-rc.2)
|
|
8
39
|
|
|
9
|
-
Mon, 23 May 2022 12:
|
|
40
|
+
Mon, 23 May 2022 12:14:19 GMT
|
|
10
41
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.12..@fluentui/react-label_v9.0.0-rc.2)
|
|
11
42
|
|
|
12
43
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -10,11 +10,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
10
10
|
*/
|
|
11
11
|
export declare const Label: ForwardRefComponent<LabelProps>;
|
|
12
12
|
|
|
13
|
-
/**
|
|
14
|
-
* @deprecated Use `labelClassNames.root` instead.
|
|
15
|
-
*/
|
|
16
|
-
export declare const labelClassName = "fui-Label";
|
|
17
|
-
|
|
18
13
|
export declare const labelClassNames: SlotClassNames<LabelSlots>;
|
|
19
14
|
|
|
20
15
|
/**
|
|
@@ -38,10 +33,10 @@ export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &
|
|
|
38
33
|
*/
|
|
39
34
|
size?: 'small' | 'medium' | 'large';
|
|
40
35
|
/**
|
|
41
|
-
* A label supports semibold
|
|
42
|
-
* @default
|
|
36
|
+
* A label supports regular and semibold fontweight.
|
|
37
|
+
* @default regular
|
|
43
38
|
*/
|
|
44
|
-
|
|
39
|
+
weight?: 'regular' | 'semibold';
|
|
45
40
|
};
|
|
46
41
|
|
|
47
42
|
export declare type LabelSlots = {
|
|
@@ -52,7 +47,7 @@ export declare type LabelSlots = {
|
|
|
52
47
|
/**
|
|
53
48
|
* State used in rendering Label
|
|
54
49
|
*/
|
|
55
|
-
export declare type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | '
|
|
50
|
+
export declare type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;
|
|
56
51
|
|
|
57
52
|
/**
|
|
58
53
|
* Render the final JSX of Label
|
|
@@ -1 +1 @@
|
|
|
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\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n /**\n * Renders the label as disabled\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Displays an 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 * @default false\n */\n required?: boolean | Slot<'span'>;\n\n /**\n * A label supports different sizes.\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * A label supports semibold
|
|
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\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n /**\n * Renders the label as disabled\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Displays an 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 * @default false\n */\n required?: boolean | Slot<'span'>;\n\n /**\n * A label supports different sizes.\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * A label supports regular and semibold fontweight.\n * @default regular\n */\n weight?: 'regular' | 'semibold';\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> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;\n"]}
|
|
@@ -14,7 +14,7 @@ export const useLabel_unstable = (props, ref) => {
|
|
|
14
14
|
const {
|
|
15
15
|
disabled = false,
|
|
16
16
|
required = false,
|
|
17
|
-
|
|
17
|
+
weight = 'regular',
|
|
18
18
|
size = 'medium'
|
|
19
19
|
} = props;
|
|
20
20
|
return {
|
|
@@ -24,7 +24,7 @@ export const useLabel_unstable = (props, ref) => {
|
|
|
24
24
|
'aria-hidden': 'true'
|
|
25
25
|
}
|
|
26
26
|
}),
|
|
27
|
-
|
|
27
|
+
weight,
|
|
28
28
|
size,
|
|
29
29
|
components: {
|
|
30
30
|
root: 'label',
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,SAA/C;AAA0D,IAAA,IAAI,GAAG;AAAjE,MAA8E,KAApF;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, weight = 'regular', size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n weight,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `labelClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export const labelClassName = 'fui-Label';
|
|
8
3
|
export const labelClassNames = {
|
|
9
4
|
root: 'fui-Label',
|
|
10
5
|
required: 'fui-Label__required'
|
|
@@ -41,7 +36,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
41
36
|
"Bg96gwp": "faaz57k",
|
|
42
37
|
"Bhrd7zp": "fl43uef"
|
|
43
38
|
},
|
|
44
|
-
"
|
|
39
|
+
"semibold": {
|
|
45
40
|
"Bhrd7zp": "fl43uef"
|
|
46
41
|
}
|
|
47
42
|
}, {
|
|
@@ -54,7 +49,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
54
49
|
|
|
55
50
|
export const useLabelStyles_unstable = state => {
|
|
56
51
|
const styles = useStyles();
|
|
57
|
-
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.
|
|
52
|
+
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
58
53
|
|
|
59
54
|
if (state.required) {
|
|
60
55
|
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.requiredDisabled, state.required.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA
|
|
1
|
+
{"version":3,"sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,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,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QALL,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\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 semibold: {\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.weight === 'semibold' && styles.semibold,\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/"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
export { Label,
|
|
2
|
-
labelClassName, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';
|
|
1
|
+
export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';
|
|
3
2
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"]}
|
|
@@ -23,7 +23,7 @@ const useLabel_unstable = (props, ref) => {
|
|
|
23
23
|
const {
|
|
24
24
|
disabled = false,
|
|
25
25
|
required = false,
|
|
26
|
-
|
|
26
|
+
weight = 'regular',
|
|
27
27
|
size = 'medium'
|
|
28
28
|
} = props;
|
|
29
29
|
return {
|
|
@@ -33,7 +33,7 @@ const useLabel_unstable = (props, ref) => {
|
|
|
33
33
|
'aria-hidden': 'true'
|
|
34
34
|
}
|
|
35
35
|
}),
|
|
36
|
-
|
|
36
|
+
weight,
|
|
37
37
|
size,
|
|
38
38
|
components: {
|
|
39
39
|
root: 'label',
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,SAA/C;AAA0D,IAAA,IAAI,GAAG;AAAjE,MAA8E,KAApF;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, weight = 'regular', size = 'medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n }),\n weight,\n size,\n components: { root: 'label', required: 'span' },\n root: getNativeElementProps('label', { ref, ...props }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,17 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useLabelStyles_unstable = exports.labelClassNames =
|
|
6
|
+
exports.useLabelStyles_unstable = exports.labelClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
-
/**
|
|
12
|
-
* @deprecated Use `labelClassNames.root` instead.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
11
|
|
|
16
|
-
exports.labelClassName = 'fui-Label';
|
|
17
12
|
exports.labelClassNames = {
|
|
18
13
|
root: 'fui-Label',
|
|
19
14
|
required: 'fui-Label__required'
|
|
@@ -50,7 +45,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
50
45
|
"Bg96gwp": "faaz57k",
|
|
51
46
|
"Bhrd7zp": "fl43uef"
|
|
52
47
|
},
|
|
53
|
-
"
|
|
48
|
+
"semibold": {
|
|
54
49
|
"Bhrd7zp": "fl43uef"
|
|
55
50
|
}
|
|
56
51
|
}, {
|
|
@@ -63,7 +58,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
63
58
|
|
|
64
59
|
const useLabelStyles_unstable = state => {
|
|
65
60
|
const styles = useStyles();
|
|
66
|
-
state.root.className = react_1.mergeClasses(exports.labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.
|
|
61
|
+
state.root.className = react_1.mergeClasses(exports.labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
67
62
|
|
|
68
63
|
if (state.required) {
|
|
69
64
|
state.required.className = react_1.mergeClasses(exports.labelClassNames.required, styles.required, state.disabled && styles.requiredDisabled, state.required.className);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;AAIa,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,QAAQ,EAAE;AAF+C,CAA9C;AAKb;;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;AAAA;AAAA;AAAA,EAAlB;AAwCA;;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,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QALjB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,eAAA,CAAgB,QADS,EAEzB,MAAM,CAAC,QAFkB,EAGzB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,gBAHA,EAIzB,KAAK,CAAC,QAAN,CAAe,SAJU,CAA3B;AAMD;;AAED,SAAO,KAAP;AACD,CArBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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\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 semibold: {\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.weight === 'semibold' && styles.semibold,\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/"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useLabel_unstable = exports.useLabelStyles_unstable = exports.renderLabel_unstable = exports.labelClassNames = exports.
|
|
6
|
+
exports.useLabel_unstable = exports.useLabelStyles_unstable = exports.renderLabel_unstable = exports.labelClassNames = exports.Label = void 0;
|
|
7
7
|
|
|
8
8
|
var Label_1 = /*#__PURE__*/require("./Label");
|
|
9
9
|
|
|
@@ -12,13 +12,6 @@ Object.defineProperty(exports, "Label", {
|
|
|
12
12
|
get: function () {
|
|
13
13
|
return Label_1.Label;
|
|
14
14
|
}
|
|
15
|
-
}); // eslint-disable-next-line deprecation/deprecation
|
|
16
|
-
|
|
17
|
-
Object.defineProperty(exports, "labelClassName", {
|
|
18
|
-
enumerable: true,
|
|
19
|
-
get: function () {
|
|
20
|
-
return Label_1.labelClassName;
|
|
21
|
-
}
|
|
22
15
|
});
|
|
23
16
|
Object.defineProperty(exports, "labelClassNames", {
|
|
24
17
|
enumerable: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-label",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.5",
|
|
4
4
|
"description": "Fluent UI React Label component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.8",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
36
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
37
|
-
"@griffel/react": "1.0
|
|
35
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
|
36
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
37
|
+
"@griffel/react": "1.1.0",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|