fix: membership management button stacking (#2785)

Author: gavinbarron

.yarn/install-state.gz

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import {
   makeStyles,
+  mergeClasses,
   shorthands,
   Button,
   Dialog,
@@ -13,7 +14,7 @@ import {
 import { List, ListItem } from '@fluentui/react-northstar';
 import { Person, PersonViewType } from '@microsoft/mgt-react';
 import { AadUserConversationMember } from '@microsoft/microsoft-graph-types';
-import { Dismiss24Regular, bundleIcon } from '@fluentui/react-icons';
+import { Dismiss20Filled, bundleIcon, iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 
 interface ListChatMembersProps {
   currentUserId: string;
@@ -22,18 +23,49 @@ interface ListChatMembersProps {
   closeParentPopover: () => void;
 }
 
-const RemovePerson = bundleIcon(Dismiss24Regular, () => <></>);
+const RemovePerson = bundleIcon(Dismiss20Filled, () => <></>);
 
 const useStyles = makeStyles({
+  iconPlaceholder: {
+    display: 'flex',
+    width: '24px'
+  },
   listItem: {
     listStyleType: 'none',
-    width: '100%'
+    width: '100%',
+    ':focus-visible': {
+      [`& .${iconFilledClassName}`]: {
+        display: 'inline',
+        color: 'var(--colorNeutralForeground2BrandHover)'
+      },
+      [`& .${iconRegularClassName}`]: {
+        display: 'none'
+      }
+    }
   },
   memberList: {
     fontWeight: 800,
     gridGap: '8px',
-    ...shorthands.marginBlock('0px'),
-    ...shorthands.padding('4px')
+    ...shorthands.marginBlock('0'),
+    ...shorthands.padding('0')
+  },
+  personRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    ...shorthands.paddingBlock('5px'),
+    ...shorthands.paddingInline('16px'),
+    ':hover': {
+      backgroundColor: 'var(--colorSubtleBackgroundHover)',
+      [`& .${iconFilledClassName}`]: {
+        display: 'inline',
+        color: 'var(--colorNeutralForeground2BrandHover)'
+      },
+      [`& .${iconRegularClassName}`]: {
+        display: 'none'
+      }
+    }
   },
   fullWidth: {
     width: '100%'
@@ -64,6 +96,7 @@ const ListChatMembers = ({ members, currentUserId, removeChatMember, closeParent
 
     void removeChatMember(removeUser.id).then(closeDialog);
   }, [removeUser, removeChatMember, closeDialog]);
+
   return (
     <>
       <Dialog open={removeDialogOpen} onOpenChange={(_, data) => setRemoveDialogOpen(data.open)}>
@@ -91,24 +124,23 @@ const ListChatMembers = ({ members, currentUserId, removeChatMember, closeParent
               className={styles.listItem}
               index={index}
               content={
-                <Button
-                  appearance="subtle"
-                  icon={isCurrentUser ? null : <RemovePerson />}
-                  iconPosition="after"
-                  className={styles.fullWidth}
-                >
+                <div className={mergeClasses(styles.personRow, styles.fullWidth)}>
                   <Person
                     className={styles.fullWidth}
                     tabIndex={-1}
                     userId={member.userId}
                     view={PersonViewType.oneline}
                     showPresence
                   />
-                </Button>
+                  <span className={styles.iconPlaceholder}>{!isCurrentUser && <RemovePerson />}</span>
+                </div>
               }
               onClick={() => {
-                if (isCurrentUser) return;
-                openRemoveDialog(member);
+                if (isCurrentUser) {
+                  closeDialog();
+                } else {
+                  openRemoveDialog(member);
+                }
               }}
             />
           ) : null;

packages/mgt-chat/src/components/ManageChatMembers/ListChatMembers.tsx

@@ -21,11 +21,10 @@ import {
   bundleIcon,
   PeopleAdd24Regular,
   PeopleAdd24Filled,
-  DoorArrowLeft20Filled,
-  DoorArrowLeft20Regular
+  DoorArrowLeft24Filled,
+  DoorArrowLeft24Regular
 } from '@fluentui/react-icons';
 import { AadUserConversationMember } from '@microsoft/microsoft-graph-types';
-import { buttonIconStyles } from '../styles/common.styles';
 import { AddChatMembers } from './AddChatMembers';
 import { ListChatMembers } from './ListChatMembers';
 
@@ -37,9 +36,23 @@ interface ManageChatMembersProps {
 }
 
 const AddPeople = bundleIcon(PeopleAdd24Filled, PeopleAdd24Regular);
-const Leave = bundleIcon(DoorArrowLeft20Filled, DoorArrowLeft20Regular);
+const Leave = bundleIcon(DoorArrowLeft24Filled, DoorArrowLeft24Regular);
 
 const useStyles = makeStyles({
+  button: {
+    justifyContent: 'flex-start',
+    ...shorthands.paddingInline('16px')
+  },
+  buttonRow: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  container: {
+    ...shorthands.paddingBlock('4px')
+  },
+  divider: {
+    ...shorthands.marginBlock('4px')
+  },
   popover: {
     ...shorthands.padding('0 !important')
   },
@@ -93,48 +106,45 @@ const ManageChatMembers = ({ currentUserId, members, addChatMembers, removeChatM
         {showAddMembers ? (
           <AddChatMembers closeDialog={closeCallout} addChatMembers={addChatMembers} />
         ) : (
-          <>
+          <div className={styles.container}>
             <ListChatMembers
               members={members}
               removeChatMember={removeChatMember}
               currentUserId={currentUserId}
               closeParentPopover={closeCallout}
             />
-            <Divider />
-            <Button
-              appearance="transparent"
-              icon={<AddPeople />}
-              onClick={openAddMembers}
-              className={buttonIconStyles.button}
-            >
-              Add people
-            </Button>
-            <Dialog>
-              <DialogTrigger>
-                <Button appearance="transparent" icon={<Leave />} className={buttonIconStyles.button}>
-                  Leave
-                </Button>
-              </DialogTrigger>
-              <DialogSurface>
-                <DialogBody>
-                  <DialogTitle>Leave the conversation?</DialogTitle>
-                  <DialogContent>You&apos;ll still have access to the chat history.</DialogContent>
-                  <DialogActions>
-                    <DialogTrigger disableButtonEnhancement>
-                      <Button appearance="secondary" onClick={closeCallout}>
-                        Cancel
-                      </Button>
-                    </DialogTrigger>
-                    {members.length > 2 && (
-                      <Button appearance="primary" onClick={leaveChat}>
-                        Leave
-                      </Button>
-                    )}
-                  </DialogActions>
-                </DialogBody>
-              </DialogSurface>
-            </Dialog>
-          </>
+            <Divider className={styles.divider} />
+            <div className={styles.buttonRow}>
+              <Button appearance="subtle" icon={<AddPeople />} onClick={openAddMembers} className={styles.button}>
+                Add people
+              </Button>
+              <Dialog>
+                <DialogTrigger>
+                  <Button appearance="subtle" icon={<Leave />} className={styles.button}>
+                    Leave
+                  </Button>
+                </DialogTrigger>
+                <DialogSurface>
+                  <DialogBody>
+                    <DialogTitle>Leave the conversation?</DialogTitle>
+                    <DialogContent>You&apos;ll still have access to the chat history.</DialogContent>
+                    <DialogActions>
+                      <DialogTrigger disableButtonEnhancement>
+                        <Button appearance="secondary" onClick={closeCallout}>
+                          Cancel
+                        </Button>
+                      </DialogTrigger>
+                      {members.length > 2 && (
+                        <Button appearance="primary" onClick={leaveChat}>
+                          Leave
+                        </Button>
+                      )}
+                    </DialogActions>
+                  </DialogBody>
+                </DialogSurface>
+              </Dialog>
+            </div>
+          </div>
         )}
       </PopoverSurface>
     </Popover>