kopia lustrzana https://github.com/shoelace-style/shoelace
fixes #798
rodzic
31ae084538
commit
b58374aff1
|
@ -110,6 +110,7 @@
|
||||||
"templating",
|
"templating",
|
||||||
"tera",
|
"tera",
|
||||||
"textareas",
|
"textareas",
|
||||||
|
"textfield",
|
||||||
"transitionend",
|
"transitionend",
|
||||||
"Triaging",
|
"Triaging",
|
||||||
"turbolinks",
|
"turbolinks",
|
||||||
|
|
|
@ -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 `--sl-input-required-content` design token
|
||||||
- Added the `required` attribute to `<sl-radio-group>` and fixed constraint validation logic to support custom validation
|
- Added the `required` attribute to `<sl-radio-group>` and fixed constraint validation logic to support custom validation
|
||||||
- Added the `checked-icon` part to `<sl-menu-item>`
|
- Added the `checked-icon` part to `<sl-menu-item>`
|
||||||
|
- Added the `no-spin-buttons` attribute to `<sl-input type="number">` [#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 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 `<sl-input>` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796)
|
- Fixed a bug where setting `valueAsDate` or `valueAsNumber` too early on `<sl-input>` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796)
|
||||||
- Fixed a bug in `<sl-color-picker>` where empty values weren't properly supported [#797](https://github.com/shoelace-style/shoelace/issues/797)
|
- Fixed a bug in `<sl-color-picker>` where empty values weren't properly supported [#797](https://github.com/shoelace-style/shoelace/issues/797)
|
||||||
|
|
|
@ -204,7 +204,9 @@ Internally, each component uses the [BEM methodology](http://getbem.com/) for cl
|
||||||
|
|
||||||
### Boolean Props
|
### 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
|
### Conditional Slots
|
||||||
|
|
||||||
|
|
|
@ -281,9 +281,20 @@ export default css`
|
||||||
display: none;
|
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='date'],
|
||||||
.input--is-firefox input[type='time'] {
|
.input--is-firefox input[type='time'] {
|
||||||
clip-path: inset(0 2em 0 0);
|
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;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -95,6 +95,9 @@ export default class SlInput extends LitElement {
|
||||||
/** Adds a password toggle button to password inputs. */
|
/** Adds a password toggle button to password inputs. */
|
||||||
@property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false;
|
@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. */
|
/** The input's placeholder text. */
|
||||||
@property() placeholder: string;
|
@property() placeholder: string;
|
||||||
|
|
||||||
|
@ -348,6 +351,7 @@ export default class SlInput extends LitElement {
|
||||||
'input--focused': this.hasFocus,
|
'input--focused': this.hasFocus,
|
||||||
'input--empty': !this.value,
|
'input--empty': !this.value,
|
||||||
'input--invalid': this.invalid,
|
'input--invalid': this.invalid,
|
||||||
|
'input--no-spin-buttons': this.noSpinButtons,
|
||||||
|
|
||||||
// It's currently impossible to hide Firefox's built-in clear icon when using <input type="date|time">, so
|
// It's currently impossible to hide Firefox's built-in clear icon when using <input type="date|time">, so
|
||||||
// we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but
|
// we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but
|
||||||
|
|
Ładowanie…
Reference in New Issue