diff --git a/CHANGELOG.md b/CHANGELOG.md index 986a1f39d16..7311279d35b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,6 @@ * Add ability to opt out of `sanitizeEmptyValues` in `` and `` ([5077](https://github.com/marmelab/react-admin/pull/5077)) ([Kmaschta](https://github.com/Kmaschta)) * Add ability to make the `` not disabled by default ([5002](https://github.com/marmelab/react-admin/pull/5002)) ([Luwangel](https://github.com/Luwangel)) * Add ability to cutomize Add and Remove buttons in `` ([4818](https://github.com/marmelab/react-admin/pull/4818)) ([manishsundriyal](https://github.com/manishsundriyal)) -* Add scroll buttons to Tabs when they go beyond the available space ([4538](https://github.com/marmelab/react-admin/pull/4538)) ([JulienMattiussi](https://github.com/JulienMattiussi)) * Fix bad type for `useQuery` options (`onError` -> `onFailure`) ([5130](https://github.com/marmelab/react-admin/pull/5130)) ([fzaninotto](https://github.com/fzaninotto)) * Fix `` throws exception on custom pages ([5129](https://github.com/marmelab/react-admin/pull/5129)) ([fzaninotto](https://github.com/fzaninotto)) * Fix `TypeError` when suggested element in `` is empty ([5125](https://github.com/marmelab/react-admin/pull/5125)) ([fzaninotto](https://github.com/fzaninotto)) diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index 8310ed35587..bbf3019c96e 100644 --- a/docs/CreateEdit.md +++ b/docs/CreateEdit.md @@ -724,7 +724,6 @@ Here are all the props accepted by the `` component: * `save`: The function invoked when the form is submitted. This is passed automatically by `react-admin` when the form component is used inside `Create` and `Edit` components. * `saving`: A boolean indicating whether a save operation is ongoing. This is passed automatically by `react-admin` when the form component is used inside `Create` and `Edit` components. * [`warnWhenUnsavedChanges`](#warning-about-unsaved-changes) -* `scrollable`: A boolean, `true` by default. `` uses Material UI scrollable buttons when there are too many tabs to display. If you prefer the screen to expand with the tabs, set it to `false`. * [`sanitizeEmptyValues`](#setting-empty-values-to-null) {% raw %} diff --git a/docs/Show.md b/docs/Show.md index 16eb3f0486d..b87ca3b8b4b 100644 --- a/docs/Show.md +++ b/docs/Show.md @@ -314,8 +314,6 @@ export const PostShow = (props) => ( ``` {% endraw %} -**Tip**: By default, `` use Material UI scrollable buttons when there are too many tabs to display. If you prefer the screen to expand with the tabs, add this prop: `scrollable={false}`. - To style the tabs, the `` component accepts two props: - `className` is passed to the tab *header* diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index 19c44c39a4f..0566c0fbd12 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import Divider from '@material-ui/core/Divider'; import { Route } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; -import classnames from 'classnames'; import { useRouteMatch } from 'react-router-dom'; import { escapePath } from 'ra-core'; @@ -16,7 +15,6 @@ const sanitizeRestProps = ({ record, resource, basePath, - scrollable, version, initialValues, staticContext, @@ -28,23 +26,10 @@ const sanitizeRestProps = ({ const useStyles = makeStyles( theme => ({ content: { - paddingTop: props => - props.scrollable ? theme.spacing(7) : theme.spacing(1), // When using scrollable tabs, leave enough height for the tab content + paddingTop: theme.spacing(1), paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), }, - scrollableDivider: { - marginTop: theme.spacing(6), - position: 'absolute', - width: '100%', - }, - scrollableTabs: { - position: 'absolute', - width: '100%', - }, - formRelative: { - position: 'relative', - }, }), { name: 'RaTabbedShowLayout' } ); @@ -96,7 +81,6 @@ const TabbedShowLayout = props => { className, record, resource, - scrollable, version, value, tabs, @@ -106,23 +90,11 @@ const TabbedShowLayout = props => { const classes = useStyles(props); - const scrollableProps = scrollable - ? { scrollable: true, scrollButtons: 'on', variant: 'scrollable' } - : {}; - return ( -
- {cloneElement(tabs, { classes, ...scrollableProps }, children)} +
+ {cloneElement(tabs, {}, children)} - +
{Children.map(children, (tab, index) => tab && isValidElement(tab) ? ( @@ -155,7 +127,6 @@ TabbedShowLayout.propTypes = { record: PropTypes.object, resource: PropTypes.string, basePath: PropTypes.string, - scrollable: PropTypes.bool, value: PropTypes.number, version: PropTypes.number, tabs: PropTypes.element, @@ -163,7 +134,6 @@ TabbedShowLayout.propTypes = { TabbedShowLayout.defaultProps = { tabs: , - scrollable: true, }; export default TabbedShowLayout; diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js index d5aec3f76be..610427e3e98 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -9,7 +9,7 @@ export const getTabFullPath = (tab, index, baseUrl) => tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : '' }`; -const TabbedShowLayoutTabs = ({ classes, children, scrollable, ...rest }) => { +const TabbedShowLayoutTabs = ({ children, ...rest }) => { const location = useLocation(); const match = useRouteMatch(); @@ -17,17 +17,8 @@ const TabbedShowLayoutTabs = ({ classes, children, scrollable, ...rest }) => { // so we can use it as a way to determine the current tab const value = location.pathname; - const scrollableProps = scrollable - ? { className: classes.scrollableTabs } - : {}; - return ( - + {Children.map(children, (tab, index) => { if (!tab || !isValidElement(tab)) return null; // Builds the full tab tab which is the concatenation of the last matched route in the @@ -46,7 +37,6 @@ const TabbedShowLayoutTabs = ({ classes, children, scrollable, ...rest }) => { }; TabbedShowLayoutTabs.propTypes = { - classes: PropTypes.object, children: PropTypes.node, }; diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js index d65644fb4b1..35a8c36566d 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.js +++ b/packages/ra-ui-materialui/src/form/TabbedForm.js @@ -74,7 +74,6 @@ import TabbedFormTabs, { getTabFullPath } from './TabbedFormTabs'; * @prop {ReactElement} toolbar The element displayed at the bottom of the form, containing the SaveButton * @prop {string} variant Apply variant to all inputs. Possible values are 'standard', 'outlined', and 'filled' (default) * @prop {string} margin Apply variant to all inputs. Possible values are 'none', 'normal', and 'dense' (default) - * @prop {boolean} scrollable The tabs become scrollable when they extend beyond the witdh of the form * @prop {boolean} sanitizeEmptyValues Wether or not deleted record attributes should be recreated with a `null` value (default: true) * * @param {Prop} props @@ -101,7 +100,6 @@ TabbedForm.propTypes = { submitOnEnter: PropTypes.bool, undoable: PropTypes.bool, validate: PropTypes.func, - scrollable: PropTypes.bool, sanitizeEmptyValues: PropTypes.bool, }; @@ -109,23 +107,10 @@ const useStyles = makeStyles( theme => ({ errorTabButton: { color: theme.palette.error.main }, content: { - paddingTop: props => - props.scrollable ? theme.spacing(7) : theme.spacing(1), // When using scrollable tabs, leave enough height for the tab content + paddingTop: theme.spacing(1), paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), }, - scrollableDivider: { - marginTop: theme.spacing(6), - position: 'absolute', - width: '100%', - }, - scrollableTabs: { - position: 'absolute', - width: '100%', - }, - formRelative: { - position: 'relative', - }, }), { name: 'RaTabbedForm' } ); @@ -145,7 +130,6 @@ export const TabbedFormView = props => { redirect: defaultRedirect, resource, saving, - scrollable = true, setRedirect, submitOnEnter, tabs, @@ -163,16 +147,9 @@ export const TabbedFormView = props => { const location = useLocation(); const url = match ? match.url : location.pathname; - const scrollableProps = scrollable - ? { scrollable: true, scrollButtons: 'on', variant: 'scrollable' } - : {}; return (
{React.cloneElement( @@ -180,17 +157,11 @@ export const TabbedFormView = props => { { classes, url, - title: 'FormTabRow', tabsWithErrors, - ...scrollableProps, }, children )} - +
{/* All tabs are rendered (not only the one in focus), to allow validation on tabs not in focus. The tabs receive a `hidden` property, which they'll @@ -316,7 +287,6 @@ const sanitizeRestProps = ({ reset, resetSection, save, - scrollable, staticContext, submit, submitAsSideEffect, diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.spec.js b/packages/ra-ui-materialui/src/form/TabbedForm.spec.js index f2955e81c13..866298afdc8 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.spec.js +++ b/packages/ra-ui-materialui/src/form/TabbedForm.spec.js @@ -92,63 +92,4 @@ describe('', () => { expect(tabs).toEqual(['tab1', 'tab3', 'tab4']); }); }); - - it('should have scroll buttons when too much Tabs />', () => { - const { queryByLabelText, queryByTitle } = renderWithRedux( - - - - - - - - - - - - ); - - const tabs = queryByLabelText('Form-tabs'); - - expect(tabs.children).toHaveLength(7); - - const tabRow = queryByTitle('FormTabRow'); - - expect(tabRow.children).toHaveLength(4); - }); - - it('should not have scroll buttons when too much Tabs />', () => { - const { queryByLabelText, queryByTitle } = renderWithRedux( - - - - - - - - - - - - ); - - const tabs = queryByLabelText('Form-tabs'); - - expect(tabs.children).toHaveLength(7); - - const tabRow = queryByTitle('FormTabRow'); - - expect(tabRow.children).toHaveLength(1); - }); }); diff --git a/packages/ra-ui-materialui/src/form/TabbedFormTabs.js b/packages/ra-ui-materialui/src/form/TabbedFormTabs.js index 7afc03dce30..9e670b1255d 100644 --- a/packages/ra-ui-materialui/src/form/TabbedFormTabs.js +++ b/packages/ra-ui-materialui/src/form/TabbedFormTabs.js @@ -14,7 +14,6 @@ const TabbedFormTabs = ({ classes, url, tabsWithErrors, - scrollable, ...rest }) => { const location = useLocation(); @@ -35,18 +34,8 @@ const TabbedFormTabs = ({ ? location.pathname : validTabPaths[0]; - const scrollableProps = scrollable - ? { className: classes.scrollableTabs } - : {}; - return ( - + {Children.map(children, (tab, index) => { if (!isValidElement(tab)) return null;