Skip to content

Commit 34a98e2

Browse files
sissbrueckersissbruecker
authored
refactor: deprecate has-controls in favor of step-buttons-visible (#4970)
1 parent cdae146 commit 34a98e2

16 files changed

Lines changed: 178 additions & 2 deletions

File tree

‎packages/integer-field/test/dom/__snapshots__/integer-field.test.snap.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,3 +463,61 @@ snapshots["vaadin-integer-field shadow theme"] =
463463
`;
464464
/* end snapshot vaadin-integer-field shadow theme */
465465

466+
snapshots["vaadin-integer-field shadow step-buttons-visible"] =
467+
`<div class="vaadin-field-container">
468+
<div part="label">
469+
<slot name="label">
470+
</slot>
471+
<span
472+
aria-hidden="true"
473+
part="required-indicator"
474+
>
475+
</span>
476+
</div>
477+
<vaadin-input-container part="input-field">
478+
<div
479+
aria-hidden="true"
480+
part="decrease-button"
481+
slot="prefix"
482+
>
483+
</div>
484+
<slot
485+
name="prefix"
486+
slot="prefix"
487+
>
488+
</slot>
489+
<slot name="input">
490+
</slot>
491+
<slot
492+
name="suffix"
493+
slot="suffix"
494+
>
495+
</slot>
496+
<div
497+
aria-hidden="true"
498+
id="clearButton"
499+
part="clear-button"
500+
slot="suffix"
501+
>
502+
</div>
503+
<div
504+
aria-hidden="true"
505+
part="increase-button"
506+
slot="suffix"
507+
>
508+
</div>
509+
</vaadin-input-container>
510+
<div part="helper-text">
511+
<slot name="helper">
512+
</slot>
513+
</div>
514+
<div part="error-message">
515+
<slot name="error-message">
516+
</slot>
517+
</div>
518+
</div>
519+
<slot name="tooltip">
520+
</slot>
521+
`;
522+
/* end snapshot vaadin-integer-field shadow step-buttons-visible */
523+

‎packages/integer-field/test/dom/integer-field.test.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ describe('vaadin-integer-field', () => {
3939
await expect(field).shadowDom.to.equalSnapshot();
4040
});
4141

42+
it('step-buttons-visible', async () => {
43+
field.stepButtonsVisible = true;
44+
await expect(field).shadowDom.to.equalSnapshot();
45+
});
46+
4247
it('disabled', async () => {
4348
field.disabled = true;
4449
await expect(field).shadowDom.to.equalSnapshot();

‎packages/integer-field/test/visual/lumo/integer-field.test.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,9 @@ describe('integer-field', () => {
2525
element.hasControls = true;
2626
await visualDiff(div, 'controls');
2727
});
28+
29+
it('step buttons visible', async () => {
30+
element.stepButtonsVisible = true;
31+
await visualDiff(div, 'step-buttons-visible');
32+
});
2833
});

‎packages/integer-field/test/visual/lumo/screenshots/integer-field/baseline/step-buttons-visible.png‎

542 Bytes
Loading

‎packages/integer-field/test/visual/material/integer-field.test.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,9 @@ describe('integer-field', () => {
2525
element.hasControls = true;
2626
await visualDiff(div, 'controls');
2727
});
28+
29+
it('step buttons visible', async () => {
30+
element.stepButtonsVisible = true;
31+
await visualDiff(div, 'step-buttons-visible');
32+
});
2833
});

‎packages/integer-field/test/visual/material/screenshots/integer-field/baseline/step-buttons-visible.png‎

399 Bytes
Loading

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,17 @@ declare class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(HTM
7272
/**
7373
* Set to true to display value increase/decrease controls.
7474
* @attr {boolean} has-controls
75+
* @deprecated since 23.3.
76+
* Use [`stepButtonsVisible`](#/elements/vaadin-number-field#property-stepButtonsVisible) instead
7577
*/
7678
hasControls: boolean;
7779

80+
/**
81+
* Set to true to show increase/decrease buttons.
82+
* @attr {boolean} step-buttons-visible
83+
*/
84+
stepButtonsVisible: boolean;
85+
7886
/**
7987
* The minimum value of the field.
8088
*/

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
100100
part="decrease-button"
101101
on-click="_decreaseValue"
102102
on-touchend="_decreaseButtonTouchend"
103-
hidden$="[[!hasControls]]"
103+
hidden$="[[!_isStepButtonVisible(hasControls, stepButtonsVisible)]]"
104104
aria-hidden="true"
105105
slot="prefix"
106106
></div>
@@ -113,7 +113,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
113113
part="increase-button"
114114
on-click="_increaseValue"
115115
on-touchend="_increaseButtonTouchend"
116-
hidden$="[[!hasControls]]"
116+
hidden$="[[!_isStepButtonVisible(hasControls, stepButtonsVisible)]]"
117117
aria-hidden="true"
118118
slot="suffix"
119119
></div>
@@ -137,13 +137,25 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
137137
/**
138138
* Set to true to display value increase/decrease controls.
139139
* @attr {boolean} has-controls
140+
* @deprecated since 23.3.
141+
* Use [`stepButtonsVisible`](#/elements/vaadin-number-field#property-stepButtonsVisible) instead
140142
*/
141143
hasControls: {
142144
type: Boolean,
143145
value: false,
144146
reflectToAttribute: true,
145147
},
146148

149+
/**
150+
* Set to true to show increase/decrease buttons.
151+
* @attr {boolean} step-buttons-visible
152+
*/
153+
stepButtonsVisible: {
154+
type: Boolean,
155+
value: false,
156+
reflectToAttribute: true,
157+
},
158+
147159
/**
148160
* The minimum value of the field.
149161
*/
@@ -429,6 +441,16 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
429441

430442
super._onKeyDown(event);
431443
}
444+
445+
/**
446+
* Determines whether to hide the increase / decrease buttons based on the
447+
* deprecated `hasControls` property, and the replacement `stepButtonsVisible`
448+
* property
449+
* @private
450+
*/
451+
_isStepButtonVisible(hasControls, stepButtonsVisible) {
452+
return hasControls || stepButtonsVisible;
453+
}
432454
}
433455

434456
customElements.define(NumberField.is, NumberField);

‎packages/number-field/test/dom/__snapshots__/number-field.test.snap.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,3 +541,61 @@ snapshots["vaadin-number-field host step"] =
541541
`;
542542
/* end snapshot vaadin-number-field host step */
543543

544+
snapshots["vaadin-number-field shadow step-buttons-visible"] =
545+
`<div class="vaadin-field-container">
546+
<div part="label">
547+
<slot name="label">
548+
</slot>
549+
<span
550+
aria-hidden="true"
551+
part="required-indicator"
552+
>
553+
</span>
554+
</div>
555+
<vaadin-input-container part="input-field">
556+
<div
557+
aria-hidden="true"
558+
part="decrease-button"
559+
slot="prefix"
560+
>
561+
</div>
562+
<slot
563+
name="prefix"
564+
slot="prefix"
565+
>
566+
</slot>
567+
<slot name="input">
568+
</slot>
569+
<slot
570+
name="suffix"
571+
slot="suffix"
572+
>
573+
</slot>
574+
<div
575+
aria-hidden="true"
576+
id="clearButton"
577+
part="clear-button"
578+
slot="suffix"
579+
>
580+
</div>
581+
<div
582+
aria-hidden="true"
583+
part="increase-button"
584+
slot="suffix"
585+
>
586+
</div>
587+
</vaadin-input-container>
588+
<div part="helper-text">
589+
<slot name="helper">
590+
</slot>
591+
</div>
592+
<div part="error-message">
593+
<slot name="error-message">
594+
</slot>
595+
</div>
596+
</div>
597+
<slot name="tooltip">
598+
</slot>
599+
`;
600+
/* end snapshot vaadin-number-field shadow step-buttons-visible */
601+

‎packages/number-field/test/dom/number-field.test.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@ describe('vaadin-number-field', () => {
5454
await expect(field).shadowDom.to.equalSnapshot();
5555
});
5656

57+
it('step-buttons-visible', async () => {
58+
field.stepButtonsVisible = true;
59+
await expect(field).shadowDom.to.equalSnapshot();
60+
});
61+
5762
it('disabled', async () => {
5863
field.disabled = true;
5964
await expect(field).shadowDom.to.equalSnapshot();

0 commit comments

Comments
 (0)