-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
Conversation
|
16ec66f
to
a2b747c
Compare
/** 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; |
There was a problem hiding this comment.
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!
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
3a7f8e5
to
aaaba69
Compare
/** 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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Huh, looks like this still needs approval. Did something go wrong? |
There was a problem hiding this 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 👍
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); | ||
}); |
There was a problem hiding this comment.
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.
aef41cc
to
e6698d5
Compare
There was a problem hiding this 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.
cd6849f
to
009a6a6
Compare
9d06bda
to
ac10c92
Compare
There was a problem hiding this 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!
This adds the error, info, success, and warning colors to the
iconButtonClasses.ts
file.fixes #33615