Skip to content

Iconograpy page tag buttons - #1693

Merged
Marcel W. (marcelwgn) merged 18 commits into
microsoft:mainfrom
AndrewKeepCoding:iconograpy-page-tag-buttons
Jan 13, 2025
Merged

Marcel W. (marcelwgn) merged 18 commits into
microsoft:mainfrom
AndrewKeepCoding:iconograpy-page-tag-buttons

Conversation

@AndrewKeepCoding

Copy link
Copy Markdown
Contributor

Description

This PR will add "tag" buttons to the icon details pane on the "Iconography" page. When the "tag" button is clicked, the "tag" will be set to the icon search box to filter icons by the "tag" text.

This PR will also update the placeholder on the icon search box to "Search icons by name, code, tags...".

Motivation and Context

How Has This Been Tested?

Tested on VS.

Screenshots (if appropriate):

image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
Comment thread WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml Outdated
Comment thread WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml Outdated
Comment thread WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml Outdated
Comment thread WinUIGallery/DataModel/IconsData.json Outdated
Comment thread WinUIGallery/DataModel/IconsData.json Outdated
Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Niels Laute <niels.laute@live.nl>
Comment thread WinUIGallery/WinUIGallery.csproj Outdated
Marcel W. (marcelwgn) pushed a commit that referenced this pull request Jan 12, 2025
<!--- Provide a general summary of your changes in the Title above -->

## Description
This update adds tags to the icons listed in `IconsData.json`, improving
the searchability of icons on the iconography page. The only change is
the addition of tags to the `IconsData.json` file.

**How the Tags Were Chosen:**  
- For many icons, the tags are derived from those used in the [Fluent UI
System Icons](https://github.com/microsoft/fluentui-system-icons.git)
project, particularly for common icons.
- For most icons and icons that not included in the Fluent UI System
Icons, tags were added through a combination of personal effort and
assistance from AI.

## Motivation and Context
- Many icons currently lack tags, limiting the effectiveness of this
feature. Adding tags to all icons ensures that the search functionality
is fully utilized, making it easier for users to find the icons they
need efficiently. This enhancement aligns with the goal of providing a
seamless and user-friendly experience.
- Closes #1705 
- Related to #1544, #1562 and #1693

## How Has This Been Tested?
**Manually tested**

## Screenshots

![image](https://github.com/user-attachments/assets/6d289244-6996-4a4f-8c7b-5c51f58fb5cc)

![image](https://github.com/user-attachments/assets/9f9b6d9e-0829-474e-b712-07296903076a)


## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [X] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

@marcelwgn Marcel W. (marcelwgn) left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for creating this PR, very good idea!

Comment thread WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml Outdated
Comment thread WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml
<ItemsView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<ItemContainer>
<Button Content="{x:Bind Mode=OneWay}" Click="TagButton_Click" />

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should provide a fitting UIA name here to indicate what this button does (imagine what the "..." button is supposed to do).

…text

Co-authored-by: Marcel W. <marcel.alex.wagner@outlook.com>
@marcelwgn

Copy link
Copy Markdown
Contributor

/azp run

@AndrewKeepCoding
Andrew KeepCoding (AndrewKeepCoding) deleted the iconograpy-page-tag-buttons branch January 13, 2025 11:09
Niels Laute (niels9001) pushed a commit that referenced this pull request Jan 13, 2025
…1724)

## Description
This PR includes the following updates to improve the clarity and
conciseness of the icon details:
1. **Remove Unicode Point from Icon Details**: The `unicode point` has
been removed, as it adds redundancy without offering additional value.
The primary ways to use font icons (`text glyph` in XAML and `code
glyph` in C#) are already displayed.
2. **Remove Duplicate Icon Name**: Eliminates the repeated display of
the icon name within the icon details, streamlining the information
presented.

## Motivation and Context
- This change is required to streamline the icon details for clarity and
conciseness, especially with #1693 on the way.
- Closes #1722 

## How Has This Been Tested?
**Manually tested**

## Screenshots (if appropriate):

![image](https://github.com/user-attachments/assets/69f6fe64-aaa1-4717-b83b-1e02c5638260)

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [X] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

4 participants