From e1e8efd6b948f1aba4372075a43a098a403525b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 18 May 2023 10:21:32 +0200 Subject: [PATCH] TablePagination fixes & DS application (#673) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 97 ++++++++++------ .../molecules/TablePagination.stories.js | 104 ++++++++++++++++++ 3 files changed, 170 insertions(+), 32 deletions(-) create mode 100644 packages/react-ui/storybook/stories/molecules/TablePagination.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f9852ccf3..e1ddb3691 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- TablePagination fixes & DS application [#673](https://github.com/CartoDB/carto-react/pull/673) - Remove ReactDOMServer dependency and simplify avatar image fallback [#672](https://github.com/CartoDB/carto-react/pull/672) - Remove @mui/styles after dumping makeStyles [#670](https://github.com/CartoDB/carto-react/pull/670) - Add tooltip prop to ComparativeCategoryWidgetUI [#667](https://github.com/CartoDB/carto-react/pull/667) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index f7a96c1c2..dd9f165ec 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -2,6 +2,7 @@ import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE, ICON_SIZE_SMALL } from '../../themeC import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; +import Typography from '../../../components/atoms/Typography'; const tooltipArrowSize = 1; const tooltipSeparation = 0.5; @@ -211,39 +212,65 @@ export const dataDisplayOverrides = { // Table MuiTablePagination: { + defaultProps: { + SelectProps: { + variant: 'outlined', + size: 'small' + }, + labelDisplayedRows: ({ from, to, count }) => { + return ( + <> + + {`${from}-${to}`} + + {` of ${count}`} + + ); + } + }, styleOverrides: { - select: { - paddingRight: getSpacing(7.5), - paddingLeft: getSpacing(1.5) + root: { + borderBottom: 0 }, - input: { - height: getSpacing(4), - width: 'auto', - border: `2px solid ${commonPalette.divider}`, - borderRadius: getSpacing(0.5), - fontWeight: themeTypography.fontWeightMedium, - paddingRight: getSpacing(3), - '& .MuiSelect-icon': { - top: '50%', - transform: 'translateY(-50%)', - width: getSpacing(2.25), - height: getSpacing(2.25), - right: getSpacing(0.75) - } + toolbar: { + minHeight: '0 !important', + padding: '0 !important', + height: getSpacing(6) }, - caption: { + selectLabel: { + margin: 0, ...themeTypography.caption, - '&:first-of-type': { - color: commonPalette.text.secondary + fontWeight: themeTypography.fontWeightMedium + }, + selectIcon: { + '&.MuiSvgIcon-root': { + right: getSpacing(1) } }, - toolbar: { - minHeight: 0, - marginTop: getSpacing(1) + input: { + marginRight: getSpacing(2), + marginLeft: getSpacing(1), + width: 'auto', + paddingRight: getSpacing(3) + }, + displayedRows: { + color: commonPalette.text.secondary }, actions: { - '& button:last-child': { - marginLeft: getSpacing(2) + marginLeft: getSpacing(1), + + '.MuiIconButton-root': { + '&:not(.Mui-disabled)': { + color: commonPalette.text.secondary + }, + '& + .MuiIconButton-root': { + marginLeft: getSpacing(0.5) + } } } } @@ -257,13 +284,8 @@ export const dataDisplayOverrides = { styleOverrides: { root: { transition: 'background-color 0.25s ease', - '&:not(.MuiTableRow-head) th, td': { - borderColor: commonPalette.divider, - '&:not(.MuiTableCell-sizeSmall)': { - padding: getSpacing(1, 2), - height: getSpacing(6) - } - }, + borderColor: commonPalette.divider, + '&.MuiTableRow-hover:hover': { cursor: 'pointer' } @@ -272,6 +294,17 @@ export const dataDisplayOverrides = { }, MuiTableCell: { styleOverrides: { + root: { + padding: getSpacing(0.5, 2), + height: getSpacing(6), + + '&.MuiTableCell-sizeSmall': { + height: getSpacing(4) + }, + '&.MuiTableCell-footer': { + padding: 0 + } + }, head: { ...themeTypography.caption, fontWeight: themeTypography.fontWeightMedium, diff --git a/packages/react-ui/storybook/stories/molecules/TablePagination.stories.js b/packages/react-ui/storybook/stories/molecules/TablePagination.stories.js new file mode 100644 index 000000000..54ac2481c --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/TablePagination.stories.js @@ -0,0 +1,104 @@ +import React, { useState } from 'react'; +import { + Box, + TableRow, + TableCell, + TableHead, + TableContainer, + TableBody, + Table, + TablePagination, + TableFooter +} from '@mui/material'; + +function createData(name, calories, fat) { + return { name, calories, fat }; +} +const rows = [ + createData('Cupcake', 305, 3.7), + createData('Donut', 452, 25.0), + createData('Frozen yoghurt', 159, 6.0), + createData('Ice cream sandwich', 237, 9.0), + createData('KitKat', 518, 26.0) +]; + +const options = { + title: 'Molecules/TablePagination', + component: TablePagination, + argTypes: {}, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/C4R-Components?node-id=1534-33541&t=EpJKKbIbCuhioYR9-0' + }, + status: { + type: 'validated' + } + } +}; + +export default options; + +const PlaygroundTemplate = (args) => { + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(10); + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + return ( + + ); +}; + +const TableExampleTemplate = (args) => { + return ( + + + + + + # + Name + Calories + Fat + + + + {[...rows, ...rows].map((row, index) => ( + + + {index + 1} + + {row.name} + {row.calories} + {row.fat} + + ))} + + + + + + +
+ + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); + +export const TableExample = TableExampleTemplate.bind({});