From edf5f528917bf02dad90ea35f08412e1cae357de Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 16 Jan 2023 10:45:41 +0100 Subject: [PATCH 1/4] feat(PresenceBadge): Add blocked status --- .../stories/Avatar/AvatarBadge.stories.tsx | 2 ++ .../PresenceBadge/PresenceBadge.types.ts | 3 ++- .../components/PresenceBadge/presenceIcons.ts | 18 ++++++++++++++++++ .../PresenceBadge/usePresenceBadge.tsx | 4 ++++ .../PresenceBadge/usePresenceBadgeStyles.ts | 2 +- .../PresenceBadgeOutOfOffice.stories.tsx | 3 ++- .../PresenceBadgeStatus.stories.tsx | 3 ++- 7 files changed, 31 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx index b0f48113fbf470..0e87b2eef7b8ac 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx @@ -9,12 +9,14 @@ export const Badge = () => ( + + ); diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts index 76a0898523e011..176e3e7e8ce89d 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts @@ -8,7 +8,8 @@ export type PresenceBadgeStatus = | 'available' | 'offline' | 'do-not-disturb' - | 'unknown'; + | 'unknown' + | 'blocked'; export type PresenceBadgeProps = Omit>, 'color'> & Pick & { diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts b/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts index ceeb1e16b1d9ff..28dc3d5b3e0311 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts @@ -9,6 +9,9 @@ import { PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, + PresenceBlocked10Regular, + PresenceBlocked12Regular, + PresenceBlocked16Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, @@ -75,6 +78,21 @@ export const presenceAvailableFilled: Record = { + // FIXME not all presence icon sizes are available + // https://github.com/microsoft/fluentui/issues/20650 + tiny: PresenceBlocked10Regular, + 'extra-small': PresenceBlocked10Regular, + small: PresenceBlocked12Regular, + medium: PresenceBlocked16Regular, + // FIXME not all presence icon sizes are available + // https://github.com/microsoft/fluentui/issues/20650 + large: PresenceBlocked16Regular, + // FIXME not all presence icon sizes are available + // https://github.com/microsoft/fluentui/issues/20650 + 'extra-large': PresenceBlocked16Regular, +}; + export const presenceBusyFilled: Record = { // FIXME not all presence icon sizes are available // https://github.com/microsoft/fluentui/issues/20650 diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx index e242f5fe5788af..5133f542ca47ec 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx +++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx @@ -5,6 +5,7 @@ import { presenceAvailableRegular, presenceAwayFilled, presenceBusyFilled, + presenceBlockedRegular, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, @@ -20,6 +21,8 @@ const iconMap = (status: PresenceBadgeState['status'], outOfOffice: boolean, siz return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size]; case 'away': return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size]; + case 'blocked': + return presenceBlockedRegular[size]; case 'busy': return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size]; case 'do-not-disturb': @@ -41,6 +44,7 @@ const DEFAULT_STRINGS = { offline: 'offline', 'do-not-disturb': 'do not disturb', unknown: 'unknown', + blocked: 'blocked', }; /** diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts index 45248f8a3543a8..b727a7a3400350 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts @@ -10,7 +10,7 @@ export const presenceBadgeClassNames: SlotClassNames = { }; const getIsBusy = (status: PresenceBadgeStatus): boolean => { - if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') { + if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown' || status === 'blocked') { return true; } diff --git a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx index 3ff0948f59b225..e9bf3b10b4b9ed 100644 --- a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx +++ b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx @@ -11,6 +11,7 @@ export const OutOfOffice = () => { + ); @@ -21,7 +22,7 @@ OutOfOffice.parameters = { description: { story: 'A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, ' + - '`offline`, `out-of-office` and `unknown` status when `outOfOffice` is set.', + '`offline`, `out-of-office`, `blocked` and `unknown` status when `outOfOffice` is set.', }, }, }; diff --git a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx index b5329f2883321d..1442c34604a7b3 100644 --- a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx +++ b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx @@ -11,6 +11,7 @@ export const Status = () => { + ); @@ -21,7 +22,7 @@ Status.parameters = { description: { story: 'A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, ' + - '`offline`, `out-of-office` and `unknown` status.' + + '`offline`, `out-of-office`, `blocked` and `unknown` status.' + ' The default is `available`.', }, }, From 80e925d7e139d7c2d2253874b5c14ff96088cf1d Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 16 Jan 2023 10:48:44 +0100 Subject: [PATCH 2/4] changelog --- ...i-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json diff --git a/change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json b/change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json new file mode 100644 index 00000000000000..ffce4ef00e0172 --- /dev/null +++ b/change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat(PresenceBadge): Add blocked status", + "packageName": "@fluentui/react-badge", + "email": "jukapsia@microsoft.com", + "dependentChangeType": "patch" +} From d0ebfc61755307bde5717845346d2c82401d297d Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 16 Jan 2023 11:33:21 +0100 Subject: [PATCH 3/4] update api --- packages/react-components/react-badge/etc/react-badge.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-badge/etc/react-badge.api.md b/packages/react-components/react-badge/etc/react-badge.api.md index e7b0bdb0adc5d3..75f4c7a642dcd8 100644 --- a/packages/react-components/react-badge/etc/react-badge.api.md +++ b/packages/react-components/react-badge/etc/react-badge.api.md @@ -73,7 +73,7 @@ export type PresenceBadgeProps = Omit & BadgeState & Required>; // @public (undocumented) -export type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown'; +export type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown' | 'blocked'; // @public (undocumented) export const renderBadge_unstable: (state: BadgeState) => JSX.Element; From c9a95ad4b2f6c40ea31c488a84d8162c333f86c7 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Tue, 17 Jan 2023 10:46:39 +0100 Subject: [PATCH 4/4] Update packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx Co-authored-by: Makoto Morimoto --- .../src/components/PresenceBadge/usePresenceBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx index 5133f542ca47ec..efabf4169966fd 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx +++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx @@ -4,8 +4,8 @@ import { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, - presenceBusyFilled, presenceBlockedRegular, + presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular,