diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md index e22921e7e..a50c57622 100644 --- a/packages/calendars/CHANGELOG.md +++ b/packages/calendars/CHANGELOG.md @@ -1,5 +1,14 @@ # @bubbles-ui/calendars +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.72 + - @bubbles-ui/icons@1.2.72 + ## 1.2.71 ### Patch Changes diff --git a/packages/calendars/package.json b/packages/calendars/package.json index 8203ace28..dff2be43b 100644 --- a/packages/calendars/package.json +++ b/packages/calendars/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/calendars", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -59,8 +59,8 @@ "rrule": "^2.6.8" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.71", - "@bubbles-ui/icons": "^1.2.71", + "@bubbles-ui/components": "^1.2.72", + "@bubbles-ui/icons": "^1.2.72", "react": "^17.0.1", "react-dom": "^17.0.1", "webpack": "*" diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 077de1827..d6710fca1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,13 @@ # @bubbles-ui/components +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/icons@1.2.72 + ## 1.2.71 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 93ea4fb00..1c4dce151 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/components", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -61,7 +61,7 @@ "chromatic": "npx chromatic --project-token=7b10302a7b6b --build-script-name=build:storybook:raw" }, "dependencies": { - "@bubbles-ui/icons": "^1.2.71", + "@bubbles-ui/icons": "^1.2.72", "@emotion/react": "^11.10.0", "@heroicons/react": "^1.0.5", "@hookform/resolvers": "^3.3.2", diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js index 144f971a4..3b25766a4 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js @@ -71,9 +71,7 @@ const TotalLayoutHeader = ({ {/* CHILDREN */} {!!children && direction === 'column' && ( - - {children} - + {children} )} ); diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js index 3545fd5db..7083ebaf4 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js @@ -6,12 +6,10 @@ const TotalLayoutHeaderStyles = createStyles((theme, { children, direction, comp root: {}, headerContainer: { padding: `${!expandedHeader ? '16px' : '12px'} 24px`, - minHeight: !expandedHeader ? '72px' : '120px', - maxHeight: !expandedHeader ? '72px' : '120px', backgroundColor: 'white', }, - header: { height: '40px', maxHeight: '40px' }, - headerTools: { maxHeight: '40px', minHeight: '40px', marginTop: '12px' }, + header: { height: '40px' }, + headerTools: { marginTop: '12px' }, iconContainer: { display: 'flex', alignItems: 'center', diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js index 23cf00d07..9df20e727 100644 --- a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js +++ b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js @@ -17,7 +17,7 @@ import { AssetExpressTaskIcon } from '../FileIcon/AssetExpressTaskIcon'; import { AssetModuleIcon } from '../FileIcon/AssetModuleIcon'; import { AssetFeedbackIcon } from '../FileIcon/AssetFeedbackIcon'; import { FileItemDisplay } from '../../informative/FileItemDisplay'; -import { AssetDocumentIcon } from '../FileIcon/AssetDocumentIcon'; +import { AssetDocumentIconSmall } from '../FileIcon/AssetDocumentIcon'; const CardEmptyCover = memo(({ icon, fileType }) => { const pairColumnRef = useRef(null); @@ -28,7 +28,7 @@ const CardEmptyCover = memo(({ icon, fileType }) => { { key: 'image', value: }, { key: 'bookmark', value: }, { key: 'feedback', value: }, - { key: 'document', value: }, + { key: 'document', value: }, { key: 'task', value: }, { key: 'taskexpress', diff --git a/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.constants.js b/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.constants.js index b813b179c..d4ef0dc55 100644 --- a/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.constants.js +++ b/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.constants.js @@ -10,3 +10,14 @@ export const DOCUMENT_ICON_PROP_TYPES = { height: PropTypes.number, color: PropTypes.string, }; + +export const DOCUMENT_ICON_SMALL_DEFAULT_PROPS = { + width: 18, + height: 18, + color: '#7E8795', +}; +export const DOCUMENT_ICON_SMALL_PROP_TYPES = { + width: PropTypes.number, + height: PropTypes.number, + color: PropTypes.string, +}; diff --git a/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.js b/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.js index 04a719741..d1825df73 100644 --- a/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.js +++ b/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIcon.js @@ -8,7 +8,7 @@ const AssetDocumentIcon = ({ width, height, color }) => ( ( diff --git a/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIconSmall.js b/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIconSmall.js new file mode 100644 index 000000000..96c7485e4 --- /dev/null +++ b/packages/components/src/misc/FileIcon/AssetDocumentIcon/AssetDocumentIconSmall.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { + DOCUMENT_ICON_SMALL_PROP_TYPES, + DOCUMENT_ICON_SMALL_DEFAULT_PROPS, +} from './AssetDocumentIcon.constants'; + +const AssetDocumentIconSmall = ({ width, height, color }) => ( + + + +); + +AssetDocumentIconSmall.defaultProps = DOCUMENT_ICON_SMALL_DEFAULT_PROPS; +AssetDocumentIconSmall.propTypes = DOCUMENT_ICON_SMALL_PROP_TYPES; + +AssetDocumentIconSmall.displayName = 'AssetTaskIcon'; +export default AssetDocumentIconSmall; +export { AssetDocumentIconSmall }; diff --git a/packages/components/src/misc/FileIcon/AssetDocumentIcon/index.js b/packages/components/src/misc/FileIcon/AssetDocumentIcon/index.js index b415afdc8..c2af2e9e4 100644 --- a/packages/components/src/misc/FileIcon/AssetDocumentIcon/index.js +++ b/packages/components/src/misc/FileIcon/AssetDocumentIcon/index.js @@ -1 +1,2 @@ export * from './AssetDocumentIcon'; +export * from './AssetDocumentIconSmall'; diff --git a/packages/components/src/misc/FileIcon/AssetMediaIcon/AssetMediaIcon.js b/packages/components/src/misc/FileIcon/AssetMediaIcon/AssetMediaIcon.js index 40cc211ed..91507323b 100644 --- a/packages/components/src/misc/FileIcon/AssetMediaIcon/AssetMediaIcon.js +++ b/packages/components/src/misc/FileIcon/AssetMediaIcon/AssetMediaIcon.js @@ -16,7 +16,7 @@ const AssetMediaIcon = ({ width, height, color }) => ( diff --git a/packages/components/src/misc/FileIcon/FileIcon.js b/packages/components/src/misc/FileIcon/FileIcon.js index a0e7b2830..837c9eb21 100644 --- a/packages/components/src/misc/FileIcon/FileIcon.js +++ b/packages/components/src/misc/FileIcon/FileIcon.js @@ -9,7 +9,7 @@ import { FileItemDisplay } from '../../informative/FileItemDisplay'; import { AssetAudioIcon } from './AssetAudioIcon'; import { AssetImageIcon } from './AssetImageIcon'; import { AssetBookmarkIcon } from './AssetBookmarkIcon'; -import { AssetDocumentIcon } from './AssetDocumentIcon'; +import { AssetDocumentIconSmall } from './AssetDocumentIcon'; export const FILE_ICON_DEFAULT_PROPS = { size: 16, @@ -36,7 +36,7 @@ const FileIcon = ({ fileType, fileExtension, label, size, color, iconStyle, ...p { key: 'bookmark', value: }, { key: 'path', value: }, { key: 'curriculum', value: }, - { key: 'document', value: }, + { key: 'document', value: }, { key: 'file', value: ( diff --git a/packages/editors/CHANGELOG.md b/packages/editors/CHANGELOG.md index 65f6e119c..25ffddd4a 100644 --- a/packages/editors/CHANGELOG.md +++ b/packages/editors/CHANGELOG.md @@ -1,5 +1,14 @@ # @bubbles-ui/editors +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.72 + - @bubbles-ui/icons@1.2.72 + ## 1.2.71 ### Patch Changes diff --git a/packages/editors/package.json b/packages/editors/package.json index 2e3ce8e86..42b7a0a79 100644 --- a/packages/editors/package.json +++ b/packages/editors/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/editors", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -79,8 +79,8 @@ "styled-icons": "^10.45.0" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.71", - "@bubbles-ui/icons": "^1.2.71", + "@bubbles-ui/components": "^1.2.72", + "@bubbles-ui/icons": "^1.2.72", "react": "^17.0.1", "react-dom": "^17.0.1", "webpack": "*" diff --git a/packages/editors/src/form/TextEditor/TextEditor.js b/packages/editors/src/form/TextEditor/TextEditor.js index a74798841..2ec1afb90 100644 --- a/packages/editors/src/form/TextEditor/TextEditor.js +++ b/packages/editors/src/form/TextEditor/TextEditor.js @@ -12,7 +12,7 @@ import Placeholder from '@tiptap/extension-placeholder'; import Paragraph from '@tiptap/extension-paragraph'; import { useExtensions } from '../../utils'; import { BubbleMenu } from '../BubbleMenu'; -import { Toolbar, TOOLBAR_POSITIONS } from '../Toolbar'; +import { Toolbar, HeaderToolbar, TOOLBAR_POSITIONS } from '../Toolbar'; import { TextEditorProvider } from '../TextEditorProvider'; import { TextEditorStyles } from './TextEditor.styles'; @@ -62,6 +62,7 @@ const TextEditor = ({ isFocus: false, acceptedTags: acceptedTags.join('|'), }); + const [isToolbarReady, setIsToolbarReady] = React.useState(false); const extensions = useExtensions(children); const { classes, cx } = TextEditorStyles({}, { name: 'TextEditor' }); const editor = useEditor({ @@ -200,9 +201,15 @@ const TextEditor = ({ } }, [placeholder]); + React.useEffect(() => { + if (toolbarPortal) { + setIsToolbarReady(true); + } + }, [toolbarPortal]); + const ToolbarComponent = React.useMemo( () => - toolbarPortal + isToolbarReady ? () => createPortal( ), - [toolbarPortal], + [isToolbarReady], ); return ( @@ -237,7 +244,7 @@ const TextEditor = ({ {readOnly ? null : ( - + {isToolbarReady && } )} diff --git a/packages/extras/CHANGELOG.md b/packages/extras/CHANGELOG.md index 50a34daeb..76e3338a7 100644 --- a/packages/extras/CHANGELOG.md +++ b/packages/extras/CHANGELOG.md @@ -1,5 +1,14 @@ # @bubbles-ui/extras +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.72 + - @bubbles-ui/icons@1.2.72 + ## 1.2.71 ### Patch Changes diff --git a/packages/extras/package.json b/packages/extras/package.json index 2c6c653c1..30a92271d 100644 --- a/packages/extras/package.json +++ b/packages/extras/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/extras", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -53,8 +53,8 @@ "swiper": "^8.1.4" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.71", - "@bubbles-ui/icons": "^1.2.71", + "@bubbles-ui/components": "^1.2.72", + "@bubbles-ui/icons": "^1.2.72", "@mantine/core": "5.2.4", "@mantine/hooks": "5.2.4", "react": "^17.0.1", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 5fd8e31d9..537c5f83d 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @bubbles-ui/icons +## 1.2.72 + +### Patch Changes + +- Versions bump + ## 1.2.71 ### Patch Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 4ce254ca6..3a2a543b5 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/icons", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System icons library.", "license": "MIT", "repository": { diff --git a/packages/leemons/CHANGELOG.md b/packages/leemons/CHANGELOG.md index 8da9e8a17..bb0ee3415 100644 --- a/packages/leemons/CHANGELOG.md +++ b/packages/leemons/CHANGELOG.md @@ -1,5 +1,16 @@ # @bubbles-ui/leemons +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.72 + - @bubbles-ui/calendars@1.2.72 + - @bubbles-ui/editors@1.2.72 + - @bubbles-ui/icons@1.2.72 + ## 1.2.71 ### Patch Changes diff --git a/packages/leemons/package.json b/packages/leemons/package.json index 20b4eb58e..c49f044e7 100644 --- a/packages/leemons/package.json +++ b/packages/leemons/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/leemons", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -74,10 +74,10 @@ "ajv": "6.12.6" }, "peerDependencies": { - "@bubbles-ui/calendars": "^1.2.71", - "@bubbles-ui/components": "^1.2.71", - "@bubbles-ui/editors": "^1.2.71", - "@bubbles-ui/icons": "^1.2.71", + "@bubbles-ui/calendars": "^1.2.72", + "@bubbles-ui/components": "^1.2.72", + "@bubbles-ui/editors": "^1.2.72", + "@bubbles-ui/icons": "^1.2.72", "dayjs": "^1.10.7", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/packages/notifications/CHANGELOG.md b/packages/notifications/CHANGELOG.md index f56881695..8141e86a8 100644 --- a/packages/notifications/CHANGELOG.md +++ b/packages/notifications/CHANGELOG.md @@ -1,5 +1,14 @@ # @bubbles-ui/notifications +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.72 + - @bubbles-ui/icons@1.2.72 + ## 1.2.71 ### Patch Changes diff --git a/packages/notifications/package.json b/packages/notifications/package.json index db9971bec..5e078f605 100644 --- a/packages/notifications/package.json +++ b/packages/notifications/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/notifications", - "version": "1.2.71", + "version": "1.2.72", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -52,8 +52,8 @@ "react-transition-group": "^4.4.2" }, "peerDependencies": { - "@bubbles-ui/components": "^1.2.71", - "@bubbles-ui/icons": "^1.2.71", + "@bubbles-ui/components": "^1.2.72", + "@bubbles-ui/icons": "^1.2.72", "@mantine/core": "5.2.4", "@mantine/hooks": "5.2.4", "react": "^17.0.1",