-
Notifications
You must be signed in to change notification settings - Fork 113
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adjust css and vscode extension dependencies to support light mode in VSCode QueryBuilder #3818
base: master
Are you sure you want to change the base?
Adjust css and vscode extension dependencies to support light mode in VSCode QueryBuilder #3818
Conversation
🦋 Changeset detectedLatest commit: 150d675 The changes in this PR will be included in the next version bump. This PR includes changesets to release 10 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@@ -213,16 +213,6 @@ | |||
border-color: var(--color-red-180); | |||
} | |||
|
|||
.query-builder__variables__variable__label { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These were removed as they became duplicates after moving all the below lines out from being nested under .query-editor
.
outline-color: var(--color-legacylight-light-grey-100); | ||
border-color: var(--color-legacylight-light-grey-100); | ||
} | ||
::-webkit-scrollbar-thumb { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All the below changes are simply moving these css styles to not be nested under .query-editor
anymore. Instead, they are now just nested directly under .theme__legacy-light
.
@MauricioUyaguari do you know if there was a reason all these styles were nested under .query-editor
before? I tested briefly in Studio and Query and light and dark mode both looked fine to me. I just want to make sure there's not some edge case I'm missing with this change.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #3818 +/- ##
==========================================
+ Coverage 45.44% 45.48% +0.03%
==========================================
Files 2245 2245
Lines 390320 390325 +5
Branches 16720 11462 -5258
==========================================
+ Hits 177394 177520 +126
- Misses 211903 212340 +437
+ Partials 1023 465 -558
|
Summary
This PR adds some additional exports that the VSCode extension needs to add light mode support.
It also adjusts the light mode css so that it does not wrap query-builder related styling in a
.query-editor
selector, since only the<QueryEditor>
component wraps its content in thequery-editor
class. The basic<QueryBuilder>
component (used by the VSCode extension) does not wrap its content in thequery-editor
class, so the light mode styling was not being applied correctly.How did you test this change?
QueryBuilder still looks fine in dark mode: