Add GitHub logo link to DemoMainLayout and corresponding styles

[AClerbois]

Pull Request

📖 Description

Add an anchor to point to Github repo with the branch v5

🎫 Issues

N/A

👩‍💻 Reviewer Notes

Open the example demo page and check if the logo is available and if you click on it you can reach the dev-v5 branch on the Github FluentUIBlazor repo

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component
• I have updated the Example

⏭ Next Steps

When you will merge the branch v5 to the new version, you should replace the target link

[Copilot]

Pull request overview

This PR adds a GitHub logo link to the demo application's main layout header, providing users with quick access to the FluentUI Blazor repository's dev-v5 branch.

Key Changes:

• Added a new GitHubLogo.razor component with an SVG icon
• Integrated the GitHub link in the header toolbar of DemoMainLayout.razor
• Added CSS styles for the GitHub logo link with centered flex layout

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
GitHubLogo.razor	New SVG component for rendering the GitHub icon with appropriate styling and accessibility attributes
DemoMainLayout.razor	Added anchor element with GitHub logo in the header toolbar, positioned between the spacer and theme toggle button
DemoMainLayout.razor.css	Added .github-logo-link class with flex layout styling to properly size and center the GitHub icon

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The anchor link is missing an aria-label attribute. Since the link contains only an SVG icon (marked as aria-hidden="true") without visible text, screen readers won't be able to describe the link's purpose to users with disabilities. Add an aria-label attribute to provide a descriptive label, for example: aria-label="Visit FluentUI Blazor GitHub repository".

[Copilot]

[nitpick] The SVG contains an unnecessary empty comment <!--!--> at the end of the opening tag. This comment serves no purpose and should be removed for cleaner markup.

Suggested change

	<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!-->
	<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20">

[Copilot]

The SVG viewBox is set to "0 0 20 20" but the path contains coordinates that extend beyond this boundary (e.g., C20.356 4.583 15.789 0 10.178 0z). This will cause the right edge of the GitHub icon to be clipped. Consider updating the viewBox to "0 0 21 20" or adjusting the path coordinates to fit within the current viewBox.

Suggested change

	<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!-->
	<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 21 20"><!--!-->

[dvoituron]

Why not to use a FluentButton ? This is a demo website to explain how to use our components 😀

[dvoituron]

You can use a FluentButton with this icon:

public class Github : Icon { public Github() : base("Github", IconVariant.Regular, IconSize.Size20, "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.178 0C4.55 0 0 4.583 0 10.254c0 4.533 2.915 8.369 6.959 9.727 0.506 0.102 0.691 -0.221 0.691 -0.492 0 -0.238 -0.017 -1.053 -0.017 -1.901 -2.831 0.611 -3.421 -1.222 -3.421 -1.222 -0.455 -1.188 -1.129 -1.494 -1.129 -1.494 -0.927 -0.628 0.068 -0.628 0.068 -0.628 1.028 0.068 1.567 1.053 1.567 1.053 0.91 1.562 2.376 1.12 2.966 0.849 0.084 -0.662 0.354 -1.12 0.64 -1.375 -2.258 -0.238 -4.634 -1.12 -4.634 -5.059 0 -1.12 0.404 -2.037 1.045 -2.75 -0.101 -0.255 -0.455 -1.307 0.101 -2.716 0 0 0.859 -0.272 2.797 1.053a9.786 9.786 0 0 1 2.545 -0.34c0.859 0 1.735 0.119 2.544 0.34 1.938 -1.324 2.797 -1.053 2.797 -1.053 0.556 1.409 0.202 2.462 0.101 2.716 0.657 0.713 1.045 1.63 1.045 2.75 0 3.939 -2.376 4.804 -4.651 5.059 0.371 0.323 0.691 0.934 0.691 1.901 0 1.375 -0.017 2.479 -0.017 2.818 0 0.272 0.185 0.594 0.691 0.493 4.044 -1.358 6.959 -5.195 6.959 -9.727C20.356 4.583 15.789 0 10.178 0z\"></path>") { } }

[AClerbois]

Duplicated PR #4388 > I close this one