Skip to content
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

[BUG] Custom style injection overriding theming #509

Closed
BSFishy opened this issue Jun 14, 2023 · 0 comments · Fixed by #511
Closed

[BUG] Custom style injection overriding theming #509

BSFishy opened this issue Jun 14, 2023 · 0 comments · Fixed by #511
Labels
bug Something isn't working

Comments

@BSFishy
Copy link
Contributor

BSFishy commented Jun 14, 2023

What is the bug?
A custom style overrides base Oui styles, which causes inconsistent styling in other parts of Dashboards. The style in question:

.euiSuperUpdateButton {
background-color: transparent !important;
color: #006bb4 !important;
}

How can one reproduce the bug?
Steps to reproduce the behavior:

  1. Start an instance of Dashboards with a custom theme that changes ouiPrimaryColor (@bsfishy/oui@1.3.0-theme.5 on NPM does this)
  2. Navigate to a dashboard
  3. Notice the Refresh button in the top right doesn't look correct

What is the expected behavior?
The Refresh button styling isn't globally altered

What is your host/environment?

  • OS: Windows 10
  • Version: Latest (3.0.0)
  • Plugins:
    • Observability
    • Reporting
    • Alerting
    • Anomaly Detection
    • Maps
    • Notifications
    • Security Analytics
    • Index Management
    • Snapshot Management
    • Security

Do you have any screenshots?

Screenshot (66)

Do you have any additional context?
This can be fixed in 2 ways:

  1. Rename the class to something namespaced to this plugin (i.e. .anom-det-superUpdateButton) and make the styles use OUI theme variables (i.e. $ouiPrimaryColor) and point super date picker to use the newly named class.

  2. THE PREFERRED APPROACH is to tell super date picker to set the fill: false prop (default is true) for the super update button. This will get rid of this style entirely and do things "the OUI way". An example of this is here: https://codesandbox.io/s/elastic-boyd-kmcgdx (I'm also an OUI maintainer, so you can ping me for any additional concerns)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants