From c05781966b2fde5db2445db93872fbcc3a1a27de Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 17 May 2024 14:50:52 -0500 Subject: [PATCH 1/2] Make clear select button match design spec (#2120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale The clear button in the nimble-select deviated from the design spec in two ways: - The button was 18px by 18px rather than 24px by 24px - The icon in the button was `nimble-icon-xmark` rather than `nimble-icon-times` ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation - Update icon and button size ## ๐Ÿงช Testing Manually tested in storybook ## โœ… Checklist - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. --- ...le-components-85683753-1a07-4b68-bedc-a0b406157f56.json | 7 +++++++ packages/nimble-components/src/select/styles.ts | 4 ++-- packages/nimble-components/src/select/template.ts | 4 ++-- 3 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 change/@ni-nimble-components-85683753-1a07-4b68-bedc-a0b406157f56.json diff --git a/change/@ni-nimble-components-85683753-1a07-4b68-bedc-a0b406157f56.json b/change/@ni-nimble-components-85683753-1a07-4b68-bedc-a0b406157f56.json new file mode 100644 index 0000000000..ade7235516 --- /dev/null +++ b/change/@ni-nimble-components-85683753-1a07-4b68-bedc-a0b406157f56.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Make clear select button match design spec", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} 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"> + <${iconTimesTag} slot="start"> `)}