feat(Chat): Add expandable control messages prototype #1765
Conversation
sophieH29
requested review from
dvdzkwsk,
kuzhelov,
layershifter,
levithomason,
miroslavstastny and
mnajdova
as code owners
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
| @@ -20,6 +20,7 @@ const chatMessageBehavior: Accessibility = () => ({ | |||
| 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
Based on @mnajdova 's work #1687
Collapsed:
Expanded:
