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( return props.children; } - function inlineContent() { - if (!labelText || labelPosition !== LabelPosition.top) { - return additionalContent; - } - } - return ( ( - {inlineContent()} + {(labelPosition === 'left' && additionalContent) || + (!labelText && additionalContent)} ); } 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 { 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(props: SelectContainerInterface) { additionalContent ) { return ( - + {props.children} {additionalContent} @@ -111,7 +130,7 @@ export function SelectContainer(props: SelectContainerInterface) { (labelPosition && isLabelVisuallyHidden && additionalContent) ) { return ( - + {additionalContent} );