js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix mislabeled slot

Browse Source
This commit is contained in:
Cory LaViska
2022-12-01 16:39:39 -05:00
parent d3a7950483
commit 31b05fedd3
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/resources/changelog.md
View File

@@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
- Fixed a bug where browser validation tooltips would show up when hovering over form controls [#1037](https://github.com/shoelace-style/shoelace/issues/1037)
- Fixed a bug in `<sl-tab-group>` that sometimes caused the active tab indicator to not animate
- Fixed a bug in `<sl-tree-item>` that caused the expand/collapse icon slot to be out of sync when the node is open initially
- Fixed the mislabeled `handle-icon` slot in `<sl-image-comparer>` (it now points to the `<slot>`, not the slot's fallback content)
- Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
- Improved accessibility of `<sl-alert>` so the alert is announced and the close button has a label
- Refactored all styles and animations to use `translate`, `rotate`, and `scale` instead of `transform`

6
src/components/image-comparer/image-comparer.ts
View File

@@ -30,7 +30,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart after - The container that holds the "after" image.
* @csspart divider - The divider that separates the images.
* @csspart handle - The handle that the user drags to expose the after image.
* @csspart handle-icon - The drag icon that appears inside the handle.
* @csspart handle-icon - The handle icon's `<slot>`.
*
* @cssproperty --divider-width - The width of the dividing line.
* @cssproperty --handle-size - The size of the compare handle.
@@ -143,8 +143,8 @@ export default class SlImageComparer extends ShoelaceElement {
aria-controls="image-comparer"
tabindex="0"
>
<slot name="handle-icon">
<sl-icon part="handle-icon" library="system" name="grip-vertical"></sl-icon>
<slot part="handle-icon" name="handle-icon">
<sl-icon library="system" name="grip-vertical"></sl-icon>
</slot>
</div>
</div>