fix: do not set step buttons opacity when field is disabled (#7775) (#…

…7788)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

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

@@ -110,6 +110,19 @@ describe('number-field', () => {
  await visualDiff(div, `${dir}-step-buttons-visible`);
  });
 
+ it('step buttons visible disabled', async () => {
+ element.stepButtonsVisible = true;
+ element.disabled = true;
+ await visualDiff(div, `${dir}-step-buttons-visible-disabled`);
+ });
+
+ it('step buttons visible disabled value', async () => {
+ element.stepButtonsVisible = true;
+ element.value = 1;
+ element.disabled = true;
+ await visualDiff(div, `${dir}-step-buttons-visible-disabled-value`);
+ });
+
  it('align-right', async () => {
  element.value = 10;
  element.setAttribute('theme', 'align-right');

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

@@ -109,6 +109,19 @@ describe('number-field', () => {
  element.value = 5;
  await visualDiff(div, `${dir}-step-buttons-visible`);
  });
+
+ it('step buttons visible disabled', async () => {
+ element.stepButtonsVisible = true;
+ element.disabled = true;
+ await visualDiff(div, `${dir}-step-buttons-visible-disabled`);
+ });
+
+ it('step buttons visible disabled value', async () => {
+ element.stepButtonsVisible = true;
+ element.value = 1;
+ element.disabled = true;
+ await visualDiff(div, `${dir}-step-buttons-visible-disabled-value`);
+ });
  });
  });
 });

packages/number-field/theme/lumo/vaadin-number-field-styles.js

@@ -14,7 +14,7 @@ const numberField = css`
  text-align: center;
  }
 
- [part$='button'][disabled] {
+ :host(:not([disabled])) [part$='button'][disabled] {
  opacity: 0.2;
  }
 

packages/number-field/theme/material/vaadin-number-field-styles.js

@@ -13,7 +13,7 @@ const numberField = css`
  text-align: center;
  }
 
- [part$='button'][disabled] {
+ :host(:not([disabled])) [part$='button'][disabled] {
  opacity: 0.2;
  }