feat: add data-qa

Author: Ricardo-Tele

packages/components/src/components/checkbox/checkbox.tsx

@@ -68,6 +68,9 @@ export class Checkbox {
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailsId?: string;
 
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   /** Emitted when the value has changed. */
   @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -196,6 +199,7 @@ export class Checkbox {
           disabled={this.disabled}
           required={this.required}
           onChange={this.handleChange}
+          {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
         />
         <label part="container" htmlFor={this.inputId}>
           <span part="checkbox">{this.renderIcon()}</span>

packages/components/src/components/input/input.tsx

@@ -106,6 +106,9 @@ export class Input {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   /** Emitted when a keyboard input occurred. */
   @Event({ eventName: 'scale-input' }) scaleInput!: EventEmitter<KeyboardEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -325,6 +328,7 @@ export class Input {
               disabled={this.disabled}
               {...ariaInvalidAttr}
               {...ariaDescribedByAttr}
+              {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
             />
             <div
               class={classNames('input__checkbox-container')}
@@ -366,6 +370,7 @@ export class Input {
               disabled={this.disabled}
               {...ariaInvalidAttr}
               {...ariaDescribedByAttr}
+              {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
             />
             <label htmlFor={this.inputId}>{this.label}</label>
             {!!this.helperText && (
@@ -409,6 +414,7 @@ export class Input {
                 size={this.visibleSize}
                 {...ariaInvalidAttr}
                 {...ariaDescribedByAttr}
+                {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
               >
                 <slot />
               </select>
@@ -439,6 +445,7 @@ export class Input {
               {...(!!this.cols ? { cols: this.cols } : {})}
               {...ariaInvalidAttr}
               {...ariaDescribedByAttr}
+              {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
             />
           )}
 

packages/components/src/components/radio-button/radio-button.tsx

@@ -56,6 +56,9 @@ export class RadioButton {
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailsId?: string;
 
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   @Event({ eventName: 'scale-change' })
   scaleChange!: EventEmitter<InputChangeEventDetail>;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -94,7 +97,6 @@ export class RadioButton {
       });
     }
   };
-
   // We manually set `checked` to false on sibling <scale-radio-button> elements,
   // otherwise they stayed `checked` after being clicked once, forever.
   uncheckSiblings() {
@@ -145,6 +147,7 @@ export class RadioButton {
               ? ariaDescribedByAttr
               : {})}
             aria-details={this.ariaDetailsId}
+            {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
           />
           <label htmlFor={this.inputId}>{this.label}</label>
           {!!this.helperText && (

packages/components/src/components/slider/slider.tsx

@@ -89,6 +89,9 @@ export class Slider {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   // The actual position in % of the slider thumb
   @State() position: number = 0;
   @State() positionFrom: number = 25;
@@ -264,7 +267,6 @@ export class Slider {
     this[positionKey] =
       ((clampedValue - this.min) * 100) / (this.max - this.min);
   };
-
   /**
    * Utility function
    * e.g. 'value' -> 'valueFrom' if `activeRangeThumb='From'`
@@ -405,6 +407,9 @@ export class Slider {
                         aria-orientation="horizontal"
                         aria-disabled={this.disabled}
                         {...(this.helperText ? ariaDescribedByAttr : {})}
+                        {...(this.dataQa
+                          ? { 'data-qa': `${this.dataQa}-from` }
+                          : {})}
                         onKeyDown={this.onKeyDown}
                       />
                     </div>
@@ -427,6 +432,9 @@ export class Slider {
                         aria-orientation="horizontal"
                         aria-disabled={this.disabled}
                         {...(this.helperText ? ariaDescribedByAttr : {})}
+                        {...(this.dataQa
+                          ? { 'data-qa': `${this.dataQa}-to` }
+                          : {})}
                         onKeyDown={this.onKeyDown}
                       />
                     </div>
@@ -451,6 +459,7 @@ export class Slider {
                       aria-orientation="horizontal"
                       aria-disabled={this.disabled}
                       {...(this.helperText ? ariaDescribedByAttr : {})}
+                      {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
                       onKeyDown={this.onKeyDown}
                     />
                   </div>

packages/components/src/components/switch/switch.tsx

@@ -40,6 +40,9 @@ export class Switch {
 
   @Prop() size?: 'small' | 'large' = 'large';
 
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   /** Emitted when the switch was clicked */
   @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -65,6 +68,7 @@ export class Switch {
               disabled={this.disabled}
               aria-labelledby={`${this.inputId}-label`}
               id={this.inputId}
+              {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
               onChange={(event: any) => {
                 this.checked = event.target.checked;
                 emitEvent(this, 'scaleChange', { value: this.checked });

packages/components/src/components/text-field/text-field.tsx

@@ -113,6 +113,10 @@ export class TextField {
   @Prop() styles?: string;
   /** (optional)) Makes type `input` behave as a controlled component in React */
   @Prop() experimentalControlled?: boolean = false;
+
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   /** Emitted when a keyboard input occurred. */
   @Event({ eventName: 'scale-input' }) scaleInput!: EventEmitter<KeyboardEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -180,12 +184,10 @@ export class TextField {
       });
     }
   }
-
   // We're not watching `value` like we used to
   // because we get unwanted `scaleChange` events
   // because how we keep this.value up-to-date for type="select"
   // `this.value = selectedValue`
-
   emitChange() {
     emitEvent(this, 'scaleChange', {
       value: this.value == null ? this.value : this.value.toString(),
@@ -289,6 +291,7 @@ export class TextField {
               : {})}
             {...(this.helperText && this.ariaDetailedId ? ariaDetailsAttr : {})}
             {...(numericTypes.includes(this.type) ? { step: this.step } : {})}
+            {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
           />
           {(!!this.helperText || !!this.counter) && (
             <div

packages/components/src/components/textarea/textarea.tsx

@@ -34,6 +34,7 @@ interface InputChangeEventDetail {
 })
 export class Textarea {
   @Element() hostElement: HTMLElement;
+
   /** (optional) Input name */
   @Prop() name?: string = '';
   /** (optional) Input label */
@@ -80,6 +81,9 @@ export class Textarea {
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailsId?: string;
 
+  /** (optional) data-qa attribute for e2e testing */
+  @Prop() dataQa?: string;
+
   /** Emitted when a keyboard input occurred. */
   @Event({ eventName: 'scale-input' }) scaleInput!: EventEmitter<KeyboardEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -94,11 +98,13 @@ export class Textarea {
   /** Emitted when the input has focus. */
   @Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter<void>;
   /** @deprecated in v3 in favor of kebab-case event names */
-  @Event({ eventName: 'scaleFocus' }) scaleFocusLegacy!: EventEmitter<void>;
+  @Event({ eventName: 'scaleFocus' })
+  scaleFocusLegacy!: EventEmitter<void>;
   /** Emitted when the input loses focus. */
   @Event({ eventName: 'scale-blur' }) scaleBlur!: EventEmitter<void>;
   /** @deprecated in v3 in favor of kebab-case event names */
-  @Event({ eventName: 'scaleBlur' }) scaleBlurLegacy!: EventEmitter<void>;
+  @Event({ eventName: 'scaleBlur' })
+  scaleBlurLegacy!: EventEmitter<void>;
   /** Emitted on keydown. */
   @Event({ eventName: 'scale-keydown' })
   scaleKeyDown!: EventEmitter<KeyboardEvent>;
@@ -129,7 +135,6 @@ export class Textarea {
       });
     }
   }
-
   // We're not watching `value` like we used to
   // because we get unwanted `scaleChange` events
   // because how we keep this.value up-to-date for type="select"
@@ -219,6 +224,7 @@ export class Textarea {
                 ? ariaDescribedByAttr
                 : {})}
               aria-details={this.ariaDetailsId}
+              {...(this.dataQa ? { 'data-qa': this.dataQa } : {})}
               ref={(el) => (this.focusableElement = el)}
             />
           </div>