From b1b54a5a341bc31b06d10112139eca5db7221b00 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 19 Oct 2023 09:33:09 -0400 Subject: [PATCH 1/2] Fix placeholder color in sl-select (#1667) * fix placeholder color in sl-select * add issue number --- docs/pages/resources/changelog.md | 1 + src/components/select/select.styles.ts | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 8c9c1705..1c13dacf 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added the Croatian translation [#1656] - Fixed a bug that caused the [[Escape]] key to stop propagating when tooltips are disabled [#1607] +- Fixed a bug that made it impossible to style placeholders in `` [#1667] ## 2.10.0 diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 84af6c9f..7b247049 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -67,6 +67,10 @@ export default css` -webkit-appearance: none; } + .select__display-input::placeholder { + color: var(--sl-input-placeholder-color); + } + .select:not(.select--disabled):hover .select__display-input { color: var(--sl-input-color-hover); } From eb96e3db4b2ed72b46f36b23b5b24ea74d47e801 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 19 Oct 2023 09:39:13 -0400 Subject: [PATCH 2/2] fix details example --- docs/pages/components/details.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/pages/components/details.md b/docs/pages/components/details.md index 89d99732..dc052b63 100644 --- a/docs/pages/components/details.md +++ b/docs/pages/components/details.md @@ -123,7 +123,9 @@ Details are designed to function independently, but you can simulate a group or // Close all other details when one is shown container.addEventListener('sl-show', event => { - [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details)); + if (event.target.localName === 'sl-details') { + [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details)); + } });