@fluentui/react-badge 9.0.0-rc.7 → 9.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +262 -1
- package/CHANGELOG.md +190 -102
- package/MIGRATION.md +59 -0
- package/README.md +40 -2
- package/Spec.md +11 -74
- package/dist/index.d.ts +38 -54
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Badge/Badge.js.map +1 -1
- package/lib/components/Badge/Badge.types.js.map +1 -1
- package/lib/components/Badge/renderBadge.js.map +1 -1
- package/lib/components/Badge/useBadge.js +0 -1
- package/lib/components/Badge/useBadge.js.map +1 -1
- package/lib/components/Badge/useBadgeStyles.js +0 -5
- package/lib/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadge.js +1 -2
- package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js +0 -5
- package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib/components/PresenceBadge/presenceIcons.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadge.js +20 -7
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +10 -6
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib/index.js +3 -6
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.js.map +1 -1
- package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadge.js +0 -1
- package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js +1 -6
- package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js +1 -2
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +1 -6
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +20 -7
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +11 -7
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -22
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -12
- package/lib/Badge.d.ts +0 -1
- package/lib/CounterBadge.d.ts +0 -1
- package/lib/PresenceBadge.d.ts +0 -1
- package/lib/components/Badge/Badge.d.ts +0 -6
- package/lib/components/Badge/Badge.types.d.ts +0 -34
- package/lib/components/Badge/index.d.ts +0 -5
- package/lib/components/Badge/renderBadge.d.ts +0 -2
- package/lib/components/Badge/useBadge.d.ts +0 -6
- package/lib/components/Badge/useBadgeStyles.d.ts +0 -11
- package/lib/components/CounterBadge/CounterBadge.d.ts +0 -6
- package/lib/components/CounterBadge/CounterBadge.types.d.ts +0 -41
- package/lib/components/CounterBadge/index.d.ts +0 -4
- package/lib/components/CounterBadge/useCounterBadge.d.ts +0 -6
- package/lib/components/CounterBadge/useCounterBadgeStyles.d.ts +0 -12
- package/lib/components/PresenceBadge/PresenceBadge.d.ts +0 -6
- package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +0 -19
- package/lib/components/PresenceBadge/index.d.ts +0 -4
- package/lib/components/PresenceBadge/presenceIcons.d.ts +0 -11
- package/lib/components/PresenceBadge/usePresenceBadge.d.ts +0 -6
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -12
- package/lib/index.d.ts +0 -6
- package/lib-commonjs/Badge.d.ts +0 -1
- package/lib-commonjs/CounterBadge.d.ts +0 -1
- package/lib-commonjs/PresenceBadge.d.ts +0 -1
- package/lib-commonjs/components/Badge/Badge.d.ts +0 -6
- package/lib-commonjs/components/Badge/Badge.types.d.ts +0 -34
- package/lib-commonjs/components/Badge/index.d.ts +0 -5
- package/lib-commonjs/components/Badge/renderBadge.d.ts +0 -2
- package/lib-commonjs/components/Badge/useBadge.d.ts +0 -6
- package/lib-commonjs/components/Badge/useBadgeStyles.d.ts +0 -11
- package/lib-commonjs/components/CounterBadge/CounterBadge.d.ts +0 -6
- package/lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts +0 -41
- package/lib-commonjs/components/CounterBadge/index.d.ts +0 -4
- package/lib-commonjs/components/CounterBadge/useCounterBadge.d.ts +0 -6
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.d.ts +0 -12
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts +0 -6
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +0 -19
- package/lib-commonjs/components/PresenceBadge/index.d.ts +0 -4
- package/lib-commonjs/components/PresenceBadge/presenceIcons.d.ts +0 -11
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts +0 -6
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -12
- package/lib-commonjs/index.d.ts +0 -6
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAWA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAM,OAAO,GAAG,CACd,MADc,EAEd,WAFc,EAGd,IAHc,KAIoB;
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (\n status: PresenceBadgeState['status'],\n outOfOffice: boolean,\n size: PresenceBadgeState['size'],\n): React.FunctionComponent | null => {\n switch (status) {\n case 'available':\n return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n case 'away':\n return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];\n case 'busy':\n return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n case 'do-not-disturb':\n return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n case 'offline':\n return presenceOfflineRegular[size];\n case 'out-of-office':\n return presenceOofRegular[size];\n case 'unknown':\n return presenceUnknownRegular[size];\n }\n};\n\nconst DEFAULT_STRINGS = {\n busy: 'busy',\n 'out-of-office': 'out of office',\n away: 'away',\n available: 'available',\n offline: 'offline',\n 'do-not-disturb': 'do not disturb',\n unknown: 'unknown',\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n props: PresenceBadgeProps,\n ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n const statusText = DEFAULT_STRINGS[props.status ?? 'available'];\n const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';\n const state: PresenceBadgeState = {\n ...useBadge_unstable(\n {\n size: 'medium',\n 'aria-label': statusText + oofText,\n role: 'img',\n ...props,\n icon: resolveShorthand(props.icon, {\n required: true,\n }),\n },\n ref,\n ),\n status: props.status ?? 'available',\n outOfOffice: props.outOfOffice ?? false,\n };\n\n const IconElement = iconMap(state.status, state.outOfOffice, state.size);\n if (IconElement) {\n state.icon!.children = <IconElement />;\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -3,22 +3,25 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames =
|
6
|
+
exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = 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 `presenceBadgeClassNames.root` instead.
|
13
|
-
*/
|
14
11
|
|
15
|
-
|
16
|
-
exports.presenceBadgeClassName = 'fui-PresenceBadge';
|
17
12
|
exports.presenceBadgeClassNames = {
|
18
13
|
root: 'fui-PresenceBadge',
|
19
14
|
icon: 'fui-PresenceBadge__icon'
|
20
15
|
};
|
21
16
|
|
17
|
+
const getIsBusy = status => {
|
18
|
+
if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') {
|
19
|
+
return true;
|
20
|
+
}
|
21
|
+
|
22
|
+
return false;
|
23
|
+
};
|
24
|
+
|
22
25
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
23
26
|
"root": {
|
24
27
|
"z8tnut": "f1g0x7ka",
|
@@ -91,7 +94,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
91
94
|
|
92
95
|
const usePresenceBadgeStyles_unstable = state => {
|
93
96
|
const styles = useStyles();
|
94
|
-
|
97
|
+
const isBusy = getIsBusy(state.status);
|
98
|
+
state.root.className = react_1.mergeClasses(exports.presenceBadgeClassNames.root, styles.root, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
|
95
99
|
|
96
100
|
if (state.icon) {
|
97
101
|
state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAKa,OAAA,CAAA,uBAAA,GAAsD;EACjE,IAAI,EAAE,mBAD2D;EAEjE,IAAI,EAAE;AAF2D,CAAtD;;AAKb,MAAM,SAAS,GAAI,MAAD,IAAyC;EACzD,IAAI,MAAM,KAAK,MAAX,IAAqB,MAAM,KAAK,gBAAhC,IAAoD,MAAM,KAAK,SAAnE,EAA8E;IAC5E,OAAO,IAAP;EACD;;EAED,OAAO,KAAP;AACD,CAND;;AAQA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,MAAP,CAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,uBAAA,CAAwB,IADH,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,IAAI,MAAM,CAAC,UAHI,EAIrB,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,MAAM,CAAC,UAJb,EAKrB,KAAK,CAAC,MAAN,KAAiB,WAAjB,IAAgC,MAAM,CAAC,eALlB,EAMrB,KAAK,CAAC,MAAN,KAAiB,SAAjB,IAA8B,MAAM,CAAC,aANhB,EAOrB,KAAK,CAAC,MAAN,KAAiB,eAAjB,IAAoC,MAAM,CAAC,iBAPtB,EAQrB,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,WARP,EASrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,WAAtC,IAAqD,MAAM,CAAC,oBATvC,EAUrB,KAAK,CAAC,WAAN,IAAqB,MAArB,IAA+B,MAAM,CAAC,eAVjB,EAWrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,MAAtC,IAAgD,MAAM,CAAC,eAXlC,EAYrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,SAAtC,IAAmD,MAAM,CAAC,aAZrC,EAarB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,eAAtC,IAAyD,MAAM,CAAC,iBAb3C,EAcrB,KAAK,CAAC,IAAN,KAAe,MAAf,IAAyB,MAAM,CAAC,IAdX,EAerB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,KAfZ,EAgBrB,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,UAhBlB,EAiBrB,KAAK,CAAC,IAAN,CAAW,SAjBU,CAAvB;;EAoBA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,KAAK,CAAC,IAAN,CAAW,SAAtD,CAAvB;EACD;;EAED,OAAO,KAAP;AACD,CA5BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') {\n return true;\n }\n\n return false;\n};\n\nconst useStyles = makeStyles({\n root: {\n ...shorthands.padding(0),\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& span': {\n display: 'flex',\n },\n ...shorthands.borderRadius('50%'),\n backgroundColor: tokens.colorNeutralBackground1,\n },\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n outOfOfficeAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n styles.root,\n isBusy && styles.statusBusy,\n state.status === 'away' && styles.statusAway,\n state.status === 'available' && styles.statusAvailable,\n state.status === 'offline' && styles.statusOffline,\n state.status === 'out-of-office' && styles.statusOutOfOffice,\n state.outOfOffice && styles.outOfOffice,\n state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice,\n state.size === 'tiny' && styles.tiny,\n state.size === 'large' && styles.large,\n state.size === 'extra-large' && styles.extraLarge,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);\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.useCounterBadge_unstable = exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = exports.
|
6
|
+
exports.useCounterBadge_unstable = exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = exports.CounterBadge = exports.usePresenceBadge_unstable = exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = exports.PresenceBadge = exports.useBadge_unstable = exports.useBadgeStyles_unstable = exports.renderBadge_unstable = exports.badgeClassNames = exports.Badge = void 0;
|
7
7
|
|
8
8
|
var Badge_1 = /*#__PURE__*/require("./Badge");
|
9
9
|
|
@@ -12,13 +12,6 @@ Object.defineProperty(exports, "Badge", {
|
|
12
12
|
get: function () {
|
13
13
|
return Badge_1.Badge;
|
14
14
|
}
|
15
|
-
}); // eslint-disable-next-line deprecation/deprecation
|
16
|
-
|
17
|
-
Object.defineProperty(exports, "badgeClassName", {
|
18
|
-
enumerable: true,
|
19
|
-
get: function () {
|
20
|
-
return Badge_1.badgeClassName;
|
21
|
-
}
|
22
15
|
});
|
23
16
|
Object.defineProperty(exports, "badgeClassNames", {
|
24
17
|
enumerable: true,
|
@@ -52,13 +45,6 @@ Object.defineProperty(exports, "PresenceBadge", {
|
|
52
45
|
get: function () {
|
53
46
|
return PresenceBadge_1.PresenceBadge;
|
54
47
|
}
|
55
|
-
}); // eslint-disable-next-line deprecation/deprecation
|
56
|
-
|
57
|
-
Object.defineProperty(exports, "presenceBadgeClassName", {
|
58
|
-
enumerable: true,
|
59
|
-
get: function () {
|
60
|
-
return PresenceBadge_1.presenceBadgeClassName;
|
61
|
-
}
|
62
48
|
});
|
63
49
|
Object.defineProperty(exports, "presenceBadgeClassNames", {
|
64
50
|
enumerable: true,
|
@@ -86,13 +72,6 @@ Object.defineProperty(exports, "CounterBadge", {
|
|
86
72
|
get: function () {
|
87
73
|
return CounterBadge_1.CounterBadge;
|
88
74
|
}
|
89
|
-
}); // eslint-disable-next-line deprecation/deprecation
|
90
|
-
|
91
|
-
Object.defineProperty(exports, "counterBadgeClassName", {
|
92
|
-
enumerable: true,
|
93
|
-
get: function () {
|
94
|
-
return CounterBadge_1.counterBadgeClassName;
|
95
|
-
}
|
96
75
|
});
|
97
76
|
Object.defineProperty(exports, "counterBadgeClassNames", {
|
98
77
|
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;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;;AAEhF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,+BAAA;EAA+B;AAA/B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AAGF,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,8BAAA;EAA8B;AAA9B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA","sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n PresenceBadge,\n presenceBadgeClassNames,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-badge",
|
3
|
-
"version": "9.0.0
|
3
|
+
"version": "9.0.0",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -21,21 +21,21 @@
|
|
21
21
|
"start": "yarn storybook",
|
22
22
|
"test": "jest --passWithNoTests",
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
25
|
-
"storybook": "node
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-badge/src && yarn docs",
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
27
27
|
},
|
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.9",
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
|
-
"@fluentui/react-icons": "^2.0.
|
36
|
-
"@griffel/react": "1.0
|
37
|
-
"@fluentui/react-theme": "9.0.0
|
38
|
-
"@fluentui/react-utilities": "9.0.0
|
35
|
+
"@fluentui/react-icons": "^2.0.172-rc.8",
|
36
|
+
"@griffel/react": "1.2.0",
|
37
|
+
"@fluentui/react-theme": "^9.0.0",
|
38
|
+
"@fluentui/react-utilities": "^9.0.0",
|
39
39
|
"tslib": "^2.1.0"
|
40
40
|
},
|
41
41
|
"peerDependencies": {
|
@@ -46,9 +46,7 @@
|
|
46
46
|
},
|
47
47
|
"beachball": {
|
48
48
|
"disallowedChangeTypes": [
|
49
|
-
"major"
|
50
|
-
"minor",
|
51
|
-
"patch"
|
49
|
+
"major"
|
52
50
|
]
|
53
51
|
},
|
54
52
|
"exports": {
|
package/lib/Badge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Badge/index';
|
package/lib/CounterBadge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/CounterBadge/index';
|
package/lib/PresenceBadge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/PresenceBadge/index';
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
-
export declare type BadgeSlots = {
|
3
|
-
root: Slot<'div'>;
|
4
|
-
icon?: Slot<'span'>;
|
5
|
-
};
|
6
|
-
export declare type BadgeCommons = {
|
7
|
-
/**
|
8
|
-
* A Badge can be filled, outline, ghost, inverted
|
9
|
-
* @defaultvalue filled
|
10
|
-
*/
|
11
|
-
appearance: 'filled' | 'ghost' | 'outline' | 'tint';
|
12
|
-
/**
|
13
|
-
* A Badge can be one of preset colors
|
14
|
-
* @defaultvalue brand
|
15
|
-
*/
|
16
|
-
color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
17
|
-
/**
|
18
|
-
* A Badge can position the icon before or after the content.
|
19
|
-
* @defaultvalue before
|
20
|
-
*/
|
21
|
-
iconPosition: 'before' | 'after';
|
22
|
-
/**
|
23
|
-
* A Badge can be square, circular or rounded.
|
24
|
-
* @defaultvalue circular
|
25
|
-
*/
|
26
|
-
shape: 'circular' | 'rounded' | 'square';
|
27
|
-
/**
|
28
|
-
* A Badge can be on of several preset sizes.
|
29
|
-
* @defaultvalue medium
|
30
|
-
*/
|
31
|
-
size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
32
|
-
};
|
33
|
-
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
|
34
|
-
export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { BadgeProps, BadgeState } from './Badge.types';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export declare const useBadge_unstable: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import type { BadgeSlots, BadgeState } from './Badge.types';
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* @deprecated Use `badgeClassNames.root` instead.
|
5
|
-
*/
|
6
|
-
export declare const badgeClassName = "fui-Badge";
|
7
|
-
export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
|
8
|
-
/**
|
9
|
-
* Applies style classnames to slots
|
10
|
-
*/
|
11
|
-
export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { CounterBadgeProps } from './CounterBadge.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
|
5
|
-
*/
|
6
|
-
export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
|
@@ -1,41 +0,0 @@
|
|
1
|
-
import type { BadgeProps, BadgeState } from '../Badge/index';
|
2
|
-
declare type CounterBadgeCommons = {
|
3
|
-
/**
|
4
|
-
* Max number to be displayed
|
5
|
-
* @default 99
|
6
|
-
*/
|
7
|
-
overflowCount: number;
|
8
|
-
/**
|
9
|
-
* Value displayed by the Badge
|
10
|
-
* @default 0
|
11
|
-
*/
|
12
|
-
count: number;
|
13
|
-
/**
|
14
|
-
* If the badge should be shown when count is 0
|
15
|
-
* @default false
|
16
|
-
*/
|
17
|
-
showZero: boolean;
|
18
|
-
/**
|
19
|
-
* If a dot should be displayed without the count
|
20
|
-
* @default false
|
21
|
-
*/
|
22
|
-
dot: boolean;
|
23
|
-
/**
|
24
|
-
* A Badge can be circular or rounded
|
25
|
-
* @default circular
|
26
|
-
*/
|
27
|
-
shape: 'circular' | 'rounded';
|
28
|
-
/**
|
29
|
-
* A Badge can be filled, ghost
|
30
|
-
* @default filled
|
31
|
-
*/
|
32
|
-
appearance: 'filled' | 'ghost';
|
33
|
-
/**
|
34
|
-
* Semantic colors for a counter badge
|
35
|
-
* @default brand
|
36
|
-
*/
|
37
|
-
color: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
|
38
|
-
};
|
39
|
-
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape' | 'color'> & Partial<CounterBadgeCommons>;
|
40
|
-
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
|
41
|
-
export {};
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>) => CounterBadgeState;
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
2
|
-
import type { BadgeSlots } from '../Badge/Badge.types';
|
3
|
-
import type { CounterBadgeState } from './CounterBadge.types';
|
4
|
-
/**
|
5
|
-
* @deprecated Use `counterBadgeClassNames.root` instead.
|
6
|
-
*/
|
7
|
-
export declare const counterBadgeClassName = "fui-CounterBadge";
|
8
|
-
export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
|
9
|
-
/**
|
10
|
-
* Applies style classnames to slots
|
11
|
-
*/
|
12
|
-
export declare const useCounterBadgeStyles_unstable: (state: CounterBadgeState) => CounterBadgeState;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { PresenceBadgeProps } from './PresenceBadge.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* Define a styled Badge, using the `useBadge_unstable` hook.
|
5
|
-
*/
|
6
|
-
export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
|
2
|
-
import type { BadgeCommons, BadgeSlots } from '../Badge/Badge.types';
|
3
|
-
export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
|
4
|
-
declare type PresenceBadgeCommons = {
|
5
|
-
/**
|
6
|
-
* Represents several status
|
7
|
-
* @default available
|
8
|
-
*/
|
9
|
-
status: PresenceBadgeStatus;
|
10
|
-
/**
|
11
|
-
* Modifies the display to indicate that the user is out of office.
|
12
|
-
* This can be combined with any status to display an out-of-office version of that status
|
13
|
-
* @default false
|
14
|
-
*/
|
15
|
-
outOfOffice: boolean;
|
16
|
-
} & BadgeCommons;
|
17
|
-
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;
|
18
|
-
export declare type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
|
19
|
-
export {};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { PresenceBadgeState } from './PresenceBadge.types';
|
3
|
-
export declare const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
4
|
-
export declare const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
5
|
-
export declare const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
6
|
-
export declare const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
7
|
-
export declare const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
8
|
-
export declare const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
9
|
-
export declare const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
10
|
-
export declare const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
11
|
-
export declare const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null>;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export declare const usePresenceBadge_unstable: (props: PresenceBadgeProps, ref: React.Ref<HTMLElement>) => PresenceBadgeState;
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
2
|
-
import type { BadgeSlots } from '../Badge/Badge.types';
|
3
|
-
import type { PresenceBadgeState } from './PresenceBadge.types';
|
4
|
-
/**
|
5
|
-
* @deprecated Use `presenceBadgeClassNames.root` instead.
|
6
|
-
*/
|
7
|
-
export declare const presenceBadgeClassName = "fui-PresenceBadge";
|
8
|
-
export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
|
9
|
-
/**
|
10
|
-
* Applies style classnames to slots
|
11
|
-
*/
|
12
|
-
export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
|
package/lib/index.d.ts
DELETED
@@ -1,6 +0,0 @@
|
|
1
|
-
export { Badge, badgeClassName, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, } from './Badge';
|
2
|
-
export type { BadgeProps, BadgeSlots, BadgeState } from './Badge';
|
3
|
-
export { PresenceBadge, presenceBadgeClassName, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, } from './PresenceBadge';
|
4
|
-
export type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';
|
5
|
-
export { CounterBadge, counterBadgeClassName, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, } from './CounterBadge';
|
6
|
-
export type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';
|
package/lib-commonjs/Badge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Badge/index';
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/CounterBadge/index';
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/PresenceBadge/index';
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
-
export declare type BadgeSlots = {
|
3
|
-
root: Slot<'div'>;
|
4
|
-
icon?: Slot<'span'>;
|
5
|
-
};
|
6
|
-
export declare type BadgeCommons = {
|
7
|
-
/**
|
8
|
-
* A Badge can be filled, outline, ghost, inverted
|
9
|
-
* @defaultvalue filled
|
10
|
-
*/
|
11
|
-
appearance: 'filled' | 'ghost' | 'outline' | 'tint';
|
12
|
-
/**
|
13
|
-
* A Badge can be one of preset colors
|
14
|
-
* @defaultvalue brand
|
15
|
-
*/
|
16
|
-
color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
17
|
-
/**
|
18
|
-
* A Badge can position the icon before or after the content.
|
19
|
-
* @defaultvalue before
|
20
|
-
*/
|
21
|
-
iconPosition: 'before' | 'after';
|
22
|
-
/**
|
23
|
-
* A Badge can be square, circular or rounded.
|
24
|
-
* @defaultvalue circular
|
25
|
-
*/
|
26
|
-
shape: 'circular' | 'rounded' | 'square';
|
27
|
-
/**
|
28
|
-
* A Badge can be on of several preset sizes.
|
29
|
-
* @defaultvalue medium
|
30
|
-
*/
|
31
|
-
size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
32
|
-
};
|
33
|
-
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
|
34
|
-
export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { BadgeProps, BadgeState } from './Badge.types';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export declare const useBadge_unstable: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import type { BadgeSlots, BadgeState } from './Badge.types';
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* @deprecated Use `badgeClassNames.root` instead.
|
5
|
-
*/
|
6
|
-
export declare const badgeClassName = "fui-Badge";
|
7
|
-
export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
|
8
|
-
/**
|
9
|
-
* Applies style classnames to slots
|
10
|
-
*/
|
11
|
-
export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { CounterBadgeProps } from './CounterBadge.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
|
5
|
-
*/
|
6
|
-
export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
|
@@ -1,41 +0,0 @@
|
|
1
|
-
import type { BadgeProps, BadgeState } from '../Badge/index';
|
2
|
-
declare type CounterBadgeCommons = {
|
3
|
-
/**
|
4
|
-
* Max number to be displayed
|
5
|
-
* @default 99
|
6
|
-
*/
|
7
|
-
overflowCount: number;
|
8
|
-
/**
|
9
|
-
* Value displayed by the Badge
|
10
|
-
* @default 0
|
11
|
-
*/
|
12
|
-
count: number;
|
13
|
-
/**
|
14
|
-
* If the badge should be shown when count is 0
|
15
|
-
* @default false
|
16
|
-
*/
|
17
|
-
showZero: boolean;
|
18
|
-
/**
|
19
|
-
* If a dot should be displayed without the count
|
20
|
-
* @default false
|
21
|
-
*/
|
22
|
-
dot: boolean;
|
23
|
-
/**
|
24
|
-
* A Badge can be circular or rounded
|
25
|
-
* @default circular
|
26
|
-
*/
|
27
|
-
shape: 'circular' | 'rounded';
|
28
|
-
/**
|
29
|
-
* A Badge can be filled, ghost
|
30
|
-
* @default filled
|
31
|
-
*/
|
32
|
-
appearance: 'filled' | 'ghost';
|
33
|
-
/**
|
34
|
-
* Semantic colors for a counter badge
|
35
|
-
* @default brand
|
36
|
-
*/
|
37
|
-
color: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
|
38
|
-
};
|
39
|
-
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape' | 'color'> & Partial<CounterBadgeCommons>;
|
40
|
-
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
|
41
|
-
export {};
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>) => CounterBadgeState;
|