From b58374aff19c3a306d823a2e19f38a19d42797a7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 23 Jun 2022 16:57:30 -0400 Subject: [PATCH] fixes #798 --- cspell.json | 1 + docs/resources/changelog.md | 1 + docs/resources/contributing.md | 4 +++- src/components/input/input.styles.ts | 13 ++++++++++++- src/components/input/input.ts | 4 ++++ 5 files changed, 21 insertions(+), 2 deletions(-) diff --git a/cspell.json b/cspell.json index 2c4a620a..e5cd6614 100644 --- a/cspell.json +++ b/cspell.json @@ -110,6 +110,7 @@ "templating", "tera", "textareas", + "textfield", "transitionend", "Triaging", "turbolinks", diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 294a15f5..7a92fec3 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Added the `--sl-input-required-content` design token - Added the `required` attribute to `` and fixed constraint validation logic to support custom validation - Added the `checked-icon` part to `` +- Added the `no-spin-buttons` attribute to `` [#798](https://github.com/shoelace-style/shoelace/issues/798) - Fixed a bug where a duplicate clear button showed in Firefox [#791](https://github.com/shoelace-style/shoelace/issues/791) - Fixed a bug where setting `valueAsDate` or `valueAsNumber` too early on `` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796) - Fixed a bug in `` where empty values weren't properly supported [#797](https://github.com/shoelace-style/shoelace/issues/797) diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md index 43aba7bb..ca8e9b9a 100644 --- a/docs/resources/contributing.md +++ b/docs/resources/contributing.md @@ -204,7 +204,9 @@ Internally, each component uses the [BEM methodology](http://getbem.com/) for cl ### Boolean Props -Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset the, without JavaScript. To keep the API as friendly and consistent as possible, use a name like `noHeader` with a default value of `false` instead of `header` with a default value of `true`. +Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset them using only attributes. To keep the API as friendly and consistent as possible, use a property such as `noHeader` and a corresponding kebab-case attribute such as `no-header`. + +When naming boolean props that hide or disable things, prefix them with `no-`, e.g. `no-spin-buttons` and avoid using other verbs such as `hide-` and `disable-` for consistency. ### Conditional Slots diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 5be6dba6..c3063756 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -281,9 +281,20 @@ export default css` display: none; } - /** Hide Firefox's clear button on date and time inputs */ + /* Hide Firefox's clear button on date and time inputs */ .input--is-firefox input[type='date'], .input--is-firefox input[type='time'] { clip-path: inset(0 2em 0 0); } + + /* Hide the built-in number spinner */ + .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button, + .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } + + .input--no-spin-buttons input[type='number'] { + -moz-appearance: textfield; + } `; diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 9381ef0a..607976d7 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -95,6 +95,9 @@ export default class SlInput extends LitElement { /** Adds a password toggle button to password inputs. */ @property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false; + /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */ + @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false; + /** The input's placeholder text. */ @property() placeholder: string; @@ -348,6 +351,7 @@ export default class SlInput extends LitElement { 'input--focused': this.hasFocus, 'input--empty': !this.value, 'input--invalid': this.invalid, + 'input--no-spin-buttons': this.noSpinButtons, // It's currently impossible to hide Firefox's built-in clear icon when using , so // we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but