microsoft · pompomon · Feb 5, 2020 · Feb 3, 2020 · Feb 4, 2020 · Feb 4, 2020
@@ -47,6 +47,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
 - Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
 - Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))
+- Move `zIndex` values from default variable values and styles to siteVariables object in Teams theme @pompomon ([#2311](https://github.com/microsoft/fluent-ui-react/pull/2311)) 
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))

@@ -94,7 +94,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
     borderRadius: v.borderRadius,
     boxShadow: v.actionMenuBoxShadow,
     // we need higher zIndex for the action menu in order to be displayed above the focus border of the chat message
-    zIndex: 1000,
+    zIndex: v.overlayZIndex,
 
     ...(initialPopperStyles as ICSSInJSStyle),
 
@@ -163,7 +163,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
       width: 'auto',
       borderRadius: '50%',
       top: pxToRem(4),
-      zIndex: 1,
+      zIndex: v.zIndex,
       [sidePosition]: 0,
       transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)',
     }

@@ -29,6 +29,8 @@ export interface ChatMessageVariables {
   reactionGroupBorderColor: string
   showActionMenu?: boolean
   timestampColorMine: string
+  zIndex: number
+  overlayZIndex: number
 }
 
 export default (siteVars): ChatMessageVariables => ({
@@ -60,4 +62,6 @@ export default (siteVars): ChatMessageVariables => ({
   reactionGroupBorderColor: 'transparent',
   showActionMenu: undefined,
   timestampColorMine: siteVars.colors.grey[500],
+  zIndex: siteVars.zIndexes.foreground,
+  overlayZIndex: siteVars.zIndexes.overlay,
 })
@@ -38,7 +38,7 @@ export default (siteVariables): Partial<DialogVariables> => ({
   headerMargin: `0 0 ${pxToRem(8)} 0`,
 
   overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one
-  overlayZIndex: 1000,
+  overlayZIndex: siteVariables.zIndexes.overlay,
 
   headerActionMargin: `${pxToRem(-3)} ${pxToRem(-8)} 0 0`,
 })
@@ -148,7 +148,7 @@ const dropdownStyles: ComponentSlotStylesPrepared<DropdownPropsAndState, Dropdow
     borderStyle: 'solid',
     borderWidth: p.open ? v.listBorderWidth : '0px',
     borderColor: v.listBorderColor,
-    zIndex: 1000,
+    zIndex: v.overlayZIndex,
     maxHeight: v.listMaxHeight,
     overflowY: 'auto',
     width: getWidth(p, v),

@@ -41,6 +41,7 @@ export interface DropdownVariables {
   toggleIndicatorSize: string
   triggerButtonColorHover: string
   width: string
+  overlayZIndex: number
 }
 
 const [cornerRadius, _12px_asRem] = [3, 12].map(v => pxToRem(v))
@@ -82,6 +83,7 @@ export default (siteVars): DropdownVariables => ({
   toggleIndicatorSize: pxToRem(32),
   triggerButtonColorHover: siteVars.bodyColor,
   width: pxToRem(356),
+  overlayZIndex: siteVars.zIndexes.overlay,
 
   // these should only apply when there is content in the image/media slot:
   listItemHeaderFontSize: siteVars.fontSizes.medium,

@@ -29,7 +29,7 @@ export default {
       ':hover': {
         [`& .${Embed.slotClassNames.control}`]: {
           opacity: 1,
-          zIndex: 1,
+          zIndex: v.zIndex,
         },
       },
     }

@@ -4,6 +4,7 @@ export interface EmbedVariables {
   width: string
   height: string
   focusBorderColor: string
+  zIndex: number
 }
 
 export default (siteVariables): EmbedVariables => ({
@@ -13,4 +14,5 @@ export default (siteVariables): EmbedVariables => ({
   width: undefined,
   height: undefined,
   focusBorderColor: siteVariables.colors.brand[500],
+  zIndex: siteVariables.zIndexes.foreground,
 })
@@ -72,7 +72,7 @@ const listItemStyles: ComponentSlotStylesPrepared<ListItemStylesProps, ListItemV
         ':focus': borderFocusStyles[':focus'],
         ':focus-visible': {
           ...borderFocusStyles[':focus-visible'],
-          zIndex: 1,
+          zIndex: v.zIndex,
         },
 
         ...(p.selected && selectedStyle(v)),

@@ -6,6 +6,7 @@ export interface ListItemVariables {
 
   headerLineHeight: string
   headerFontSize: string
+  zIndex: number
 
   // Header Media
   headerMediaFontSize: string
@@ -31,6 +32,7 @@ export default (siteVariables: any): ListItemVariables => {
   return {
     minHeight: pxToRem(48),
     rootPadding: `0 ${pxToRem(18)} 0 ${pxToRem(20)}`,
+    zIndex: siteVariables.zIndexes.foreground,
 
     // Header
     // TODO: prod app uses 17.5px here, it should be 16px per the design guide!

@@ -134,14 +134,14 @@ const pointingBeak = ({
       height: pxToRem(10),
       border: 'none',
       ...borders,
-      zIndex: 2,
+      zIndex: v.beakZIndex,
       transition: 'background .1s ease',
     },
   }
 }
 
 const menuItemStyles: ComponentSlotStylesPrepared<MenuItemPropsAndState, MenuVariables> = {
-  wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
+  wrapper: ({ props, variables: v }): ICSSInJSStyle => {
     const {
       active,
       disabled,
@@ -425,7 +425,7 @@ const menuItemStyles: ComponentSlotStylesPrepared<MenuItemPropsAndState, MenuVar
     }),
   }),
 
-  menu: () => ({ zIndex: 1000 }),
+  menu: ({ variables: v }) => ({ zIndex: v.menuZIndex }),
 
   indicator: ({ props: p }) => ({
     position: 'relative',

@@ -57,6 +57,9 @@ export interface MenuVariables {
 
   dividerHeight: string
   borderWidth: string
+
+  menuZIndex: number
+  beakZIndex: number
 }
 
 export default (siteVars: any): MenuVariables => {
@@ -122,5 +125,7 @@ export default (siteVars: any): MenuVariables => {
 
     dividerHeight: pxToRem(1),
     borderWidth: pxToRem(1),
+    menuZIndex: siteVars.zIndexes.overlay,
+    beakZIndex: siteVars.zIndexes.menuItem,
   }
 }
@@ -5,7 +5,7 @@ export interface PopupVariables {
 }
 
 export default (siteVars: any): PopupVariables => ({
-  zIndex: 1000,
+  zIndex: siteVars.zIndexes.overlay,
   contentColor: siteVars.colorScheme.default.foreground,
   contentBackgroundColor: siteVars.colorScheme.default.background,
 })
@@ -7,7 +7,6 @@ const toolbarMenuStyles = {
 
     return {
       display: 'flex',
-      zIndex: 1000,
       flexDirection: 'column',
       listStyleType: 'none',
       margin: 0,
@@ -19,6 +18,7 @@ const toolbarMenuStyles = {
       borderWidth: v.menuBorderWidth,
       borderRadius: v.menuBorderRadius,
       width: v.menuWidth,
+      zIndex: v.overlayZIndex,
     }
   },
 }

@@ -65,6 +65,8 @@ export interface ToolbarVariables {
 
   customItemHorizontalPadding: string
   customItemVerticalPadding: string
+
+  overlayZIndex: number
 }
 
 export default (siteVars: any): ToolbarVariables => ({
@@ -120,4 +122,6 @@ export default (siteVars: any): ToolbarVariables => ({
 
   customItemHorizontalPadding: pxToRem(16),
   customItemVerticalPadding: pxToRem(4),
+
+  overlayZIndex: siteVars.zIndexes.overlay,
 })
@@ -3,5 +3,5 @@ export interface TooltipVariables {
 }
 
 export default (siteVars: any): TooltipVariables => ({
-  zIndex: 1000,
+  zIndex: siteVars.zIndexes.overlay,
 })
@@ -55,14 +55,14 @@ const getBorderFocusStyles = (args: BorderFocusStyles): ICSSInJSStyle => {
       borderColor: 'transparent',
 
       ':before': getPseudoElementStyles({
-        zIndex: '1',
+        zIndex: sv.zIndexes.foreground,
         borderEdgeValue: borderPadding == null ? '0' : `-${borderPadding}`,
         borderColor: focusInnerBorderColor,
         ...defaultBorderStyles,
       }),
 
       ':after': getPseudoElementStyles({
-        zIndex: '1',
+        zIndex: sv.zIndexes.foreground,
         borderEdgeValue:
           borderPadding == null
             ? `-${borderWidth}`

@@ -61,6 +61,18 @@ export const lineHeightMedium = 1.4286
 export const lineHeightLarge = 1.3333
 export const lineHeightLarger = 1.3333
 
+//
+// Z-INDEX
+// Used to maintain proper stack order of components
+//
+export const zIndexes: Record<string, number> = {
+  background: 0, // Default value
+  foreground: 1, // Put a component in front
+  menuItem: 2, // Currently used only for menu item beak element
+  overlay: 1000, // Dialog/popup/menu overlays
+  debug: 999999999, // for debug purposes
+}
+
 //
 // SEMANTIC ASSIGNMENTS
 //