-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change base-select icon from background-image to svg elements
Putting the svg in a data url for background-image was not as customizable in CSS for developers, but using an actual svg element is: openui/open-ui#881 Bug: 40146374 Fixed: 337904202 Change-Id: If1528b3df97e31de5b86b27a6aa935223ff0f0a4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5522663 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1300224}
- Loading branch information
1 parent
38a6c3e
commit aaea226
Showing
9 changed files
with
107 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
function populateFallbackButtonIcon() { | ||
document.querySelectorAll('.stylable-select-button-icon').forEach(element => { | ||
element.innerHTML = | ||
`<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="M4 6 L10 12 L 16 6"></path> | ||
</svg>`; | ||
}); | ||
} |
25 changes: 25 additions & 0 deletions
25
html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!DOCTYPE html> | ||
<link rel=stylesheet href="resources/stylable-select-styles.css"> | ||
<script src="resources/stylable-select-utils.js"></script> | ||
|
||
<style> | ||
:root { | ||
color-scheme: dark; | ||
} | ||
</style> | ||
|
||
<div id=container class=stylable-select-container> | ||
<button class=stylable-select-button popovertarget=popover id=button> | ||
<span class=stylable-select-selectedoption>one</span> | ||
<div class=stylable-select-button-icon></div> | ||
</button> | ||
<div id=popover popover=auto anchor=container class=stylable-select-datalist> | ||
<div class=stylable-select-option>one</div> | ||
<div class=stylable-select-option>two</div> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
populateFallbackButtonIcon(); | ||
document.getElementById('popover').showPopover(); | ||
</script> |
26 changes: 26 additions & 0 deletions
26
...ntics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!DOCTYPE html> | ||
<html class=reftest-wait> | ||
<link rel=author href="mailto:jarhar@chromium.org"> | ||
<link rel=help href="https://github.com/whatwg/html/issues/9799"> | ||
<link rel=match href="select-appearance-dark-mode-ref.html"> | ||
<script src="/resources/testdriver.js"></script> | ||
<script src="/resources/testdriver-vendor.js"></script> | ||
|
||
<style> | ||
:root { | ||
color-scheme: dark; | ||
} | ||
</style> | ||
|
||
<select style="appearance:base-select"> | ||
<option>one</option> | ||
<option>two</option> | ||
</select> | ||
|
||
<script> | ||
(async () => { | ||
await test_driver.bless(); | ||
document.querySelector('select').showPicker(); | ||
document.documentElement.classList.remove('reftest-wait'); | ||
})(); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<!DOCTYPE html> | ||
<link rel=stylesheet href="resources/stylable-select-styles.css"> | ||
<script src="resources/stylable-select-utils.js"></script> | ||
|
||
<style> | ||
.stylable-select-button-icon svg { | ||
stroke: red !important; | ||
} | ||
</style> | ||
|
||
<div class=stylable-select-container> | ||
<button class=stylable-select-button popovertarget=popover id=button> | ||
<span class=stylable-select-selectedoption>option</span> | ||
<div class=stylable-select-button-icon></div> | ||
</button> | ||
</div> | ||
|
||
<script> | ||
populateFallbackButtonIcon(); | ||
</script> |
17 changes: 17 additions & 0 deletions
17
html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!DOCTYPE html> | ||
<link rel=author href="mailto:jarhar@chromium.org"> | ||
<link rel=help href="https://github.com/openui/open-ui/issues/881"> | ||
<link rel=match href="select-icon-color-ref.html"> | ||
|
||
<style> | ||
select { | ||
appearance: base-select; | ||
} | ||
select::select-fallback-button-icon { | ||
stroke: red; | ||
} | ||
</style> | ||
|
||
<select> | ||
<option>option</option> | ||
</select> |