diff --git a/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx b/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx index 782af21e..ccd819cd 100644 --- a/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx +++ b/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx @@ -178,8 +178,6 @@ export type AcceleratedCheckoutButtonsProps = (CartProps | VariantProps) & * /> */ -const defaultStyles = {flex: 1}; - export const AcceleratedCheckoutButtons: React.FC< AcceleratedCheckoutButtonsProps > = ({ @@ -306,7 +304,7 @@ export const AcceleratedCheckoutButtons: React.FC< testID="accelerated-checkout-buttons" applePayLabel={applePayLabel} applePayStyle={applePayStyle} - style={{...defaultStyles, height: dynamicHeight}} + style={dynamicHeight ? {height: dynamicHeight} : undefined} checkoutIdentifier={checkoutIdentifier} cornerRadius={cornerRadius} wallets={wallets} diff --git a/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx b/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx index 35d2fa2e..a07fbb8c 100644 --- a/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx +++ b/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx @@ -290,19 +290,18 @@ describe('AcceleratedCheckoutButtons', () => { expect(onClickLink).not.toHaveBeenCalled(); }); - it('applies dynamic height when onSizeChange is emitted', async () => { + it('applies only the dynamic height when onSizeChange is emitted', async () => { const {getByTestId} = render( , ); let nativeComponent = getByTestId('accelerated-checkout-buttons'); + expect(nativeComponent.props.style).toBeUndefined(); + await act(async () => { nativeComponent.props.onSizeChange({nativeEvent: {height: 42}}); }); nativeComponent = getByTestId('accelerated-checkout-buttons'); - expect(nativeComponent.props.style).toEqual({ - flex: 1, - height: 42, - }); + expect(nativeComponent.props.style).toEqual({height: 42}); }); it('warns and returns null when missing identifiers in production', () => {