fix: ProgressColorBar, TableInput Action icons and TotalLayout colors

packages/components/src/form/TableInput/TableInputRow.js

@@ -168,12 +168,12 @@ const TableInputRow = ({
               {editing ? (
                 <>
                   <ActionButton
-                    icon={<CheckIcon />}
+                    icon={<CheckIcon width={18} height={18} />}
                     tooltip={labels.accept || 'Accept'}
                     onClick={handleOnEdit}
                   />
                   <ActionButton
-                    icon={<DeleteIcon />}
+                    icon={<DeleteIcon width={18} height={18} />}
                     tooltip={labels.cancel || 'Cancel'}
                     onClick={cancelEditing}
                   />
@@ -183,21 +183,21 @@ const TableInputRow = ({
                   <>
                     {addable && (
                       <ActionButton
-                        icon={<AddCircleIcon />}
+                        icon={<AddCircleIcon width={18} height={18} />}
                         tooltip={labels.add || 'Add'}
                         onClick={() => onItemAdd(row)}
                       />
                     )}
                     {editable && (
                       <ActionButton
-                        icon={<EditWriteIcon />}
+                        icon={<EditWriteIcon width={18} height={18} />}
                         tooltip={labels.edit || 'Edit'}
                         onClick={initEditing}
                       />
                     )}
                     {removable && (
                       <ActionButton
-                        icon={<DeleteBinIcon />}
+                        icon={<DeleteBinIcon width={18} height={18} />}
                         tooltip={labels.remove || 'Remove'}
                         onClick={() => onRemove(index)}
                       />

packages/components/src/informative/ProgressColorBar/ProgressColorBar.constants.js

@@ -5,7 +5,6 @@ export const PROGRESSCOLORBAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
 
 export const PROGRESSCOLORBAR_DEFAULT_PROPS = {
   animate: false,
-  color: 'orange',
   label: '',
   labelLeft: 'labelLeft',
   labelRight: 'LabelRight',

packages/components/src/informative/ProgressColorBar/ProgressColorBar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Progress as MantineProgress } from '@mantine/core';
 import { Box, Text } from '@bubbles-ui/components';
+import { isEmpty, trim } from 'lodash';
 import {
   PROGRESSCOLORBAR_DEFAULT_PROPS,
   PROGRESSCOLORBAR_PROP_TYPES,
@@ -10,7 +11,7 @@ import { ProgressColorBarStyles } from './ProgressColorBar.styles';
 const ProgressColorBar = ({
   animate,
   label,
-  color,
+  color: colorProp,
   radius,
   sections,
   size,
@@ -20,13 +21,17 @@ const ProgressColorBar = ({
   labelRight,
 }) => {
   const { classes, theme } = ProgressColorBarStyles();
-  if (value < 25) {
-    color = theme.other.progress.content.color.phatic.negative;
-  } else if (value < 75) {
-    color = theme.other.progress.content.color.phatic.attention;
-  } else {
-    color = theme.other.progress.content.color.phatic.positive;
-  }
+
+  const color = React.useMemo(() => {
+    if (value < 25) {
+      return theme.other.progress.content.color.phatic.negative;
+    }
+    if (value < 75) {
+      return theme.other.progress.content.color.phatic.attention;
+    }
+    return theme.other.progress.content.color.phatic.positive;
+  }, [value]);
+
   return (
     <Box>
       {labelLeft && labelRight && (
@@ -38,7 +43,7 @@ const ProgressColorBar = ({
       <MantineProgress
         value={value}
         label={label}
-        color={color}
+        color={trim(colorProp ?? '') !== '' ? colorProp : color}
         animate={animate}
         radius={radius}
         sections={sections}

packages/components/src/layout/TotalLayout/TotalLayoutContainer/TotalLayoutContainer.js

@@ -5,9 +5,9 @@ import { Box } from '../../Box';
 import { Stack } from '../../Stack';
 import { TotalLayoutContainerStyles } from './TotalLayoutContainer.styles';
 
-const TotalLayoutContainer = ({ Header, Footer, scrollRef, children }) => {
+const TotalLayoutContainer = ({ Header, Footer, scrollRef, children, clean }) => {
   const [topScroll, setTopScroll] = React.useState(false);
-  const { classes } = TotalLayoutContainerStyles({ topScroll }, { name: 'TotalLayoutContainer' });
+  const { classes } = TotalLayoutContainerStyles({ clean, topScroll }, { name: 'TotalLayoutContainer' });
 
   // Define scroll and window resizing behavior
   const handleScroll = () => {
@@ -57,6 +57,7 @@ TotalLayoutContainer.propTypes = {
   Footer: PropTypes.any,
   children: PropTypes.any,
   scrollRef: PropTypes.object,
+  clean: PropTypes.bool,
 };
 
 export { TotalLayoutContainer };

packages/components/src/layout/TotalLayout/TotalLayoutContainer/TotalLayoutContainer.styles.js

@@ -1,17 +1,17 @@
 import { createStyles } from '@mantine/styles';
 
-const TotalLayoutContainerStyles = createStyles((theme, { topScroll }) => ({
+const TotalLayoutContainerStyles = createStyles((theme, { clean, topScroll }) => ({
   root: {
     height: '100vh',
-    backgroundColor: theme.other.core.color.neutral['50'],
+    backgroundColor: !clean && theme.other.core.color.neutral['50'],
     width: '100%',
   },
   header: {
     boxShadow: topScroll && '0 8px 24px rgba(149, 157, 165, 0.2)',
     zIndex: 99,
   },
   footerContainer: {
-    backgroundColor: theme.other.core.color.neutral['50'],
+    backgroundColor: !clean && theme.other.core.color.neutral['50'],
   },
 }));
 

packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js

@@ -14,10 +14,17 @@ const TotalLayoutFooterContainer = ({
   fullWidth,
   showFooterBorder: _showFooterBorder,
   style,
+  width,
 }) => {
   const [showFooterBorder, setShowFooterBorder] = React.useState(false);
   const { classes } = TotalLayoutFooterContainerStyles(
-    { showFooterBorder: showFooterBorder || _showFooterBorder, leftOffset, fixed, fullWidth },
+    {
+      showFooterBorder: showFooterBorder || _showFooterBorder,
+      leftOffset,
+      fixed,
+      fullWidth,
+      width,
+    },
     { name: 'TotalLayoutFooterContainer' },
   );
 
@@ -78,6 +85,7 @@ TotalLayoutFooterContainer.propTypes = {
   fullWidth: PropTypes.bool,
   showFooterBorder: PropTypes.bool,
   style: PropTypes.object,
+  width: PropTypes.number,
 };
 
 export { TotalLayoutFooterContainer };

packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js

@@ -1,18 +1,18 @@
 import { createStyles } from '@mantine/styles';
 
 const TotalLayoutFooterContainerStyles = createStyles(
-  (theme, { showFooterBorder, leftOffset, fullWidth, fixed }) => ({
+  (theme, { showFooterBorder, leftOffset, fullWidth, width, fixed }) => ({
     root: {},
     footer: {
-      width: fullWidth ? 'calc(100% - 100px)' : 928,
+      width: fullWidth ? 'calc(100% - 100px)' : width || 928,
       marginLeft: leftOffset,
       backgroundColor: 'white',
       borderTop: showFooterBorder && `1px solid ${theme.other.divider.background.color.default}`,
       zIndex: 1,
       position: fixed ? 'fixed' : 'relative',
       bottom: 0,
       '@media (min-width: 1920px)': {
-        maxWidth: 1400,
+        maxWidth: width || 1400,
       },
     },
   }),

packages/components/src/overlay/Drawer/Drawer.styles.js

@@ -1,7 +1,7 @@
 import { createStyles } from '@mantine/styles';
 import { getPaddings } from '../../theme.mixins';
 
-export const DrawerStyles = createStyles((theme, { empty, shadow, contentPadding }) => {
+const DrawerStyles = createStyles((theme, { empty, shadow, contentPadding }) => {
   const header = {
     ...getPaddings(theme.spacing[3], theme.spacing[3]),
     zIndex: 9,
@@ -11,6 +11,7 @@ export const DrawerStyles = createStyles((theme, { empty, shadow, contentPadding
     header.right = 0;
     header.top = 0;
   }
+
   return {
     header,
     drawer: {
@@ -20,12 +21,16 @@ export const DrawerStyles = createStyles((theme, { empty, shadow, contentPadding
       '&:focus:not(:focus-visible)': {
         boxShadow: shadow && theme.shadows.shadow04,
       },
+      backgroundColor: theme.other.global.background.color.surface.default,
     },
     content: {
       padding: empty ? 0 : !isNaN(contentPadding) ? contentPadding : theme.spacing[7],
       flex: 1,
       overflowY: 'auto',
       // padding: `0px ${theme.spacing[7]}px ${theme.spacing[7]}px ${theme.spacing[7]}px`,
+      backgroundColor: theme.other.global.background.color.surface.default,
     },
   };
 });
+
+export { DrawerStyles };

packages/editors/src/utils/use-extensions.js

@@ -1,7 +1,7 @@
 import { Children, isValidElement } from 'react';
 
-export const useExtensions = (children) => {
-  const extensions = Children.toArray(children)
+const useExtensions = (children) =>
+  Children.toArray(children)
     .filter((child) => isValidElement(child))
     .reduce((stack, current) => {
       if (current.props.children) {
@@ -15,5 +15,4 @@ export const useExtensions = (children) => {
     }, [])
     .filter((extension, index, stack) => stack.indexOf(extension) === index);
 
-  return extensions;
-};
+export { useExtensions };

packages/icons/solid/esm/index.d.ts

@@ -51,6 +51,7 @@ export { default as DislikeIcon } from './DislikeIcon'
 export { default as DoneSquareAlternateIcon } from './DoneSquareAlternateIcon'
 export { default as DownloadIcon } from './DownloadIcon'
 export { default as EditWriteIcon } from './EditWriteIcon'
+export { default as EditIcon } from './EditIcon'
 export { default as EditorCenterAlignIcon } from './EditorCenterAlignIcon'
 export { default as EditorHyperlinkIcon } from './EditorHyperlinkIcon'
 export { default as EditorIndentDecreaseIcon } from './EditorIndentDecreaseIcon'

packages/icons/solid/esm/index.js

@@ -51,6 +51,7 @@ export { default as DislikeIcon } from './DislikeIcon.js'
 export { default as DoneSquareAlternateIcon } from './DoneSquareAlternateIcon.js'
 export { default as DownloadIcon } from './DownloadIcon.js'
 export { default as EditWriteIcon } from './EditWriteIcon.js'
+export { default as EditIcon } from './EditIcon.js'
 export { default as EditorCenterAlignIcon } from './EditorCenterAlignIcon.js'
 export { default as EditorHyperlinkIcon } from './EditorHyperlinkIcon.js'
 export { default as EditorIndentDecreaseIcon } from './EditorIndentDecreaseIcon.js'

packages/icons/solid/index.d.ts

@@ -51,6 +51,7 @@ export { default as DislikeIcon } from './DislikeIcon'
 export { default as DoneSquareAlternateIcon } from './DoneSquareAlternateIcon'
 export { default as DownloadIcon } from './DownloadIcon'
 export { default as EditWriteIcon } from './EditWriteIcon'
+export { default as EditIcon } from './EditIcon'
 export { default as EditorCenterAlignIcon } from './EditorCenterAlignIcon'
 export { default as EditorHyperlinkIcon } from './EditorHyperlinkIcon'
 export { default as EditorIndentDecreaseIcon } from './EditorIndentDecreaseIcon'

packages/icons/solid/index.js

@@ -51,6 +51,7 @@ module.exports.DislikeIcon = require("./DislikeIcon.js")
 module.exports.DoneSquareAlternateIcon = require("./DoneSquareAlternateIcon.js")
 module.exports.DownloadIcon = require("./DownloadIcon.js")
 module.exports.EditWriteIcon = require("./EditWriteIcon.js")
+module.exports.EditIcon = require("./EditIcon.js")
 module.exports.EditorCenterAlignIcon = require("./EditorCenterAlignIcon.js")
 module.exports.EditorHyperlinkIcon = require("./EditorHyperlinkIcon.js")
 module.exports.EditorIndentDecreaseIcon = require("./EditorIndentDecreaseIcon.js")