From 761de85fd5933c657e752ae5b302c5cf55fafab2 Mon Sep 17 00:00:00 2001 From: Enrico Date: Thu, 22 Sep 2022 14:13:14 +0200 Subject: [PATCH 1/4] Add line-height of 16px to v0 Tooltip content --- .../src/themes/teams/components/Tooltip/tooltipContentStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentStyles.ts index 73a30b883348a6..e400b34bbb0645 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentStyles.ts @@ -51,7 +51,7 @@ export const tooltipContentStyles: ComponentSlotStylesPrepared Date: Thu, 22 Sep 2022 14:15:39 +0200 Subject: [PATCH 2/4] No borderSize to have height: 28px on v0 Tooltip --- .../themes/teams/components/Tooltip/tooltipContentVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts index 0b58e1fd7a78bd..6cf12ae01615c4 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts @@ -32,7 +32,7 @@ export const tooltipContentVariables = (siteVars: any): TooltipContentVariables borderRadius: siteVars.borderRadiusMedium, borderColor: 'transparent', - borderSize: '1px', + borderSize: '0px', borderStyle: 'none', padding: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(12)}`, From a059de0856d6bf289d075917e0bb19a78fb564f9 Mon Sep 17 00:00:00 2001 From: Enrico Date: Thu, 22 Sep 2022 14:17:17 +0200 Subject: [PATCH 3/4] Set max-width to 240px for v0 Tooltip --- .../themes/teams/components/Tooltip/tooltipContentVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts index 6cf12ae01615c4..bd63e6cd9d7c77 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts @@ -36,7 +36,7 @@ export const tooltipContentVariables = (siteVars: any): TooltipContentVariables borderStyle: 'none', padding: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(12)}`, - maxWidth: pxToRem(246), + maxWidth: pxToRem(240), svgPointer: true, pointerMargin: pxToRem(6), From 0e719994de2423aedf1bd219bf46e1acd153b7ab Mon Sep 17 00:00:00 2001 From: Enrico Date: Fri, 23 Sep 2022 14:28:37 +0200 Subject: [PATCH 4/4] Add changelog entry --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 2bda8c3131e1e5..c7b17a88e33ccf 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Add a new comfy layout variation for `ChatMessage` @davezuko ([#23974](https://github.com/microsoft/fluentui/pull/23974)) +- Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908)) ### Fixes - Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356))