Repository navigation
Info panel list design - #25287
Info panel list design#25287david-szabo97 wants to merge 5 commits into
Conversation
david-szabo97
added
[Type] Enhancement
|
Size Change: +92 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
Addison-Stavlo
left a comment
Addison-Stavlo
left a comment
There was a problem hiding this comment.
This looks much better IMO, and the code style changes make sense. I wasn't present for the original discussions so may want another 👍 from someone that was involved there, but I do think this is definitely a good change.
From
To
It definitely feels more organized and readable.
shaunandrews
left a comment
shaunandrews
left a comment
There was a problem hiding this comment.
This looks ok. I worry that all the extra whitespace between the label and the count makes it harder to scan — but the horizontal lines help. In general, I wonder if we should reduce the width of this component?
|
|
||
| &:nth-child(4n) { | ||
| padding-right: 0; | ||
| & + & { |
There was a problem hiding this comment.
This is a little questionable. I would have expected to add the border to the root selector (.table-of-contents__count) and then added a :first-child to override the border on the first item. The & + & is pretty cryptic and maybe a little too clever.
There was a problem hiding this comment.
I think it is pretty neat, while also a bit cleaner and maybe more robust than adding an extra first-child selector. However, I do agree that & + & will be a bit more difficult to understand if someone has not seen it before. Maybe a short comment would help clarify?
There was a problem hiding this comment.
I'd prefer to have & + &. Personally I find it more readable though I understand it might be cryptic for someone who has never seen it before. Added a little comment, let me know if that's all good or we should change it to a less cryptic solution.
I guess the width was increased to make sure the previous columns design fit. Less wide popover feels a lot better. See below Original for reference
Actually, I prefer the first one (260px). It looks compact and clean. Width grows as needed if there is a long heading. |
Copons
left a comment
Copons
left a comment
There was a problem hiding this comment.
This looks good to me!
Feel free to merge once we've got the design sign off. 👍
|
I just tried |
|
@shaunandrews Removed |
It is still not great to scan/read. My suggestion to make not just "ok" would be to swap the label/value order and make the container narrower:
|
|
Kelly's design feels easier to scan, but it feels worse for my eyes. We have empty space on both sides of the box (Headings, Paragraphs and Blocks) which feels strange for me. I might be biased since I was looking at my own implementation for a while now so I wonder what others think about Kelly's design. 😅 Just for reference: |
|
@kellychoffman Pushed a commit! Reduced the width to 220px and changed the layout.
|
There was a problem hiding this comment.
The styles and behavior are looking pretty good. I tried to make a ridiculous edge case to see if i could break the layout and it behaves well:
I do wonder about this reduced width, however. In other languages where the word 'Characters' may be a few characters longer, this information may no longer fit the reduced 220px width. Regardless of that, my first reaction opening the component was 'wow this is very thin'. It may be worth considering increasing the width by 60-80px.
Design wise, this is easier to scan than the previous new design. However the previous also seems a bit more 'clean' feeling. So I guess it depends on what we are going for. If the left column was also aligned left, it would feel a bit more clean and organized. 🤷♀️
|
I also have concerns with how this design blurs the info counts with the document outline, since it's just two vertical lists now. |
|
Also, can we fix the awkward widow while the general design is refined?
|
Description
We merged a PR that added character count to the info panel. This made the design a little bit off and we were discussing changing the info panel to a list view rather than columns.
This PR aims to change the current columns view to a list view to make the info panel easier to scan.
Screenshots
Types of changes
Design change
Checklist: