Skip to content

feature: update File List component to Fluent UI #1833

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
merged 13 commits into from
Feb 9, 2023
Merged

feature: update File List component to Fluent UI #1833

merged 13 commits into from
Feb 9, 2023

Conversation

@Mnickii
Copy link
Collaborator

@Mnickii Mnickii commented Sep 1, 2022 •
edited
Loading

Closes #1626

PR Type

Feature : Updates File list to latest fluent design

Description of the changes

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

@ghost
Copy link

ghost commented Sep 1, 2022

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)

@github-actions
Copy link

github-actions bot commented Sep 1, 2022

The updated storybook is available here

@Mnickii Mnickii marked this pull request as draft September 1, 2022 16:15
@musale musale changed the title feature: update File Fist component to Fluent UI feature: update File List component to Fluent UI Sep 1, 2022
@Mnickii Mnickii linked an issue Sep 1, 2022 that may be closed by this pull request
File List component should be updated to the latest Fluent UI design #1626
Closed
musale
musale reviewed Sep 2, 2022
View reviewed changes
@Mnickii Mnickii marked this pull request as ready for review September 6, 2022 13:56
@Mnickii Mnickii force-pushed the mnickii/file-list-fluent-update branch 4 times, most recently from cda4526 to 0b49b26 Compare September 7, 2022 11:26
@Mnickii Mnickii force-pushed the mnickii/file-list-fluent-update branch from 0b49b26 to 71061e2 Compare September 8, 2022 12:08
@github-actions
Copy link

github-actions bot commented Sep 8, 2022

The updated storybook is available here

@github-actions
Copy link

github-actions bot commented Sep 9, 2022

The updated storybook is available here

@musale
Copy link
Contributor

musale commented Sep 12, 2022

@Mnickii on failed uploads, I'm unable to de-select the uploaded files
image

This is tested with the mock provider, I'll update the repro with a personal tenant too.

@github-actions
Copy link

The updated storybook is available here

@github-actions
Copy link

The updated storybook is available here

@github-actions
Copy link

The updated storybook is available here

sebastienlevert
sebastienlevert requested changes Oct 25, 2022
View reviewed changes
Copy link
Contributor

@sebastienlevert sebastienlevert left a comment •
edited by Mnickii
Loading

Choose a reason for hiding this comment

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

  • RTL doesn't bring left padding
    image

  • Hover effect is not taking the entire area of the file
    image

@ghost ghost added the Needs: Author Feedback Issue needs response from issue author label Oct 25, 2022
@github-actions
Copy link

The updated storybook is available here

@gavinbarron gavinbarron added this to the v3.0.0 milestone Nov 28, 2022
@ghost ghost removed the Needs: Author Feedback Issue needs response from issue author label Nov 29, 2022
@github-actions
Copy link

The updated storybook is available here

@sebastienlevert sebastienlevert removed this from the v3.0.0 milestone Nov 29, 2022
@yejuntak yejuntak self-requested a review November 30, 2022 17:53
@github-actions
Copy link

github-actions bot commented Dec 2, 2022

The updated storybook is available here

@gavinbarron
Copy link
Member

@Mnickii we have some contrast issues with the black on grey and the file input element is failing a11y checks.
For the input I think that we can probably add a role="none" and be good as it's a hidden element that doesn't get directly interacted with by the user.

@Mnickii
Copy link
Collaborator Author

Mnickii commented Dec 5, 2022

@gavinbarron tried adding the role="none" and got Not allowed issues for both that and role="presentation". Making it non-focusable seemed to fix this issue.

@github-actions
Copy link

github-actions bot commented Dec 5, 2022

The updated storybook is available here

musale
musale approved these changes Dec 13, 2022
View reviewed changes
Copy link
Contributor

@musale musale left a comment

Choose a reason for hiding this comment

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

Good to go!

sebastienlevert
sebastienlevert requested changes Dec 15, 2022
View reviewed changes
Copy link
Contributor

@sebastienlevert sebastienlevert left a comment •
edited
Loading

Choose a reason for hiding this comment

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

  • Show more items in dark mode has the wrong background color and "corners" should be transparent and not black
    image
  • Dark theme selected color should be different from blue to match other components hover in dark (@yejuntak thoughts?)
  • Dark theme, in general, seems completely off from the rest of the Toolkit. @yejuntak can you help there?

@ghost ghost added the Needs: Author Feedback Issue needs response from issue author label Dec 15, 2022
@github-actions
Copy link

The updated storybook is available here

@ghost ghost added the no-recent-activity label Dec 22, 2022
@ghost
Copy link

ghost commented Dec 22, 2022

This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

@github-actions
Copy link

The updated storybook is available here

@ghost ghost removed the no-recent-activity label Dec 22, 2022
@gavinbarron gavinbarron removed the Needs: Author Feedback Issue needs response from issue author label Dec 23, 2022
@github-actions
Copy link

github-actions bot commented Feb 9, 2023

The updated storybook is available here

@sebastienlevert sebastienlevert merged commit 21e4246 into next/fluentui Feb 9, 2023
@sebastienlevert sebastienlevert deleted the mnickii/file-list-fluent-update branch February 9, 2023 18:08
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

@yejuntak yejuntak Awaiting requested review from yejuntak

+1 more reviewer

@musale musale musale approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@Mnickii Mnickii

Labels

Build: Storybook

Projects

Graph Toolkit
Archived in project

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

File List component should be updated to the latest Fluent UI design

5 participants

@Mnickii @musale @gavinbarron @sebastienlevert