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
web-platform-tests · May 8, 2024 · 57fe6fa · 57fe6fa
1 parent 6813062
commit 57fe6fa
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 4 deletions.
diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
@@ -51,10 +51,6 @@
 }
 
 .stylable-select-button-icon {
-  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%206%20L10%2012%20L%2016%206%22%20stroke%3D%22WindowText%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
-  background-origin: content-box;
-  background-repeat: no-repeat;
-  background-size: contain;
   opacity: 1;
   outline: none;
   margin-inline-start: 0.25em;
@@ -65,6 +61,10 @@
   min-inline-size: 1.2em;
   max-inline-size: 1.2em;
   display: block;
+
+  stroke: black;
+  stroke-width: 3;
+  stroke-linejoin: round;
 }
 
 .stylable-select-selectedoption {

diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
@@ -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>`;
+  });
+}
diff --git a/...forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html b/...forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
 
 <div id=container class=stylable-select-container>
   <button class=stylable-select-button popovertarget=popover id=button>
@@ -13,5 +14,6 @@
 </div>
 
 <script>
+populateFallbackButtonIcon();
 document.getElementById('popover').showPopover();
 </script>
diff --git a/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html b/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
 
 <style>
 html {
@@ -19,5 +20,6 @@
 </div>
 
 <script>
+populateFallbackButtonIcon();
 document.getElementById('popover').showPopover();
 </script>
diff --git a/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html b/...ms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
 
 <style>
 html {
@@ -19,5 +20,6 @@
 </div>
 
 <script>
+populateFallbackButtonIcon();
 document.getElementById('popover').showPopover();
 </script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
@@ -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>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<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>