Fixed the status adornment position in ComboBox where it would always…

… be vertically centered when the field grows (#3999)
jpmorganchase · Aug 19, 2024 · 4a1bd04 · 4a1bd04
1 parent 15ff922
commit 4a1bd04
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/.changeset/gorgeous-geckos-unite.md 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
@@ -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
@@ -348,7 +348,9 @@ export const PillInput = forwardRef(function PillInput(
         />
       </div>
       {!isDisabled && validationStatus && (
-        <StatusAdornment status={validationStatus} />
+        <div className={withBaseName("statusAdornmentContainer")}>
+          <StatusAdornment status={validationStatus} />
+        </div>
       )}
       {endAdornment && (
         <div className={withBaseName("endAdornmentContainer")}>

diff --git 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<QAContainerProps> = () => (
       </ComboBox>
       <FormFieldHelperText>This is some help text</FormFieldHelperText>
     </FormField>
+    <FormField>
+      <FormFieldLabel>Success Multiselect example</FormFieldLabel>
+      <ComboBox
+        validationStatus="success"
+        multiselect
+        defaultSelected={first5States}
+      >
+        {first5States.map((state) => (
+          <Option value={state} key={state}>
+            {state}
+          </Option>
+        ))}
+      </ComboBox>
+      <FormFieldHelperText>This is some help text</FormFieldHelperText>
+    </FormField>
   </QAContainer>
 );