Merge pull request #9735 from marmelab/button-default-props-theme

Add ability to set Button default props via theme
marmelab · Mar 25, 2024 · d4c0864 · d4c0864
2 parents 4ae37b0 + 8afbad3
commit d4c0864
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/ra-ui-materialui/src/button/Button.stories.tsx b/packages/ra-ui-materialui/src/button/Button.stories.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
+import { ReactNode } from 'react';
 import { createTheme, ThemeProvider, Stack } from '@mui/material';
 import type { PaletteColor } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
+
 import { Button } from './Button';
-import { ReactNode } from 'react';
+import { defaultTheme } from '../theme/defaultTheme';
 
 export default { title: 'ra-ui-materialui/button/Button' };
 
 export const Basic = () => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={createTheme(defaultTheme)}>
         <UIWrapper>
             <Button label="default" />
             <Button label="outlined" variant="outlined" />
@@ -24,7 +26,7 @@ export const Basic = () => (
 );
 
 export const WithIcon = () => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={createTheme(defaultTheme)}>
         <UIWrapper>
             <Button label="button">
                 <AddIcon />
@@ -39,6 +41,29 @@ export const WithIcon = () => (
     </ThemeProvider>
 );
 
+export const WithThemeProps = () => (
+    <ThemeProvider
+        theme={createTheme({
+            ...defaultTheme,
+            components: {
+                // @ts-ignore
+                RaButton: {
+                    defaultProps: {
+                        size: 'normal',
+                        color: 'secondary',
+                    },
+                },
+            },
+        })}
+    >
+        <UIWrapper>
+            <Button label="button" />
+            <Button label="button" variant="outlined" />
+            <Button label="button" variant="contained" />
+        </UIWrapper>
+    </ThemeProvider>
+);
+
 export const WithUserDefinedPalette = () => (
     <ThemeProvider theme={theme}>
         <UIWrapper>

diff --git a/packages/ra-ui-materialui/src/button/Button.tsx b/packages/ra-ui-materialui/src/button/Button.tsx
@@ -7,7 +7,7 @@ import {
     useMediaQuery,
     Theme,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { useTranslate } from 'ra-core';
 import { Path, To } from 'react-router';
@@ -26,8 +26,9 @@ import { Path, To } from 'react-router';
  *
  */
 export const Button = <RootComponent extends React.ElementType = 'button'>(
-    props: ButtonProps<RootComponent>
+    inProps: ButtonProps<RootComponent>
 ) => {
+    const props = useThemeProps({ props: inProps, name: 'RaButton' });
     const {
         alignIcon = 'left',
         children,
@@ -39,6 +40,7 @@ export const Button = <RootComponent extends React.ElementType = 'button'>(
         to: locationDescriptor,
         ...rest
     } = props;
+
     const translate = useTranslate();
     const translatedLabel = label ? translate(label, { _: label }) : undefined;
     const linkParams = getLinkParams(locationDescriptor);