[AvatarGroup] Enable targeting of additional Avatar when max props is passed #30794
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hey, I see the failed tests but Im not sure what to make of them. It looks like they're originating from material-next. Did I miss a step somewhere? |
|
These tests tend to fail randomly every now and then. We haven't found why yet. |
michaldudak
requested changes
Jan 27, 2022
| @@ -15,6 +17,14 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM | |||
| * Override or extend the styles applied to the component. | |||
| */ | |||
| classes?: Partial<AvatarGroupClasses>; | |||
| /** | |||
| * The props used for targeting the additional avatar when max prop is set. | |||
There was a problem hiding this comment.
componentsProps is more generic. You can use a description similar to ones found in other components, such as:
/**
* The props used for each slot inside the AvatarGroup.
* @default {}
*/| @@ -49,6 +49,22 @@ describe('<AvatarGroup />', () => { | |||
| expect(container.textContent).to.equal('+2'); | |||
| }); | |||
|
|
|||
| it('should allow for props on additionalAvatar', () => { | |||
There was a problem hiding this comment.
Suggested change
| it('should allow for props on additionalAvatar', () => { | |
| it('should pass props from componentsProps.additionalAvatar to the slot component', () => { |
danilo-leal
added
the
component: avatar
michaldudak
reviewed
Jan 28, 2022
| @@ -127,6 +128,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { | |||
| marginLeft, | |||
| }} | |||
| variant={variant} | |||
| {...componentsProps.additionalAvatar} | |||
There was a problem hiding this comment.
One thing I noticed during testing is that the provided componentsProps override the existing className.
We should merge the class names instead. Same goes for the style prop:
<AvatarGroupAvatar
ownerState={ownerState}
variant={variant}
{...componentsProps.additionalAvatar}
className={clsx(classes.avatar, componentsProps.additionalAvatar?.className)}
style={{ marginLeft, ...componentsProps.additionalAvatar?.style }}
>
michaldudak
approved these changes
Feb 1, 2022
wladimirguerra
pushed a commit
to wladimirguerra/material-ui
that referenced
this pull request
Feb 2, 2022
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
My particular problem was that I needed to change the size of the additional avatar that comes up with a max prop. This worked in V4 but there was a code change for V5 that rendered that
Avataras a first child.link to original issue