lx-button : buttonClass is shared accross every buttons, can't reliably change colors

[alexandre-nicolas]

Hello,

The variable "buttonClass" in https://github.com/lumapps/lumX/blob/master/modules/button/js/button_directive.js is shared accross all the buttons.

When I try to change the color of any button, the setButtonStyle() function remove the previous classes contained in "buttonClass" and then write the current classes into this variable. If I try to change the color of another button, it will remove the classes of the first button and then add the new, meaning the button can have 2 color classes.

Steps to reproduce :

• With the below code, toggle the two buttons to accent then toggle them back to primary. The last one will be accent-colored instead of primary. It has both 'btn-accent' and 'btn-primary' classes.

html :

<div>
  <lx-button lx-size="s" lx-color="{{ctrl.color1}}" ng-click="ctrl.toggleColor('color1')">
    {{ctrl.color1}}
  </lx-button>

  <lx-button lx-size="s" lx-color="{{ctrl.color2}}" ng-click="ctrl.toggleColor('color2')">
    {{ctrl.color2}}
  </lx-button>
</div>

js:

// [...] Component declaration 
  let ctrl = this;
  ctrl.color1 = 'primary';
  ctrl.color2 = 'primary';
  ctrl.toggleColor = (name) => {
    ctrl[name] = ctrl[name] === 'accent' ? 'primary' : 'accent';
  };

Regard,