fix: hide native controls, handle RTL styles (#2453)

packages/number-field/src/vaadin-number-field.d.ts

@@ -6,6 +6,7 @@
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js';
+import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -65,7 +66,9 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class NumberField extends InputFieldMixin(InputSlotMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+declare class NumberField extends InputFieldMixin(
+  SlotStylesMixin(InputSlotMixin(ThemableMixin(ElementMixin(HTMLElement))))
+) {
   /**
    * Set to true to display value increase/decrease controls.
    * @attr {boolean} has-controls

packages/number-field/src/vaadin-number-field.js

@@ -8,6 +8,7 @@ import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js';
+import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
 
@@ -56,7 +57,9 @@ import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-export class NumberField extends InputFieldMixin(InputSlotMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+export class NumberField extends InputFieldMixin(
+  SlotStylesMixin(InputSlotMixin(ThemableMixin(ElementMixin(PolymerElement))))
+) {
   static get is() {
     return 'vaadin-number-field';
   }
@@ -86,15 +89,6 @@ export class NumberField extends InputFieldMixin(InputSlotMixin(ThemableMixin(El
         :host([dir='rtl']) [part='input-field'] {
           direction: ltr;
         }
-
-        /* TODO: provide alternatives for Safari */
-        :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-          direction: rtl;
-        }
-
-        :host([dir='rtl']:not([has-controls])) [part='input-field'] ::slotted(input)::placeholder {
-          text-align: left;
-        }
       </style>
 
       <div part="container">
@@ -192,6 +186,32 @@ export class NumberField extends InputFieldMixin(InputSlotMixin(ThemableMixin(El
     this._setType('number');
   }
 
+  /** @protected */
+  get slotStyles() {
+    const tag = this.localName;
+    return [
+      `
+        ${tag} input[type="number"]::-webkit-outer-spin-button,
+        ${tag} input[type="number"]::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        ${tag} input[type="number"] {
+          -moz-appearance: textfield;
+        }
+
+        ${tag}[dir='rtl'] input[type="number"]::placeholder {
+          direction: rtl;
+        }
+
+        ${tag}[dir='rtl']:not([has-controls]) input[type="number"]::placeholder {
+          text-align: left;
+        }
+      `
+    ];
+  }
+
   /**
    * Used by `ClearButtonMixin` as a reference to the clear button element.
    * @protected

packages/number-field/test/visual/common.js

@@ -0,0 +1,11 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+/* hide caret */
+registerStyles(
+  'vaadin-number-field',
+  css`
+    :host([focus-ring]) ::slotted(input) {
+      font-size: 0 !important;
+    }
+  `
+);

packages/number-field/test/visual/lumo/number-field.test.js

@@ -1,5 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/lumo/vaadin-number-field.js';
 
 describe('number-field', () => {
@@ -26,64 +28,81 @@ describe('number-field', () => {
     await visualDiff(div, `${import.meta.url}_readonly`);
   });
 
-  it('label', async () => {
-    element.label = 'Label';
-    await visualDiff(div, `${import.meta.url}_label`);
+  it('focus-ring', async () => {
+    await sendKeys({ press: 'Tab' });
+    await visualDiff(div, `${import.meta.url}_focus-ring`);
   });
 
-  it('placeholder', async () => {
-    element.placeholder = 'Number';
-    await visualDiff(div, `${import.meta.url}_placeholder`);
-  });
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
 
-  it('value', async () => {
-    element.value = 10;
-    await visualDiff(div, `${import.meta.url}_value`);
-  });
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
 
-  it('required', async () => {
-    element.label = 'Label';
-    element.required = true;
-    await visualDiff(div, `${import.meta.url}_required`);
-  });
+      it('label', async () => {
+        element.label = 'Label';
+        await visualDiff(div, `${import.meta.url}_${dir}-label`);
+      });
 
-  it('error message', async () => {
-    element.label = 'Label';
-    element.errorMessage = 'This field is required';
-    element.required = true;
-    element.validate();
-    await visualDiff(div, `${import.meta.url}_error-message`);
-  });
+      it('placeholder', async () => {
+        element.placeholder = 'Number';
+        await visualDiff(div, `${import.meta.url}_${dir}-placeholder`);
+      });
 
-  it('helper text', async () => {
-    element.helperText = 'Helper text';
-    await visualDiff(div, `${import.meta.url}_helper-text`);
-  });
+      it('value', async () => {
+        element.value = 10;
+        await visualDiff(div, `${import.meta.url}_${dir}-value`);
+      });
 
-  it('prefix slot', async () => {
-    const span = document.createElement('span');
-    span.setAttribute('slot', 'prefix');
-    span.textContent = '$';
-    element.appendChild(span);
-    await visualDiff(div, `${import.meta.url}_prefix`);
-  });
+      it('required', async () => {
+        element.label = 'Label';
+        element.required = true;
+        await visualDiff(div, `${import.meta.url}_${dir}-required`);
+      });
 
-  it('suffix slot', async () => {
-    const span = document.createElement('span');
-    span.setAttribute('slot', 'suffix');
-    span.textContent = '$';
-    element.appendChild(span);
-    await visualDiff(div, `${import.meta.url}_suffix`);
-  });
+      it('error message', async () => {
+        element.label = 'Label';
+        element.errorMessage = 'This field is required';
+        element.required = true;
+        element.validate();
+        await visualDiff(div, `${import.meta.url}_${dir}-error-message`);
+      });
 
-  it('controls', async () => {
-    element.hasControls = true;
-    await visualDiff(div, `${import.meta.url}_controls`);
-  });
+      it('helper text', async () => {
+        element.helperText = 'Helper text';
+        await visualDiff(div, `${import.meta.url}_${dir}-helper-text`);
+      });
+
+      it('prefix slot', async () => {
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'prefix');
+        span.textContent = '$';
+        element.appendChild(span);
+        await visualDiff(div, `${import.meta.url}_${dir}-prefix`);
+      });
+
+      it('suffix slot', async () => {
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'suffix');
+        span.textContent = '$';
+        element.appendChild(span);
+        await visualDiff(div, `${import.meta.url}_${dir}-suffix`);
+      });
+
+      it('controls', async () => {
+        element.hasControls = true;
+        await visualDiff(div, `${import.meta.url}_${dir}-controls`);
+      });
 
-  it('align-right', async () => {
-    element.value = 10;
-    element.setAttribute('theme', 'align-right');
-    await visualDiff(div, `${import.meta.url}_theme-align-right`);
+      it('align-right', async () => {
+        element.value = 10;
+        element.setAttribute('theme', 'align-right');
+        await visualDiff(div, `${import.meta.url}_${dir}-theme-align-right`);
+      });
+    });
   });
 });

packages/number-field/test/visual/material/number-field.test.js

@@ -1,5 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/material/vaadin-number-field.js';
 
 describe('number-field', () => {
@@ -26,58 +28,75 @@ describe('number-field', () => {
     await visualDiff(div, `${import.meta.url}_readonly`);
   });
 
-  it('label', async () => {
-    element.label = 'Label';
-    await visualDiff(div, `${import.meta.url}_label`);
+  it('focus-ring', async () => {
+    await sendKeys({ press: 'Tab' });
+    await visualDiff(div, `${import.meta.url}_focus-ring`);
   });
 
-  it('placeholder', async () => {
-    element.placeholder = 'Number';
-    await visualDiff(div, `${import.meta.url}_placeholder`);
-  });
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
 
-  it('value', async () => {
-    element.value = 10;
-    await visualDiff(div, `${import.meta.url}_value`);
-  });
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
 
-  it('required', async () => {
-    element.label = 'Label';
-    element.required = true;
-    await visualDiff(div, `${import.meta.url}_required`);
-  });
+      it('label', async () => {
+        element.label = 'Label';
+        await visualDiff(div, `${import.meta.url}_${dir}-label`);
+      });
 
-  it('error message', async () => {
-    element.label = 'Label';
-    element.errorMessage = 'This field is required';
-    element.required = true;
-    element.validate();
-    await visualDiff(div, `${import.meta.url}_error-message`);
-  });
+      it('placeholder', async () => {
+        element.placeholder = 'Number';
+        await visualDiff(div, `${import.meta.url}_${dir}-placeholder`);
+      });
 
-  it('helper text', async () => {
-    element.helperText = 'Helper text';
-    await visualDiff(div, `${import.meta.url}_helper-text`);
-  });
+      it('value', async () => {
+        element.value = 10;
+        await visualDiff(div, `${import.meta.url}_${dir}-value`);
+      });
 
-  it('prefix slot', async () => {
-    const span = document.createElement('span');
-    span.setAttribute('slot', 'prefix');
-    span.textContent = '$';
-    element.appendChild(span);
-    await visualDiff(div, `${import.meta.url}_prefix`);
-  });
+      it('required', async () => {
+        element.label = 'Label';
+        element.required = true;
+        await visualDiff(div, `${import.meta.url}_${dir}-required`);
+      });
 
-  it('suffix slot', async () => {
-    const span = document.createElement('span');
-    span.setAttribute('slot', 'suffix');
-    span.textContent = '$';
-    element.appendChild(span);
-    await visualDiff(div, `${import.meta.url}_suffix`);
-  });
+      it('error message', async () => {
+        element.label = 'Label';
+        element.errorMessage = 'This field is required';
+        element.required = true;
+        element.validate();
+        await visualDiff(div, `${import.meta.url}_${dir}-error-message`);
+      });
+
+      it('helper text', async () => {
+        element.helperText = 'Helper text';
+        await visualDiff(div, `${import.meta.url}_${dir}-helper-text`);
+      });
+
+      it('prefix slot', async () => {
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'prefix');
+        span.textContent = '$';
+        element.appendChild(span);
+        await visualDiff(div, `${import.meta.url}_${dir}-prefix`);
+      });
+
+      it('suffix slot', async () => {
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'suffix');
+        span.textContent = '$';
+        element.appendChild(span);
+        await visualDiff(div, `${import.meta.url}_${dir}-suffix`);
+      });
 
-  it('controls', async () => {
-    element.hasControls = true;
-    await visualDiff(div, `${import.meta.url}_controls`);
+      it('controls', async () => {
+        element.hasControls = true;
+        await visualDiff(div, `${import.meta.url}_${dir}-controls`);
+      });
+    });
   });
 });

packages/vaadin-lumo-styles/typography.js

@@ -159,13 +159,6 @@ const inputs = css`
   [disabled] > textarea[slot='textarea']::placeholder {
     opacity: 0;
   }
-
-  /* Hide the native arrow icons */
-  input[slot='input']::-webkit-outer-spin-button,
-  input[slot='input']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
 `;
 
 const $tpl = document.createElement('template');

packages/vaadin-material-styles/typography.js

@@ -128,13 +128,6 @@ const inputs = css`
     opacity: 0;
     transition-delay: 0;
   }
-
-  /* Hide the native arrow icons */
-  input[slot='input']::-webkit-outer-spin-button,
-  input[slot='input']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
 `;
 
 const $tpl = document.createElement('template');