From e8475957dfeba9cb1bad93124e795370cdf1751d Mon Sep 17 00:00:00 2001 From: Johan Sosa Date: Thu, 25 Jan 2024 22:20:03 +0100 Subject: [PATCH] fix: ProgressColorBar, TableInput Action icons and TotalLayout colors --- .../src/form/TableInput/TableInputRow.js | 10 ++++---- .../ProgressColorBar.constants.js | 1 - .../ProgressColorBar/ProgressColorBar.js | 23 +++++++++++-------- .../TotalLayoutContainer.js | 5 ++-- .../TotalLayoutContainer.styles.js | 6 ++--- .../TotalLayoutFooterContainer.js | 10 +++++++- .../TotalLayoutFooterContainer.styles.js | 6 ++--- .../src/overlay/Drawer/Drawer.styles.js | 7 +++++- packages/editors/src/utils/use-extensions.js | 7 +++--- packages/icons/solid/esm/index.d.ts | 1 + packages/icons/solid/esm/index.js | 1 + packages/icons/solid/index.d.ts | 1 + packages/icons/solid/index.js | 1 + packages/icons/src/solid/edit.svg | 3 +++ 14 files changed, 53 insertions(+), 29 deletions(-) create mode 100755 packages/icons/src/solid/edit.svg diff --git a/packages/components/src/form/TableInput/TableInputRow.js b/packages/components/src/form/TableInput/TableInputRow.js index 766e7ccd3..d6d03f132 100644 --- a/packages/components/src/form/TableInput/TableInputRow.js +++ b/packages/components/src/form/TableInput/TableInputRow.js @@ -168,12 +168,12 @@ const TableInputRow = ({ {editing ? ( <> } + icon={} tooltip={labels.accept || 'Accept'} onClick={handleOnEdit} /> } + icon={} tooltip={labels.cancel || 'Cancel'} onClick={cancelEditing} /> @@ -183,21 +183,21 @@ const TableInputRow = ({ <> {addable && ( } + icon={} tooltip={labels.add || 'Add'} onClick={() => onItemAdd(row)} /> )} {editable && ( } + icon={} tooltip={labels.edit || 'Edit'} onClick={initEditing} /> )} {removable && ( } + icon={} tooltip={labels.remove || 'Remove'} onClick={() => onRemove(index)} /> diff --git a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.constants.js b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.constants.js index 91ebeae55..ae25a767f 100644 --- a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.constants.js +++ b/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', diff --git a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js index a4c5d7da5..311c7557f 100644 --- a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js +++ b/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 ( {labelLeft && labelRight && ( @@ -38,7 +43,7 @@ const ProgressColorBar = ({ { +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 }; diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutContainer/TotalLayoutContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutContainer/TotalLayoutContainer.styles.js index e0b4d773c..276134e35 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutContainer/TotalLayoutContainer.styles.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutContainer/TotalLayoutContainer.styles.js @@ -1,9 +1,9 @@ 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: { @@ -11,7 +11,7 @@ const TotalLayoutContainerStyles = createStyles((theme, { topScroll }) => ({ zIndex: 99, }, footerContainer: { - backgroundColor: theme.other.core.color.neutral['50'], + backgroundColor: !clean && theme.other.core.color.neutral['50'], }, })); diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js index 3c9e190b3..b99b2beb2 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js +++ b/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 }; diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js index 5c71c6881..fb562cb4f 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js @@ -1,10 +1,10 @@ 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}`, @@ -12,7 +12,7 @@ const TotalLayoutFooterContainerStyles = createStyles( position: fixed ? 'fixed' : 'relative', bottom: 0, '@media (min-width: 1920px)': { - maxWidth: 1400, + maxWidth: width || 1400, }, }, }), diff --git a/packages/components/src/overlay/Drawer/Drawer.styles.js b/packages/components/src/overlay/Drawer/Drawer.styles.js index 18234a7d8..7fa067ed5 100644 --- a/packages/components/src/overlay/Drawer/Drawer.styles.js +++ b/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 }; diff --git a/packages/editors/src/utils/use-extensions.js b/packages/editors/src/utils/use-extensions.js index 2149a0b67..e2d1c7832 100644 --- a/packages/editors/src/utils/use-extensions.js +++ b/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 }; diff --git a/packages/icons/solid/esm/index.d.ts b/packages/icons/solid/esm/index.d.ts index 5647d4093..b9543ce44 100644 --- a/packages/icons/solid/esm/index.d.ts +++ b/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' diff --git a/packages/icons/solid/esm/index.js b/packages/icons/solid/esm/index.js index b152f27ba..5f6105012 100644 --- a/packages/icons/solid/esm/index.js +++ b/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' diff --git a/packages/icons/solid/index.d.ts b/packages/icons/solid/index.d.ts index 5647d4093..b9543ce44 100644 --- a/packages/icons/solid/index.d.ts +++ b/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' diff --git a/packages/icons/solid/index.js b/packages/icons/solid/index.js index 57986757f..a8c32fd29 100644 --- a/packages/icons/solid/index.js +++ b/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") diff --git a/packages/icons/src/solid/edit.svg b/packages/icons/src/solid/edit.svg new file mode 100755 index 000000000..8b3c56949 --- /dev/null +++ b/packages/icons/src/solid/edit.svg @@ -0,0 +1,3 @@ + + +