Add GitHub logo link to DemoMainLayout and corresponding styles#4384
Add GitHub logo link to DemoMainLayout and corresponding styles#4384AClerbois wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
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.razorcomponent 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.
| <a href="https://github.com/microsoft/fluentui-blazor/tree/dev-v5" class="github-logo-link" target="_blank" | ||
| rel="noopener noreferrer" aria-label="Visit FluentUI Blazor GitHub repository"> |
There was a problem hiding this comment.
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".
| @@ -0,0 +1,5 @@ | |||
| <svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!--> | |||
There was a problem hiding this comment.
[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.
| <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"> |
| @@ -0,0 +1,5 @@ | |||
| <svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!--> | |||
There was a problem hiding this comment.
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.
| <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"><!--!--> |
|
Why not to use a FluentButton ? This is a demo website to explain how to use our components 😀 |
| <FluentSpacer /> | ||
|
|
||
| @* GitHub link *@ | ||
| <a href="https://github.com/microsoft/fluentui-blazor/tree/dev-v5" class="github-logo-link" target="_blank" |
There was a problem hiding this comment.
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>") { } }
|
Duplicated PR #4388 > I close this one |
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
Component-specific
⏭ Next Steps
When you will merge the branch v5 to the new version, you should replace the target link