@fluentui/react-label 0.0.0-nightly-20230526-0415.1 → 0.0.0-nightly-20230530-0415.1
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 +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/Label.js +1 -0
- package/lib/Label.js.map +1 -1
- package/lib/components/Label/Label.js +6 -6
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Label/Label.types.js +2 -1
- package/lib/components/Label/Label.types.js.map +1 -1
- package/lib/components/Label/index.js +1 -0
- package/lib/components/Label/index.js.map +1 -1
- package/lib/components/Label/renderLabel.js +5 -8
- package/lib/components/Label/renderLabel.js.map +1 -1
- package/lib/components/Label/useLabel.js +21 -26
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.styles.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Label.js.map +1 -1
- package/lib-commonjs/components/Label/Label.js.map +1 -1
- package/lib-commonjs/components/Label/Label.types.js.map +1 -1
- package/lib-commonjs/components/Label/index.js.map +1 -1
- package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-label",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-label_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Tue, 30 May 2023 04:20:58 GMT",
|
6
|
+
"tag": "@fluentui/react-label_v0.0.0-nightly-20230530-0415.1",
|
7
|
+
"version": "0.0.0-nightly-20230530-0415.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,32 +16,32 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-label",
|
19
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230530-0415.1",
|
20
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
21
21
|
},
|
22
22
|
{
|
23
23
|
"author": "beachball",
|
24
24
|
"package": "@fluentui/react-label",
|
25
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
26
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230530-0415.1",
|
26
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
"author": "beachball",
|
30
30
|
"package": "@fluentui/react-label",
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
32
|
-
"commit": "
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230530-0415.1",
|
32
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
33
33
|
},
|
34
34
|
{
|
35
35
|
"author": "beachball",
|
36
36
|
"package": "@fluentui/react-label",
|
37
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
38
|
-
"commit": "
|
37
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230530-0415.1",
|
38
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
39
39
|
},
|
40
40
|
{
|
41
41
|
"author": "beachball",
|
42
42
|
"package": "@fluentui/react-label",
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
44
|
-
"commit": "
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230530-0415.1",
|
44
|
+
"commit": "808fbe4052231d4cccf478348a770df18232f4f9"
|
45
45
|
}
|
46
46
|
]
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,22 +1,22 @@
|
|
1
1
|
# Change Log - @fluentui/react-label
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 30 May 2023 04:20:58 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20230530-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly-20230530-0415.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.1.14..@fluentui/react-label_v0.0.0-nightly-
|
9
|
+
Tue, 30 May 2023 04:20:58 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.1.14..@fluentui/react-label_v0.0.0-nightly-20230530-0415.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
17
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
18
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
16
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
|
20
20
|
|
21
21
|
## [9.1.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.1.14)
|
22
22
|
|
package/lib/Label.js
CHANGED
package/lib/Label.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../src/Label.ts"],"sourcesContent":["export * from './components/Label/index';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}
|
@@ -5,12 +5,12 @@ import { useLabelStyles_unstable } from './useLabelStyles.styles';
|
|
5
5
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
6
6
|
/**
|
7
7
|
* A label component provides a title or name to a component.
|
8
|
-
*/
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
return renderLabel_unstable(state);
|
8
|
+
*/ export const Label = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
9
|
+
const state = useLabel_unstable(props, ref);
|
10
|
+
useLabelStyles_unstable(state);
|
11
|
+
useCustomStyleHook_unstable('useLabelStyles_unstable')(state);
|
12
|
+
return renderLabel_unstable(state);
|
14
13
|
});
|
15
14
|
Label.displayName = 'Label';
|
15
|
+
|
16
16
|
//# sourceMappingURL=Label.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles.styles';\nimport type { LabelProps } from './Label.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useLabelStyles_unstable')(state);\n\n return renderLabel_unstable(state);\n});\n\nLabel.displayName = 'Label';\n"],"names":["React","useLabel_unstable","renderLabel_unstable","useLabelStyles_unstable","useCustomStyleHook_unstable","Label","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrF,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOP,qBAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/Label.types.ts"],"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"],"names":[],"mappings":"AAAA,WAwCiH"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/index.ts"],"sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,0BAA0B"}
|
@@ -1,13 +1,10 @@
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
3
3
|
/**
|
4
4
|
* Render the final JSX of Label
|
5
|
-
*/
|
6
|
-
|
7
|
-
|
8
|
-
slots,
|
9
|
-
slotProps
|
10
|
-
} = getSlotsNext(state);
|
11
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, state.root.children, slots.required && /*#__PURE__*/createElement(slots.required, slotProps.required));
|
5
|
+
*/ export const renderLabel_unstable = (state)=>{
|
6
|
+
const { slots , slotProps } = getSlotsNext(state);
|
7
|
+
return /*#__PURE__*/ createElement(slots.root, slotProps.root, state.root.children, slots.required && /*#__PURE__*/ createElement(slots.required, slotProps.required));
|
12
8
|
};
|
9
|
+
|
13
10
|
//# sourceMappingURL=renderLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderLabel_unstable","state","slots","slotProps","root","children","required"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAyBE;IAEtD,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BH,MAAMG,IAAI,CAACC,QAAQ,EACnBH,MAAMI,QAAQ,kBAAI,AAhBzB,cAgB0BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ;AAG/D,EAAE"}
|
@@ -9,31 +9,26 @@ import { resolveShorthand } from '@fluentui/react-utilities';
|
|
9
9
|
*
|
10
10
|
* @param props - props from this instance of Label
|
11
11
|
* @param ref - reference to root HTMLElement of Label
|
12
|
-
*/
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
},
|
33
|
-
root: getNativeElementProps('label', {
|
34
|
-
ref,
|
35
|
-
...props
|
36
|
-
})
|
37
|
-
};
|
12
|
+
*/ export const useLabel_unstable = (props, ref)=>{
|
13
|
+
const { disabled =false , required =false , weight ='regular' , size ='medium' } = props;
|
14
|
+
return {
|
15
|
+
disabled,
|
16
|
+
required: resolveShorthand(required === true ? '*' : required || undefined, {
|
17
|
+
defaultProps: {
|
18
|
+
'aria-hidden': 'true'
|
19
|
+
}
|
20
|
+
}),
|
21
|
+
weight,
|
22
|
+
size,
|
23
|
+
components: {
|
24
|
+
root: 'label',
|
25
|
+
required: 'span'
|
26
|
+
},
|
27
|
+
root: getNativeElementProps('label', {
|
28
|
+
ref,
|
29
|
+
...props
|
30
|
+
})
|
31
|
+
};
|
38
32
|
};
|
33
|
+
|
39
34
|
//# sourceMappingURL=useLabel.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"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"],"names":["React","getNativeElementProps","resolveShorthand","useLabel_unstable","props","ref","disabled","required","weight","size","undefined","defaultProps","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,MAAM,EAAEC,UAAW,KAAK,CAAA,EAAEC,UAAW,KAAK,CAAA,EAAEC,QAAS,UAAS,EAAEC,MAAO,SAAQ,EAAE,GAAGL;IACpF,OAAO;QACLE;QACAC,UAAUL,iBAAiBK,aAAa,IAAI,GAAG,MAAMA,YAAYG,SAAS,EAAE;YAC1EC,cAAc;gBAAE,eAAe;YAAO;QACxC;QACAH;QACAC;QACAG,YAAY;YAAEC,MAAM;YAASN,UAAU;QAAO;QAC9CM,MAAMZ,sBAAsB,SAAS;YAAEI;YAAK,GAAGD,KAAK;QAAC;IACvD;AACF,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","uwmqm3","requiredDisabled","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","useLabelStyles_unstable","state","styles","className","size","weight"],"sources":["../../../src/components/Label/useLabelStyles.styles.ts"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;EACNC,QAAA,EAAU;AACZ;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;EAAAH,QAAA;IAAAG,MAAA;IAAAE,MAAA;EAAA;EAAAC,gBAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAG,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","uwmqm3","requiredDisabled","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","useLabelStyles_unstable","state","styles","className","size","weight"],"sources":["../../../src/components/Label/useLabelStyles.styles.ts"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;EACNC,QAAA,EAAU;AACZ;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;EAAAH,QAAA;IAAAG,MAAA;IAAAE,MAAA;EAAA;EAAAC,gBAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAG,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAsClB;AAEA;;;AAGA,OAAO,MAAMC,uBAAA,GAA2BC,KAAA,IAAkC;EACxE,MAAMC,MAAA,GAAShB,SAAA;EACfe,KAAA,CAAMjB,IAAI,CAACmB,SAAS,GAAGtB,YAAA,CACrBE,eAAA,CAAgBC,IAAI,EACpBkB,MAAA,CAAOlB,IAAI,EACXiB,KAAA,CAAMZ,QAAQ,IAAIa,MAAA,CAAOb,QAAQ,EACjCa,MAAM,CAACD,KAAA,CAAMG,IAAI,CAAC,EAClBH,KAAA,CAAMI,MAAM,KAAK,cAAcH,MAAA,CAAOJ,QAAQ,EAC9CG,KAAA,CAAMjB,IAAI,CAACmB,SAAS;EAGtB,IAAIF,KAAA,CAAMhB,QAAQ,EAAE;IAClBgB,KAAA,CAAMhB,QAAQ,CAACkB,SAAS,GAAGtB,YAAA,CACzBE,eAAA,CAAgBE,QAAQ,EACxBiB,MAAA,CAAOjB,QAAQ,EACfgB,KAAA,CAAMZ,QAAQ,IAAIa,MAAA,CAAOX,gBAAgB,EACzCU,KAAA,CAAMhB,QAAQ,CAACkB,SAAS;EAE5B;EAEA,OAAOF,KAAA;AACT"}
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/Label.js"],"sourcesContent":["export * from './components/Label/index';\n//# sourceMappingURL=Label.js.map"],"names":[],"mappings":";;;;;oBAAc;
|
1
|
+
{"version":3,"sources":["../lib/Label.js"],"sourcesContent":["export * from './components/Label/index';\n\n//# sourceMappingURL=Label.js.map"],"names":[],"mappings":";;;;;oBAAc;CAEd,iCAAiC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Label/Label.js"],"sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A label component provides a title or name to a component.\n
|
1
|
+
{"version":3,"sources":["../../../lib/components/Label/Label.js"],"sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A label component provides a title or name to a component.\n */ export const Label = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useLabel_unstable(props, ref);\n useLabelStyles_unstable(state);\n useCustomStyleHook_unstable('useLabelStyles_unstable')(state);\n return renderLabel_unstable(state);\n});\nLabel.displayName = 'Label';\n\n//# sourceMappingURL=Label.js.map"],"names":["Label","React","forwardRef","props","ref","state","useLabel_unstable","useLabelStyles_unstable","useCustomStyleHook_unstable","renderLabel_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;0BACW;6BACG;sCACG;qCACI;AAGjC,MAAMA,QAAQ,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAClE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,6CAAuB,EAACF;IACxBG,IAAAA,gDAA2B,EAAC,2BAA2BH;IACvD,OAAOI,IAAAA,iCAAoB,EAACJ;AAChC;AACAL,MAAMU,WAAW,GAAG,SAEpB,iCAAiC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Label/Label.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Label.types.js.map"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"sources":["../../../lib/components/Label/Label.types.js"],"sourcesContent":["export { };\n\n//# sourceMappingURL=Label.types.js.map"],"names":[],"mappings":";;;;CAEA,uCAAuC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Label/index.js"],"sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;
|
1
|
+
{"version":3,"sources":["../../../lib/components/Label/index.js"],"sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles.styles';\n\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CAEd,iCAAiC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Label/renderLabel.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Label\n
|
1
|
+
{"version":3,"sources":["../../../lib/components/Label/renderLabel.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Label\n */ export const renderLabel_unstable = (state)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, state.root.children, slots.required && /*#__PURE__*/ createElement(slots.required, slotProps.required));\n};\n\n//# sourceMappingURL=renderLabel.js.map"],"names":["renderLabel_unstable","state","slots","slotProps","getSlotsNext","createElement","root","children","required"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,uBAAuB,CAACC,QAAQ;IAC7C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEL,MAAMK,IAAI,CAACC,QAAQ,EAAEL,MAAMM,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,QAAQ,EAAEL,UAAUK,QAAQ;AACxK,GAEA,uCAAuC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Label/useLabel.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { resolveShorthand } from '@fluentui/react-utilities';\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
|
1
|
+
{"version":3,"sources":["../../../lib/components/Label/useLabel.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { resolveShorthand } from '@fluentui/react-utilities';\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 */ export const useLabel_unstable = (props, ref)=>{\n const { disabled =false , required =false , weight ='regular' , size ='medium' } = props;\n return {\n disabled,\n required: resolveShorthand(required === true ? '*' : required || undefined, {\n defaultProps: {\n 'aria-hidden': 'true'\n }\n }),\n weight,\n size,\n components: {\n root: 'label',\n required: 'span'\n },\n root: getNativeElementProps('label', {\n ref,\n ...props\n })\n };\n};\n\n//# sourceMappingURL=useLabel.js.map"],"names":["useLabel_unstable","props","ref","disabled","required","weight","size","resolveShorthand","undefined","defaultProps","components","root","getNativeElementProps"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACe;AAU3B,MAAMA,oBAAoB,CAACC,OAAOC,MAAM;IAC/C,MAAM,EAAEC,UAAU,KAAK,CAAA,EAAGC,UAAU,KAAK,CAAA,EAAGC,QAAQ,UAAS,EAAGC,MAAM,SAAQ,EAAG,GAAGL;IACpF,OAAO;QACHE;QACAC,UAAUG,IAAAA,gCAAgB,EAACH,aAAa,IAAI,GAAG,MAAMA,YAAYI,SAAS,EAAE;YACxEC,cAAc;gBACV,eAAe;YACnB;QACJ;QACAJ;QACAC;QACAI,YAAY;YACRC,MAAM;YACNP,UAAU;QACd;QACAO,MAAMC,IAAAA,qCAAqB,EAAC,SAAS;YACjCV;YACA,GAAGD,KAAK;QACZ;IACJ;AACJ,GAEA,oCAAoC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\n//# sourceMappingURL=index.js.map"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;;uBAAQ;
|
1
|
+
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\n\n//# sourceMappingURL=index.js.map"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;;uBAAQ;CAEzG,iCAAiC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-label",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20230530-0415.1",
|
4
4
|
"description": "Fluent UI React Label component",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -28,15 +28,15 @@
|
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230530-0415.1",
|
32
32
|
"@fluentui/scripts-api-extractor": "*",
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
36
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230530-0415.1",
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230530-0415.1",
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230530-0415.1",
|
39
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230530-0415.1",
|
40
40
|
"@griffel/react": "^1.5.2",
|
41
41
|
"@swc/helpers": "^0.4.14"
|
42
42
|
},
|