Commit 40a08772 authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

Change unit of default Icon size to "rem"

parent ef6f3425
Pipeline #1000 passed with stage
in 1 minute and 42 seconds
......@@ -17,6 +17,12 @@
"no-console": "off",
"react/prop-types": "off"
}
},
{
"files": ["**/*.test.js"],
"rules": {
"react/prop-types": "off"
}
}
],
"parser": "babel-eslint",
......
......@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '../styles';
import multiplyUnit from '../utils/multiplyUnit';
import styles from './Button.styles';
......@@ -58,9 +59,9 @@ class Button extends Component {
);
const iconSizeByButtonSize = {
small: theme.components.Icon.defaultSize * 0.8,
small: multiplyUnit(theme.components.Icon.defaultSize, 0.8),
medium: theme.components.Icon.defaultSize,
large: theme.components.Icon.defaultSize * 1.2
large: multiplyUnit(theme.components.Icon.defaultSize, 1.2)
};
return (
......
import React, { Fragment } from 'react';
import React, { Component, Fragment } from 'react';
import { cleanup, fireEvent, render } from '@testing-library/react';
import Color from 'color';
import { createTheme } from '../styles';
import { createTheme, withTheme } from '../styles';
import wrapToTest from '../utils/wrapToTest';
import Button from './Button';
......@@ -11,7 +11,29 @@ describe('<Button />', () => {
afterEach(cleanup);
describe('color prop', () => {
it('must be "primary" by default', () => {});
it('must be "primary" by default', () => {
const palette = {
primary: '#abc123'
};
const { getAllByText } = render(
wrapToTest({ theme: createTheme({ colors: { palette } }) })(
<Fragment>
<Button variant='text'>primary color</Button>
<Button variant='outline'>primary color</Button>
<Button variant='plain'>primary background color</Button>
<Button variant='gradient'>primary background color</Button>
</Fragment>
)
);
getAllByText(/primary background color/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.primary};`);
});
getAllByText(/primary color/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.primary};`);
});
});
it.each(['text', 'outline'])(
'must set the color when variant is %s',
......@@ -23,7 +45,7 @@ describe('<Button />', () => {
customColor: 'rgba(1, 2, 3, 0.8)'
};
const { getAllByText } = render(
const { getByText } = render(
wrapToTest({
theme: createTheme({ colors: { palette } })
})(
......@@ -44,18 +66,12 @@ describe('<Button />', () => {
)
);
getAllByText(/primary/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.primary};`);
});
getAllByText(/success/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.success};`);
});
getAllByText(/danger/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.danger};`);
});
getAllByText(/customColor/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.customColor};`);
});
expect(getByText(/primary/)).toHaveStyle(`color: ${palette.primary};`);
expect(getByText(/success/)).toHaveStyle(`color: ${palette.success};`);
expect(getByText(/danger/)).toHaveStyle(`color: ${palette.danger};`);
expect(getByText(/customColor/)).toHaveStyle(
`color: ${palette.customColor};`
);
}
);
......@@ -69,7 +85,7 @@ describe('<Button />', () => {
customColor: 'rgba(1, 2, 3, 0.8)'
};
const { getAllByText } = render(
const { getByText } = render(
wrapToTest({
theme: createTheme({ colors: { palette } })
})(
......@@ -90,20 +106,18 @@ describe('<Button />', () => {
)
);
getAllByText(/primary/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.primary};`);
});
getAllByText(/success/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.success};`);
});
getAllByText(/danger/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.danger};`);
});
getAllByText(/customColor/).forEach(element => {
expect(element).toHaveStyle(
`background-color: ${palette.customColor};`
);
});
expect(getByText(/primary/)).toHaveStyle(
`background-color: ${palette.primary};`
);
expect(getByText(/success/)).toHaveStyle(
`background-color: ${palette.success};`
);
expect(getByText(/danger/)).toHaveStyle(
`background-color: ${palette.danger};`
);
expect(getByText(/customColor/)).toHaveStyle(
`background-color: ${palette.customColor};`
);
}
);
});
......@@ -271,4 +285,46 @@ describe('<Button />', () => {
expect(linkMutedCalllback).not.toHaveBeenCalled();
});
});
describe('size prop', () => {
it('must override <Icon /> children size', () => {
class Icon extends Component {
render() {
return this.props.size || null;
}
}
const FakeIcon = withTheme(Icon);
const { getByText } = render(
wrapToTest({
theme: createTheme({
components: {
Icon: {
defaultSize: '1rem'
}
}
})
})(
<Fragment>
<Button size='small'>
<FakeIcon />
small
</Button>
<Button size='medium'>
<FakeIcon />
medium
</Button>
<Button size='large'>
<FakeIcon />
large
</Button>
</Fragment>
)
);
expect(getByText(/small/).textContent).toMatch('0.8rem');
expect(getByText(/medium/).textContent).toMatch('1rem');
expect(getByText(/large/).textContent).toMatch('1.2rem');
});
});
});
......@@ -2,14 +2,14 @@
exports[`<Icon /> Render with non svg child 1`] = `
<div
size={24}
size="1.5rem"
/>
`;
exports[`<Icon /> Render with svg child 1`] = `
<svg
fill="currentColor"
height={24}
width={24}
height="1.5rem"
width="1.5rem"
/>
`;
......@@ -5,6 +5,7 @@ import classNames from 'classnames';
import Button from '../Button';
import Icon from '../Icon';
import { withStyles } from '../styles';
import multiplyUnit from '../utils/multiplyUnit';
import styles from './IconButton.styles';
......@@ -31,10 +32,16 @@ class IconButton extends Component {
variant = 'plain'
} = otherProps;
// const iconSizeByButtonSize = {
// small: theme.components.Icon.defaultSize * 0.8,
// medium: theme.components.Icon.defaultSize,
// large: theme.components.Icon.defaultSize * 1.2
// };
const iconSizeByButtonSize = {
small: theme.components.Icon.defaultSize * 0.8,
small: multiplyUnit(theme.components.Icon.defaultSize, 0.8),
medium: theme.components.Icon.defaultSize,
large: theme.components.Icon.defaultSize * 1.2
large: multiplyUnit(theme.components.Icon.defaultSize, 1.2)
};
return (
......
import React from 'react';
import renderer from 'react-test-renderer';
import React, { Fragment } from 'react';
import { cleanup, render } from '@testing-library/react';
import { createTheme } from '../styles';
import wrapToTest from '../utils/wrapToTest';
import IconButton from './IconButton';
describe('<Icon />', () => {
let componentToTest;
beforeEach(() => {
componentToTest = null;
});
afterEach(() => {
if (componentToTest !== null) {
const component = renderer.create(wrapToTest()(componentToTest));
expect(component.toJSON()).toMatchSnapshot();
}
});
test('Render with svg child', () => {
componentToTest = (
<IconButton>
<svg />
</IconButton>
);
});
test('Render with non svg child', () => {
componentToTest = (
<IconButton>
<div />
</IconButton>
);
describe('<Button />', () => {
afterEach(cleanup);
describe('size prop', () => {
it('must define <Icon /> size', () => {
jest.mock('../Icon', () => {
return ({ children, size }) => [size || null, children];
});
const IconButton = require('./IconButton').default;
const { getByText } = render(
wrapToTest({
theme: createTheme({
components: {
Icon: {
defaultSize: '1rem'
}
}
})
})(
<Fragment>
<IconButton size='small'>
<span>small</span>
</IconButton>
<IconButton size='medium'>
<span>medium</span>
</IconButton>
<IconButton size='large'>
<span>large</span>
</IconButton>
</Fragment>
)
);
expect(getByText(/small/).parentElement.textContent).toMatch('0.8rem');
expect(getByText(/medium/).parentElement.textContent).toMatch('1rem');
expect(getByText(/large/).parentElement.textContent).toMatch('1.2rem');
});
});
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Icon /> Render with non svg child 1`] = `
<button
className="Button-root-0-1-6 Button-primaryColor-0-1-11 Button-plainVariant-0-1-7 IconButton-root-0-1-1"
>
<div
color="white"
size={24}
style={
Object {
"padding": 2,
}
}
/>
</button>
`;
exports[`<Icon /> Render with svg child 1`] = `
<button
className="Button-root-0-1-6 Button-primaryColor-0-1-11 Button-plainVariant-0-1-7 IconButton-root-0-1-1"
>
<svg
color="white"
fill="currentColor"
height={24}
style={
Object {
"padding": 2,
}
}
width={24}
/>
</button>
`;
......@@ -6,8 +6,8 @@ exports[`<ListItemIcon /> Render with custom paddings in theme 1`] = `
>
<svg
fill="currentColor"
height={24}
width={24}
height="1.5rem"
width="1.5rem"
/>
</div>
`;
......@@ -26,7 +26,7 @@ exports[`<ListItemIcon /> Render with non svg children 1`] = `
className="ListItemIcon-root-0-1-1"
>
<div
size={24}
size="1.5rem"
/>
</div>
`;
......@@ -37,8 +37,8 @@ exports[`<ListItemIcon /> Render with svg children 1`] = `
>
<svg
fill="currentColor"
height={24}
width={24}
height="1.5rem"
width="1.5rem"
/>
</div>
`;
......@@ -58,8 +58,8 @@ exports[`<ListItemIcon /> Should include className and no other props 1`] = `
>
<svg
fill="currentColor"
height={24}
width={24}
height="1.5rem"
width="1.5rem"
/>
</div>
`;
......@@ -38,7 +38,7 @@ export default ({ colors, spacing }, components = {}) => {
},
Icon: {
defaultSize: 24,
defaultSize: '1.5rem',
...Icon
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment