fix(toggle-button-group): reduce content mutataion in toggle button group

components/toggle-button-group/readme.md

@@ -6,10 +6,10 @@
 
 ```
 <vwc-toggle-button-group>
- <vwc-button value="11" layout="text">BUTTON</vwc-button>
- <vwc-button value="12" layout="text">BUTTON</vwc-button>
+ <vwc-button value="11">BUTTON</vwc-button>
+ <vwc-button value="12">BUTTON</vwc-button>
  <vwc-icon-button icon="home" value="22">BUTTON</vwc-button>
- <vwc-button value="13" layout="text">BUTTON</vwc-button>
+ <vwc-button value="13">BUTTON</vwc-button>
 </vwc-toggle-buttons-group>
 ```
 
@@ -64,5 +64,5 @@
 * One can add more buttons dynamically
  * If you remove an item and not destroy it, remember that there’s a listener on this item
 * Selected items have the `selected`
-* In order to enforce styles, the following attributes are automatically removed:
- * `layout=”outlined”`
+* In order to enforce styles, the following attributes are automatically altered:
+ * `layout` - will be set `layout="filled"` on load (note that changing this after initial load will change the way it looks)

components/toggle-button-group/src/vwc-toggle-button-group.scss

@@ -28,42 +28,40 @@ $sizes: (
  display: flex;
 }
 
-::slotted([group-button]) {
+// TODO::remove these when viv-485 is complete
+
+::slotted(#{vwc-button}) {
+ --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30});
  --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-base});
  --mdc-ripple-color: var(#{scheme-variables.$vvd-color-on-base});
  --mdc-ripple-focus-opacity: 0;
 }
 
-// TODO::remove these when viv-485 is complete
 :host([accent]) {
- ::slotted([group-button][selected]) {
+ ::slotted(#{vwc-button}[selected]) {
  --mdc-theme-primary: var(#{scheme-variables.$vvd-color-primary});
  --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-primary});
  }
 
- ::slotted([group-button]:hover:not([selected])) {
+ ::slotted(#{vwc-button}:hover:not([selected])) {
  --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-50});
  }
 }
 
-::slotted(vwc-button) {
- --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30});
-}
-
-::slotted([group-button][selected]) {
+::slotted(#{vwc-button}[selected]) {
  --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-50});
 }
 
-::slotted([group-button]:hover:not([selected])) {
+::slotted(#{vwc-button}:hover:not([selected])) {
  --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-40});
 }
 
-:host([disabled]) ::slotted([group-button]) {
+:host([disabled]) ::slotted(#{vwc-button}),
+:host([disabled]) ::slotted(#{vwc-button}[selected]) {
  --mdc-theme-primary: var(#{scheme-variables.$vvd-color-neutral-30});
  --mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-neutral-50});
  pointer-events: none;
 }
-
 // End of viv-485 removal
 
 @each $scope in $scopes {
@@ -132,15 +130,16 @@ $sizes: (
  ::slotted(vwc-#{$scope}:last-child:not(:first-child)) {
  padding-right: var(--vwc-#{$scope}-vertical-padding, 0);
  border-radius: 0 var(#{$vvd-toggle-button-group-shape}) var(#{$vvd-toggle-button-group-shape}) 0;
- 
+
  :host(:not([accent])) & {
  --vvd-#{$scope}-shape: 0 var(#{$vvd-toggle-button-group-shape}) var(#{$vvd-toggle-button-group-shape}) 0;
  }
  }
 
- :host([disabled]) ::slotted([group-button]) {
+ :host([disabled]) ::slotted(vwc-#{$scope}), :host([disabled][accent]) ::slotted(vwc-#{$scope}[selected]) {
  --vvd-#{$scope}-background-color: var(#{scheme-variables.$vvd-color-neutral-30});
  --vvd-#{$scope}-color: var(#{scheme-variables.$vvd-color-neutral-50});
  pointer-events: none;
  }
+
 }

components/toggle-button-group/src/vwc-toggle-button-group.ts

@@ -13,7 +13,6 @@ export const VALID_BUTTON_ELEMENTS = ['vwc-button', 'vwc-icon-button'];
 const SELECTED_EVENT_NAME = 'selected';
 const SELECTED_ATTRIBUTE_NAME = 'selected';
 const MULTIPLE_ATTRIBUTE_NAME = 'multi';
-const GROUP_BUTTON_ATTRIBUTE = 'group-button';
 
 function isValidButton(buttonElement: Element) {
  return VALID_BUTTON_ELEMENTS.includes(buttonElement.tagName.toLowerCase());
@@ -171,7 +170,6 @@ export class VwcToggleButtonGroup extends LitElement {
 
  private setNodeAttributes(buttonElement: Element) {
  buttonElement.setAttribute('layout', 'filled');
- buttonElement.setAttribute(GROUP_BUTTON_ATTRIBUTE, '');
  }
 
  private setVwcButtonSize(buttonElement: Element) {

components/toggle-button-group/stories/toggle-buttons-group.stories.js

@@ -44,6 +44,16 @@ const AccentTemplate = args => html`<vwc-toggle-button-group accent ...=${spread
 export const Accent = AccentTemplate.bind({});
 Accent.args = { };
 
+const DisabledTemplate = args => html`<vwc-toggle-button-group accent disabled ...=${spread(args)}>
+ <vwc-button selected label="Standard"></vwc-button>
+ <vwc-button label="Hybrid"></vwc-button>
+ <vwc-button label="Satellite"></vwc-button>
+ <vwc-icon-button selected icon="home"></vwc-icon-button>
+</vwc-toggle-button-group>`;
+
+export const Disabled = DisabledTemplate.bind({});
+Accent.args = { };
+
 const MultiTemplate = args => html`<vwc-toggle-button-group multi>
  <vwc-button label="Standard"></vwc-button>
  <vwc-button label="Hybrid"></vwc-button>

components/toggle-button-group/test/toggle-buttons-group.test.js

@@ -12,7 +12,6 @@ chai.use(chaiDomDiff);
 
 const COMPONENT_NAME = 'vwc-toggle-button-group';
 const SELECTED_EVENT_NAME = 'selected';
-const GROUP_BUTTON_ATTRIBUTE = 'group-button';
 
 describe('Toggle-buttons-group', () => {
  const buttonValues = [
@@ -42,23 +41,6 @@ describe('Toggle-buttons-group', () => {
  .equalSnapshot();
  });
 
- it(`should add group-button attr to group buttons`, function () {
- const [actualElement] = addElement(
- textToDomToParent(`<${COMPONENT_NAME}>
-<${VALID_BUTTON_ELEMENTS[0]}>BUTTON</${VALID_BUTTON_ELEMENTS[0]}>
-<${VALID_BUTTON_ELEMENTS[0]}>BUTTON</${VALID_BUTTON_ELEMENTS[0]}>
-<${VALID_BUTTON_ELEMENTS[0]}>BUTTON</${VALID_BUTTON_ELEMENTS[0]}>
-</${COMPONENT_NAME}>`)
- );
-
- const buttons = actualElement.children;
- buttons.forEach((button, index) => {
- expect(button.hasAttribute(GROUP_BUTTON_ATTRIBUTE))
- .to
- .equal(true);
- });
- });
-
  it(`should set click listeners on the buttons`, function () {
  const [actualElement] = addElement(
  textToDomToParent(`<${COMPONENT_NAME}>