Add .form-control-caret and docs demo of using it

Closes #42051, fixes #41754.

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index e1cc80a218515dec28224cb4d2be89328356d36d..6c501426a19199b5fc4eb8676440e19484f3e518 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -35,7 +35,7 @@ $form-control-tokens: defaults(
     --control-select-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
     --control-select-bg-position: right .75rem center,
     --control-select-bg-size: 16px 12px,
-    --control-select-bg-dark: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
+    --control-select-bg-dark: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
   ),
   $form-control-tokens
 );
@@ -189,7 +189,8 @@ $form-control-sizes: defaults(
   }
 
   // stylelint-disable selector-no-qualifying-type
-  select.form-control {
+  select.form-control,
+  .form-control-caret {
     padding-inline-end: calc(var(--control-padding-x) * 3);
     background-image: var(--control-select-bg);
     background-repeat: no-repeat;
@@ -204,7 +205,8 @@ $form-control-sizes: defaults(
   }
 
   @media (prefers-color-scheme: dark) {
-    select.form-control {
+    select.form-control,
+    .form-control-caret {
       background-image: var(--control-select-bg-dark);
     }
   }

diff --git a/site/src/content/docs/forms/form-control.mdx b/site/src/content/docs/forms/form-control.mdx
index 4bb953e1e6e79bcbaf2c0638b3edb0e4b4e0e67c..e2c2a082d278fcfc3bc3e1c22f8986910eeef2ed 100644 (file)
--- a/site/src/content/docs/forms/form-control.mdx
+++ b/site/src/content/docs/forms/form-control.mdx
@@ -276,6 +276,18 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
     <option value="Chicago">
   </datalist>`} />
 
+You can also combine with the `.form-control-caret` class to add a caret to inputs without requiring a select element.
+
+<Example code={`<label for="exampleDataListCaret" class="form-label">Datalist example with caret</label>
+  <input class="form-control form-control-caret" list="datalistOptionsCaret" id="exampleDataListCaret" placeholder="Type to search...">
+  <datalist id="datalistOptionsCaret">
+    <option value="San Francisco">
+    <option value="New York">
+    <option value="Seattle">
+    <option value="Los Angeles">
+    <option value="Chicago">
+  </datalist>`} />
+
 ### Date & time
 
 No additional classes are needed for date and time inputs.