feat(Dropdown): update placement of nested levels to be side by side

refs: CDS-70 CDS-182 (#213)
zextras · Aug 23, 2023 · f54dc35 · f54dc35
1 parent 81b0a31
commit f54dc35
Showing 1 changed file with 7 additions and 16 deletions.
diff --git a/src/components/display/Dropdown.tsx b/src/components/display/Dropdown.tsx
@@ -208,7 +208,6 @@ function NestListItem({
 			className={selected ? 'zapp-selected' : ''}
 			orientation="horizontal"
 			mainAlignment="flex-start"
-			padding={{ vertical: 'small', horizontal: 'large' }}
 			style={{ cursor: onClick && !disabled ? 'pointer' : 'default' }}
 			onClick={disabled ? undefined : onClick}
 			tabIndex={disabled ? undefined : 0}
@@ -228,7 +227,11 @@ function NestListItem({
 				itemPaddingBetween={itemPaddingBetween}
 				dropdownListRef={dropdownListRef}
 			>
-				<Container orientation="horizontal" mainAlignment="flex-start">
+				<Container
+					orientation="horizontal"
+					mainAlignment="space-between"
+					padding={{ vertical: 'small', horizontal: 'large' }}
+				>
 					{customComponent || (
 						<ListItemContent
 							icon={icon}
@@ -241,11 +244,7 @@ function NestListItem({
 							tooltipLabel={tooltipLabel}
 						/>
 					)}
-					<Icon
-						size={itemIconSize}
-						icon="ChevronRight"
-						style={{ marginRight: 0, marginLeft: 'auto' }}
-					/>
+					<Icon size={itemIconSize} icon="ChevronRight" />
 				</Container>
 			</Dropdown>
 		</ContainerEl>
@@ -272,7 +271,6 @@ const PopperList = styled.div<{
 	box-shadow: 0 0 0.25rem 0 ${({ theme }): string => theme.palette.shadow.regular};
 	z-index: 999;
 
-	padding: ${({ theme }): string => theme.sizes.padding.small} 0;
 	max-width: ${({ width, maxWidth }): string => (width === '100%' ? '100%' : maxWidth)};
 	max-height: ${({ maxHeight }): string => maxHeight};
 	width: ${({ width, triggerRef }): string =>
@@ -578,14 +576,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(function Dropdo
 		if (open) {
 			const popperOptions: OptionsGeneric<StrictModifiers> = {
 				placement,
-				modifiers: [
-					{
-						name: 'offset',
-						options: {
-							offset: (): [number, number] => [0, 4]
-						}
-					}
-				],
+				modifiers: [],
 				strategy: 'fixed'
 			};