diff --git a/.changeset/gorgeous-geckos-unite.md b/.changeset/gorgeous-geckos-unite.md new file mode 100644 index 00000000000..f0b0c736e54 --- /dev/null +++ b/.changeset/gorgeous-geckos-unite.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/core": patch +--- + +Fixed the status adornment position in ComboBox where it would always be vertically centered when the field grows. diff --git a/packages/core/src/pill-input/PillInput.css b/packages/core/src/pill-input/PillInput.css index 8d074abb9cc..8cab556a9c6 100644 --- a/packages/core/src/pill-input/PillInput.css +++ b/packages/core/src/pill-input/PillInput.css @@ -230,6 +230,13 @@ align-self: flex-start; } +.saltPillInput-statusAdornmentContainer { + align-self: flex-start; + display: inline-flex; + align-items: center; + height: var(--salt-size-base); +} + .saltPillInput-readOnly .saltPillInput-startAdornmentContainer { margin-left: var(--salt-spacing-50); } diff --git a/packages/core/src/pill-input/PillInput.tsx b/packages/core/src/pill-input/PillInput.tsx index 31edd73dafa..42e89c4a0d1 100644 --- a/packages/core/src/pill-input/PillInput.tsx +++ b/packages/core/src/pill-input/PillInput.tsx @@ -348,7 +348,9 @@ export const PillInput = forwardRef(function PillInput( /> {!isDisabled && validationStatus && ( - +
+ +
)} {endAdornment && (
diff --git a/packages/core/stories/combo-box/combo-box.qa.stories.tsx b/packages/core/stories/combo-box/combo-box.qa.stories.tsx index 1458448f822..705997ebac8 100644 --- a/packages/core/stories/combo-box/combo-box.qa.stories.tsx +++ b/packages/core/stories/combo-box/combo-box.qa.stories.tsx @@ -224,6 +224,21 @@ export const ClosedExamples: StoryFn = () => ( This is some help text + + Success Multiselect example + + {first5States.map((state) => ( + + ))} + + This is some help text + );