feat(Tooltip): make tooltip subtle by default (#19024)

* feat(Tooltip): make tooltip subtle by default * add changelog * Update packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Jul 21, 2021 · 3bd2a06 · 3bd2a06
1 parent 0088f43
commit 3bd2a06
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -18,6 +18,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Make `Tooltip` subtle by default and no pointing by default @chassunc ([#19024](https://github.com/microsoft/fluentui/pull/19024))
+
 ### Fixes
 - Fix `Carousel` animation in controlled mode @assuncaocharles ([#18798](https://github.com/microsoft/fluentui/pull/18798))
 - Wrap ChatMessage header elements correctly @Hirse ([#18837](https://github.com/microsoft/fluentui/pull/18837))

diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
@@ -66,6 +66,9 @@ export interface TooltipProps
   /** Defines whether tooltip is displayed. */
   open?: boolean;
 
+  /** Defines wether tooltip is subtle  */
+  subtle?: boolean;
+
   /**
    * Event for request to change 'open' value.
    * @param event - React's original SyntheticEvent.
@@ -120,6 +123,7 @@ export const Tooltip: React.FC<TooltipProps> &
     unstable_disableTether,
     unstable_pinned,
     autoSize,
+    subtle,
   } = props;
 
   const [open, setOpen] = useAutoControlled({
@@ -188,6 +192,7 @@ export const Tooltip: React.FC<TooltipProps> &
           placement: popperProps.placement,
           pointing,
           pointerRef: pointerTargetRef,
+          subtle,
         }),
       generateKey: false,
       overrideProps: getContentOverrideProps,
@@ -282,7 +287,7 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'above',
   mouseLeaveDelay: 10,
-  pointing: true,
+  subtle: true,
   accessibility: tooltipAsLabelBehavior,
 };
 Tooltip.propTypes = {
@@ -291,6 +296,7 @@ Tooltip.propTypes = {
     content: false,
   }),
   align: PropTypes.oneOf<Alignment>(ALIGNMENTS),
+  subtle: PropTypes.bool,
   children: PropTypes.element,
   defaultOpen: PropTypes.bool,
   mountNode: customPropTypes.domNode,

diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
@@ -43,9 +43,12 @@ export interface TooltipContentProps extends UIComponentProps, ChildrenComponent
 
   /** A ref to a pointer element. */
   pointerRef?: React.Ref<HTMLDivElement>;
+
+  /** Defines wether tooltip is subtle  */
+  subtle?: boolean;
 }
 
-export type TooltipContentStylesProps = Required<Pick<TooltipContentProps, 'pointing' | 'open'>> & {
+export type TooltipContentStylesProps = Required<Pick<TooltipContentProps, 'pointing' | 'open' | 'subtle'>> & {
   basePlacement: PopperJs.BasePlacement;
 };
 
@@ -72,6 +75,7 @@ export const TooltipContent: ComponentWithAs<'div', TooltipContentProps> &
     pointerRef,
     styles,
     variables,
+    subtle,
   } = props;
 
   const getA11Props = useAccessibility(accessibility, {
@@ -84,6 +88,7 @@ export const TooltipContent: ComponentWithAs<'div', TooltipContentProps> &
       basePlacement: getBasePlacement(placement, context.rtl),
       open,
       pointing,
+      subtle,
     }),
     mapPropsToInlineStyles: () => ({
       className,
@@ -140,6 +145,7 @@ TooltipContent.propTypes = {
   ]),
   pointing: PropTypes.bool,
   pointerRef: customPropTypes.ref,
+  subtle: PropTypes.bool,
 };
 TooltipContent.handledProps = Object.keys(TooltipContent.propTypes) as any;
 

diff --git a/...ages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/...ages/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
@@ -32,17 +32,17 @@ export const tooltipContentStyles: ComponentSlotStylesPrepared<TooltipContentSty
     height: v.pointerHeight,
 
     ...getPointerStyles({
-      backgroundColor: v.backgroundColor,
+      backgroundColor: p.subtle ? v.subtleBackgroundColor : v.backgroundColor,
       borderSize: v.borderSize,
-      borderColor: 'transparent',
+      borderColor: p.subtle ? v.subtleBorderColor : 'transparent',
       gap: v.pointerGap,
       padding: v.pointerMargin,
       height: v.pointerHeight,
       width: v.pointerWidth,
 
       placement: p.basePlacement,
       rtl,
-      svg: pointerSvgUrl(v.backgroundColor),
+      svg: pointerSvgUrl(p.subtle ? v.subtleBackgroundColor : v.backgroundColor),
     }),
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
@@ -55,6 +55,14 @@ export const tooltipContentStyles: ComponentSlotStylesPrepared<TooltipContentSty
     borderRadius: v.borderRadius,
     boxShadow: v.boxShadow,
 
+    ...(p.subtle && {
+      background: v.subtleBackgroundColor,
+      color: v.subtleForegroundColor,
+      borderStyle: 'solid',
+      borderWidth: v.borderSize,
+      borderColor: v.subtleBorderColor,
+    }),
+
     ...(p.pointing && {
       pointerEvents: 'all',
     }),

diff --git a/...s/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts b/...s/fluentui/react-northstar/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
@@ -18,6 +18,10 @@ export interface TooltipContentVariables {
   backgroundColor: string;
 
   zIndex: number;
+
+  subtleBackgroundColor: string;
+  subtleForegroundColor: string;
+  subtleBorderColor: string;
 }
 
 export const tooltipContentVariables = (siteVars: any): TooltipContentVariables => ({
@@ -35,6 +39,8 @@ export const tooltipContentVariables = (siteVars: any): TooltipContentVariables
   pointerHeight: pxToRem(6),
   color: siteVars.colorScheme.default.foreground3,
   backgroundColor: siteVars.colors.grey[500],
-
+  subtleBackgroundColor: siteVars.colorScheme.default.background,
+  subtleForegroundColor: siteVars.colorScheme.default.foreground,
+  subtleBorderColor: siteVars.colorScheme.onyx.border1,
   zIndex: siteVars.zIndexes.overlayPriority,
 });