Moving zIndex values to siteVariables (#2311)

* Moving zIndex values to siteVariables

* Update Changelog

* Fix changelog

* Fix changelog

* Move zIndex values from component styles to  vars

* refactoring

* Comment changes

* Update packages/react/src/themes/teams/siteVariables.ts

Co-Authored-By: Oleksandr Fediashov <[email protected]>

* PR comments fixes

* Update chenglog

Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: pompomon

CHANGELOG.md

@@ -49,6 +49,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))

packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts

@@ -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%)',
     }

packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts

@@ -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,
 })

packages/react/src/themes/teams/components/Dialog/dialogVariables.ts

@@ -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`,
 })

packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts

@@ -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),

packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts

@@ -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,

packages/react/src/themes/teams/components/Embed/embedStyles.ts

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

packages/react/src/themes/teams/components/Embed/embedVariables.ts

@@ -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,
 })

packages/react/src/themes/teams/components/List/listItemStyles.ts

@@ -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)),

packages/react/src/themes/teams/components/List/listItemVariables.ts

@@ -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!