Skip to content

feat(code-snippet): Add tabs - #56317

Merged
ArthurKnaus merged 6 commits into
masterfrom
aknaus/feat/code-snippet/add-tabs
Sep 20, 2023
Merged

feat(code-snippet): Add tabs#56317
ArthurKnaus merged 6 commits into
masterfrom
aknaus/feat/code-snippet/add-tabs

Conversation

@ArthurKnaus

@ArthurKnaus ArthurKnaus commented Sep 15, 2023

Copy link
Copy Markdown
Member
  • Add tabs to the CodeSnippet component
  • Restyle header so it has the same background as the snippet itself

Dark theme:
Screenshot 2023-09-18 at 10 02 12

Light theme:
Screenshot 2023-09-15 at 18 23 57

Light theme (dark=true):
Screenshot 2023-09-15 at 18 25 03

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Sep 15, 2023
Comment thread static/app/components/codeSnippet.tsx Outdated
Comment on lines +39 to +43
const darkColors = {
textColor: '#e0dce5',
subText: '#80708f',
border: '#40364a',
};

@vuluongj20 vuluongj20 Sep 18, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than using raw values, why don't we use prism variables (--prism-base for text, --prism-comment for subtext, and --prism-highlight-accent for borders)? That way, we don't have switch between dark and light colors based on the dark prop (L110 below) — it's already handled via the prism-dark class name on <Wrapper /> (L113 below).

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had it like this in my initial implementation but thought that it could be confusion as --prism-comment has a clear semantic meaning.
E.g. if someone changes the comments to be green they would expect the tab text to change too. 🤔

However, for the sake of shipping value I will change it to your proposition and merge it.
Maybe there is a better suited variable or we introduce a new one in the future?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah it's not ideal, but I think it's preferable to using raw values since if in the future we change the colors in the design system we'll likely forget to also change it here.

@ArthurKnaus
ArthurKnaus merged commit d17189c into master Sep 20, 2023
@ArthurKnaus
ArthurKnaus deleted the aknaus/feat/code-snippet/add-tabs branch September 20, 2023 07:27
ArthurKnaus added a commit that referenced this pull request Sep 20, 2023
* Add code tabs to platform spring boot

Requires #56317
Closes #56238
Closes #50226
@github-actions github-actions Bot locked and limited conversation to collaborators Oct 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants