chore: Fixes the disable on the button-group webcomponent and uses Pr…

…opertyValue on aria-labeling
dynatrace-oss · Sep 23, 2020 · 044843d · 044843d
1 parent 050c539
commit 044843d
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 26 deletions.
diff --git a/apps/fluid-dev/src/pages/button-group/button-group-page.component.html b/apps/fluid-dev/src/pages/button-group/button-group-page.component.html
@@ -1,11 +1,11 @@
 <fluid-button-group
   (checkedChange)="handleChange($event)"
-  [disabled]="disableall"
+  [disableAll]="disableall"
 >
-  <fluid-button-group-item name="btngrp">
+  <fluid-button-group-item name="btngrp" [disabled]="disable">
     Options 1
   </fluid-button-group-item>
-  <fluid-button-group-item name="btngrp" [disabled]="disable">
+  <fluid-button-group-item name="btngrp">
     Buildingsteps 2
   </fluid-button-group-item>
   <fluid-button-group-item *ngIf="show" name="btngrp">

diff --git a/libs/fluid-elements/button-group/README.md b/libs/fluid-elements/button-group/README.md
@@ -40,10 +40,10 @@ A basic representation of the button-group wrapper for button-group-items
 
 ## Properties
 
-| Property    | Attribute   | Type             | Description                                                 |
-| ----------- | ----------- | ---------------- | ----------------------------------------------------------- |
-| `checkedId` | `checkedId` | `string || null` | Currently checked button group item.                        |
-| `disabled`  | `disabled`  | `boolean`        | Whether the component and the children are disabled or not. |
+| Property     | Attribute   | Type             | Description                                                 |
+| ------------ | ----------- | ---------------- | ----------------------------------------------------------- |
+| `checkedId`  | `checkedId` | `string || null` | Currently checked button group item.                        |
+| `disableAll` | `disabled`  | `boolean`        | Whether the component and the children are disabled or not. |
 
 ## Slots
 

diff --git a/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.ts b/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.ts
@@ -83,12 +83,10 @@ export class FluidButtonGroupItem extends LitElement {
       }
 
       :host([disabled]) .fluid-label {
-        // TODO: Should be replaced by an opacity token at some point.
         opacity: 0.5;
       }
 
       :host([disabled]) .fluid-button-group-item-svg {
-        // TODO: Should be replaced by an opacity token at some point.
         opacity: 0.5;
       }
 

diff --git a/libs/fluid-elements/button-group/src/lib/button-group/button-group.spec.ts b/libs/fluid-elements/button-group/src/lib/button-group/button-group.spec.ts
@@ -116,9 +116,9 @@ describe('Fluid button-group', () => {
     });
   });
 
-  describe('disabled attribute', () => {
+  describe('disableAll attribute', () => {
     it('should disable every item if attribute is set', async () => {
-      fixture.setAttribute('disabled', '');
+      fixture.setAttribute('disableAll', '');
       await tick();
       expect(
         fixture.querySelector<FluidButtonGroupItem>(
@@ -137,7 +137,7 @@ describe('Fluid button-group', () => {
       ).toBe(true);
     });
     it('should disable every item if property is set to true', async () => {
-      fixture.disabled = true;
+      fixture.disableAll = true;
       await tick();
       expect(
         fixture.querySelector<FluidButtonGroupItem>(
@@ -156,7 +156,7 @@ describe('Fluid button-group', () => {
       ).toBe(true);
     });
     it('should enable every item if property is reset', async () => {
-      fixture.disabled = true;
+      fixture.disableAll = true;
       await tick();
       expect(
         fixture.querySelector<FluidButtonGroupItem>(
@@ -173,7 +173,7 @@ describe('Fluid button-group', () => {
           'fluid-button-group-item:nth-child(3)',
         )?.disabled,
       ).toBe(true);
-      fixture.disabled = false;
+      fixture.disableAll = false;
       await tick();
       expect(
         fixture.querySelector<FluidButtonGroupItem>(

diff --git a/libs/fluid-elements/button-group/src/lib/button-group/button-group.ts b/libs/fluid-elements/button-group/src/lib/button-group/button-group.ts
@@ -89,16 +89,16 @@ export class FluidButtonGroup extends LitElement {
    * @type boolean
    */
   @property({ type: Boolean, reflect: true })
-  get disabled(): boolean {
-    return this._disabled;
+  get disableAll(): boolean {
+    return this._disableAll;
   }
-  set disabled(value: boolean) {
+  set disableAll(value: boolean) {
     const oldValue = value;
-    this._disabled = value;
-    this.requestUpdate('disabled', oldValue);
+    this._disableAll = value;
+    this.requestUpdate('disableAll', oldValue);
     this._setDisabledOnEveryItem();
   }
-  private _disabled = false;
+  private _disableAll = false;
 
   /**
    * Role of the radio-group.
@@ -212,7 +212,7 @@ export class FluidButtonGroup extends LitElement {
   /** Disables every item in the group */
   private _setDisabledOnEveryItem(): void {
     for (const item of this._buttonGroupItems) {
-      item.disabled = this._disabled;
+      item.disabled = this._disableAll;
     }
   }
 }
diff --git a/libs/fluid-elements/checkbox/src/lib/checkbox.ts b/libs/fluid-elements/checkbox/src/lib/checkbox.ts
@@ -23,6 +23,7 @@ import {
   css,
   unsafeCSS,
   customElement,
+  PropertyValues,
 } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { SPACE } from '@dynatrace/shared/keycodes';
@@ -258,13 +259,13 @@ export class FluidCheckbox extends LitElement {
   ariaChecked: string = 'false';
 
   /** First updated lifecycle */
-  firstUpdated(props: Map<string | number | symbol, unknown>): void {
+  firstUpdated(props: PropertyValues): void {
     super.firstUpdated(props);
     this._inputElement = this.shadowRoot?.querySelector('input')!;
   }
 
   /** Update lifecycle */
-  update(props: Map<string | number | symbol, unknown>): void {
+  update(props: PropertyValues): void {
     // Aria-checked depends on the value of checked, but is never actually
     // set by the litElement reactivity. In the updated lifeCycle
     // we need to manually update the ariaChecked attribute here.

diff --git a/libs/fluid-elements/switch/src/lib/switch.ts b/libs/fluid-elements/switch/src/lib/switch.ts
@@ -22,6 +22,7 @@ import {
   CSSResult,
   css,
   unsafeCSS,
+  PropertyValues,
 } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { FluidSwitchChangeEvent } from './switch-events';
@@ -217,13 +218,13 @@ export class FluidSwitch extends LitElement {
   ariaChecked: string = 'false';
 
   /** First updated lifecycle */
-  firstUpdated(props: Map<string | number | symbol, unknown>): void {
+  firstUpdated(props: PropertyValues): void {
     super.firstUpdated(props);
     this._inputElement = this.shadowRoot?.querySelector('input')!;
   }
 
   /** Update lifecycle */
-  update(props: Map<string | number | symbol, unknown>): void {
+  update(props: PropertyValues): void {
     // Aria-checked depends on the value of checked, but is never actually
     // set by the litElement reactivity. In the updated lifeCycle
     // we need to manually update the ariaChecked attribute here.

diff --git a/libs/fluid-elements/tab-group/src/lib/tab/tab.ts b/libs/fluid-elements/tab-group/src/lib/tab/tab.ts
@@ -23,6 +23,7 @@ import {
   css,
   unsafeCSS,
   customElement,
+  PropertyValues,
 } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import {
@@ -242,7 +243,7 @@ export class FluidTab extends LitElement {
   private _rootElement: HTMLSpanElement;
 
   /** First updated lifecycle */
-  firstUpdated(props: Map<string | number | symbol, unknown>): void {
+  firstUpdated(props: PropertyValues): void {
     super.firstUpdated(props);
     this._rootElement = this.shadowRoot?.querySelector(
       '.fluid-tab',