address feedback

components/src/atoms/buttons/EmptySelectorButton.tsx

@@ -17,38 +17,38 @@ import type { IconName } from '../..'
 interface EmptySelectorButtonProps {
   onClick: () => void
   text: string
-  size: 'large' | 'small'
   textAlignment: 'left' | 'middle'
   iconName?: IconName
+  size?: 'large' | 'small'
 }
 
 //  used for helix and Opentrons Ai
 export function EmptySelectorButton(
   props: EmptySelectorButtonProps
 ): JSX.Element {
-  const { onClick, text, iconName, size, textAlignment } = props
-  const sizing = size === 'large' ? '100%' : FLEX_MAX_CONTENT
+  const { onClick, text, iconName, size = 'large', textAlignment } = props
+  const buttonSizing = size === 'large' ? '100%' : FLEX_MAX_CONTENT
 
   return (
-    <Btn onClick={onClick} width={sizing} height={sizing}>
+    <Btn onClick={onClick} width={buttonSizing} height={buttonSizing}>
       <Flex
         gridGap={SPACING.spacing4}
         padding={SPACING.spacing12}
         backgroundColor={COLORS.blue30}
         borderRadius={BORDERS.borderRadius8}
         border={`2px dashed ${COLORS.blue50}`}
-        width={sizing}
-        height={sizing}
+        width="100%"
+        height="100%"
         alignItems={ALIGN_CENTER}
+        data-testid='EmptySelectorButton_container'
         justifyContent={
           textAlignment === 'middle' ? JUSTIFY_CENTER : JUSTIFY_START
         }
       >
         {iconName != null ? (
           <Icon
             name={iconName}
-            height="1.25rem"
-            width="1.25rem"
+            size="1.25rem"
             data-testid={`EmptySelectorButton_${iconName}`}
           />
         ) : null}

components/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { renderWithProviders } from '../../../testing/utils'
+import { JUSTIFY_CENTER, JUSTIFY_START } from '../../../styles'
 import { EmptySelectorButton } from '../EmptySelectorButton'
 
 const render = (props: React.ComponentProps<typeof EmptySelectorButton>) => {
@@ -22,8 +23,22 @@ describe('EmptySelectorButton', () => {
   })
   it('renders the props and button cta', () => {
     render(props)
-    fireEvent.click(screen.getByText('mock text'))
+    const button = screen.getByText('mock text')
+    fireEvent.click(button)
     expect(props.onClick).toHaveBeenCalled()
     screen.getByTestId('EmptySelectorButton_add')
+    expect(screen.getByTestId('EmptySelectorButton_container')).toHaveStyle(
+      `justify-content: ${JUSTIFY_START}`
+    )
+  })
+  it('renders middled aligned button', () => {
+    props.textAlignment = 'middle'
+    props.size = 'small'
+    props.iconName = undefined
+    render(props)
+    expect(screen.getByTestId('EmptySelectorButton_container')).toHaveStyle(
+      `justify-content: ${JUSTIFY_CENTER}`
+    )
+    screen.queryByTestId('EmptySelectorButton_add')
   })
 })