Make clear select button match design spec

ni · May 17, 2024 · 84fb096 · 84fb096
1 parent 0669540
commit 84fb096
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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">