diff --git a/CHANGELOG.md b/CHANGELOG.md index 1141b9c1b6..96e3b0e507 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add accessibility attributes and keyboard handlers for `Tooltip` @sophieH29 ([#1575](https://github.com/stardust-ui/react/pull/1575)) - Add `labelPosition` prop to `Checkbox` component @layershifter ([#1578](https://github.com/stardust-ui/react/pull/1578)) - Pass `props` of `Icon` component to SVG spec @kuzhelov ([#1562](https://github.com/stardust-ui/react/pull/1562)) +- Add svg pointing beak to the `Tooltip` component in Teams theme @mnajdova ([#1580](https://github.com/stardust-ui/react/pull/1580)) ### Documentation - Ensure docs content doesn't overlap with sidebar @kuzhelov ([#1568](https://github.com/stardust-ui/react/pull/1568)) diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts index 2fc642330f..4af1bd9a64 100644 --- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts @@ -20,5 +20,4 @@ export { default as Alert } from './components/Alert/alertVariables' export { default as ProviderBox } from './components/Provider/providerBoxVariables' export { default as Dropdown } from './components/Dropdown/dropdownVariables' export { default as Label } from './components/Label/labelVariables' -export { default as Tooltip } from './components/Tooltip/tooltipVariables' export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables' diff --git a/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipContentVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipContentVariables.ts index d5873e25a4..76b48de04f 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipContentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipContentVariables.ts @@ -1,5 +1,7 @@ import { TooltipContentVariables } from '../../../teams/components/Tooltip/tooltipContentVariables' -export default (): Partial => ({ +export default (siteVars): Partial => ({ boxShadowColor: undefined, + color: siteVars.colors.black, + backgroundColor: siteVars.colors.white, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipVariables.ts deleted file mode 100644 index a6814b8328..0000000000 --- a/packages/react/src/themes/teams-high-contrast/components/Tooltip/tooltipVariables.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { TooltipVariables } from '../../../teams/components/Tooltip/tooltipVariables' - -export default (siteVars: any): Partial => ({ - contentColor: siteVars.colors.black, - contentBackgroundColor: siteVars.colors.white, -}) diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts index 8370292839..c8ea905b25 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts @@ -2,29 +2,63 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { TooltipContentProps } from '../../../../components/Tooltip/TooltipContent' import { TooltipContentVariables } from './tooltipContentVariables' import getPointerStyles from '../../getPointerStyles' +import pointerSvg from '../../pointerSvgUrl' +import { PopperChildrenProps } from '../../../../lib/positioner' + +const getPointerOffset = ( + placement: PopperChildrenProps['placement'], + v: TooltipContentVariables, +) => + placement === 'top-start' || + placement === 'top' || + placement === 'top-end' || + placement === 'bottom-end' || + placement === 'bottom' || + placement === 'bottom-start' + ? v.pointerVerticalOffset + : v.pointerHorizontalOffset const tooltipContentStyles: ComponentSlotStylesInput< TooltipContentProps, TooltipContentVariables > = { - root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({ - borderRadius: v.borderRadius, - display: 'block', - maxWidth: v.maxWidth, + root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => { + const svgPointerStyles = getPointerStyles( + getPointerOffset(p.placement, v), + v.pointerMargin, + rtl, + p.placement, + true, + ) - ...(p.pointing && getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).root), - }), - pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({ - display: 'block', - position: 'absolute', + return { + borderRadius: v.borderRadius, + display: 'block', + maxWidth: v.maxWidth, + color: v.color, + background: v.backgroundColor, + ...(p.pointing && svgPointerStyles.root), + } + }, + pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => { + const svgPointerStyles = getPointerStyles( + getPointerOffset(p.placement, v), + v.pointerMargin, + rtl, + p.placement, + true, + ) - backgroundColor: 'inherit', - - height: v.pointerSize, - width: v.pointerSize, - - ...getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).pointer, - }), + return { + display: 'block', + position: 'absolute', + overflow: 'hidden', + width: v.pointerWidth, + height: v.pointerHeight, + backgroundImage: pointerSvg(v.backgroundColor), + ...svgPointerStyles.pointer, + } + }, content: ({ props: p, variables: v }): ICSSInJSStyle => ({ display: 'block', padding: v.padding, diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts index 16fd493c67..9cd52a5c82 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts @@ -12,23 +12,30 @@ export interface TooltipContentVariables { maxWidth: string pointerMargin: string - pointerOffset: string - pointerSize: string -} + pointerHorizontalOffset: string + pointerVerticalOffset: string + pointerWidth: string + pointerHeight: string -export default (siteVars: any): TooltipContentVariables => { - return { - boxShadowStart: '0 2px 4px 0', - boxShadowEnd: '0 2px 10px 0', - boxShadowColor: siteVars.colors.grey[250], - borderRadius: pxToRem(3), - borderSize: '1px', - padding: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(12)}`, - - maxWidth: pxToRem(246), - - pointerOffset: pxToRem(5), - pointerMargin: pxToRem(10), - pointerSize: pxToRem(10), - } + color: string + backgroundColor: string } + +export default (siteVars: any): TooltipContentVariables => ({ + boxShadowStart: '0 2px 4px 0', + boxShadowEnd: '0 2px 10px 0', + boxShadowColor: siteVars.colors.grey[250], + borderRadius: pxToRem(3), + borderSize: '1px', + padding: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(12)}`, + + maxWidth: pxToRem(246), + + pointerVerticalOffset: pxToRem(10), + pointerHorizontalOffset: pxToRem(5), + pointerMargin: pxToRem(6), + pointerWidth: pxToRem(6), + pointerHeight: pxToRem(16), + color: siteVars.colorScheme.default.foreground3, + backgroundColor: siteVars.colors.grey[500], +}) diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts index 2a33c14e4d..ab498c235d 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts @@ -1,8 +1,8 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { PopupProps } from '../../../../components/Popup/Popup' +import { TooltipProps } from '../../../../components/Tooltip/Tooltip' import { TooltipVariables } from './tooltipVariables' -const tooltipStyles: ComponentSlotStylesInput = { +const tooltipStyles: ComponentSlotStylesInput = { root: (): ICSSInJSStyle => ({}), content: ({ variables: v, props: p }): ICSSInJSStyle => ({ @@ -12,8 +12,6 @@ const tooltipStyles: ComponentSlotStylesInput = { zIndex: v.zIndex, position: 'absolute', textAlign: 'left', - color: v.contentColor, - background: v.contentBackgroundColor, }), } diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts index fb664370e6..e4ae68c059 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts @@ -1,11 +1,7 @@ export interface TooltipVariables { zIndex: number - contentColor: string - contentBackgroundColor: string } export default (siteVars: any): TooltipVariables => ({ zIndex: 1000, - contentColor: siteVars.colorScheme.default.foreground3, - contentBackgroundColor: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams/getPointerStyles.ts b/packages/react/src/themes/teams/getPointerStyles.ts index 5c7c5635a4..1ee79f135f 100644 --- a/packages/react/src/themes/teams/getPointerStyles.ts +++ b/packages/react/src/themes/teams/getPointerStyles.ts @@ -10,6 +10,7 @@ const getPointerStyles = ( pointerMargin: string, rtl: boolean, popperPlacement?: PopperChildrenProps['placement'], + isSvg?: boolean, ) => { const placementValue = (popperPlacement || '').split('-', 1).pop() const placement = (rtl && rtlMapping[placementValue]) || placementValue @@ -31,19 +32,19 @@ const getPointerStyles = ( const pointerStyles = { top: { bottom: `-${pointerOffset}`, - transform: 'rotate(45deg)', + transform: isSvg ? `rotate(${rtl ? 90 : -90}deg)` : 'rotate(45deg)', }, right: { left: `-${pointerOffset}`, - transform: 'rotate(135deg)', + transform: isSvg ? `rotate(${rtl ? 180 : 0}deg)` : 'rotate(135deg)', }, bottom: { top: `-${pointerOffset}`, - transform: 'rotate(-135deg)', + transform: isSvg ? `rotate(${rtl ? -90 : 90}deg)` : 'rotate(-135deg)', }, left: { right: `-${pointerOffset}`, - transform: 'rotate(-45deg)', + transform: isSvg ? `rotate(${rtl ? 0 : 180}deg)` : 'rotate(-45deg)', }, } diff --git a/packages/react/src/themes/teams/pointerSvgUrl.ts b/packages/react/src/themes/teams/pointerSvgUrl.ts new file mode 100644 index 0000000000..dc3c5705d5 --- /dev/null +++ b/packages/react/src/themes/teams/pointerSvgUrl.ts @@ -0,0 +1,4 @@ +export default (backgroundColor: string) => + `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='${encodeURIComponent( + backgroundColor, + )}' viewBox='0 0 6 16'%3E%3Cpath d='M.708 9.527a2.002 2.002 0 0 1 0-3.055l3.284-2.78C5.324 2.562 5.991 1.332 5.991 0c0 1.002.02 15.013 0 16 0-1.333-.665-2.562-1.995-3.689L.708 9.527z' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E%0A");`