fix(picker): update picker display and icon flex properties to resolve layout bugs (#3220)

cdransf · web-flow · commit b28e1d4bae70 · 2024-10-11T13:54:33.000-04:00
diff --git a/.changeset/chatty-sheep-draw.md b/.changeset/chatty-sheep-draw.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/picker": minor
+---
+
+Applies flex-shrink to validation icons to prevent icon from resizing when label is long enough to be truncated.
diff --git a/components/picker/index.css b/components/picker/index.css
@@ -397,6 +397,7 @@
 }
 
 .spectrum-Picker-validationIcon {
+	flex-shrink: 0;
 	margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 	margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@spectrum-css/picker": minor
 +---
++
 +Applies flex-shrink to validation icons to prevent icon from resizing when label is long enough to be truncated.
Original file line number	Diff line number	Diff line change
`@@ -397,6 +397,7 @@`
`397`	`397`	`}`
`398`	`398`
`399`	`399`	`.spectrum-Picker-validationIcon {`
	`400`	`+ flex-shrink: 0;`
`400`	`401`	`margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));`
`401`	`402`	`margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));`
`402`	`403`	`}`