Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Chat): add actionMenu prop for ChatMessage #811

Merged
merged 21 commits into from
Feb 5, 2019

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jan 31, 2019

actions vs actionMenu

Initially, I was thinking about actions, but this shorthand points to Menu component and it was really confusing why the code below will be broken:

<ChatMessage actions={['one', 'two']} />

Also picks changes from #765.

@layershifter layershifter changed the title [WIP] Chat: add actionMenu prop for ChatMessage Chat: add actionMenu prop for ChatMessage Jan 31, 2019
@layershifter layershifter changed the title Chat: add actionMenu prop for ChatMessage feat(Chat): add actionMenu prop for ChatMessage Jan 31, 2019
…thub.com/stardust-ui/react into feat/chat-message-actions

# Conflicts:
#	CHANGELOG.md
#	packages/react/src/components/Chat/ChatMessage.tsx
@codecov
Copy link

codecov bot commented Feb 1, 2019

Codecov Report

❗ No coverage uploaded for pull request base (master@6352b50). Click here to learn what that means.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##             master     #811   +/-   ##
=========================================
  Coverage          ?   93.54%           
=========================================
  Files             ?       21           
  Lines             ?      728           
  Branches          ?       69           
=========================================
  Hits              ?      681           
  Misses            ?       47           
  Partials          ?        0

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6352b50...5e3befb. Read the comment docs.

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

### Features
- Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822))
- Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811))
Copy link
Contributor

Choose a reason for hiding this comment

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

just putting my vote on that: would rather prefer actions than actionsMenu for the following reasons

  • it will be easier to avoid breaking changes in future - for example, if at some point it will become an actionsPanel
  • it is consistent with the naming taken for Attachment component, where there is an action slot

Copy link
Contributor

Choose a reason for hiding this comment

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

but given the example from description, agree that it is definitely better to use singular menu noun in the name of the prop, to properly reflect underlying semantics

Copy link
Contributor

Choose a reason for hiding this comment

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

actually, a bit surprised that we are not handling array as 'primitive' shorthand values - is there any particular reason for that? Might expect that this feature is necessary for all the places where collection-container component stays as a default one for shorthand value

Copy link
Member Author

@layershifter layershifter Feb 5, 2019

Choose a reason for hiding this comment

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

I can be wrong, but this decision came from the consistency point: you can pass only ShorthandValue or ShorthandValue[]. However, I understand your point, had the same feeling about it.

Copy link
Contributor

Choose a reason for hiding this comment

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

got it, thank you @layershifter! actually, this original problem (actions and necessity to compromise on actionsMenu) is a good example that might serve as an inspiration for us to further refine this moment in future

…thub.com/stardust-ui/react into feat/chat-message-actions

# Conflicts:
#	CHANGELOG.md
#	packages/react/src/components/Chat/ChatMessage.tsx
#	packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
event.preventDefault()
},
handleBlur = (e: React.FocusEvent) => {
const shouldPreserveFocusState = _.invoke(e, 'currentTarget.contains', e.relatedTarget)
Copy link
Contributor

Choose a reason for hiding this comment

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

could you, please, suggest the case we would like to cover with that?

Copy link
Member Author

Choose a reason for hiding this comment

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

It comes from the accessibility point: when we will click Enter key, the focus will be moved to another element.

With

chat-with1

Without

chat-without

Copy link
Contributor

Choose a reason for hiding this comment

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

then, frankly, I am a bit confused with onBlur event being raised unconditionally - so, for instance, even if shouldPreserveFocusState is true (and, as a consequence, even this.state.focused remains to be true) - even in this situation we will trigger blur event for ChatMessage.

So, couple of things that I would like to solve here:

  • ensure that I am not missing anything in this thought
  • and, in case if so, it seems that we need to resolve this emerged problem that is about implicit reliance of events subscriptions - we should strive for component's behavioural intents being explicit

Could you, please, to resolve this issue for now, just provide a comment that will describe the intent of these lines? Thank you!

Copy link
Member Author

Choose a reason for hiding this comment

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

this.state.focused controls is focused the ChatMessage on any of its children, when we're navigating with keyboard focused elements changes and there is no way to use :focus:

image

May be proper naming can make it better?

Copy link
Contributor

Choose a reason for hiding this comment

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

yes, totally agree about naming - this should help. However, it seems that many things are involved here, so it is, probably, much better to address naming and all the related moments in a dedicated PR - what do you think?

@kuzhelov kuzhelov added the needs author feedback Author's opinion is asked label Feb 5, 2019
@layershifter layershifter removed the needs author feedback Author's opinion is asked label Feb 5, 2019
@@ -56,6 +62,13 @@ export interface ChatMessageProps
/** A message can format the badge to appear at the start or the end of the message. */
badgePosition?: 'start' | 'end'

/**
* Called after user's focus.
Copy link
Contributor

Choose a reason for hiding this comment

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

we need to update this one :)

@layershifter layershifter merged commit dbe337d into master Feb 5, 2019
@layershifter layershifter deleted the feat/chat-message-actions branch February 5, 2019 15:58
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants