diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
index d8dd16205ca..a11202dfe88 100644
--- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
+++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
@@ -1,16 +1,9 @@
-import React, {
- Component,
- Children,
- cloneElement,
- isValidElement,
-} from 'react';
+import React, { Children, cloneElement, isValidElement } from 'react';
import PropTypes from 'prop-types';
import Divider from '@material-ui/core/Divider';
import { withRouter, Route } from 'react-router-dom';
-import compose from 'recompose/compose';
-import { translate } from 'ra-core';
+import { makeStyles } from '@material-ui/core/styles';
-import CardContentInner from '../layout/CardContentInner';
import TabbedShowLayoutTabs from './TabbedShowLayoutTabs';
const sanitizeRestProps = ({
@@ -32,6 +25,14 @@ const getTabFullPath = (tab, index, baseUrl) =>
tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : ''
}`;
+const useStyles = makeStyles(theme => ({
+ content: {
+ paddingTop: theme.spacing(1),
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ },
+}));
+
/**
* Tabbed Layout for a Show view, showing fields grouped in tabs.
*
@@ -71,63 +72,56 @@ const getTabFullPath = (tab, index, baseUrl) =>
* );
* export default App;
*/
-export class TabbedShowLayout extends Component {
- render() {
- const {
- basePath,
- children,
- className,
- location,
- match,
- record,
- resource,
- translate,
- version,
- value,
- tabs,
- ...rest
- } = this.props;
+const TabbedShowLayout = ({
+ basePath,
+ children,
+ classes: classesOverride,
+ className,
+ location,
+ match,
+ record,
+ resource,
+ version,
+ value,
+ tabs,
+ ...rest
+}) => {
+ const classes = useStyles({ classes: classesOverride });
+ return (
+
+ {cloneElement(
+ tabs,
+ {
+ // The location pathname will contain the page path including the current tab path
+ // so we can use it as a way to determine the current tab
+ value: location.pathname,
+ match,
+ },
+ children
+ )}
- return (
-
- {cloneElement(
- tabs,
- {
- // The location pathname will contain the page path including the current tab path
- // so we can use it as a way to determine the current tab
- value: location.pathname,
- match,
- },
- children
+
+
+ {Children.map(children, (tab, index) =>
+ tab && isValidElement(tab) ? (
+
+ cloneElement(tab, {
+ context: 'content',
+ resource,
+ record,
+ basePath,
+ })
+ }
+ />
+ ) : null
)}
-
-
-
- {Children.map(children, (tab, index) =>
- tab && isValidElement(tab) ? (
-
- cloneElement(tab, {
- context: 'content',
- resource,
- record,
- basePath,
- })
- }
- />
- ) : null
- )}
-
- );
- }
-}
+
+ );
+};
TabbedShowLayout.propTypes = {
children: PropTypes.node,
@@ -139,7 +133,6 @@ TabbedShowLayout.propTypes = {
basePath: PropTypes.string,
value: PropTypes.number,
version: PropTypes.number,
- translate: PropTypes.func,
tabs: PropTypes.element,
};
@@ -147,9 +140,4 @@ TabbedShowLayout.defaultProps = {
tabs:
,
};
-const enhance = compose(
- withRouter,
- translate
-);
-
-export default enhance(TabbedShowLayout);
+export default withRouter(TabbedShowLayout);
diff --git a/packages/ra-ui-materialui/src/input/Labeled.tsx b/packages/ra-ui-materialui/src/input/Labeled.tsx
index 46d91055fe4..1e0f64837e3 100644
--- a/packages/ra-ui-materialui/src/input/Labeled.tsx
+++ b/packages/ra-ui-materialui/src/input/Labeled.tsx
@@ -61,6 +61,7 @@ export const Labeled: FunctionComponent
= ({
input,
isRequired,
label,
+ margin = 'dense',
meta,
resource,
source,
@@ -82,6 +83,7 @@ export const Labeled: FunctionComponent = ({
className={className}
fullWidth={fullWidth}
error={meta && meta.touched && !!meta.error}
+ margin={margin}
>