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

Tab redesign: removing icon, orange text in dark mode. #8533

Merged
merged 2 commits into from
Feb 7, 2025

Conversation

isoos
Copy link
Collaborator

@isoos isoos commented Feb 6, 2025

  • using the orange color as discussed
  • removed icon, added title instead, not sure if we should have different title for my-<page> links vs /admin
  • verified in lighthouse, contrast score is great with this color

new screens:

image

--

image

--

image

--

image

@isoos isoos requested review from jonasfj and sigurdm February 6, 2025 15:35
@isoos
Copy link
Collaborator Author

isoos commented Feb 6, 2025

/cc @parlough

@isoos
Copy link
Collaborator Author

isoos commented Feb 6, 2025

Note: available on staging.

@@ -19,6 +19,9 @@ d.Node detailTabsNode({
children: tabs.map(
(t) => d.li(
classes: t.titleClasses,
attributes: {
if (t.isPrivate) 'title': 'For authorized users only.',
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is slightly misleading.

I would like the tooltip to reflect the tab title, not the reason for the different color.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Do you have some examples in mind for that different text?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should have a title text for each tab:

Something along the lines of:

Readme: "Description of the package"
Changelog: "Describes changes between versions"
Example: "An example of how to use this package"
Installing: "How to use this package in your own project"
Versions: "All published versions of this package"
Scores: "Automated analysis and download metrics"
Admin: "Admin settings for this package - only for admins of this package"
Activity log: "Historical admin and publication events - only for admins of this package"

Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry that I was not more clear, but I don't think it should block the landing of this PR. I can live with the titles as they are.

Copy link
Contributor

@sigurdm sigurdm left a comment

Choose a reason for hiding this comment

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

I like how this looks!

@isoos
Copy link
Collaborator Author

isoos commented Feb 7, 2025

I think I'll land this, and add new descriptions as suggested above in a follow-up PR.

@isoos isoos merged commit 1dee391 into dart-lang:master Feb 7, 2025
31 checks passed
@isoos isoos deleted the tabs branch February 7, 2025 09:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants