Skip to content

Dmceachernmsft/ChatButtonCustomIcons#1524

Merged
dmceachernmsft merged 17 commits intomainfrom
dmceachernmsft/ChatButtonCustomIcons
Feb 23, 2022
Merged

Dmceachernmsft/ChatButtonCustomIcons#1524
dmceachernmsft merged 17 commits intomainfrom
dmceachernmsft/ChatButtonCustomIcons

Conversation

@dmceachernmsft
Copy link
Copy Markdown
Member

What

Move Icon registration for chat and people buttons in callwithcomposite

Why

This allows for customization of icons in composite through existing API for customizing icons

https://skype.visualstudio.com/SPOOL/_workitems/edit/2769959
https://skype.visualstudio.com/SPOOL/_workitems/edit/2769961

How Tested

Ran locally on my machine passing in custom Icons

@github-actions
Copy link
Copy Markdown
Contributor

Comment thread packages/communication-react/review/communication-react.api.md Outdated
Comment thread packages/react-composites/src/composites/common/icons.tsx Outdated
@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

ControlBarChatButtonInactive: <Chat20Regular />,
/* @conditional-compile-remove-from(stable): meeting/calling-composite */
ControlBarPeopleButton: <People20Regular />,
/* @conditional-compile-remove-from(stable): meeting/calling-composite */
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Further down in this file, this should have a CallWithChatCompositeIcons interface that 'picks' the ControlBarChatButtonActive, ControlBarChatButtonInactive etc.

And just noticing, CallCompositeIcons should not have
| /* @conditional-compile-remove-from(stable) Chat_Notification_Icon */ 'ControlBarButtonBadgeIcon' below

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

(would be better as a separate PR)

Copy link
Copy Markdown
Member

@JamesBurnside JamesBurnside Feb 23, 2022

Choose a reason for hiding this comment

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

In fact, I needa do some API changes after ARB review, I'll make these changes when this PR goes in

Copy link
Copy Markdown
Member Author

@dmceachernmsft dmceachernmsft Feb 23, 2022

Choose a reason for hiding this comment

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

this was something I was wondering about when working on this! those types at the bottom weren't needed to implement this. is that for the base composite to know what are valid icons to override?

Copy link
Copy Markdown
Member

@JamesBurnside JamesBurnside Feb 23, 2022

Choose a reason for hiding this comment

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

It's for contoso developers to easily have a list of icons they can override, though it's a shame we don't have any typeguarding when using icons to say - "hey! this icon isn't part of the CallWithChatCompoisteIcons interface! I'm, gonna fail your build"

We probably could - we would have to define our own Chat/Call/CallWithChatCompositeIcon that wraps the fluent icon and only allows a subset of strings in the iconName that exist in the xCompositeIcon interface

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

cool! I thought it might be something like this when intellisense didn't see the other icons right away!

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@JamesBurnside might be worth doing actually, I like that idea.
<CallIcon iconName="something" />
<ChatIcon iconName="something" />
<CallWithChatIcon iconName="something" />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Actually doing it now! Along the lines of this:

image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

PR here: #1533

Comment thread packages/react-composites/src/composites/common/icons.tsx Outdated
@github-actions
Copy link
Copy Markdown
Contributor

Comment thread change/@internal-react-composites-45a38e3e-8401-47e3-81da-d22ce122289f.json Outdated
@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

Comment thread packages/react-composites/src/composites/common/icons.tsx Outdated
Comment thread packages/react-composites/src/composites/common/icons.tsx Outdated
@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@dmceachernmsft dmceachernmsft merged commit 7e0819b into main Feb 23, 2022
@dmceachernmsft dmceachernmsft deleted the dmceachernmsft/ChatButtonCustomIcons branch February 23, 2022 20:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants