From 84fb0961e395ecd911d48dd292db9ffcfc5fc22e Mon Sep 17 00:00:00 2001
From: mollykreis <20542556+mollykreis@users.noreply.github.com>
Date: Fri, 17 May 2024 12:35:25 -0500
Subject: [PATCH] Make clear select button match design spec

---
 packages/nimble-components/src/select/styles.ts   | 4 ++--
 packages/nimble-components/src/select/template.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nimble-components/src/select/styles.ts b/packages/nimble-components/src/select/styles.ts
index ca12bad57c..174890cf74 100644
--- a/packages/nimble-components/src/select/styles.ts
+++ b/packages/nimble-components/src/select/styles.ts
@@ -6,6 +6,7 @@ import {
     borderRgbPartialColor,
     borderWidth,
     controlHeight,
+    controlSlimHeight,
     fillHoverColor,
     fillHoverSelectedColor,
     fillSelectedColor,
@@ -39,8 +40,7 @@ export const styles = css`
 
     .clear-button {
         order: 3;
-        width: auto;
-        height: auto;
+        height: ${controlSlimHeight};
         margin-left: ${smallPadding};
     }
 
diff --git a/packages/nimble-components/src/select/template.ts b/packages/nimble-components/src/select/template.ts
index ab8fc1539b..7528b12f08 100644
--- a/packages/nimble-components/src/select/template.ts
+++ b/packages/nimble-components/src/select/template.ts
@@ -23,7 +23,7 @@ import {
 } from '../label-provider/core/label-tokens';
 import { FilterMode } from './types';
 import { buttonTag } from '../button';
-import { iconXmarkTag } from '../icons/xmark';
+import { iconTimesTag } from '../icons/times';
 
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
@@ -74,7 +74,7 @@ SelectOptions
                             content-hidden
                             appearance="ghost"
                             @click="${(x, c) => x.clearClickHandler(c.event as MouseEvent)}">
-                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
+                            <${iconTimesTag} slot="start"></${iconTimesTag}>
                         </${buttonTag}>
                     `)}
                     <div aria-hidden="true" class="indicator" part="indicator">