-
Notifications
You must be signed in to change notification settings - Fork 14.3k
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
style: dark filter popover background #11611
Conversation
} | ||
.ant-popover > .ant-popover-content > .ant-popover-arrow{ | ||
border-top-color: ${theme.colors.grayscale.dark2}cc; | ||
border-left-color: ${theme.colors.grayscale.dark2}cc; |
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.
This would need to be more sophisticated to deal with popovers that open upwards.
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.
Done and done.
According to emotion's docs on the
So to get dark popovers to work without interfering with light popovers on the same page, we have to get Anyway, whatever hacks we do to make this work, we should document it and link to an issue on the Antd |
383debe
to
065d3f5
Compare
Codecov Report
@@ Coverage Diff @@
## master #11611 +/- ##
==========================================
+ Coverage 66.24% 67.11% +0.87%
==========================================
Files 897 897
Lines 43463 43466 +3
Branches 4186 4187 +1
==========================================
+ Hits 28790 29174 +384
+ Misses 14557 14188 -369
+ Partials 116 104 -12
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
Found the trick... the Popover component supports an |
So far, there's just one instance of a Popover with this color theme, but I think we can expand the common/shared popover component to support this styling if we need to use it elsewhere in the future. |
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.
👍 very nice
please don't merge until the implementation is matching the design, also the padding is adjusted. thanks. 🙏 |
6f4bc9e
to
6a3a35a
Compare
* style: dark filter popover background * Story to test and demonstrate the pitfalls of global styles * nixing the story... not going to be reusing this anyway * adding a class to isolate dark styles * now supports all arrow directions * placing at the bottom rather than bottom right * adding colors, adjusting spacing * linting
SUMMARY
Adds an inverted (dark) color theme to the antd popover used in the filter status display.
Edit: adjusted some spacing, added the section header colors, tidied up some selectors that were applying the white font color.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TEST PLAN
Manual visual confirmation 👀
ADDITIONAL INFORMATION