feat(buttons): expose button style props in SDK

README.md

@@ -315,6 +315,11 @@ useEffect(() => {
       label: 'Custom Nav Button',
       tooltip: 'Navigate to custom area',
       position: NavBarItemPosition.RIGHT,
+      color: 'primary',
+      circle: true,
+      hideLabel: true,
+      size: 'sm', // Available sizes: 'sm', 'md', 'lg', 'jumbo'.
+      style: { marginLeft: '4px' },
       onClick: () => pluginLogger.info('Nav button clicked'),
       hasSeparator: true,
     }),

src/extensible-areas/actions-bar-item/component.ts

@@ -11,6 +11,7 @@ import {
   ActionsBarToggleGroupProps,
 } from './types';
 import { PluginIconType } from '../common/icon';
+import { PluginButtonSize } from '../common/button';
 
 // ActionsBar Extensible Area
 
@@ -40,6 +41,8 @@ class ActionsBarItem implements ActionsBarInterface {
 }
 
 export class ActionsBarButton extends ActionsBarItem {
+  label: string;
+
   icon: PluginIconType;
 
   tooltip: string;
@@ -48,32 +51,51 @@ export class ActionsBarButton extends ActionsBarItem {
 
   color: string;
 
+  circle: boolean;
+
+  hideLabel: boolean;
+
+  size: PluginButtonSize;
+
+  style: React.CSSProperties;
+
   /**
    * Returns object to be used in the setter for action bar. In this case,
    * a button.
    *
+   * @param label - label to be displayed in the button
    * @param icon - icon to be used in the button for the action bar - it can be the iconName
    * from BigBlueButton or an svg
    * @param tooltip - tooltip to be displayed when hovering the button
    * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the button
    * @param position - position that this button will be displayed, see {@link ActionsBarPosition}
    * @param color - button color variant, defaults to 'primary'
+   * @param circle - if true, the action bar button will be displayed as a circle
+   * @param hideLabel - if true, the action bar button label will be visually hidden
+   * @param size - button size variant, defaults to 'lg'
+   * @param style - style of the action bar button
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    id, icon, tooltip = '', dataTest = '', onClick = () => { }, position = ActionsBarPosition.RIGHT,
-    color = 'primary',
+    id, label = '', icon, tooltip = '', dataTest = '', onClick = () => { },
+    position = ActionsBarPosition.RIGHT, color = 'primary', circle = true, hideLabel = true,
+    size = 'lg', style = {},
   }: ActionsBarButtonProps) {
     super({
       id, type: ActionsBarItemType.BUTTON, position, dataTest,
     });
+    this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;
     this.dataTest = dataTest;
     this.onClick = onClick;
     this.color = color;
+    this.circle = circle;
+    this.hideLabel = hideLabel;
+    this.size = size;
+    this.style = style;
   }
 }
 

src/extensible-areas/actions-bar-item/types.ts

@@ -2,6 +2,7 @@ import { ChangeEvent, MouseEvent } from 'react';
 import { PluginProvidedUiItemDescriptor } from '../base';
 import { ActionsBarItemType, ActionsBarPosition } from './enums';
 import { PluginIconType } from '../common/icon';
+import { PluginButtonStyleProps } from '../common/button';
 
 /**
  * Interface for the generic Actions bar item. (`position` is mandatory)
@@ -17,14 +18,14 @@ export interface ActionsBarItemProps {
   dataTest?: string;
 }
 
-export interface ActionsBarButtonProps {
+export interface ActionsBarButtonProps extends PluginButtonStyleProps {
   id?: string;
+  label?: string;
   icon: PluginIconType;
   tooltip: string;
   position: ActionsBarPosition;
   dataTest?: string;
   onClick: () => void;
-  color?: string;
 }
 
 export interface ActionsBarSeparatorProps {

src/extensible-areas/common/button/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/extensible-areas/common/button/types.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+/**
+ * Available size variants for plugin-provided buttons.
+ */
+export type PluginButtonSize = 'sm' | 'md' | 'lg' | 'jumbo';
+
+/**
+ * Shared style properties for plugin-provided buttons.
+ */
+export interface PluginButtonStyleProps {
+  /** Button color variant. */
+  color?: string;
+
+  /** Whether the button should be displayed as a circle. */
+  circle?: boolean;
+
+  /** Whether the button label should be visually hidden. */
+  hideLabel?: boolean;
+
+  /** Button size variant. Available sizes are 'sm', 'md', 'lg', and 'jumbo'. */
+  size?: PluginButtonSize;
+
+  /** Custom style properties for the button. */
+  style?: React.CSSProperties;
+}

src/extensible-areas/common/index.ts

@@ -1 +1,2 @@
 export * from './icon';
+export * from './button';

src/extensible-areas/index.ts

@@ -1,4 +1,5 @@
 export * from './common/icon';
+export * from './common/button';
 export * from './presentation-toolbar-item';
 export * from './user-list-dropdown-item';
 export * from './action-button-dropdown-item';

src/extensible-areas/nav-bar-item/component.ts

@@ -4,6 +4,7 @@ import {
   NavBarInfoProps,
 } from './types';
 import { PluginIconType } from '../common/icon';
+import { PluginButtonSize } from '../common/button';
 
 // NavBar Extensible Area
 
@@ -20,6 +21,16 @@ export class NavBarButton implements NavBarInterface {
 
   disabled: boolean;
 
+  color: string;
+
+  circle: boolean;
+
+  hideLabel: boolean;
+
+  size: PluginButtonSize;
+
+  style: React.CSSProperties;
+
   dataTest: string;
 
   position: NavBarItemPosition;
@@ -41,13 +52,21 @@ export class NavBarButton implements NavBarInterface {
    * @param hasSeparator - boolean indicating whether the navigation bar button has separator
    * (vertical bar)
    * @param disabled - if true, the navigation bar button will not be clickable
+   * @param color - button color variant, defaults to 'primary'
+   * @param circle - if true, the navigation bar button will be displayed as a circle,
+   * defaults to false
+   * @param hideLabel - if true, the navigation bar button label will be visually hidden,
+   * defaults to false
+   * @param size - button size variant, defaults to 'md'
+   * @param style - style of the navigation bar button
    * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
     id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => { },
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
+    color = 'primary', circle = false, hideLabel = false, size = 'md', style = {},
   }: NavBarButtonProps) {
     if (id) {
       this.id = id;
@@ -56,6 +75,11 @@ export class NavBarButton implements NavBarInterface {
     this.icon = icon;
     this.tooltip = tooltip;
     this.disabled = disabled;
+    this.color = color;
+    this.circle = circle;
+    this.hideLabel = hideLabel;
+    this.size = size;
+    this.style = style;
     this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = NavBarItemType.BUTTON;

src/extensible-areas/nav-bar-item/types.ts

@@ -1,13 +1,14 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
 import { NavBarItemPosition } from './enums';
 import { PluginIconType } from '../common/icon';
+import { PluginButtonStyleProps } from '../common/button';
 
 export interface NavBarInterface extends PluginProvidedUiItemDescriptor {
   position: NavBarItemPosition;
   hasSeparator: boolean;
 }
 
-export interface NavBarButtonProps {
+export interface NavBarButtonProps extends PluginButtonStyleProps {
   id?: string;
   label: string;
   icon: PluginIconType;

src/extensible-areas/presentation-toolbar-item/component.ts

@@ -2,6 +2,7 @@ import { PresentationToolbarItemType } from './enums';
 import {
   PresentationToolbarInterface, PresentationToolbarButtonProps,
 } from './types';
+import { PluginButtonSize } from '../common/button';
 
 // PresentationToolbar Extensible Area
 
@@ -14,6 +15,14 @@ export class PresentationToolbarButton implements PresentationToolbarInterface {
 
   tooltip: string;
 
+  color: string;
+
+  circle: boolean;
+
+  hideLabel: boolean;
+
+  size: PluginButtonSize;
+
   style: React.CSSProperties;
 
   dataTest: string;
@@ -27,20 +36,29 @@ export class PresentationToolbarButton implements PresentationToolbarInterface {
    * @param label - label to be displayed in the button
    * @param tooltip - tooltip to be displayed when hovering the button
    * @param onClick - function to be called when clicking the button
+   * @param color - button color variant, defaults to 'default'
+   * @param circle - if true, the presentation toolbar button will be displayed as a circle
+   * @param hideLabel - if true, the presentation toolbar button label will be visually hidden
+   * @param size - button size variant, defaults to 'md'
    * @param style - style of the button in the presentation toolbar
    * @param dataTest - data-test attribute for testing purposes
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    id, label = '', tooltip = '', dataTest = '', onClick = () => {}, style = {},
+    id, label = '', tooltip = '', dataTest = '', onClick = () => {},
+    color = 'default', circle = false, hideLabel = false, size = 'md', style = {},
   }: PresentationToolbarButtonProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
     this.tooltip = tooltip;
     this.onClick = onClick;
+    this.color = color;
+    this.circle = circle;
+    this.hideLabel = hideLabel;
+    this.size = size;
     this.style = style;
     this.dataTest = dataTest;
     this.type = PresentationToolbarItemType.BUTTON;

src/extensible-areas/presentation-toolbar-item/types.ts

@@ -1,15 +1,15 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginButtonStyleProps } from '../common/button';
 
 /**
  * Interface for a generic item for presentation toolbar.
  */
 export interface PresentationToolbarInterface extends PluginProvidedUiItemDescriptor {}
 
-export interface PresentationToolbarButtonProps {
+export interface PresentationToolbarButtonProps extends PluginButtonStyleProps {
   id?: string;
   label: string;
   tooltip: string;
-  style: React.CSSProperties;
   dataTest?: string;
   onClick: () => void;
 }