add destructive option and close on interaction options

Author: Kerry Archibald

res/css/views/context_menus/_IconizedContextMenu.pcss

@@ -82,7 +82,8 @@ limitations under the License.
             display: flex;
             align-items: center;
 
-            &:hover {
+            &:hover,
+            &:focus {
                 background-color: $menu-selected-color;
             }
 
@@ -187,3 +188,7 @@ limitations under the License.
         color: $tertiary-content;
     }
 }
+
+.mx_IconizedContextMenu_item.mx_IconizedContextMenu_itemDestructive {
+    color: $alert !important;
+}

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -39,6 +39,7 @@ interface IOptionListProps {
 
 interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
     iconClassName?: string;
+    isDestructive?: boolean;
 }
 
 interface ICheckboxProps extends React.ComponentProps<typeof MenuItemCheckbox> {
@@ -112,12 +113,14 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({
     className,
     iconClassName,
     children,
+    isDestructive,
     ...props
 }) => {
     return <MenuItem
         {...props}
         className={classNames(className, {
             mx_IconizedContextMenu_item: true,
+            mx_IconizedContextMenu_itemDestructive: isDestructive,
         })}
         label={label}
     >