From b633c33570f8adabece490fc9322dd06a8b5c9a9 Mon Sep 17 00:00:00 2001
From: ccedrone <77400920+ccedrone@users.noreply.github.com>
Date: Thu, 30 Nov 2023 15:29:26 -0500
Subject: [PATCH] Fix - Native Select / Select - Additional Content redundancy
 / CSS  (#1168)

---
 .changeset/fix-additionalContent.md           |  5 +++
 .../components/NativeSelect/NativeSelect.tsx  |  9 ++----
 .../src/components/Select/SelectContainer.tsx | 31 +++++++++++++++----
 3 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/fix-additionalContent.md

diff --git a/.changeset/fix-additionalContent.md b/.changeset/fix-additionalContent.md
new file mode 100644
index 000000000..a8d02f5de
--- /dev/null
+++ b/.changeset/fix-additionalContent.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+fix(Select/NativeSelect): Fixed alignment issues in Select regarding additional content icon. Fixed duplicate additional content in Native Select.
diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
index f658eb5a4..fe5d66d1f 100644
--- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
+++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
@@ -154,12 +154,6 @@ export const NativeSelect = React.forwardRef<HTMLDivElement, NativeSelectProps>(
       return props.children;
     }
 
-    function inlineContent() {
-      if (!labelText || labelPosition !== LabelPosition.top) {
-        return additionalContent;
-      }
-    }
-
     return (
       <AdditionalContentWrapper labelPosition={labelPosition}>
         <StyledFormFieldContainer
@@ -207,7 +201,8 @@ export const NativeSelect = React.forwardRef<HTMLDivElement, NativeSelectProps>(
             <DefaultDropdownIndicator disabled={disabled} />
           </StyledNativeSelectWrapper>
         </StyledFormFieldContainer>
-        {inlineContent()}
+        {(labelPosition === 'left' && additionalContent) ||
+          (!labelText && additionalContent)}
       </AdditionalContentWrapper>
     );
   }
diff --git a/packages/react-magma-dom/src/components/Select/SelectContainer.tsx b/packages/react-magma-dom/src/components/Select/SelectContainer.tsx
index 3af4d0e6f..297fbc7f6 100644
--- a/packages/react-magma-dom/src/components/Select/SelectContainer.tsx
+++ b/packages/react-magma-dom/src/components/Select/SelectContainer.tsx
@@ -48,21 +48,37 @@ interface SelectContainerInterface<T> {
   messageStyle?: React.CSSProperties;
 }
 
-const StyledAdditionalContentWrapper = styled.div<{ theme?: ThemeInterface }>`
+const StyledAdditionalContentWrapper = styled.div<{
+  labelPosition?: LabelPosition;
+  theme?: ThemeInterface;
+}>`
   align-items: center;
   display: flex;
   flex: 1;
   justify-content: space-between;
   label {
-    margin: 0 ${props => props.theme.spaceScale.spacing03} 0 0;
+    margin: ${props =>
+      props.labelPosition === LabelPosition.left
+        ? `0 ${props.theme.spaceScale.spacing03} 0 0`
+        : ''};
+  }
+  button {
+    bottom: ${props =>
+      props.labelPosition !== LabelPosition.left ? `6px` : ''};
   }
 `;
 
-const StyledAdditionalContent = styled.div<{ theme?: ThemeInterface }>`
+const StyledAdditionalContent = styled.div<{
+  labelPosition?: LabelPosition;
+  theme?: ThemeInterface;
+}>`
   display: flex;
   align-items: center;
   button {
-    margin: 0 0 0 ${props => props.theme.spaceScale.spacing03};
+    margin: ${props =>
+      props.labelPosition === LabelPosition.left
+        ? `0 0 0 ${props.theme.spaceScale.spacing03}`
+        : ''};
   }
 `;
 
@@ -95,7 +111,10 @@ export function SelectContainer<T>(props: SelectContainerInterface<T>) {
       additionalContent
     ) {
       return (
-        <StyledAdditionalContentWrapper theme={theme}>
+        <StyledAdditionalContentWrapper
+          labelPosition={labelPosition}
+          theme={theme}
+        >
           {props.children}
           {additionalContent}
         </StyledAdditionalContentWrapper>
@@ -111,7 +130,7 @@ export function SelectContainer<T>(props: SelectContainerInterface<T>) {
       (labelPosition && isLabelVisuallyHidden && additionalContent)
     ) {
       return (
-        <StyledAdditionalContent theme={theme}>
+        <StyledAdditionalContent labelPosition={labelPosition} theme={theme}>
           {additionalContent}
         </StyledAdditionalContent>
       );