Code Group Component

[JessicaSachs]

I need a VTCodeGroup for the docs -- I rolled my own, but it's coupled to what I'm putting inside of it. We should have one that matches the theme and is generic.

vuejs/docs#1493 (comment)

[JessicaSachs]

If I wanted to pick this up is there any issue with the UI I chose in the PR above? @kiaking maybe? (or Evan, idk who to summon)

https://vuejs.org/guide/scaling-up/testing.html#component-testing see the code block in here.

[kiaking]

@JessicaSachs I think the UI is matching the taste of the whole theme 👍 Great job! If I may comment, maybe we could:

1. Make tab font size to 14px? Feels just a little bit big. I don't know 🤔
2. Add text-overflow: ellipsis;, for Mobile design (more about this in below)

Currently the tag names get wrapped at mobile view.

If not doing text-overflow: ellipsis;, then maybe making the font-size and line-height smaller and make it vertically centered might be nice too...?

Or, set white-space: nowrap; and make it scroll horizontally like the code block itself.

[JessicaSachs]

Yeah I can make it pretty for mobile. I knew it wasn't scaling for different length text, but I figured we'd make it more resilient once we added to the theme/component library.

…

On Wed, Feb 16, 2022 at 7:48 PM Kia King Ishii ***@***.***> wrote: @JessicaSachs <https://github.com/JessicaSachs> I think the UI is matching the taste of the whole theme 👍 Great job! If I may comment, maybe we could: 1. Make tab font size to 14px? Feels just a little bit big. I don't know 🤔 2. Add text-overflow: ellipsis;, for Mobile design (more about this in below) Currently the tag names get wrapped at mobile view. [image: Screen Shot 2022-02-17 at 9 45 33] <https://user-images.githubusercontent.com/3753672/154382492-c1b68993-4b57-4922-be5f-f2bd31ad08c3.png> If not doing text-overflow: ellipsis;, then maybe making the font-size and line-height smaller and make it vertically centered might be nice too...? — Reply to this email directly, view it on GitHub <#46 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVL4BEBJJXOJDUEUGXRXQTU3RAXLANCNFSM5OITAJWQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>