From 1138039a2ef48ad4eaa245e12248cada904810f2 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Mon, 6 Jan 2025 21:07:56 +0100
Subject: [PATCH] Fix #3130 by not applying inline margin for hypertext.
 (#3131)

---
 .../Pages/Anchor/Examples/AnchorIcons.razor      | 16 ++++++++++++++++
 .../Components/Anchor/FluentAnchor.razor.css     |  2 --
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/examples/Demo/Shared/Pages/Anchor/Examples/AnchorIcons.razor b/examples/Demo/Shared/Pages/Anchor/Examples/AnchorIcons.razor
index 8a1464dd4e..0ef7d4b2a1 100644
--- a/examples/Demo/Shared/Pages/Anchor/Examples/AnchorIcons.razor
+++ b/examples/Demo/Shared/Pages/Anchor/Examples/AnchorIcons.razor
@@ -19,6 +19,22 @@
     </FluentAnchor>
 </div>
 <h4>Hypertext appearane</h4>
+<p>
+    By default, the margin between the icon and the link is equal to the margin that is used for the other
+    appearances. If you find that margin to large, you can add the following to your CSS:<br/><br />
+    <CodeSnippet>
+        /* for icon at the start */
+        fluent-anchor[appearance="hypertext"]::part(start) {
+            margin-inline-end: calc(var(--design-unit) * 1px);
+        }
+        /* for icon at the end */
+        fluent-anchor[appearance="hypertext"]::part(end) {
+        margin-inline-start: calc(var(--design-unit) * 1px);
+        }
+    </CodeSnippet>
+    <br />
+    <em>Do not use these styles if there is no icon being displayed with a hypertext. It will cause the hypertext to get a margin at the stat/end.</em>
+</p>
 <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
     <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
         Icon at start
diff --git a/src/Core/Components/Anchor/FluentAnchor.razor.css b/src/Core/Components/Anchor/FluentAnchor.razor.css
index 0294c04cae..a269def6d3 100644
--- a/src/Core/Components/Anchor/FluentAnchor.razor.css
+++ b/src/Core/Components/Anchor/FluentAnchor.razor.css
@@ -3,12 +3,10 @@ fluent-anchor[appearance="hypertext"]::part(start) {
     display: unset;
     position: relative;
     top: calc(var(--design-unit)* 1px);
-    margin-inline-end: calc(var(--design-unit) * 1px);
 }
 
 fluent-anchor[appearance="hypertext"]::part(end) {
     display: unset;
     position: relative;
     top: calc(var(--design-unit)* 1px);
-    margin-inline-start: calc(var(--design-unit) * 1px);
 }