diff --git a/packages/components/src/informative/Kanban/Kanban.js b/packages/components/src/informative/Kanban/Kanban.js index 981812fb..8a511970 100644 --- a/packages/components/src/informative/Kanban/Kanban.js +++ b/packages/components/src/informative/Kanban/Kanban.js @@ -11,6 +11,7 @@ export const KANBAN_DEFAULT_PROPS = { itemRender: ({ value }) => <>{value.title}, showNewOnFirstColumn: true, newItemLabel: 'Add new item', + clean: false, }; export const KANBAN_PROP_TYPES = { value: PropTypes.shape({ @@ -29,6 +30,7 @@ export const KANBAN_PROP_TYPES = { itemRender: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), showNewOnFirstColumn: PropTypes.bool, newItemLabel: PropTypes.string, + clean: PropTypes.bool, }; const Kanban = ({ @@ -39,8 +41,9 @@ const Kanban = ({ showNewOnFirstColumn, onNew, newItemLabel, + clean, }) => { - const { classes } = KanbanStyles({}); + const { classes } = KanbanStyles({ clean }, { name: 'Kanban' }); const onDragEnd = (result) => { // dropped nowhere diff --git a/packages/components/src/informative/Kanban/Kanban.styles.js b/packages/components/src/informative/Kanban/Kanban.styles.js index 3874bde7..4cba0678 100644 --- a/packages/components/src/informative/Kanban/Kanban.styles.js +++ b/packages/components/src/informative/Kanban/Kanban.styles.js @@ -1,6 +1,6 @@ import { createStyles } from '@mantine/styles'; -const KanbanStyles = createStyles((theme) => ({ +const KanbanStyles = createStyles((theme, { clean }) => ({ root: { display: 'flex', overflow: 'auto', @@ -9,8 +9,8 @@ const KanbanStyles = createStyles((theme) => ({ maxHeight: '100%', gap: theme.spacing[2], alignItems: 'stretch', - padding: theme.spacing[2], - backgroundColor: '#F8F9FB', + padding: clean ? 0 : theme.spacing[2], + backgroundColor: clean ? 'transparent' : '#F8F9FB', }, column: { display: 'inline-flex',