Customizable url field and add basic story to test it.

Author: Madeorsk

packages/ra-ui-materialui/src/field/UrlField.stories.tsx

@@ -0,0 +1,43 @@
+import { Paper, Stack } from '@mui/material';
+import * as React from 'react';
+
+import { UrlField, UrlFieldProps } from './UrlField';
+import { AdminContext } from '../AdminContext';
+
+export default { title: 'ra-ui-materialui/fields/UrlField' };
+
+export const Basic = ({
+    value,
+    theme,
+    ...props
+}: Partial<UrlFieldProps> & { value?: string; theme?: 'light' | 'dark' }) => {
+    return (
+        <AdminContext defaultTheme={theme}>
+            <Paper sx={{ p: 2 }}>
+                <Stack direction="row">
+                    <UrlField record={{ value }} source="value" {...props} />
+                </Stack>
+            </Paper>
+        </AdminContext>
+    );
+};
+
+Basic.argTypes = {
+    value: {
+        options: ['filled', 'empty', 'undefined'],
+        mapping: {
+            filled: 'https://example.org',
+            empty: '',
+            undefined: undefined,
+        },
+        control: { type: 'select' },
+    },
+    theme: {
+        options: ['light', 'dark'],
+        control: { type: 'select' },
+    },
+};
+Basic.args = {
+    theme: 'light',
+    value: 'filled',
+};

packages/ra-ui-materialui/src/field/UrlField.tsx

@@ -2,15 +2,26 @@ import * as React from 'react';
 import { AnchorHTMLAttributes } from 'react';
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
 import { Typography, Link } from '@mui/material';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 import { useFieldValue, useTranslate } from 'ra-core';
+
 import { FieldProps } from './types';
 import { genericMemo } from './genericMemo';
 
 const UrlFieldImpl = <
     RecordType extends Record<string, any> = Record<string, any>,
 >(
-    props: UrlFieldProps<RecordType>
+    inProps: UrlFieldProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const { className, emptyText, content, ...rest } = props;
     const value = useFieldValue(props);
     const translate = useTranslate();
@@ -29,15 +40,15 @@ const UrlFieldImpl = <
     }
 
     return (
-        <Link
+        <StyledLink
             className={className}
             href={value}
             onClick={stopPropagation}
             variant="body2"
             {...sanitizeFieldRestProps(rest)}
         >
             {content ?? value}
-        </Link>
+        </StyledLink>
     );
 };
 UrlFieldImpl.displayName = 'UrlFieldImpl';
@@ -53,3 +64,29 @@ export interface UrlFieldProps<
 
 // useful to prevent click bubbling in a Datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
+
+const PREFIX = 'RaUrlField';
+
+const StyledLink = styled(Link, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<UrlFieldProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}