Tweak styles (remove arrow, box shadow, center Storybook example)

Author: ciampo

packages/components/src/ui/radix-dropdown/index.tsx

@@ -83,7 +83,6 @@ export const DropdownMenu = ( {
 					loop={ true }
 				>
 					{ children }
-					<DropdownMenuStyled.Arrow />
 				</DropdownMenuStyled.Content>
 			</DropdownMenuPrimitive.Portal>
 		</DropdownMenuPrimitive.Root>

packages/components/src/ui/radix-dropdown/stories/index.tsx

@@ -166,7 +166,17 @@ const RadioItemsGroup = () => {
 };
 
 const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
-	<DropdownMenu { ...props } />
+	<div
+		style={ {
+			width: '100%',
+			minHeight: '300px',
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+		} }
+	>
+		<DropdownMenu { ...props } />
+	</div>
 );
 export const Default = Template.bind( {} );
 Default.args = {
@@ -175,7 +185,7 @@ Default.args = {
 			<Icon icon={ menu } size={ 20 } />
 		</MenuButton>
 	),
-	sideOffset: 5,
+	sideOffset: 12,
 	children: (
 		<>
 			<DropdownMenuGroup>

packages/components/src/ui/radix-dropdown/styles.ts

@@ -57,8 +57,9 @@ const baseContent = css`
 	border: 1px solid ${ COLORS.ui.border };
 	border-radius: 6px;
 	padding: ${ space( 2 ) };
-	box-shadow: 0px 10px 38px -10px rgba( 22, 23, 24, 0.35 ),
-		0px 10px 20px -15px rgba( 22, 23, 24, 0.2 );
+	box-shadow: 0 0.7px 1px rgba( 0, 0, 0, 0.1 ),
+		0 1.2px 1.7px -0.2px rgba( 0, 0, 0, 0.1 ),
+		0 2.3px 3.3px -0.5px rgba( 0, 0, 0, 0.1 );
 	animation-duration: ${ ANIMATION_PARAMS.DURATION };
 	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
 	will-change: transform, opacity;
@@ -175,14 +176,3 @@ export const ItemPrefixWrapper = styled.span`
 export const ItemSuffixWrapper = styled.span`
 	${ itemSuffix }
 `;
-
-export const Arrow = styled( DropdownMenu.Arrow )`
-	fill: ${ COLORS.ui.background };
-
-	/* The following styles aim at adding a border to the arrow*/
-	stroke: ${ COLORS.ui.border };
-	stroke-dasharray: 36 28;
-	stroke-dashoffset: 34;
-	stroke-linejoin: round;
-	stroke-width: 2.5;
-`;