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(Avatar): Support for Non-Square Input Image for Avatar component #2337

Merged
merged 4 commits into from
Sep 20, 2023

Conversation

thunguyen19
Copy link
Collaborator

@thunguyen19 thunguyen19 commented Sep 15, 2023

Summary

Fixes: #1960

Added new property to Avatar component object-fit to support setting the content of a image to be resized to fit its container.

Release Category

Components

@thunguyen19 thunguyen19 changed the title fix: Support for Non-Square Input Image for Avatar component fix(Avatar): Support for Non-Square Input Image for Avatar component Sep 15, 2023
@cypress
Copy link

cypress bot commented Sep 15, 2023

Passing run #6176 ↗︎

0 799 2 0 Flakiness 0

Details:

Merge 01b7b06 into 0fc9868...
Project: canvas-kit Commit: 3890910bda ℹ️
Status: Passed Duration: 07:33 💡
Started: Sep 19, 2023 8:08 PM Ended: Sep 19, 2023 8:15 PM

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

@thunguyen19
Copy link
Collaborator Author

This is ready for review.

@RayRedGoose RayRedGoose added ready for review Code is ready for review and removed ready for review Code is ready for review labels Sep 15, 2023
@mannycarrera4
Copy link
Contributor

Hey! Can you add the example you have in the PR description as an actual example please!

@@ -35,6 +36,12 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
* Will render an `div` tag instead of a `button` when defined.
*/
as?: 'div';
/**
* The object-fit CSS property sets how the content of a replaced element,
* such as an <img> or <video>, should be resized to fit its container.
Copy link
Contributor

Choose a reason for hiding this comment

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

We can maybe add something like If you image is not a square, you can use this property to ensure the image is rendered properly.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sure!

@mannycarrera4 mannycarrera4 added the review in progress Code is currently under review label Sep 18, 2023
@mannycarrera4 mannycarrera4 added automerge and removed ready for review Code is ready for review review in progress Code is currently under review labels Sep 20, 2023
@alanbsmith alanbsmith merged commit 4af8599 into Workday:support Sep 20, 2023
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants