canonical / canonical/vanilla-framework

Add expand functionality to Code snippet

Open
#5,129 3 comments 0 reactions 1 assignee Claimed by @ninarojc1 View on GitHub
P3 Triaged Vanilla WG WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

[Code snippet](https://vanillaframework.io/docs/examples/patterns/code-snippet/dropdown?theme=light)

## Visual
![Screenshot 2024-06-12 at 13 35 41](https://github.com/canonical/vanilla-framework/assets/157808111/77784adb-7ae2-4721-a7fe-d7799c73120a)

![Screenshot 2024-06-12 at 13 52 27](https://github.com/canonical/vanilla-framework/assets/157808111/ef98e4d9-01ba-4643-a0db-96a6b914baa8)

![Screenshot 2024-06-12 at 13 52 57](https://github.com/canonical/vanilla-framework/assets/157808111/d0376b5d-0d6a-4366-b9fe-66acc573f664)

[Link to [Figma]](https://www.figma.com/design/K1xrbxlcBnlqgbveO9lXMU/24.04-Support-portal-improvements?node-id=5108-6596&t=CEfElMqyyLi5NT1V-1)

I also noticed that there is no hoover effect on the current buttons in the header, so I propose we implement this as a base button, so we can inherent it's states styling.
## Context

In the Support portal you can now add Code snippet to the comment and a lot of times it happens that the code is very long (and wide) which requires a lot of scrolling back and forth to be able to read it. To help users read and use the code provided, I propose adding the ability to view the code in full screen mode.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.