Message bar zoom (microsoft#28100)

* MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons * change file * snaps
mainframev · Jun 2, 2023 · 4a9f03c · 4a9f03c
1 parent 0868df8
commit 4a9f03c
Show file tree

Hide file tree

Showing 3 changed files with 218 additions and 1 deletion.
diff --git a/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json b/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts
@@ -177,6 +177,15 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
         display: 'flex',
         width: '100%',
         lineHeight: 'normal',
+        [SmallScreenSelector]: {
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr auto',
+          gridTemplateRows: '1fr auto',
+          gridTemplateAreas: `
+            "icon text close"
+            "action action action"
+          `,
+        },
       },
     ],
     iconContainer: [
@@ -188,6 +197,9 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
         display: 'flex',
         flexShrink: 0,
         margin: '8px 0 8px 12px',
+        [SmallScreenSelector]: {
+          gridArea: 'icon',
+        },
       },
     ],
     icon: {
@@ -207,6 +219,9 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
         flexGrow: 1,
         margin: 8,
         ...fonts.small,
+        [SmallScreenSelector]: {
+          gridArea: 'text',
+        },
         selectors: {
           [HighContrastSelector]: {
             ...getHighContrastNoAdjustStyle(),
@@ -252,7 +267,14 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
         whiteSpace: 'pre-wrap',
       },
     ],
-    dismissSingleLine: classNames.dismissSingleLine,
+    dismissSingleLine: [
+      classNames.dismissSingleLine,
+      {
+        [SmallScreenSelector]: {
+          gridArea: 'close',
+        },
+      },
+    ],
     expandSingleLine: classNames.expandSingleLine,
     dismissal: [classNames.dismissal, dismissalAndExpandStyle],
     expand: [classNames.expand, dismissalAndExpandStyle],
@@ -269,9 +291,17 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
         // reset forced colors to browser control for inner actions
         forcedColorAdjust: 'auto',
         MsHighContrastAdjust: 'auto',
+        [SmallScreenSelector]: {
+          gridArea: 'action',
+          marginRight: 8,
+          marginBottom: 8,
+        },
         selectors: {
           '& button:nth-child(n+2)': {
             marginLeft: 8,
+            [SmallScreenSelector]: {
+              marginBottom: 0,
+            },
           },
         },
       },