From 0f1c3b9abd6aca35185ea573bcdae6a5f876b4e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 12 Feb 2021 09:27:02 -0300 Subject: [PATCH 1/4] add padding prop --- src/dataDisplay/Tooltip/index.stories.tsx | 2 +- src/dataDisplay/Tooltip/index.tsx | 14 ++++++++++++-- yarn.lock | 7 ------- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/dataDisplay/Tooltip/index.stories.tsx b/src/dataDisplay/Tooltip/index.stories.tsx index 5e8e5e67..f8f52975 100644 --- a/src/dataDisplay/Tooltip/index.stories.tsx +++ b/src/dataDisplay/Tooltip/index.stories.tsx @@ -28,7 +28,7 @@ export const CustomColor = (): React.ReactElement => { export const CustomColorAndArrow = (): React.ReactElement => { return ( - + hover me ); diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx index 5519cb31..6dbb5ec7 100644 --- a/src/dataDisplay/Tooltip/index.tsx +++ b/src/dataDisplay/Tooltip/index.tsx @@ -1,16 +1,18 @@ import React, { ReactElement } from 'react'; import MUITooltip, { TooltipProps } from '@material-ui/core/Tooltip'; import { withStyles } from '@material-ui/core/styles'; -import { rgba } from 'polished'; +import { padding, rgba } from 'polished'; import theme, { ThemeColors } from '../../theme'; type TooltipColors = { backgroundColor?: ThemeColors; textColor?: ThemeColors; + padding?: string; + /* textSize?: string; */ }; -const customTooltip = ({ backgroundColor, textColor }: TooltipColors) => +const customTooltip = ({ backgroundColor, textColor, padding }: TooltipColors) => withStyles(() => ({ popper: { zIndex: 2001, @@ -24,6 +26,12 @@ const customTooltip = ({ backgroundColor, textColor }: TooltipColors) => color: textColor ? (theme.colors[textColor] as string) : theme.colors.text, + padding: ${({ padding }) => (padding ? '8px' : '16px')}, + + /* fontSize: theme.text.size.lg.fontSize, + lineHeight: theme.text.size.lg.lineHeight, + padding: '12px', + borderRadius: '8px', */ }, arrow: { color: backgroundColor @@ -45,12 +53,14 @@ export const Tooltip = ({ title, backgroundColor, textColor, + padding, children, ...rest }: Props & TooltipProps): ReactElement => { const StyledTooltip = customTooltip({ backgroundColor, textColor, + padding, }); return ( diff --git a/yarn.lock b/yarn.lock index 5b19bd5c..aa270ff6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1190,13 +1190,6 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" -"@material-ui/icons@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" - integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb" From fcf66378f40b4b5b4c26536cf3cf1ad9b34ff714 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 12 Feb 2021 10:33:51 -0300 Subject: [PATCH 2/4] Add customSize and fix code --- src/dataDisplay/Tooltip/index.stories.tsx | 10 +++- src/dataDisplay/Tooltip/index.tsx | 59 +++++++++++++++++------ src/theme.ts | 15 ++++-- 3 files changed, 64 insertions(+), 20 deletions(-) diff --git a/src/dataDisplay/Tooltip/index.stories.tsx b/src/dataDisplay/Tooltip/index.stories.tsx index f8f52975..4dcbbdf0 100644 --- a/src/dataDisplay/Tooltip/index.stories.tsx +++ b/src/dataDisplay/Tooltip/index.stories.tsx @@ -28,7 +28,15 @@ export const CustomColor = (): React.ReactElement => { export const CustomColorAndArrow = (): React.ReactElement => { return ( - + + hover me + + ); +}; + +export const CustomSize = (): React.ReactElement => { + return ( + hover me ); diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx index 6dbb5ec7..d46c9444 100644 --- a/src/dataDisplay/Tooltip/index.tsx +++ b/src/dataDisplay/Tooltip/index.tsx @@ -1,18 +1,47 @@ import React, { ReactElement } from 'react'; -import MUITooltip, { TooltipProps } from '@material-ui/core/Tooltip'; +import MUITooltip, { + TooltipProps as TooltipPropsMui, +} from '@material-ui/core/Tooltip'; import { withStyles } from '@material-ui/core/styles'; -import { padding, rgba } from 'polished'; +import { rgba } from 'polished'; -import theme, { ThemeColors } from '../../theme'; +import theme, { ThemeColors, ThemeTooltipSize } from '../../theme'; -type TooltipColors = { +type TooltipProps = { + size?: ThemeTooltipSize; backgroundColor?: ThemeColors; textColor?: ThemeColors; padding?: string; - /* textSize?: string; */ }; -const customTooltip = ({ backgroundColor, textColor, padding }: TooltipColors) => +const getPaddingBySize = (size: ThemeTooltipSize): string => { + switch (size) { + case 'lg': + return '16px'; + default: + return '8px'; + } +}; + +const getFontInfoBySize = ( + size: ThemeTooltipSize +): { + fontSize: string; + lineHeight: string; +} => { + switch (size) { + case 'lg': + return theme.text.size.lg; + default: + return theme.text.size.md; + } +}; + +const customTooltip = ({ + backgroundColor, + textColor, + size = 'md', +}: TooltipProps) => withStyles(() => ({ popper: { zIndex: 2001, @@ -26,18 +55,18 @@ const customTooltip = ({ backgroundColor, textColor, padding }: TooltipColors) = color: textColor ? (theme.colors[textColor] as string) : theme.colors.text, - padding: ${({ padding }) => (padding ? '8px' : '16px')}, + borderRadius: '8px', - /* fontSize: theme.text.size.lg.fontSize, - lineHeight: theme.text.size.lg.lineHeight, - padding: '12px', - borderRadius: '8px', */ + padding: getPaddingBySize(size), + fontSize: getFontInfoBySize(size).fontSize, + lineHeight: getFontInfoBySize(size).lineHeight, }, arrow: { color: backgroundColor ? (theme.colors[backgroundColor] as string) : theme.colors.overlay.color, border: 'none', + '&::before': { boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`, }, @@ -47,20 +76,20 @@ const customTooltip = ({ backgroundColor, textColor, padding }: TooltipColors) = type Props = { title: string; children: ReactElement; -} & TooltipColors; +} & TooltipProps; export const Tooltip = ({ title, backgroundColor, textColor, - padding, children, + size, ...rest -}: Props & TooltipProps): ReactElement => { +}: Props & TooltipPropsMui): ReactElement => { const StyledTooltip = customTooltip({ backgroundColor, textColor, - padding, + size, }); return ( diff --git a/src/theme.ts b/src/theme.ts index 461c6b3d..e8b6f8bf 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -125,17 +125,24 @@ const theme = { }, }, }, + tooltip: { + size: { + md: '', + lg: '', + }, + }, }; export type Theme = typeof theme; +export type ThemeButtonSize = keyof Theme['buttons']['size']; export type ThemeColors = keyof Theme['colors']; +export type ThemeIdenticonSize = keyof Theme['identicon']['size']; export type ThemeIconSize = keyof Theme['icons']['size']; +export type ThemeLoaderSize = keyof Theme['loader']['size']; +export type ThemeStatusDotSize = keyof Theme['statusDot']['size']; export type ThemeTextSize = keyof Theme['text']['size']; export type ThemeTitleSize = keyof Theme['title']['size']; -export type ThemeStatusDotSize = keyof Theme['statusDot']['size']; -export type ThemeLoaderSize = keyof Theme['loader']['size']; -export type ThemeButtonSize = keyof Theme['buttons']['size']; -export type ThemeIdenticonSize = keyof Theme['identicon']['size']; +export type ThemeTooltipSize = keyof Theme['tooltip']['size']; export default theme; From cf1933a4ad5128bfedb3ef5025a03d991a8c0d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 12 Feb 2021 15:27:47 -0300 Subject: [PATCH 3/4] fix tooltip styles and add font-family --- src/dataDisplay/Tooltip/index.stories.tsx | 2 +- src/dataDisplay/Tooltip/index.tsx | 25 ++++++++++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/dataDisplay/Tooltip/index.stories.tsx b/src/dataDisplay/Tooltip/index.stories.tsx index 4dcbbdf0..42ee4920 100644 --- a/src/dataDisplay/Tooltip/index.stories.tsx +++ b/src/dataDisplay/Tooltip/index.stories.tsx @@ -36,7 +36,7 @@ export const CustomColorAndArrow = (): React.ReactElement => { export const CustomSize = (): React.ReactElement => { return ( - + hover me ); diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx index d46c9444..c90b24d6 100644 --- a/src/dataDisplay/Tooltip/index.tsx +++ b/src/dataDisplay/Tooltip/index.tsx @@ -12,14 +12,25 @@ type TooltipProps = { backgroundColor?: ThemeColors; textColor?: ThemeColors; padding?: string; + border?: string; }; const getPaddingBySize = (size: ThemeTooltipSize): string => { switch (size) { case 'lg': - return '16px'; + return '8px 16px'; default: - return '8px'; + return '4px 8px'; + } +}; + +const getBorderBySize = (size: ThemeTooltipSize): string => { + switch (size) { + case 'lg': + return 'none'; + default: + return `1px solid #D4D5D3`; + /* ${({ theme }) => theme.colors.separator} */ } }; @@ -50,13 +61,13 @@ const customTooltip = ({ backgroundColor: backgroundColor ? (theme.colors[backgroundColor] as string) : theme.colors.overlay.color, - boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`, - border: 'none', + boxShadow: `1px 2px 10px ${rgba(theme.colors.shadow.color, 0.18)}`, + border: getBorderBySize(size), color: textColor ? (theme.colors[textColor] as string) : theme.colors.text, - borderRadius: '8px', - + borderRadius: '4px', + fontFamily: theme.fonts.fontFamily, padding: getPaddingBySize(size), fontSize: getFontInfoBySize(size).fontSize, lineHeight: getFontInfoBySize(size).lineHeight, @@ -68,7 +79,7 @@ const customTooltip = ({ border: 'none', '&::before': { - boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`, + boxShadow: `1px 2px 10px ${rgba(theme.colors.shadow.color, 0.18)}`, }, }, }))(MUITooltip); From 8e94c873cc937a43ff60d291c95beb440a0b98cc Mon Sep 17 00:00:00 2001 From: nicosampler Date: Sun, 14 Feb 2021 14:24:47 -0300 Subject: [PATCH 4/4] replace harcoded color --- src/dataDisplay/Tooltip/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx index c90b24d6..d631251b 100644 --- a/src/dataDisplay/Tooltip/index.tsx +++ b/src/dataDisplay/Tooltip/index.tsx @@ -29,8 +29,7 @@ const getBorderBySize = (size: ThemeTooltipSize): string => { case 'lg': return 'none'; default: - return `1px solid #D4D5D3`; - /* ${({ theme }) => theme.colors.separator} */ + return `1px solid ${theme.colors.separator}`; } };