feat: icon type circular label

react/features/base/label/components/AbstractCircularLabel.js

@@ -4,10 +4,15 @@ import { Component } from 'react';
 
 export type Props = {
 
+    /**
+     * An SVG icon to be rendered as the content of the label.
+     */
+    icon: Component<any>,
+
     /**
      * String or component that will be rendered as the label itself.
      */
-    label: string | React$Node
+    label: string
 };
 
 /**

react/features/base/label/components/CircularLabel.native.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Animated, Text } from 'react-native';
 
+import Icon from '../../icons/components/Icon';
 import { combineStyles, type StyleType } from '../../styles';
 
 import AbstractCircularLabel, {
@@ -90,7 +91,7 @@ export default class CircularLabel extends AbstractCircularLabel<Props, State> {
      * @inheritdoc
      */
     render() {
-        const { status, label, style } = this.props;
+        const { icon, label, status, style } = this.props;
 
         let extraStyle = null;
 
@@ -105,15 +106,24 @@ export default class CircularLabel extends AbstractCircularLabel<Props, State> {
             break;
         }
 
+        const labelComponent = icon
+            ? (
+                <Icon
+                    src = { icon }
+                    style = { styles.indicatorIcon } />
+            ) : (
+                <Text style = { styles.indicatorText }>
+                    { label }
+                </Text>
+            );
+
         return (
             <Animated.View
                 style = { [
                     combineStyles(styles.indicatorContainer, style),
                     extraStyle
                 ] }>
-                <Text style = { styles.indicatorText }>
-                    { label }
-                </Text>
+                { labelComponent }
             </Animated.View>
         );
     }

react/features/base/label/components/CircularLabel.web.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import Icon from '../../icons/components/Icon';
+
 import AbstractCircularLabel, {
     type Props as AbstractProps
 } from './AbstractCircularLabel';
@@ -44,15 +46,22 @@ export default class CircularLabel extends AbstractCircularLabel<Props, {}> {
     render() {
         const {
             className,
+            icon,
             id,
             label
         } = this.props;
 
+        const labelComponent = icon
+            ? (
+                <Icon
+                    src = { icon } />
+            ) : label;
+
         return (
             <div
                 className = { `circular-label ${className}` }
                 id = { id }>
-                { label }
+                { labelComponent }
             </div>
         );
     }

react/features/base/label/components/styles.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { BoxModel, ColorPalette, createStyleSheet } from '../../styles';
+import { BoxModel, ColorPalette } from '../../styles';
 
 /**
  * The default color of the {@code Label} and {@code ExpandedLabel}.
@@ -22,7 +22,7 @@ export const LABEL_SIZE = 36;
 /**
  * The styles of the native base/label feature.
  */
-export default createStyleSheet({
+export default {
 
     expandedLabelArrow: {
         backgroundColor: ColorPalette.blue,
@@ -64,12 +64,16 @@ export default createStyleSheet({
         width: LABEL_SIZE
     },
 
+    indicatorIcon: {
+        fontSize: 24
+    },
+
     indicatorText: {
         color: ColorPalette.white,
-        fontSize: 12
+        fontSize: 10
     },
 
     labelOff: {
         opacity: 0.3
     }
-});
+};

react/features/e2ee/components/E2EELabel.js

@@ -4,7 +4,7 @@ import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
-import { Icon, IconE2EE } from '../../base/icons';
+import { IconE2EE } from '../../base/icons';
 import { CircularLabel } from '../../base/label';
 import { connect } from '../../base/redux';
 
@@ -29,16 +29,13 @@ class E2EELabel extends Component<Props> {
             return null;
         }
 
-        // eslint-disable-next-line react/jsx-max-props-per-line
-        const icon = <Icon size = { 22 } src = { IconE2EE } />;
-
         return (
             <Tooltip
                 content = { this.props.t('e2ee.labelToolTip') }
                 position = { 'left' }>
                 <CircularLabel
                     className = 'e2ee'
-                    label = { icon } />
+                    icon = { IconE2EE } />
             </Tooltip>
         );
     }