feat(components): add clean prop to Kanban

it removes the external padding and background color Ticket: issue/Transversal-319 Reviewed-by: @MIGUELez11 Refs: #203
leemonade · Nov 5, 2024 · 4bea971 · 4bea971
1 parent f7c6207
commit 4bea971
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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',