-
Notifications
You must be signed in to change notification settings - Fork 826
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add EuiComment #3179
Add EuiComment #3179
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall this is really great. Design wise I just spotted a few alignment and color issues, but largely looks awesome!
Component-wise I found a few places where it could be a bit smarter. And documentation-wise I think there should be more sections explaining the different pieces of the component. These are some example sections I'd add:
- Basic example: What are all the bits that I can pass (username, event, timestamp, children)? Including Timeline icon: What's the default vs what consumers can pass in and recommended sizing.
- Regular vs update types. What are the differences and why pick one over the other
- Actions: What are they and why would I use them?
Design
I'd really like to see these line up a bit better on their baseline
What do you think about lightening the background color of the default icon and matching the background color of the comment title?
It looks like there's a rogue background color being added to the timeline icon.
Take a look at the Amsterdam version and consider if you'd make any changes there.
Just an FYI, I'm going to hold off on reviewing until Caroline has finished her pass. |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
I gave this a go and it's in the current version (i.e.
@cchaos I've added some new sections, improved |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
In the case of a regular comment or an update comment with a body, can we make them Otherwise, in the case of an update comment without an body, can those be wrapped in a |
Tidying CSS a bit and fixing IE and responsiveness
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Looks great to me! All the browsers and mobile versions work now. All the tests are in place. Looks good in the themes. 🎉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is fun!
Just one question/suggestion on timestamps, and some TS things. The API looks good
@thompsongl thanks for your review, good catch with the relative dates case. I made the changes you suggested. I also did some small changes to include Michail's a11y improvements as I think they make sense. However, the code that I added is repetitive. I tried making it better but ended up with TS errors. Can you please take a look here? And this is what I was trying:
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
I'm working on the TS issues mentioned, but I'm not sure I fully understand what element should be the |
Just the side on the right (i.e. EuiCommentEvent) |
Updated |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3179/ |
Summary
Add
EuiComment
component in preparation for the upcoming addition ofEuiCommentList
. InternallyEuiComment
uses two componentsEuiCommentTimeline
andEuiCommentEvent
.There are two types of comments available:
regular
andupdate
.Desktop view
![image](https://user-images.githubusercontent.com/4016496/77693984-8364f380-6f66-11ea-9a2b-43fc9ee33f54.png)
Mobile view
Notes:
Checklist
- [ ] Checked for breaking changes and labeled appropriately