fix(theme-classic): add outline to focused code blocks #6121
Conversation
christopherklint97
requested review from
Josh-Cena,
lex111 and
slorber
as code owners
|
✔️ [V2] 🔨 Explore the source changes: 267caa1 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61bcdc1ce73b010007bf0b9f 😎 Browse the preview: https://deploy-preview-6121--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-6121--docusaurus-2.netlify.app/ |
|
The original issue was reproducible on Firefox where |
Josh-Cena
added
the
pr: polish
|
I can confirm outline on FF works better now. Comparing:
I can't see any issue so far, not sure why I added this overflow hidden anymore 🤷♂️ |
| @@ -9,7 +9,6 @@ | |||
| margin-bottom: var(--ifm-leading); | |||
| border-radius: var(--ifm-global-radius); | |||
| box-shadow: var(--ifm-global-shadow-lw); | |||
| overflow: hidden; | |||
There was a problem hiding this comment.
apparently I added this in #5215, don't remember why 😅 hope it's safe to remove
There was a problem hiding this comment.
I realized what overflow: hidden does... Because if we set border radius on the parent container but child is still a regular rectangle, the child overflows and makes the code block still appear as a sharp-edged rectangle. The reason that the highlight doesn't appear on FF is also because they treat the highlight as part of overflow and gets hidden
There was a problem hiding this comment.
Ah yes, I remember that was related to border-radius now 😅 it was simpler to add radiuses on the container than on the individual items, particularly when the live codeblock playground/result positions are configurable
packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
Outdated
Show resolved
Hide resolved
|
Current production:
Deploy preview:
Even on Chrome there's an improvement 👀 |
Motivation
Fixes #6077
Have you read the Contributing Guidelines on pull requests?
Yes.
Test Plan
Run
yarn start:websiteand go to http://localhost:3000/docs/next/installation#scaffold-project-website. When focusing on the code block, it should like below:Firefox
Chrome
