From 451666b7a0e43089131a1fbcab295e9c8ed9489d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?E=CC=81ric=20D?= <15271+edas@users.noreply.github.com> Date: Mon, 16 Mar 2020 16:03:31 +0100 Subject: [PATCH] feat: Import the tooltip component from MUI Direct import from MUI for a first use in cozy-notes. We only add a cozy style but the API doesn't change. --- docs/styleguide.config.js | 1 + react/Tooltip/Readme.md | 8 ++++++++ react/Tooltip/index.jsx | 24 ++++++++++++++++++++++++ 3 files changed, 33 insertions(+) create mode 100644 react/Tooltip/Readme.md create mode 100644 react/Tooltip/index.jsx diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index a8aef69a95..f389550773 100644 --- a/docs/styleguide.config.js +++ b/docs/styleguide.config.js @@ -74,6 +74,7 @@ module.exports = { '../react/Well/index.jsx', '../react/Infos/index.jsx', '../react/InfosCarrousel/index.jsx', + '../react/Tooltip/index.jsx', '../react/ContextHeader/index.jsx', '../react/Filename/index.jsx', '../react/AppTitle/index.jsx', diff --git a/react/Tooltip/Readme.md b/react/Tooltip/Readme.md new file mode 100644 index 0000000000..7951d64151 --- /dev/null +++ b/react/Tooltip/Readme.md @@ -0,0 +1,8 @@ +### Simplest usage + +```js +import Tooltip from 'cozy-ui/transpiled/react/Tooltip'; +hover over me +``` + +This component is imported from MUI and has the same API. diff --git a/react/Tooltip/index.jsx b/react/Tooltip/index.jsx new file mode 100644 index 0000000000..0d1f1b3dc9 --- /dev/null +++ b/react/Tooltip/index.jsx @@ -0,0 +1,24 @@ +import { withStyles } from '@material-ui/core/styles' +import { Tooltip } from '@material-ui/core' + +// We use css-in-js because using external css may create +// conflicts of priorities between MUI and cozy-UI. +// MUI always loads its styes at the end of , making them +// override any previous selector with the same specificity. +// It also allows the code using this component to overrides +// only some rules and not the whole classname. +const styles = { + tooltip: { + backgroundColor: 'var(--paleGrey)', + borderRadius: '8px', + fontSize: '1rem', + color: 'var(--black)', + lineHeight: '1.3', + boxShadow: + '0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19)' + } +} + +const StyledTooltip = withStyles(styles, { name: 'MuiTooltip' })(Tooltip) + +export default StyledTooltip