Changed paddingLeft to only apply to last links in MessageBar (#19009)

Co-authored-by: Tabitha Hsia <tahsia@microsoft.com>
microsoft · Jul 23, 2021 · 9e2d5d8 · 9e2d5d8
1 parent a86d54e
commit 9e2d5d8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/change/@fluentui-react-b5c1867c-c718-4efe-aa45-35500f317507.json b/change/@fluentui-react-b5c1867c-c718-4efe-aa45-35500f317507.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Removed left padding for links in MessageBar and fixed examples",
+  "packageName": "@fluentui/react",
+  "email": "tahsia@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts
@@ -208,7 +208,7 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
       {
         lineHeight: 16,
         selectors: {
-          '& span a': {
+          '& span a:last-child': {
             paddingLeft: 4,
           },
         },

diff --git a/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
@@ -113,7 +113,7 @@ exports[`MessageBar snapshots renders MessageBar correctly 1`] = `
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -240,7 +240,7 @@ exports[`MessageBar snapshots renders a error MessageBar correctly 1`] = `
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -366,7 +366,7 @@ exports[`MessageBar snapshots renders a info MessageBar correctly 1`] = `
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -492,7 +492,7 @@ exports[`MessageBar snapshots renders a multiline MessageBar correctly 1`] = `
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -619,7 +619,7 @@ exports[`MessageBar snapshots renders a multiline error MessageBar correctly 1`]
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -745,7 +745,7 @@ exports[`MessageBar snapshots renders a multiline info MessageBar correctly 1`]
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -872,7 +872,7 @@ exports[`MessageBar snapshots renders a multiline severeWarning MessageBar corre
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -999,7 +999,7 @@ exports[`MessageBar snapshots renders a multiline success MessageBar correctly 1
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -1126,7 +1126,7 @@ exports[`MessageBar snapshots renders a multiline warning MessageBar correctly 1
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -1253,7 +1253,7 @@ exports[`MessageBar snapshots renders a severeWarning MessageBar correctly 1`] =
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -1380,7 +1380,7 @@ exports[`MessageBar snapshots renders a success MessageBar correctly 1`] = `
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >
@@ -1507,7 +1507,7 @@ exports[`MessageBar snapshots renders a warning MessageBar correctly 1`] = `
             {
               line-height: 16px;
             }
-            & span a {
+            & span a:last-child {
               padding-left: 4px;
             }
       >