Fix #3130 by not applying inline margin for hypertext. (#3131)

microsoft · Jan 6, 2025 · 1138039 · 1138039
1 parent 1f5479d
commit 1138039
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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);
 }