fix: replace attribute access with property where possible (#2258)

sbb-design-systems · Dec 5, 2023 · 8babd50 · 8babd50
1 parent 5260579
commit 8babd50
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 26 deletions.
diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
@@ -226,9 +226,7 @@ export class SbbAutocomplete extends LitElement {
   }
 
   private _syncNegative(): void {
-    this.querySelectorAll?.('sbb-divider').forEach((element) =>
-      setAttribute(element, 'negative', this.negative),
-    );
+    this.querySelectorAll?.('sbb-divider').forEach((divider) => (divider.negative = this.negative));
 
     this.querySelectorAll?.('sbb-option, sbb-optgroup').forEach((element: HTMLElement) =>
       toggleDatasetEntry(element, 'negative', this.negative),
@@ -472,7 +470,7 @@ export class SbbAutocomplete extends LitElement {
 
   private _setNextActiveOption(event: KeyboardEvent): void {
     const filteredOptions = this._options.filter(
-      (opt) => !isValidAttribute(opt, 'disabled') && !isValidAttribute(opt, 'data-group-disabled'),
+      (opt) => !opt.disabled && !isValidAttribute(opt, 'data-group-disabled'),
     );
 
     // Get and activate the next active option

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.ts b/src/components/checkbox/checkbox-group/checkbox-group.ts
@@ -2,7 +2,7 @@ import { CSSResultGroup, html, LitElement, nothing, TemplateResult, PropertyValu
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { isArrowKeyPressed, getNextElementIndex, interactivityChecker } from '../../core/a11y';
-import { toggleDatasetEntry, isValidAttribute } from '../../core/dom';
+import { toggleDatasetEntry } from '../../core/dom';
 import {
   createNamedSlotState,
   HandlerRepository,
@@ -25,10 +25,10 @@ export class SbbCheckboxGroup extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /** Whether the checkbox group is disabled. */
-  @property({ type: Boolean }) public disabled = false;
+  @property({ reflect: true, type: Boolean }) public disabled = false;
 
   /** Whether the checkbox group is required. */
-  @property({ type: Boolean }) public required = false;
+  @property({ reflect: true, type: Boolean }) public required = false;
 
   /** Size variant, either m or s. */
   @property() public size: SbbCheckboxSize = 'm';
@@ -103,8 +103,7 @@ export class SbbCheckboxGroup extends LitElement {
 
   private _handleKeyDown(evt: KeyboardEvent): void {
     const enabledCheckboxes: SbbCheckbox[] = this._checkboxes.filter(
-      (checkbox: SbbCheckbox) =>
-        !isValidAttribute(checkbox, 'disabled') && interactivityChecker.isVisible(checkbox),
+      (checkbox: SbbCheckbox) => !checkbox.disabled && interactivityChecker.isVisible(checkbox),
     );
 
     if (

diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts
@@ -65,7 +65,7 @@ export class SbbCheckbox extends LitElement {
   @property({ reflect: true, type: Boolean }) public disabled = false;
 
   /** Whether the checkbox is required. */
-  @property({ type: Boolean }) public required = false;
+  @property({ reflect: true, type: Boolean }) public required = false;
 
   /** Whether the checkbox is indeterminate. */
   @property({ reflect: true, type: Boolean }) public indeterminate = false;
@@ -165,8 +165,8 @@ export class SbbCheckbox extends LitElement {
   private _setupInitialStateAndAttributeObserver(): void {
     const parentGroup = this.closest?.('sbb-checkbox-group');
     if (parentGroup) {
-      this._requiredFromGroup = isValidAttribute(parentGroup, 'required');
-      this._disabledFromGroup = isValidAttribute(parentGroup, 'disabled');
+      this._requiredFromGroup = parentGroup.required;
+      this._disabledFromGroup = parentGroup.disabled;
       this.size = parentGroup.size;
     }
     this._checkboxAttributeObserver.observe(this, checkboxObserverConfig);

diff --git a/src/components/option/optgroup/optgroup.ts b/src/components/option/optgroup/optgroup.ts
@@ -21,7 +21,7 @@ export class SbbOptGroup extends LitElement {
   @property() public label: string;
 
   /** Whether the group is disabled. */
-  @property({ type: Boolean }) public disabled = false;
+  @property({ reflect: true, type: Boolean }) public disabled = false;
 
   @state() private _negative = false;
 

diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts
@@ -65,7 +65,7 @@ export class SbbOption extends LitElement {
   @property({ reflect: true, type: Boolean }) public selected = false;
 
   /** Whether the option is disabled. */
-  @property({ type: Boolean }) public disabled?: boolean;
+  @property({ reflect: true, type: Boolean }) public disabled?: boolean;
 
   /** Emits when the option selection status changes. */
   private _selectionChange: EventEmitter = new EventEmitter(this, SbbOption.events.selectionChange);
@@ -171,7 +171,7 @@ export class SbbOption extends LitElement {
     this._handlerRepository.connect();
     const parentGroup = this.closest?.('sbb-optgroup');
     if (parentGroup) {
-      this._disabledFromGroup = isValidAttribute(parentGroup, 'disabled');
+      this._disabledFromGroup = parentGroup.disabled;
     }
     this._optionAttributeObserver.observe(this, optionObserverConfig);
 

diff --git a/src/components/radio-button/radio-button/radio-button.ts b/src/components/radio-button/radio-button/radio-button.ts
@@ -69,7 +69,7 @@ export class SbbRadioButton extends LitElement {
   /**
    * Whether the radio button is required.
    */
-  @property({ type: Boolean }) public required = false;
+  @property({ reflect: true, type: Boolean }) public required = false;
 
   /**
    * Whether the radio button is checked.
@@ -215,8 +215,8 @@ export class SbbRadioButton extends LitElement {
   private _setupInitialStateAndAttributeObserver(): void {
     const parentGroup = this.closest('sbb-radio-button-group') as SbbRadioButtonGroup;
     if (parentGroup) {
-      this._requiredFromGroup = isValidAttribute(parentGroup, 'required');
-      this._disabledFromGroup = isValidAttribute(parentGroup, 'disabled');
+      this._requiredFromGroup = parentGroup.required;
+      this._disabledFromGroup = parentGroup.disabled;
       this.size = parentGroup.size;
     }
     this._radioButtonAttributeObserver.observe(this, radioButtonObserverConfig);

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -65,10 +65,10 @@ export class SbbSelect extends UpdateScheduler(LitElement) {
   @property({ type: Boolean }) public multiple = false;
 
   /** Whether the select is required. */
-  @property({ type: Boolean }) public required = false;
+  @property({ reflect: true, type: Boolean }) public required = false;
 
   /** Whether the select is disabled. */
-  @property({ type: Boolean }) public disabled = false;
+  @property({ reflect: true, type: Boolean }) public disabled = false;
 
   /** Whether the select is readonly. */
   @property({ type: Boolean }) public readonly = false;
@@ -152,8 +152,7 @@ export class SbbSelect extends UpdateScheduler(LitElement) {
 
   private get _filteredOptions(): SbbOption[] {
     return this._options.filter(
-      (opt: SbbOption) =>
-        !isValidAttribute(opt, 'disabled') && !isValidAttribute(opt, 'data-group-disabled'),
+      (opt: SbbOption) => !opt.disabled && !isValidAttribute(opt, 'data-group-disabled'),
     );
   }
 

diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
@@ -49,7 +49,7 @@ export class SbbSlider extends LitElement {
   @property({ type: Boolean }) public readonly?: boolean = false;
 
   /** Disabled state for the inner HTMLInputElement. */
-  @property({ type: Boolean }) public disabled?: boolean = false;
+  @property({ reflect: true, type: Boolean }) public disabled?: boolean = false;
 
   /** Name of the icon at component's start, which will be forward to the nested `sbb-icon`. */
   @property({ attribute: 'start-icon' }) public startIcon?: string;

diff --git a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts
@@ -24,7 +24,7 @@ export class SbbTimetableOccupancyIcon extends SbbIconBase {
   @property() public occupancy!: SbbOccupancy;
 
   /** Negative coloring variant flag. */
-  @property({ type: Boolean }) public negative: boolean = false;
+  @property({ reflect: true, type: Boolean }) public negative: boolean = false;
 
   @state() private _currentLanguage = documentLanguage();
 

diff --git a/src/components/timetable-occupancy/timetable-occupancy.ts b/src/components/timetable-occupancy/timetable-occupancy.ts
@@ -22,7 +22,7 @@ export class SbbTimetableOccupancy extends LitElement {
   @property({ attribute: 'second-class-occupancy' }) public secondClassOccupancy: SbbOccupancy;
 
   /** Negative coloring variant flag. */
-  @property({ type: Boolean }) public negative = false;
+  @property({ reflect: true, type: Boolean }) public negative = false;
 
   @state() private _currentLanguage = documentLanguage();
 

diff --git a/src/components/toggle-check/toggle-check.ts b/src/components/toggle-check/toggle-check.ts
@@ -47,7 +47,7 @@ export class SbbToggleCheck extends LitElement {
   @property({ reflect: true, type: Boolean }) public disabled = false;
 
   /** The required prop for the required state. */
-  @property({ type: Boolean }) public required = false;
+  @property({ reflect: true, type: Boolean }) public required = false;
 
   /** The label position relative to the toggle. Defaults to 'after' */
   @property({ attribute: 'label-position', reflect: true })