Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] Add margin and check to AssetActionButton text #4381

Merged
merged 10 commits into from
May 24, 2022
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,15 @@ exports[`AssetActionButtons should render correctly 1`] = `
Object {
"color": "#037DD6",
"fontSize": 14,
"marginHorizontal": 3,
"marginTop": 8,
}
}
underline={false}
upper={false}
/>
>
mock text
</Text>
</TouchableOpacity>
`;

Expand Down Expand Up @@ -125,12 +128,15 @@ exports[`AssetActionButtons should render type add correctly 1`] = `
Object {
"color": "#037DD6",
"fontSize": 14,
"marginHorizontal": 3,
"marginTop": 8,
}
}
underline={false}
upper={false}
/>
>
mock text
</Text>
</TouchableOpacity>
`;

Expand Down Expand Up @@ -199,12 +205,15 @@ exports[`AssetActionButtons should render type information correctly 1`] = `
Object {
"color": "#037DD6",
"fontSize": 14,
"marginHorizontal": 3,
"marginTop": 8,
}
}
underline={false}
upper={false}
/>
>
mock text
</Text>
</TouchableOpacity>
`;

Expand Down Expand Up @@ -285,12 +294,15 @@ exports[`AssetActionButtons should render type receive correctly 1`] = `
Object {
"color": "#037DD6",
"fontSize": 14,
"marginHorizontal": 3,
"marginTop": 8,
}
}
underline={false}
upper={false}
/>
>
receive receive
gantunesr marked this conversation as resolved.
Show resolved Hide resolved
</Text>
</TouchableOpacity>
`;

Expand Down Expand Up @@ -359,12 +371,15 @@ exports[`AssetActionButtons should render type send correctly 1`] = `
Object {
"color": "#037DD6",
"fontSize": 14,
"marginHorizontal": 3,
"marginTop": 8,
}
}
underline={false}
upper={false}
/>
>
mock text
</Text>
</TouchableOpacity>
`;

Expand Down Expand Up @@ -439,11 +454,14 @@ exports[`AssetActionButtons should render type swap correctly 1`] = `
Object {
"color": "#037DD6",
"fontSize": 14,
"marginHorizontal": 3,
"marginTop": 8,
}
}
underline={false}
upper={false}
/>
>
mock text
</Text>
</TouchableOpacity>
`;
7 changes: 6 additions & 1 deletion app/components/UI/AssetActionButton/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const createStyles = (colors) =>
},
buttonText: {
marginTop: 8,
marginHorizontal: 3,
color: colors.primary.default,
fontSize: 14,
},
Expand All @@ -60,6 +61,8 @@ function AssetActionButton({ onPress, icon, label, disabled }) {
const { colors } = useAppThemeFromContext() || mockTheme;
const styles = createStyles(colors);

const maxStringLength = 10;

const getIcon = (type) => {
switch (type) {
case 'send': {
Expand Down Expand Up @@ -123,7 +126,9 @@ function AssetActionButton({ onPress, icon, label, disabled }) {
{icon && (typeof icon === 'string' ? getIcon(icon) : icon)}
</View>
<Text centered style={styles.buttonText} numberOfLines={1}>
{label}
{label.size > maxStringLength
gantunesr marked this conversation as resolved.
Show resolved Hide resolved
? `${label.substring(0, maxStringLength - 3)}...`
: label}
</Text>
</TouchableOpacity>
);
Expand Down
17 changes: 11 additions & 6 deletions app/components/UI/AssetActionButton/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,33 @@ import { shallow } from 'enzyme';
import AssetActionButton from './';

describe('AssetActionButtons', () => {
const mockText = 'mock text';
it('should render correctly', () => {
const wrapper = shallow(<AssetActionButton />);
const wrapper = shallow(<AssetActionButton label={mockText} />);
expect(wrapper).toMatchSnapshot();
});
it('should render type send correctly', () => {
const wrapper = shallow(<AssetActionButton icon="send" />);
const wrapper = shallow(<AssetActionButton icon="send" label={mockText} />);
expect(wrapper).toMatchSnapshot();
});
it('should render type receive correctly', () => {
const wrapper = shallow(<AssetActionButton icon="receive" />);
// String with more than 10 characters
const text = 'receive receive';
const wrapper = shallow(<AssetActionButton icon="receive" label={text} />);
expect(wrapper).toMatchSnapshot();
});
it('should render type add correctly', () => {
const wrapper = shallow(<AssetActionButton icon="add" />);
const wrapper = shallow(<AssetActionButton icon="add" label={mockText} />);
expect(wrapper).toMatchSnapshot();
});
it('should render type information correctly', () => {
const wrapper = shallow(<AssetActionButton icon="information" />);
const wrapper = shallow(
<AssetActionButton icon="information" label={mockText} />,
);
expect(wrapper).toMatchSnapshot();
});
it('should render type swap correctly', () => {
const wrapper = shallow(<AssetActionButton icon="swap" />);
const wrapper = shallow(<AssetActionButton icon="swap" label={mockText} />);
expect(wrapper).toMatchSnapshot();
});
});