feat(Chat): Add expandable control messages prototype#1765
feat(Chat): Add expandable control messages prototype#1765
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1765 +/- ##
=======================================
Coverage 69.76% 69.76%
=======================================
Files 867 867
Lines 7353 7353
Branches 2135 2158 +23
=======================================
Hits 5130 5130
Misses 2215 2215
Partials 8 8
Continue to review full report at Codecov.
|
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/ControlMessage.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Outdated
Show resolved
Hide resolved
docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx
Show resolved
Hide resolved
| attributes: { | ||
| root: { | ||
| [IS_FOCUSABLE_ATTRIBUTE]: true, | ||
| tabIndex: -1, |
There was a problem hiding this comment.
Is this change for the prototyping or a real fix?
There was a problem hiding this comment.
it's additional safety thing. Helps both for prototype and overall behavior. Chat Message should be always focusable, meaning - to have set tabIndex=-1. When component re-renders based on state change, FocusZone won't pick this change up unless you move arrow keys, so the chat message will be rendered without tabIndex - thus not focusable
…ble-control-messages' of https://github.com/stardust-ui/react into proto/expandable-control-messages # Conflicts: # CHANGELOG.md
| <> | ||
| {this.props.icon ? <Icon name="participant-add" /> : null} | ||
| <Ref innerRef={this.messageRef}> | ||
| <Chat.Message {...this.props.message} className="control-message" /> |
There was a problem hiding this comment.
Let's follow the convention for the other stardust component's classNames. It should be something like ui-chat__message_control
mnajdova
left a comment
There was a problem hiding this comment.
See one final comment, looks good otherwise :)
Based on @mnajdova 's work #1687
Collapsed:

Expanded:
