Add optional filename prop for CodeSnippet #216
Conversation
| <div className={styles.fileName}> | ||
| {fileName && ( | ||
| <MiddleEllipsis> | ||
| <span title={fileName}>{fileName}</span> |
There was a problem hiding this comment.
Out of curiosity, do we have any kind of UX figured out where a user could see the full path? If the value ends up truncated, it might be a bit frustrating if they want to get some context on the full file path.
There was a problem hiding this comment.
I should have looked at the preview before saying anything. It looks like MiddleEllipsis adds a title attribute which addresses my concern.
There was a problem hiding this comment.
The rational for adding the title attribute to the span was to, at least on desktop browsers, make it possible to see the full path even if it is truncated. Beyond that, no, not yet. It'd be great to have a more robust solution that also supports copying.
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
Adds ability to create display the filename for a markdown CodeSnippet component by adding
fileName=src/example/filename.jsto the prop definition line.Truncates the filename in the middle if it is too long to fit in the copy bar.
Reviewer Notes
You can see the truncation by going to the guides/example page and changing the browser width.
Related Issue(s) / Ticket(s)
Screenshot(s)