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

[docs-infra] Add external link arrow #41129

Merged
merged 3 commits into from
Feb 19, 2024

Conversation

siriwatknp
Copy link
Member

closes #41072

Out of scope: determine which links should be external by updating the list.

Added arrow to external links using CSS to detect target="_blank".

docs-external-link.mp4

@siriwatknp siriwatknp added the scope: docs-infra Specific to the docs-infra product label Feb 16, 2024
@mui-bot
Copy link

mui-bot commented Feb 16, 2024

Netlify deploy preview

https://deploy-preview-41129--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 002a466

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

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

The technical solution looks good.

I taught the issue was about distinguishing internal cs external links. Something as follow:

a:not([href*="mui.com"]):not([href^="/"]):not([href^="#"])

But distinguishing by "open a new tab" vs "move in the same tab" seems good too 👍

Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

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

Love some CSS-only stuff like this 😊 Nice one, Jun, thanks for being so fast!

@danilo-leal danilo-leal added the design This is about UI or UX design, please involve a designer label Feb 16, 2024
@siriwatknp siriwatknp merged commit 326beee into mui:master Feb 19, 2024
20 checks passed
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 19, 2024

Nice, this could make it to the Link component #41129.


We might want to disable it for image links

SCR-20240219-mltb

https://deploy-preview-41129--material-ui.netlify.app/material-ui/discover-more/backers/#gold-sponsors

For ads, it feels like it shouldn't be here:

SCR-20240219-mmdw

https://deploy-preview-41129--material-ui.netlify.app/material-ui/react-button/

@alexfauquette
Copy link
Member

Proposing a fix: #41181

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: link This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs-infra] Style external (target blank) links differently
5 participants