Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

Fixed buttons on Android not showing Ripple effect #663

Merged
merged 7 commits into from
Jul 13, 2020
Merged

Fixed buttons on Android not showing Ripple effect #663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
74da81c
Fixed ripple showing behind button
NickMalloryODS Jul 13, 2020
0a3bdb2
Consistent border radius for buttons
NickMalloryODS Jul 13, 2020
26ac121
Ripple component using RectButton instead of custom solution
NickMalloryODS Jul 13, 2020
b5ab7ea
Added accessibilityProps to all Ripple components
NickMalloryODS Jul 13, 2020
fc6d80a
Use Ripple in InfoButton
NickMalloryODS Jul 13, 2020
75aa4f0
lint
NickMalloryODS Jul 13, 2020
d340908
Updated border radius on all button components
NickMalloryODS Jul 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import {Theme, palette} from 'shared/theme';
import {useI18n} from '@shopify/react-i18n';

import {Box} from './Box';
import {Ripple} from './Ripple';
import {Icon, IconName} from './Icon';
import {Ripple} from './Ripple';

export interface ButtonProps {
text?: string;
Expand Down Expand Up @@ -69,14 +69,15 @@ export const Button = ({
: {};
const externalArrowIcon = textColor === palette.white ? 'icon-external-arrow-light' : 'icon-external-arrow';

const borderRadius = 5;
const content = (
<Box
borderRadius={5}
borderRadius={borderRadius}
alignItems="center"
justifyContent="center"
shadowColor="bodyText"
style={{
backgroundColor: color,
backgroundColor: Platform.OS === 'ios' ? color : 'transparent',
minHeight: height,
borderBottomWidth,
borderBottomColor: Platform.OS === 'ios' ? palette.fadedWhiteDark : borderBottomColor,
Expand Down Expand Up @@ -115,7 +116,13 @@ export const Button = ({

if (Platform.OS === 'android') {
return (
<Ripple rippleContainerBorderRadius={5} onPress={onPressHandler} disabled={disabled} {...accessibilityProps}>
<Ripple
disabled={disabled}
onPress={onPressHandler}
backgroundColor={color}
borderRadius={borderRadius}
{...accessibilityProps}
>
{content}
</Ripple>
);
Expand Down
21 changes: 16 additions & 5 deletions src/components/ButtonMultiline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import {Theme, palette} from 'shared/theme';
import {useI18n} from '@shopify/react-i18n';

import {Box} from './Box';
import {Ripple} from './Ripple';
import {Icon} from './Icon';
import {Ripple} from './Ripple';

export interface ButtonMultilineProps {
text?: string;
Expand Down Expand Up @@ -59,13 +59,18 @@ export const ButtonMultiline = ({
}
: {};
const externalArrowIcon = textColor === palette.white ? 'icon-external-arrow-light' : 'icon-external-arrow';

const borderRadius = 10;
const content = (
<Box
borderRadius={10}
borderRadius={borderRadius}
alignItems="center"
justifyContent="center"
style={{backgroundColor: color, minHeight: height, borderWidth, borderColor: buttonColor}}
style={{
backgroundColor: Platform.OS === 'ios' ? color : 'transparent',
minHeight: height,
borderWidth,
borderColor: buttonColor,
}}
paddingHorizontal="m"
paddingVertical="m"
flexDirection="row"
Expand Down Expand Up @@ -116,7 +121,13 @@ export const ButtonMultiline = ({

if (Platform.OS === 'android') {
return (
<Ripple rippleContainerBorderRadius={4} onPress={onPressHandler} {...accessibilityProps}>
<Ripple
disabled={disabled}
onPress={onPressHandler}
backgroundColor={color}
borderRadius={borderRadius}
{...accessibilityProps}
>
{content}
</Ripple>
);
Expand Down
16 changes: 11 additions & 5 deletions src/components/ButtonSingleLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import {Theme, palette} from 'shared/theme';
import {useI18n} from '@shopify/react-i18n';

import {Box} from './Box';
import {Ripple} from './Ripple';
import {Icon, IconName} from './Icon';
import {Text} from './Text';
import {Ripple} from './Ripple';

export interface ButtonSingleLineProps {
text?: string;
Expand Down Expand Up @@ -59,14 +59,14 @@ export const ButtonSingleLine = ({
}
: {};
const externalArrowIcon = textColor === palette.white ? 'icon-external-arrow-light' : 'icon-external-arrow';

const borderRadius = 10;
const content = (
<Box
borderRadius={10}
borderRadius={borderRadius}
alignItems="center"
justifyContent="center"
style={{
backgroundColor: color,
backgroundColor: Platform.OS === 'ios' ? color : 'transparent',
minHeight: height,
borderWidth,
borderColor: buttonColor,
Expand Down Expand Up @@ -120,7 +120,13 @@ export const ButtonSingleLine = ({

if (Platform.OS === 'android') {
return (
<Ripple rippleContainerBorderRadius={10} onPress={onPressHandler} {...accessibilityProps}>
<Ripple
disabled={disabled}
onPress={onPressHandler}
backgroundColor={color}
borderRadius={borderRadius}
{...accessibilityProps}
>
{content}
</Ripple>
);
Expand Down
19 changes: 15 additions & 4 deletions src/components/InfoButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,18 @@ export const InfoButton = ({
}
: {};
const externalArrowIcon = textColor === palette.white ? 'icon-external-arrow-light' : 'icon-external-arrow';

const borderRadius = 10;
const content = (
<Box
borderRadius={10}
borderRadius={borderRadius}
alignItems="center"
justifyContent="center"
style={{minHeight: height, borderWidth, borderColor: buttonColor, backgroundColor: buttonColor}}
style={{
minHeight: height,
borderWidth,
borderColor: buttonColor,
backgroundColor: Platform.OS === 'ios' ? buttonColor : undefined,
}}
paddingHorizontal="m"
paddingVertical="m"
flexDirection="row"
Expand Down Expand Up @@ -96,7 +101,13 @@ export const InfoButton = ({

if (Platform.OS === 'android') {
return (
<Ripple rippleContainerBorderRadius={10} onPress={onPressHandler} {...accessibilityProps}>
<Ripple
disabled={disabled}
onPress={onPressHandler}
backgroundColor={buttonColor}
borderRadius={borderRadius}
{...accessibilityProps}
>
{content}
</Ripple>
);
Expand Down
Loading