Implemented the customization of styles of the Tooltip component

foxford · Apr 2, 2024 · 24cf76a · 24cf76a
1 parent 90e69c2
commit 24cf76a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/packages/drawing-toolbar/package-lock.json b/packages/drawing-toolbar/package-lock.json
diff --git a/packages/drawing-toolbar/src/components/line-settings.jsx b/packages/drawing-toolbar/src/components/line-settings.jsx
@@ -18,7 +18,6 @@ const lineSizes = {
   EIGHT: 8,
 }
 
-
 export const LineSettings = ({
   currentSize, handleClick, dashed = false,
 }) => {

diff --git a/packages/tooltip/package-lock.json b/packages/tooltip/package-lock.json
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/tooltip",
-  "version": "1.0.0",
+  "version": "1.0.1-dev-1-ULMS-2928",
   "description": "",
   "keywords": [
     "lerna"
@@ -29,6 +29,7 @@
   },
   "peerDependencies": {
     "@foxford/ui": "^2.17.0",
+    "lodash": "~4.17.21",
     "react": "^16.14 || 17 || 18",
     "react-dom": "^16.14 || 17 || 18",
     "styled-components": "^5.0.0"

diff --git a/packages/tooltip/src/tooltip.jsx b/packages/tooltip/src/tooltip.jsx
@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import merge from 'lodash/merge'
 import React, { memo, useMemo } from 'react'
 import styled from 'styled-components'
 import { Tooltip as TooltipComponent } from '@foxford/ui'
@@ -25,6 +26,8 @@ const styles = {
     fontSize: '14px',
     lineHeight: '130%',
     color: '#333',
+    textAlign: 'center',
+    whiteSpace: 'pre-line',
   },
   arrow: {
     spread: 16,
@@ -69,7 +72,10 @@ function _Tooltip ({
   dark,
   ...tooltipProps
 }) {
-  const computedStyles = useMemo(() => dark ? darkStyles : styles, [dark, customStyles])
+  const computedStyles = useMemo(
+    () => merge({}, dark ? darkStyles : styles, customStyles),
+    [dark, customStyles]
+  )
 
   return disabled || hideTooltip
     ? (