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

[IconButton] Add missing color classes #33820

Merged
merged 1 commit into from Nov 28, 2022

Conversation

Zetta56
Copy link
Contributor

@Zetta56 Zetta56 commented Aug 6, 2022

This adds the error, info, success, and warning colors to the iconButtonClasses.ts file.

fixes #33615

@mui-bot
Copy link

mui-bot commented Aug 6, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-33820--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against ac10c92

Comment on lines +16 to +24
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add unit tests for these color classes, Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added some unit tests. How do they look?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@Zetta56 Zetta56 force-pushed the icon-colors-33615 branch 3 times, most recently from 3a7f8e5 to aaaba69 Compare August 8, 2022 22:16
Comment on lines +16 to +24
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@Zetta56
Copy link
Contributor Author

Zetta56 commented Aug 20, 2022

Huh, looks like this still needs approval. Did something go wrong?

@michaldudak michaldudak added the component: icon button This is the name of the generic UI component, not the React module! label Oct 12, 2022
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One comment on refactoring, rest looks good 👍

Comment on lines 99 to 102
it('should render the primary class', () => {
const { getByRole } = render(<IconButton color="primary">book</IconButton>);
const button = getByRole('button');

expect(button).to.have.class(classes.colorPrimary);
});
it('should render the secondary class', () => {
const { getByRole } = render(<IconButton color="secondary">book</IconButton>);
const button = getByRole('button');

expect(button).to.have.class(classes.colorSecondary);
});
it('should render the error class', () => {
const { getByRole } = render(<IconButton color="error">book</IconButton>);
const button = getByRole('button');

expect(button).to.have.class(classes.colorError);
});
it('should render the info class', () => {
const { getByRole } = render(<IconButton color="info">book</IconButton>);
const button = getByRole('button');

expect(button).to.have.class(classes.colorInfo);
});
it('should render the success class', () => {
const { getByRole } = render(<IconButton color="success">book</IconButton>);
const button = getByRole('button');

expect(button).to.have.class(classes.colorSuccess);
});
it('should render the warning class', () => {
const { getByRole } = render(<IconButton color="warning">book</IconButton>);
const button = getByRole('button');

expect(button).to.have.class(classes.colorWarning);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can refactor this by using forEach loop iterating on ['primary', 'secondary', 'error', ....] array containing classes and keep the test small.

@Zetta56 Zetta56 force-pushed the icon-colors-33615 branch 2 times, most recently from aef41cc to e6698d5 Compare November 26, 2022 14:43
Copy link
Contributor

@pratikkarad pratikkarad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, sync your master fork and merge the latest master to this branch, preventing the tests from failing on the remote.

packages/mui-material/src/IconButton/IconButton.test.js Outdated Show resolved Hide resolved
@Zetta56 Zetta56 force-pushed the icon-colors-33615 branch 2 times, most recently from 9d06bda to ac10c92 Compare November 26, 2022 22:06
@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work typescript labels Nov 28, 2022
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a great first pull request on Material UI 👌 Thank you for working on it!

@ZeeshanTamboli ZeeshanTamboli merged commit 73889d0 into mui:master Nov 28, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: icon button This is the name of the generic UI component, not the React module! typescript
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[IconButton] iconButtonClasses does not contain classes for colorError, colorInfo, etc.
5 participants