@fluentui/react-badge 9.0.0-rc.8 → 9.0.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 +256 -1
- package/CHANGELOG.md +190 -103
- 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.
|
|
3
|
+
"version": "9.0.1",
|
|
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.10",
|
|
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;
|