@fluentui/react-label 9.0.0-alpha.9 → 9.0.0-beta.4
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +1348 -1
- package/CHANGELOG.md +486 -2
- package/Spec.md +28 -31
- package/dist/react-label.d.ts +28 -45
- package/lib/Label.js.map +1 -1
- package/lib/common/isConformant.d.ts +1 -1
- package/lib/common/isConformant.js +7 -5
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Label/Label.d.ts +3 -4
- package/lib/components/Label/Label.js +5 -5
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Label/Label.types.d.ts +17 -32
- 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 -2
- package/lib/components/Label/renderLabel.js +7 -7
- package/lib/components/Label/renderLabel.js.map +1 -1
- package/lib/components/Label/useLabel.d.ts +3 -6
- package/lib/components/Label/useLabel.js +32 -36
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.d.ts +2 -1
- package/lib/components/Label/useLabelStyles.js +44 -35
- package/lib/components/Label/useLabelStyles.js.map +1 -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/common/isConformant.d.ts +1 -1
- package/lib-commonjs/common/isConformant.js +16 -7
- package/lib-commonjs/common/isConformant.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 +17 -32
- 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 +1 -2
- package/lib-commonjs/components/Label/renderLabel.js +19 -11
- package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.d.ts +3 -6
- package/lib-commonjs/components/Label/useLabel.js +40 -37
- package/lib-commonjs/components/Label/useLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.d.ts +2 -1
- package/lib-commonjs/components/Label/useLabelStyles.js +52 -37
- package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
- package/lib-commonjs/index.js +7 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +14 -11
- package/config/api-extractor.json +0 -3
- package/config/tests.js +0 -7
- package/etc/react-label.api.md +0 -51
- package/just.config.ts +0 -3
- 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/src/components/Label/Label.types.ts +0 -61
package/etc/react-label.api.md
DELETED
@@ -1,51 +0,0 @@
|
|
1
|
-
## API Report File for "@fluentui/react-label"
|
2
|
-
|
3
|
-
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
4
|
-
|
5
|
-
```ts
|
6
|
-
|
7
|
-
import { ComponentProps } from '@fluentui/react-utilities';
|
8
|
-
import { ComponentState } from '@fluentui/react-utilities';
|
9
|
-
import { ObjectShorthandProps } from '@fluentui/react-utilities';
|
10
|
-
import * as React_2 from 'react';
|
11
|
-
import { ShorthandProps } from '@fluentui/react-utilities';
|
12
|
-
|
13
|
-
// @public
|
14
|
-
export const Label: React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLElement>>;
|
15
|
-
|
16
|
-
// @public
|
17
|
-
export type LabelDefaultedProps = 'size';
|
18
|
-
|
19
|
-
// @public
|
20
|
-
export interface LabelProps extends ComponentProps, React_2.LabelHTMLAttributes<HTMLLabelElement> {
|
21
|
-
disabled?: boolean;
|
22
|
-
required?: boolean | ShorthandProps<ComponentProps>;
|
23
|
-
size?: 'small' | 'medium' | 'large';
|
24
|
-
strong?: boolean;
|
25
|
-
}
|
26
|
-
|
27
|
-
// @public
|
28
|
-
export type LabelShorthandProps = 'required';
|
29
|
-
|
30
|
-
// @public
|
31
|
-
export const labelShorthandProps: LabelShorthandProps[];
|
32
|
-
|
33
|
-
// @public
|
34
|
-
export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
|
35
|
-
ref: React_2.Ref<HTMLElement>;
|
36
|
-
required?: ObjectShorthandProps<ComponentProps>;
|
37
|
-
}
|
38
|
-
|
39
|
-
// @public
|
40
|
-
export const renderLabel: (state: LabelState) => JSX.Element;
|
41
|
-
|
42
|
-
// @public
|
43
|
-
export const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
|
44
|
-
|
45
|
-
// @public
|
46
|
-
export const useLabelStyles: (state: LabelState) => LabelState;
|
47
|
-
|
48
|
-
|
49
|
-
// (No @packageDocumentation comment for this package)
|
50
|
-
|
51
|
-
```
|
package/just.config.ts
DELETED
package/lib-amd/Label.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Label/index';
|
package/lib-amd/Label.js
DELETED
@@ -1,6 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "./components/Label/index"], function (require, exports, tslib_1, index_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
tslib_1.__exportStar(index_1, exports);
|
5
|
-
});
|
6
|
-
//# sourceMappingURL=Label.js.map
|
package/lib-amd/Label.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["Label.ts"],"names":[],"mappings":";;;IAAA,uCAAyC","sourcesContent":["export * from './components/Label/index';\n"]}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.isConformant = void 0;
|
5
|
-
function isConformant(testInfo) {
|
6
|
-
var defaultOptions = {
|
7
|
-
asPropHandlesRef: true,
|
8
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
9
|
-
};
|
10
|
-
react_conformance_1.isConformant(defaultOptions, testInfo);
|
11
|
-
}
|
12
|
-
exports.isConformant = isConformant;
|
13
|
-
});
|
14
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC7D,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IATD,oCASC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { LabelProps } from './Label.types';
|
3
|
-
/**
|
4
|
-
* A label component provides a title or name to a component.
|
5
|
-
* {@docCategory Label}
|
6
|
-
*/
|
7
|
-
export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
|
@@ -1,16 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "./useLabel", "./renderLabel", "./useLabelStyles"], function (require, exports, React, useLabel_1, renderLabel_1, useLabelStyles_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.Label = void 0;
|
5
|
-
/**
|
6
|
-
* A label component provides a title or name to a component.
|
7
|
-
* {@docCategory Label}
|
8
|
-
*/
|
9
|
-
exports.Label = React.forwardRef(function (props, ref) {
|
10
|
-
var state = useLabel_1.useLabel(props, ref);
|
11
|
-
useLabelStyles_1.useLabelStyles(state);
|
12
|
-
return renderLabel_1.renderLabel(state);
|
13
|
-
});
|
14
|
-
exports.Label.displayName = 'Label';
|
15
|
-
});
|
16
|
-
//# sourceMappingURL=Label.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,UAAC,KAAK,EAAE,GAAG;QACxE,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEnC,+BAAc,CAAC,KAAK,CAAC,CAAC;QACtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useLabel } from './useLabel';\nimport { LabelProps } from './Label.types';\nimport { renderLabel } from './renderLabel';\nimport { useLabelStyles } from './useLabelStyles';\n\n/**\n * A label component provides a title or name to a component.\n * {@docCategory Label}\n */\nexport const Label = React.forwardRef<HTMLElement, LabelProps>((props, ref) => {\n const state = useLabel(props, ref);\n\n useLabelStyles(state);\n return renderLabel(state);\n});\n\nLabel.displayName = 'Label';\n"]}
|
@@ -1,53 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* Label Props
|
5
|
-
* {@docCategory Label}
|
6
|
-
*/
|
7
|
-
export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
|
8
|
-
/**
|
9
|
-
* Renders the label as disabled
|
10
|
-
* @defaultvalue false
|
11
|
-
*/
|
12
|
-
disabled?: boolean;
|
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>;
|
19
|
-
/**
|
20
|
-
* A label supports different sizes.
|
21
|
-
* @defaultvalue 'medium'
|
22
|
-
*/
|
23
|
-
size?: 'small' | 'medium' | 'large';
|
24
|
-
/**
|
25
|
-
* A label supports semibold/strong fontweight.
|
26
|
-
* @defaultvalue false
|
27
|
-
*/
|
28
|
-
strong?: boolean;
|
29
|
-
}
|
30
|
-
/**
|
31
|
-
* Names of the shorthand properties in LabelProps
|
32
|
-
* {@docCategory Label}
|
33
|
-
*/
|
34
|
-
export declare type LabelShorthandProps = 'required';
|
35
|
-
/**
|
36
|
-
* Names of LabelProps that have a default value in useLabel
|
37
|
-
* {@docCategory Label}
|
38
|
-
*/
|
39
|
-
export declare type LabelDefaultedProps = 'size';
|
40
|
-
/**
|
41
|
-
* State used in rendering Label
|
42
|
-
* {@docCategory Label}
|
43
|
-
*/
|
44
|
-
export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
|
45
|
-
/**
|
46
|
-
* Ref to the root element
|
47
|
-
*/
|
48
|
-
ref: React.Ref<HTMLElement>;
|
49
|
-
/**
|
50
|
-
* The required prop resolved to a slot object
|
51
|
-
*/
|
52
|
-
required?: ObjectShorthandProps<ComponentProps>;
|
53
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n * {@docCategory Label}\n */\nexport interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {\n /**\n * Renders the label as disabled\n * @defaultvalue false\n */\n disabled?: boolean;\n\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 | ShorthandProps<ComponentProps>;\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\n/**\n * Names of the shorthand properties in LabelProps\n * {@docCategory Label}\n */\nexport type LabelShorthandProps = 'required';\n\n/**\n * Names of LabelProps that have a default value in useLabel\n * {@docCategory Label}\n */\nexport type LabelDefaultedProps = 'size';\n\n/**\n * State used in rendering Label\n * {@docCategory Label}\n */\nexport interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {\n /**\n * Ref to the root element\n */\n ref: React.Ref<HTMLElement>;\n\n /**\n * The required prop resolved to a slot object\n */\n required?: ObjectShorthandProps<ComponentProps>;\n}\n"]}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "./Label", "./Label.types", "./renderLabel", "./useLabel", "./useLabelStyles"], function (require, exports, tslib_1, Label_1, Label_types_1, renderLabel_1, useLabel_1, useLabelStyles_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
tslib_1.__exportStar(Label_1, exports);
|
5
|
-
tslib_1.__exportStar(Label_types_1, exports);
|
6
|
-
tslib_1.__exportStar(renderLabel_1, exports);
|
7
|
-
tslib_1.__exportStar(useLabel_1, exports);
|
8
|
-
tslib_1.__exportStar(useLabelStyles_1, exports);
|
9
|
-
});
|
10
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useLabel"], function (require, exports, tslib_1, React, react_utilities_1, useLabel_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.renderLabel = void 0;
|
5
|
-
/**
|
6
|
-
* Render the final JSX of Label
|
7
|
-
* {@docCategory Label}
|
8
|
-
*/
|
9
|
-
var renderLabel = function (state) {
|
10
|
-
var _a = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
|
11
|
-
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
12
|
-
state.children,
|
13
|
-
state.required && React.createElement(slots.required, tslib_1.__assign({}, slotProps.required))));
|
14
|
-
};
|
15
|
-
exports.renderLabel = renderLabel;
|
16
|
-
});
|
17
|
-
//# sourceMappingURL=renderLabel.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"renderLabel.js","sourceRoot":"../src/","sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,KAAuB,0BAAQ,CAAC,KAAK,EAAE,8BAAmB,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAClD,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,WAAW,eAStB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { LabelState } from './Label.types';\nimport { labelShorthandProps } from './useLabel';\n\n/**\n * Render the final JSX of Label\n * {@docCategory Label}\n */\nexport const renderLabel = (state: LabelState) => {\n const { slots, slotProps } = getSlots(state, labelShorthandProps);\n\n return (\n <slots.root {...slotProps.root}>\n {state.children}\n {state.required && <slots.required {...slotProps.required} />}\n </slots.root>\n );\n};\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
|
3
|
-
/**
|
4
|
-
* Array of all shorthand properties listed in LabelShorthandProps
|
5
|
-
* {@docCatergory Label}
|
6
|
-
*/
|
7
|
-
export declare const labelShorthandProps: LabelShorthandProps[];
|
8
|
-
/**
|
9
|
-
* Create the state required to render Label.
|
10
|
-
*
|
11
|
-
* The returned state can be modified with hooks such as useLabelStyles,
|
12
|
-
* before being passed to renderLabel.
|
13
|
-
*
|
14
|
-
* @param props - props from this instance of Label
|
15
|
-
* @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
|
-
*/
|
20
|
-
export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
|
@@ -1,55 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useLabel = exports.labelShorthandProps = void 0;
|
5
|
-
/**
|
6
|
-
* Array of all shorthand properties listed in LabelShorthandProps
|
7
|
-
* {@docCatergory Label}
|
8
|
-
*/
|
9
|
-
exports.labelShorthandProps = ['required'];
|
10
|
-
var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.labelShorthandProps });
|
11
|
-
/**
|
12
|
-
* Create the state required to render Label.
|
13
|
-
*
|
14
|
-
* The returned state can be modified with hooks such as useLabelStyles,
|
15
|
-
* before being passed to renderLabel.
|
16
|
-
*
|
17
|
-
* @param props - props from this instance of Label
|
18
|
-
* @param ref - reference to root HTMLElement of Label
|
19
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
20
|
-
*
|
21
|
-
* {@docCategory Label}
|
22
|
-
*/
|
23
|
-
var useLabel = function (props, ref, defaultProps) {
|
24
|
-
var state = mergeProps({
|
25
|
-
ref: ref,
|
26
|
-
as: 'label',
|
27
|
-
size: 'medium',
|
28
|
-
required: {
|
29
|
-
as: 'span',
|
30
|
-
},
|
31
|
-
}, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
|
32
|
-
return state;
|
33
|
-
};
|
34
|
-
exports.useLabel = useLabel;
|
35
|
-
/**
|
36
|
-
* Label will first need to check if required is a boolean or shorthandprops,
|
37
|
-
* this allows for the required prop to handle both the default asterisk for required
|
38
|
-
* or a custom required text.
|
39
|
-
*/
|
40
|
-
var resolveLabelShorthandProps = function (props) {
|
41
|
-
var propsNormalized;
|
42
|
-
if (props.required === true) {
|
43
|
-
propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), { required: { children: '*' } });
|
44
|
-
}
|
45
|
-
else if (props.required === false) {
|
46
|
-
propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), { required: undefined });
|
47
|
-
}
|
48
|
-
else {
|
49
|
-
// TypeScript needs a nudge to figure out that props.required won't be a boolean here
|
50
|
-
propsNormalized = props;
|
51
|
-
}
|
52
|
-
return react_utilities_1.resolveShorthandProps(propsNormalized, exports.labelShorthandProps);
|
53
|
-
};
|
54
|
-
});
|
55
|
-
//# sourceMappingURL=useLabel.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useLabel.js","sourceRoot":"../src/","sources":["components/Label/useLabel.tsx"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACU,QAAA,mBAAmB,GAA0B,CAAC,UAAU,CAAC,CAAC;IAEvE,IAAM,UAAU,GAAG,gCAAc,CAAa,EAAE,SAAS,EAAE,2BAAmB,EAAE,CAAC,CAAC;IAElF;;;;;;;;;;;OAWG;IACI,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;QAChG,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,EAAE,EAAE,MAAM;aACX;SACF,EACD,YAAY,IAAI,0BAA0B,CAAC,YAAY,CAAC,EACxD,0BAA0B,CAAC,KAAK,CAAC,CAClC,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAfW,QAAA,QAAQ,YAenB;IAEF;;;;OAIG;IACH,IAAM,0BAA0B,GAAG,UAAC,KAAiB;QACnD,IAAI,eAAe,CAAC;QACpB,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC3B,eAAe,yCAAQ,KAAK,KAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;SAC7D;aAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,EAAE;YACnC,eAAe,yCAAQ,KAAK,KAAE,QAAQ,EAAE,SAAS,GAAE,CAAC;SACrD;aAAM;YACL,qFAAqF;YACrF,eAAe,GAAG,KAA6E,CAAC;SACjG;QAED,OAAO,uCAAqB,CAAC,eAAe,EAAE,2BAAmB,CAAC,CAAC;IACrE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { LabelProps, LabelShorthandProps, LabelState } from './Label.types';\n\n/**\n * Array of all shorthand properties listed in LabelShorthandProps\n * {@docCatergory Label}\n */\nexport const labelShorthandProps: LabelShorthandProps[] = ['required'];\n\nconst mergeProps = makeMergeProps<LabelState>({ deepMerge: labelShorthandProps });\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles,\n * before being passed to renderLabel.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n * @param defaultProps - (optional) default prop values provided by the implementing type\n *\n * {@docCategory Label}\n */\nexport const useLabel = (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps): LabelState => {\n const state = mergeProps(\n {\n ref,\n as: 'label',\n size: 'medium',\n required: {\n as: 'span',\n },\n },\n defaultProps && resolveLabelShorthandProps(defaultProps),\n resolveLabelShorthandProps(props),\n );\n\n return state;\n};\n\n/**\n * Label will first need to check if required is a boolean or shorthandprops,\n * this allows for the required prop to handle both the default asterisk for required\n * or a custom required text.\n */\nconst resolveLabelShorthandProps = (props: LabelProps) => {\n let propsNormalized;\n if (props.required === true) {\n propsNormalized = { ...props, required: { children: '*' } };\n } else if (props.required === false) {\n propsNormalized = { ...props, required: undefined };\n } else {\n // TypeScript needs a nudge to figure out that props.required won't be a boolean here\n propsNormalized = props as LabelProps & { required?: Exclude<LabelProps['required'], boolean> };\n }\n\n return resolveShorthandProps(propsNormalized, labelShorthandProps);\n};\n"]}
|
@@ -1,49 +0,0 @@
|
|
1
|
-
define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useLabelStyles = void 0;
|
5
|
-
/**
|
6
|
-
* Styles for the label
|
7
|
-
*/
|
8
|
-
var useStyles = react_make_styles_1.makeStyles({
|
9
|
-
root: function (theme) { return ({
|
10
|
-
fontFamily: theme.global.type.fontFamilies.base,
|
11
|
-
fontSize: theme.global.type.fontSizes.base[300],
|
12
|
-
color: theme.alias.color.neutral.neutralForeground1,
|
13
|
-
}); },
|
14
|
-
disabled: function (theme) { return ({
|
15
|
-
color: theme.alias.color.neutral.neutralForegroundDisabled,
|
16
|
-
}); },
|
17
|
-
required: function (theme) { return ({
|
18
|
-
color: theme.alias.color.red.foreground3,
|
19
|
-
// TODO: Once spacing tokens are added, change this to Horizontal XS
|
20
|
-
paddingLeft: '4px',
|
21
|
-
}); },
|
22
|
-
small: function (theme) { return ({
|
23
|
-
fontSize: theme.global.type.fontSizes.base[200],
|
24
|
-
}); },
|
25
|
-
medium: function (theme) { return ({
|
26
|
-
fontSize: theme.global.type.fontSizes.base[300],
|
27
|
-
}); },
|
28
|
-
large: function (theme) { return ({
|
29
|
-
fontSize: theme.global.type.fontSizes.base[400],
|
30
|
-
fontWeight: theme.global.type.fontWeights.semibold,
|
31
|
-
}); },
|
32
|
-
strong: function (theme) { return ({
|
33
|
-
fontWeight: theme.global.type.fontWeights.semibold,
|
34
|
-
}); },
|
35
|
-
});
|
36
|
-
/**
|
37
|
-
* Apply styling to the Label slots based on the state
|
38
|
-
*/
|
39
|
-
var useLabelStyles = function (state) {
|
40
|
-
var styles = useStyles();
|
41
|
-
state.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
|
42
|
-
if (state.required) {
|
43
|
-
state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
|
44
|
-
}
|
45
|
-
return state;
|
46
|
-
};
|
47
|
-
exports.useLabelStyles = useLabelStyles;
|
48
|
-
});
|
49
|
-
//# sourceMappingURL=useLabelStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useLabelStyles.js","sourceRoot":"../src/","sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;IAGA;;OAEG;IACH,IAAM,SAAS,GAAG,8BAAU,CAAC;QAC3B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACd,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI;YAC/C,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;SACpD,CAAC,EAJa,CAIb;QAEF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAClB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;SAC3D,CAAC,EAFiB,CAEjB;QAEF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAClB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW;YACxC,oEAAoE;YACpE,WAAW,EAAE,KAAK;SACnB,CAAC,EAJiB,CAIjB;QAEF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;SAChD,CAAC,EAFc,CAEd;QAEF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;SAChD,CAAC,EAFe,CAEf;QAEF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;SACnD,CAAC,EAHc,CAGd;QAEF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;SACnD,CAAC,EAFe,CAEf;KACH,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,cAAc,GAAG,UAAC,KAAiB;QAC9C,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,SAAS,GAAG,gCAAY,CAC5B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACjC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAClB,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,EAC7B,KAAK,CAAC,SAAS,CAChB,CAAC;QAEF,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,QAAQ,CAAC,SAAS,GAAG,gCAAY,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SACpF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAfW,QAAA,cAAc,kBAezB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { LabelState } from './Label.types';\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: theme => ({\n fontFamily: theme.global.type.fontFamilies.base,\n fontSize: theme.global.type.fontSizes.base[300],\n color: theme.alias.color.neutral.neutralForeground1,\n }),\n\n disabled: theme => ({\n color: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n\n required: theme => ({\n color: theme.alias.color.red.foreground3,\n // TODO: Once spacing tokens are added, change this to Horizontal XS\n paddingLeft: '4px',\n }),\n\n small: theme => ({\n fontSize: theme.global.type.fontSizes.base[200],\n }),\n\n medium: theme => ({\n fontSize: theme.global.type.fontSizes.base[300],\n }),\n\n large: theme => ({\n fontSize: theme.global.type.fontSizes.base[400],\n fontWeight: theme.global.type.fontWeights.semibold,\n }),\n\n strong: theme => ({\n fontWeight: theme.global.type.fontWeights.semibold,\n }),\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.className = mergeClasses(\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"]}
|
package/lib-amd/index.d.ts
DELETED
package/lib-amd/index.js
DELETED
package/lib-amd/index.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAEA,uCAAwB","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
|
@@ -1,61 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
|
3
|
-
|
4
|
-
/**
|
5
|
-
* Label Props
|
6
|
-
* {@docCategory Label}
|
7
|
-
*/
|
8
|
-
export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
|
9
|
-
/**
|
10
|
-
* Renders the label as disabled
|
11
|
-
* @defaultvalue false
|
12
|
-
*/
|
13
|
-
disabled?: boolean;
|
14
|
-
|
15
|
-
/**
|
16
|
-
* Displays and indicator that the label is for a required field. The required prop can be set to true to display
|
17
|
-
* an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
|
18
|
-
* @defaultvalue false
|
19
|
-
*/
|
20
|
-
required?: boolean | ShorthandProps<ComponentProps>;
|
21
|
-
|
22
|
-
/**
|
23
|
-
* A label supports different sizes.
|
24
|
-
* @defaultvalue 'medium'
|
25
|
-
*/
|
26
|
-
size?: 'small' | 'medium' | 'large';
|
27
|
-
|
28
|
-
/**
|
29
|
-
* A label supports semibold/strong fontweight.
|
30
|
-
* @defaultvalue false
|
31
|
-
*/
|
32
|
-
strong?: boolean;
|
33
|
-
}
|
34
|
-
|
35
|
-
/**
|
36
|
-
* Names of the shorthand properties in LabelProps
|
37
|
-
* {@docCategory Label}
|
38
|
-
*/
|
39
|
-
export type LabelShorthandProps = 'required';
|
40
|
-
|
41
|
-
/**
|
42
|
-
* Names of LabelProps that have a default value in useLabel
|
43
|
-
* {@docCategory Label}
|
44
|
-
*/
|
45
|
-
export type LabelDefaultedProps = 'size';
|
46
|
-
|
47
|
-
/**
|
48
|
-
* State used in rendering Label
|
49
|
-
* {@docCategory Label}
|
50
|
-
*/
|
51
|
-
export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
|
52
|
-
/**
|
53
|
-
* Ref to the root element
|
54
|
-
*/
|
55
|
-
ref: React.Ref<HTMLElement>;
|
56
|
-
|
57
|
-
/**
|
58
|
-
* The required prop resolved to a slot object
|
59
|
-
*/
|
60
|
-
required?: ObjectShorthandProps<ComponentProps>;
|
61
|
-
}
|