Fix TeachingBubble styles in Azure theme (#14335)

* High contrast light + dark themes * Change files * High contrast clean up * DetailsList border fix * Merge branch 'master' of https://github.com/microsoft/fluentui into jackieg/high-contrast-themes * Pivots bug fix + high contrast values * Typo fix * Teaching bubble azure-theme styling * Colors clean up * button line height adjustment per Waseem * Updated font sizes to references Co-authored-by: Jackie <jagaheri@microsoft.com>
microsoft · Aug 7, 2020 · 767e316 · 767e316
1 parent 154e5a7
commit 767e316
Show file tree

Hide file tree

Showing 12 changed files with 198 additions and 18 deletions.
diff --git a/change/@uifabric-azure-themes-2020-07-24-01-28-19-jackieg-high-contrast-themes.json b/change/@uifabric-azure-themes-2020-07-24-01-28-19-jackieg-high-contrast-themes.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "High contrast light + dark themes",
+  "packageName": "@uifabric/azure-themes",
+  "email": "jagaheri@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-24T08:28:19.092Z"
+}
diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts
@@ -2,6 +2,7 @@ import { IAzureSemanticColors } from './IAzureSemanticColors';
 
 export namespace BaseColors {
   export const BLUE_CCE1FF = '#cce1ff';
+  export const BLUE_DEECF9 = '#deecf9';
   export const BLUE_0000CD = '#0000cd';
   export const BLUE_00E8E8 = '#00e8e8';
   export const BLUE_00FFFF = '#00ffff';
@@ -14,6 +15,7 @@ export namespace BaseColors {
   export const BLUE_012B65 = '#012b65';
   export const BLUE_106EBE = '#106EBE';
   export const BLUE_02FEFF = '#02FEFF';
+  export const BLUE_043862 = '#043862';
   export const BLUE_6CA9FE = '#6ca9fe';
   export const BLUE_6CB8F6 = '#6cb8f6';
   export const BLUE_4894FE = '#4894fe';
@@ -267,6 +269,16 @@ export const DarkSemanticColors: IAzureSemanticColors = {
   tabs: {
     hover: BaseColors.GRAY_252423,
   },
+  teachingBubble: {
+    rest: {
+      background: BaseColors.BLUE_2899F5,
+      text: BaseColors.BLACK,
+      secondaryBackround: BaseColors.BLACK,
+    },
+    hover: {
+      primaryButtonBackground: BaseColors.BLUE_043862,
+    },
+  },
 };
 
 export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
@@ -415,6 +427,16 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
   tabs: {
     hover: BaseColors.GRAY_252423,
   },
+  teachingBubble: {
+    rest: {
+      background: BaseColors.BLUE_00FFFF,
+      text: BaseColors.BLACK,
+      secondaryBackround: BaseColors.BLACK,
+    },
+    hover: {
+      primaryButtonBackground: BaseColors.BLUE_043862,
+    },
+  },
 };
 
 export const LightSemanticColors: IAzureSemanticColors = {
@@ -563,6 +585,16 @@ export const LightSemanticColors: IAzureSemanticColors = {
   tabs: {
     hover: BaseColors.GRAY_F3F2F1,
   },
+  teachingBubble: {
+    rest: {
+      background: BaseColors.BLUE_0078D4,
+      text: BaseColors.WHITE,
+      secondaryBackround: BaseColors.WHITE,
+    },
+    hover: {
+      primaryButtonBackground: BaseColors.BLUE_DEECF9,
+    },
+  },
 };
 
 export const HighContrastLightSemanticColors: IAzureSemanticColors = {
@@ -711,4 +743,14 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
   tabs: {
     hover: BaseColors.GRAY_F3F2F1,
   },
+  teachingBubble: {
+    rest: {
+      background: BaseColors.PURPLE_800080,
+      text: BaseColors.WHITE,
+      secondaryBackround: BaseColors.WHITE,
+    },
+    hover: {
+      primaryButtonBackground: BaseColors.BLUE_DEECF9,
+    },
+  },
 };
diff --git a/packages/azure-themes/src/azure/AzureThemeDark.ts b/packages/azure-themes/src/azure/AzureThemeDark.ts
@@ -106,6 +106,10 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   statusWarningBackground: DarkSemanticColors.statusBar.warning,
   statusWarningText: DarkSemanticColors.text.body,
   statusWarningIcon: CommonSemanticColors.icons.warning,
+  teachingBubbleBackground: DarkSemanticColors.teachingBubble.rest.background,
+  teachingBubblePrimaryButtonHover: DarkSemanticColors.teachingBubble.hover.primaryButtonBackground,
+  teachingBubbleSecondaryBackground: DarkSemanticColors.teachingBubble.rest.secondaryBackround,
+  teachingBubbleText: DarkSemanticColors.teachingBubble.rest.text,
   textFieldBorderDisabled: DarkSemanticColors.primaryButton.disabled.border,
 
   // temporary work around for high contrast themes

diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts
@@ -105,6 +105,10 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
   statusWarningBackground: HighContrastDarkSemanticColors.statusBar.warning,
   statusWarningText: HighContrastDarkSemanticColors.text.body,
   statusWarningIcon: CommonSemanticColors.icons.warning,
+  teachingBubbleBackground: HighContrastDarkSemanticColors.teachingBubble.rest.background,
+  teachingBubblePrimaryButtonHover: HighContrastDarkSemanticColors.teachingBubble.hover.primaryButtonBackground,
+  teachingBubbleSecondaryBackground: HighContrastDarkSemanticColors.teachingBubble.rest.secondaryBackround,
+  teachingBubbleText: HighContrastDarkSemanticColors.teachingBubble.rest.text,
   textFieldBorderDisabled: HighContrastDarkSemanticColors.primaryButton.disabled.border,
 
   // temporary work around for high contrast themes

diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts
@@ -106,8 +106,11 @@ const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors>
   statusWarningBackground: HighContrastLightSemanticColors.statusBar.warning,
   statusWarningText: HighContrastLightSemanticColors.text.body,
   statusWarningIcon: CommonSemanticColors.icons.warning,
+  teachingBubbleBackground: HighContrastLightSemanticColors.teachingBubble.rest.background,
+  teachingBubblePrimaryButtonHover: HighContrastLightSemanticColors.teachingBubble.hover.primaryButtonBackground,
+  teachingBubbleSecondaryBackground: HighContrastLightSemanticColors.teachingBubble.rest.secondaryBackround,
+  teachingBubbleText: HighContrastLightSemanticColors.teachingBubble.rest.text,
   textFieldBorderDisabled: HighContrastLightSemanticColors.text.disabled,
-  textFieldBackgroundDisabled: HighContrastLightSemanticColors.disabledButton.background,
 
   // temporary work around for high contrast themes
   choiceGroupContainerBorder: '1px',

diff --git a/packages/azure-themes/src/azure/AzureThemeLight.ts b/packages/azure-themes/src/azure/AzureThemeLight.ts
@@ -67,7 +67,7 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   primaryButtonBackgroundHovered: LightSemanticColors.primaryButton.hover.background,
   primaryButtonBackgroundPressed: LightSemanticColors.primaryButton.pressed.background,
   primaryButtonBorder: LightSemanticColors.primaryButton.rest.border,
-  primaryButtonBorderDisabled: LightSemanticColors.primaryButton.disabled.border, //
+  primaryButtonBorderDisabled: LightSemanticColors.primaryButton.disabled.border,
   primaryButtonText: LightSemanticColors.primaryButton.rest.text,
   primaryButtonTextDisabled: LightSemanticColors.disabledButton.text,
   primaryButtonTextFocused: LightSemanticColors.primaryButton.focus.text,
@@ -105,6 +105,10 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   statusWarningBackground: LightSemanticColors.statusBar.warning,
   statusWarningText: LightSemanticColors.text.body,
   statusWarningIcon: CommonSemanticColors.icons.warning,
+  teachingBubbleBackground: LightSemanticColors.teachingBubble.rest.background,
+  teachingBubblePrimaryButtonHover: LightSemanticColors.teachingBubble.hover.primaryButtonBackground,
+  teachingBubbleSecondaryBackground: LightSemanticColors.teachingBubble.rest.secondaryBackround,
+  teachingBubbleText: LightSemanticColors.teachingBubble.rest.text,
   textFieldBorderDisabled: LightSemanticColors.disabledButton.background,
 
   // temporary work around for high contrast themes

diff --git a/packages/azure-themes/src/azure/IAzureSemanticColors.ts b/packages/azure-themes/src/azure/IAzureSemanticColors.ts
@@ -144,4 +144,14 @@ export interface IAzureSemanticColors {
   tabs: {
     hover: string;
   };
+  teachingBubble: {
+    rest: {
+      background: string;
+      text: string;
+      secondaryBackround: string;
+    };
+    hover: {
+      primaryButtonBackground: string;
+    };
+  };
 }
diff --git a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts
@@ -106,5 +106,9 @@ export interface IExtendedSemanticColors extends ISemanticColors {
   textFieldBackgroundDisabled: string;
   textFieldBorderDisabled: string;
   tabHover: string;
+  teachingBubbleBackground: string;
+  teachingBubblePrimaryButtonHover: string;
+  teachingBubbleSecondaryBackground: string;
+  teachingBubbleText: string;
   variantBorder: string;
 }
diff --git a/packages/azure-themes/src/azure/styles/TeachingBubble.styles.ts b/packages/azure-themes/src/azure/styles/TeachingBubble.styles.ts
@@ -1,32 +1,52 @@
 import { ITeachingBubbleStyleProps, ITeachingBubbleStyles } from 'office-ui-fabric-react/lib/TeachingBubble';
-import { BaseColors } from '../AzureColors';
 import { Depths } from '../AzureDepths';
+import { FontSizes } from '../AzureType';
 import * as StyleConstants from '../Constants';
+import { IExtendedSemanticColors } from '../IExtendedSemanticColors';
 
 export const TeachingBubbleStyles = (props: ITeachingBubbleStyleProps): Partial<ITeachingBubbleStyles> => {
   const { theme } = props;
-  const { palette, semanticColors } = theme;
+  const { semanticColors } = theme;
+  const extendedSemanticColors = semanticColors as IExtendedSemanticColors;
 
   return {
     bodyContent: {
-      color: semanticColors.bodyText,
-      border: `1px solid ${palette.themePrimary}`,
+      color: extendedSemanticColors.teachingBubbleText,
+      border: `1px solid ${extendedSemanticColors.teachingBubbleBackground}`,
+      selectors: {
+        '.ms-TeachingBubble-subText': {
+          fontSize: FontSizes.size14,
+        },
+      },
     },
     footer: {
-      color: semanticColors.bodyText,
+      color: extendedSemanticColors.teachingBubbleText,
+      selectors: {
+        '.ms-Button-label': {
+          lineHeight: 22,
+        },
+      },
     },
     header: {
-      color: semanticColors.bodyText,
+      color: extendedSemanticColors.teachingBubbleText,
     },
     headline: {
-      color: semanticColors.bodyText,
+      color: extendedSemanticColors.teachingBubbleText,
     },
     content: {
-      backgroundColor: semanticColors.bodyBackground,
-      color: semanticColors.bodyText,
+      backgroundColor: extendedSemanticColors.teachingBubbleBackground,
+      color: extendedSemanticColors.teachingBubbleText,
+      selectors: {
+        '.ms-TeachingBubble-header--small': {
+          fontSize: FontSizes.size14,
+        },
+        '.ms-TeachingBubble-header--condensed': {
+          fontSize: FontSizes.size14,
+        },
+      },
     },
     subText: {
-      color: semanticColors.bodyText,
+      color: extendedSemanticColors.teachingBubbleText,
     },
     subComponentStyles: {
       callout: {
@@ -35,20 +55,56 @@ export const TeachingBubbleStyles = (props: ITeachingBubbleStyleProps): Partial<
           borderStyle: StyleConstants.borderSolid,
           borderWidth: StyleConstants.borderWidth,
           boxShadow: Depths.depth8,
+          selectors: {
+            '.ms-Callout-beak': {
+              backgroundColor: extendedSemanticColors.teachingBubbleBackground,
+            },
+          },
         },
       },
     },
     closeButton: {
-      color: semanticColors.bodyText,
+      color: extendedSemanticColors.teachingBubbleText,
       margin: 1,
       selectors: {
         '&:hover': {
-          backgroundColor: BaseColors.RED_E00B1C, // always this color regardless of theme.
-          color: BaseColors.WHITE,
+          backgroundColor: `${extendedSemanticColors.primaryButtonBackgroundPressed} !important`,
         },
         '&:active': {
-          backgroundColor: BaseColors.RED_E00B1C, // always this color regardless of theme.
-          color: BaseColors.WHITE,
+          backgroundColor: extendedSemanticColors.primaryButtonBackgroundPressed,
+        },
+      },
+    },
+    primaryButton: {
+      backgroundColor: extendedSemanticColors.teachingBubbleSecondaryBackground,
+      selectors: {
+        '&:focus': {
+          backgroundColor: extendedSemanticColors.teachingBubblePrimaryButtonHover,
+          color: extendedSemanticColors.primaryButtonBackground,
+        },
+        '&:hover': {
+          backgroundColor: extendedSemanticColors.teachingBubblePrimaryButtonHover,
+          borderColor: extendedSemanticColors.teachingBubblePrimaryButtonHover,
+        },
+        span: {
+          color: extendedSemanticColors.teachingBubbleBackground,
+        },
+        '.ms-Button-label': {
+          fontSize: FontSizes.size13,
+        },
+      },
+    },
+    secondaryButton: {
+      backgroundColor: extendedSemanticColors.teachingBubbleBackground,
+      selectors: {
+        '.ms-Button-label': {
+          fontSize: FontSizes.size13,
+        },
+        '&:hover': {
+          backgroundColor: extendedSemanticColors.primaryButtonBackgroundPressed,
+        },
+        '&:focus': {
+          backgroundColor: extendedSemanticColors.primaryButtonBackgroundPressed,
         },
       },
     },

diff --git a/packages/azure-themes/src/stories/Themes/Themes.tsx b/packages/azure-themes/src/stories/Themes/Themes.tsx
@@ -38,10 +38,12 @@ import { TagPickerBasicExample } from '../components/tags';
 import { DetailsListCompactExample } from '../components/detailsList';
 import { DatePickerBoundedExample } from '../components/dateBoundary';
 import { PivotBasicExample } from '../components/Pivots';
+import { TeachingBubbleBasicExample } from '../components/TeachingBubble';
 
 const Example = () => (
   <Stack gap={8} horizontalAlign="center" style={{ maxWidth: 1000 }}>
     <Stack gap={8} horizontalAlign="center">
+      <TeachingBubbleBasicExample />
       <PivotBasicExample />
       <Label>Buttons</Label>
       <DefaultButton text="DefaultButton" />

diff --git a/packages/azure-themes/src/stories/components/TeachingBubble.tsx b/packages/azure-themes/src/stories/components/TeachingBubble.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+import { useBoolean } from '@uifabric/react-hooks';
+
+const examplePrimaryButtonProps: IButtonProps = {
+  children: 'Try it out',
+};
+
+export const TeachingBubbleBasicExample: React.FunctionComponent = () => {
+  const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
+  const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
+    () => ({
+      children: 'Maybe later',
+      onClick: toggleTeachingBubbleVisible,
+    }),
+    [toggleTeachingBubbleVisible],
+  );
+
+  return (
+    <div>
+      <DefaultButton
+        id="targetButton"
+        onClick={toggleTeachingBubbleVisible}
+        text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
+      />
+
+      {teachingBubbleVisible && (
+        <TeachingBubble
+          target="#targetButton"
+          primaryButtonProps={examplePrimaryButtonProps}
+          secondaryButtonProps={exampleSecondaryButtonProps}
+          onDismiss={toggleTeachingBubbleVisible}
+          hasCloseButton={true}
+          headline="Discover what’s trending around you"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni
+          harum non?
+        </TeachingBubble>
+      )}
+    </div>
+  );
+};
diff --git a/packages/azure-themes/src/stories/components/detailsList.tsx b/packages/azure-themes/src/stories/components/detailsList.tsx
@@ -72,7 +72,7 @@ export class DetailsListCompactExample extends React.Component<{}, IDetailsListC
         <Announced message={`Number of items after filter applied: ${items.length}.`} />
         <MarqueeSelection selection={this._selection}>
           <DetailsList
-            compact={false}
+            compact={true}
             items={items}
             columns={this._columns}
             setKey="set"