Add IconizedContextMenuOptionList label

Signed-off-by: Šimon Brandner <[email protected]>

Author: SimonBrandner

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -25,6 +25,11 @@ limitations under the License.
             padding-right: 20px;
         }
 
+        .mx_IconizedContextMenu_optionList_label {
+            font-size: $font-15px;
+            font-weight: $font-semi-bold;
+        }
+
         // the notFirst class is for cases where the optionList might be under a header of sorts.
         &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
             // This is a bit of a hack when we could just use a simple border-top property,

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -33,6 +33,7 @@ interface IProps extends IContextMenuProps {
 interface IOptionListProps {
     first?: boolean;
     red?: boolean;
+    label?: string;
     className?: string;
 }
 
@@ -101,13 +102,20 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconC
     </MenuItem>;
 };
 
-export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({ first, red, className, children }) => {
+export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({
+    first,
+    red,
+    className,
+    label,
+    children,
+}) => {
     const classes = classNames("mx_IconizedContextMenu_optionList", className, {
         mx_IconizedContextMenu_optionList_notFirst: !first,
         mx_IconizedContextMenu_optionList_red: red,
     });
 
     return <div className={classes}>
+        { label && <div><span className="mx_IconizedContextMenu_optionList_label">{ label }</span></div> }
         { children }
     </div>;
 };