Update <Link> to be underlined by default

[fzaninotto]

Problem

• It’s a good accessibility practice to underline links: https://www.nngroup.com/articles/guidelines-for-visualizing-links/
• material design 3 underlines links in text by default:https://mui.com/material-ui/react-link/
• GitHub now underlines their links.: https://github.blog/changelog/2023-10-18-new-default-underlined-links-for-improved-accessibility/

In short, it’s not trendy anymore to not underline links - and we use that trend in react-admin.

Solution

• Remove the underline="none" in our custom Link component. This also affects components that render internal links.
• Retest all demos to make sure no unwanted underline has appeared
• Write changelog / upgrade guide

Before	After

Breaking Change

In the default theme, links are now underlined by default.

If you use the <Link> component from react-admin, and you want to remove the underline, set the underline prop to none:

import { Link } from 'react-admin';

const MyComponent = () => (
-   <Link to="/foo">Foo</Link>
+   <Link to="/foo" underline="none">Foo</Link>
);

Some react-admin component use <Link> under the hood, and will also render underlined links:

• <Count>
• <EmailField>
• <FileField>
• <ReferenceField>
• <ReferenceManyCount>
• <UrlField>

<SingleFieldList> still disables the underline by default.

To remove the underline in these components, use the sx prop. For instance, to remove the underline in <ReferenceField>:

const CompanyField = () => (
-   <ReferenceField source="company_id" reference="companies" />
+   <ReferenceField source="company_id" reference="companies" sx={{
+      '& a': { textDecoration: 'none' }
+   }} />
)