feat(textfield): add no-spinner to remove number spin buttons

PiperOrigin-RevId: 595788647
This commit is contained in:
Elizabeth Mitchell 2024-01-04 13:27:36 -08:00 committed by Copybara-Service
parent 553aaa6695
commit 3c6e55006b
2 changed files with 18 additions and 0 deletions

View File

@ -43,6 +43,18 @@
}
}
// Optionally remove number input's spinner
.no-spinner .input {
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
display: none;
}
&[type='number'] {
-moz-appearance: textfield;
}
}
:focus-within .input {
caret-color: var(--_focus-caret-color);
}

View File

@ -226,6 +226,11 @@ export abstract class TextField extends textFieldBaseClass {
*/
@property({type: Number}) minLength = -1;
/**
* When true, hide the spinner for `type="number"` text fields.
*/
@property({type: Boolean, attribute: 'no-spinner'}) noSpinner = false;
/**
* A regular expression that the text field's value must match to pass
* constraint validation.
@ -514,6 +519,7 @@ export abstract class TextField extends textFieldBaseClass {
'disabled': this.disabled,
'error': !this.disabled && this.hasError,
'textarea': this.type === 'textarea',
'no-spinner': this.noSpinner,
};
return html`