kopia lustrzana https://github.com/shoelace-style/shoelace
fixes #591
rodzic
9432ffebad
commit
54e4c57ae5
|
@ -32,6 +32,7 @@ Thank you for your help and patience with testing Shoelace. I promise, we're not
|
|||
- 🚨 BREAKING: removed `--sl-focus-ring-color`, and `--sl-focus-ring-alpha` (use `--sl-focus-ring` instead)
|
||||
- 🚨 BREAKING: removed `--sl-surface-base` and `--sl-surface-base-alt` tokens (use the neutral palette instead)
|
||||
- Added experimental `<sl-visually-hidden>` component
|
||||
- Added `clear-icon` slot to `<sl-select>` [#591](https://github.com/shoelace-style/shoelace/issues/591)
|
||||
- Fixed a bug in `<sl-progress-bar>` where the label would show in the default slot
|
||||
- Improved the dark theme palette so colors are bolder and don't appear washed out
|
||||
- Improved a11y of `<sl-avatar>` by representing it as an image with an `alt` [#579](https://github.com/shoelace-style/shoelace/issues/579)
|
||||
|
|
|
@ -118,7 +118,20 @@ export default css`
|
|||
|
||||
.select__clear {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 1.25em;
|
||||
font-size: inherit;
|
||||
color: var(--sl-input-icon-color);
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
transition: var(--sl-transition-fast) color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select__clear:hover {
|
||||
color: var(--sl-input-icon-color-hover);
|
||||
}
|
||||
|
||||
.select__suffix {
|
||||
|
|
|
@ -34,6 +34,7 @@ let id = 0;
|
|||
* @slot - The select's options in the form of menu items.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the select.
|
||||
* @slot suffix - Used to append an icon or similar element to the select.
|
||||
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
||||
* @slot label - The select's label. Alternatively, you can use the label prop.
|
||||
* @slot help-text - Help text that describes how to use the select.
|
||||
*
|
||||
|
@ -504,14 +505,17 @@ export default class SlSelect extends LitElement {
|
|||
|
||||
${this.clearable && hasSelection
|
||||
? html`
|
||||
<sl-icon-button
|
||||
exportparts="base:clear-button"
|
||||
<button
|
||||
part="clear-button"
|
||||
class="select__clear"
|
||||
name="x-circle-fill"
|
||||
library="system"
|
||||
@click=${this.handleClearClick}
|
||||
tabindex="-1"
|
||||
></sl-icon-button>
|
||||
>
|
||||
<slot name="clear-icon">
|
||||
<sl-icon name="x-circle-fill" library="system"></sl-icon>
|
||||
</slot>
|
||||
</button>
|
||||
`
|
||||
: ''}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue