Skip to content

Commit 04c7aab

Browse files
jallen-cyberJustin Allen
andauthored
feat(Select): maintain size of select fields after value selection (#1899)
## 📝 Changes A Select with size="md" or size="lg" shrinks by one size step once a value is selected: md renders like sm, and lg renders like md, while sm is unaffected. Hardcoding variant="body2" on the selected value overrides the inherited size, causing md and lg to render with the smaller body2 style. Remove the hardcoded variant="body2" so the selected value inherits the trigger's size ## ✅ Checklist Easy UI has certain UX standards that must be met. In general, non-trivial changes should meet the following criteria: - [ ] Visuals match Design Specs in Figma - [ ] Stories accompany any component changes - [ ] Code is in accordance with our style guide - [ ] Design tokens are utilized - [ ] Unit tests accompany any component changes - [ ] TSDoc is written for any API surface area - [ ] Specs are up-to-date - [ ] Console is free from warnings - [ ] No accessibility violations are reported - [ ] Cross-browser check is performed (Chrome, Safari, Firefox) - [ ] Changeset is added ~Strikethrough~ any items that are not applicable to this pull request. Co-authored-by: Justin Allen <justin@easypost.com>
1 parent 044775e commit 04c7aab

2 files changed

Lines changed: 6 additions & 3 deletions

File tree

.changeset/fancy-results-refuse.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@easypost/easy-ui": patch
3+
---
4+
5+
Select now keeps its size after you choose a value, so medium and large fields stay the same height instead of shrinking a step

easy-ui-react/src/Select/SelectField.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,7 @@ export function SelectField(props: SelectFieldProps) {
123123
>
124124
{selectState.selectedItem ? (
125125
<>
126-
<Text variant="body2" truncate>
127-
{selectState.selectedItem.rendered}
128-
</Text>
126+
<Text truncate>{selectState.selectedItem.rendered}</Text>
129127
{selectedDescription && (
130128
<span className={styles.selectedDescription}>
131129
<Text variant="caption" color="neutral.600" truncate>

0 commit comments

Comments
 (0)