Fix - Native Select / Select - Additional Content redundancy / CSS (#…

…1168)
cengage · Nov 30, 2023 · 5e438ab · 5e438ab · github-actions · Nov 30, 2023
1 parent bd95074
commit 5e438ab
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/.changeset/fix-additionalContent.md 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
@@ -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
@@ -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>
       );