Skip to content

fix: person component responsive issue #2297

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.

Sign up for GitHub

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

Jump to bottom
Merged
gavinbarron merged 6 commits into from
May 26, 2023
Merged

fix: person component responsive issue #2297

gavinbarron merged 6 commits into from
May 26, 2023

Conversation

@Mnickii
Copy link
Collaborator

@Mnickii Mnickii commented May 12, 2023 •
edited
Loading

Closes #2217

PR Type

Bugfix

Description of the changes

Fixes issue where avatar is squished and lines wrap on whitespace when window width is decreased.

PR checklist

  • Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
  • All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
  • Stories have been added and existing stories have been tested
  • Added appropriate documentation. Docs PR:
  • License header has been added to all new source files (yarn setLicense)
  • Contains NO breaking changes

Other information

@Mnickii Mnickii requested a review from musale May 12, 2023 10:01
@ghost
Copy link

ghost commented May 12, 2023

Thank you for creating a Pull Request @Mnickii.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

  • I have verified a documentation PR has been linked and is approved (or not applicable)
  • I have ran this PR locally and have tested the fix/feature
  • I have verified that stories have been added to storybook (or not applicable)
  • I have tested existing stories in storybook to verify no regression has occured
  • I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

@Mnickii Mnickii linked an issue May 12, 2023 that may be closed by this pull request
[BUG] Person Component Responsive Issues in v3.0.0-Preview.1 #2217
Closed
@github-actions
Copy link

github-actions bot commented May 12, 2023

The updated storybook is available here

musale
musale previously approved these changes May 12, 2023
View reviewed changes
@Mnickii Mnickii requested a review from gavinbarron May 12, 2023 11:04
@sebastienlevert
Copy link
Contributor

sebastienlevert commented May 15, 2023

I see inconsistencies in the behavior. Where some titles (line 1) are overflowing, other are now. Based on the initial bug, I think we should tackle both. Thoughts?

image

@gavinbarron
Copy link
Member

gavinbarron commented May 15, 2023

To prevent wrapping and do ellipsis truncation we need to force a single line and have a (min)-width that the element can be.

What minimum width should we limit this component to?
If we do this then we should also expose a new css prop to allow developers to customize this based on their needs

@sebastienlevert
Copy link
Contributor

sebastienlevert commented May 15, 2023

Absolutely agree! @yejuntak what would be a good min-width in this case?

@yejuntak
Copy link
Contributor

yejuntak commented May 15, 2023

I need little bit more details on it. From Fluent UI, if we are creating persona, we should be follow this below

Persona

Looks like Fluent relative on size, depending on the size of the Avatar. However, on MGT Library, the largest component's minimum was 168px.

Can we try on 168px?

@github-actions
Copy link

github-actions bot commented May 16, 2023

The updated storybook is available here

@musale musale requested a review from a team as a code owner May 22, 2023 11:06
@github-actions
Copy link

github-actions bot commented May 22, 2023

The updated storybook is available here

@musale
Set the avatar and details to a min-width
e7a52a8 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Update the yarn.lock file
57b659c 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@github-actions
Copy link

github-actions bot commented May 22, 2023

The updated storybook is available here

1 similar comment
@github-actions
Copy link

github-actions bot commented May 22, 2023

The updated storybook is available here

sebastienlevert
sebastienlevert approved these changes May 25, 2023
View reviewed changes
Copy link
Contributor

@sebastienlevert sebastienlevert left a comment

Choose a reason for hiding this comment

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

LGTM!

gavinbarron
gavinbarron approved these changes May 26, 2023
View reviewed changes
Copy link
Member

@gavinbarron gavinbarron left a comment

Choose a reason for hiding this comment

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

LGTM

@gavinbarron gavinbarron enabled auto-merge (squash) May 26, 2023 09:48
@github-actions
Copy link

github-actions bot commented May 26, 2023

The updated storybook is available here

@gavinbarron gavinbarron merged commit fbd397d into next/fluentui May 26, 2023
@gavinbarron gavinbarron deleted the fix/person-responsiveness branch May 26, 2023 10:02
@Mnickii Mnickii added this to the v3.0.0 milestone Jun 7, 2023
@gavinbarron gavinbarron mentioned this pull request Jun 16, 2023
Merged
6 tasks
This was referenced Jul 17, 2023
Closed
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gavinbarron gavinbarron gavinbarron approved these changes

@sebastienlevert sebastienlevert sebastienlevert approved these changes

+1 more reviewer

@musale musale musale approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Build: Storybook

Projects

Graph Toolkit
Archived in project

Milestone

v3.0.0

Development

Successfully merging this pull request may close these issues.

[BUG] Person Component Responsive Issues in v3.0.0-Preview.1

6 participants

@Mnickii @sebastienlevert @gavinbarron @yejuntak @musale