Skip to content

Conversation

@andrew-goldstein
Copy link
Contributor

[SIEM] Update Timeline to use the latest euiFlyoutBody style

A recent update to EUI requires an update to Timeline to restore its original padding, per the before / after screenshots below:

Before

The previous code, which was using the euiFlyoutBody__overflow style, has extra padding (before this PR):

timeline-padding-before-chrome

After Chrome 80.0.3987.132

The new code in this PR uses euiFlyoutBody__overflowContent, which restores the Timeline's original padding:

timeline-paddng-after-chrome-default-theme

timeline-padding-after-chrome-dark-theme

After Firefox 73.0.1

timeline-padding-after-firefox

After Safari 13.0.5

timeline-padding-after-safari

[A recent update to EUI](elastic/eui#2837) requires an update to Timeline to restore its original padding, per the before / after screenshots below:

### Before

The previous code, which was using the `euiFlyoutBody__overflow` style, has extra padding (before this PR):

![timeline-padding-before-chrome](https://user-images.githubusercontent.com/4459398/76060425-81e37500-5f3e-11ea-8083-a58297afee85.png)

### After Chrome `80.0.3987.132`

The new code in this PR uses `euiFlyoutBody__overflowContent`, which restores the Timeline's original padding:

![timeline-paddng-after-chrome-default-theme](https://user-images.githubusercontent.com/4459398/76060436-8b6cdd00-5f3e-11ea-80d6-9ff0e74722c3.png)

![timeline-padding-after-chrome-dark-theme](https://user-images.githubusercontent.com/4459398/76060601-dedf2b00-5f3e-11ea-8a46-1008d7defe09.png)

### After Firefox `73.0.1`

![timeline-padding-after-firefox](https://user-images.githubusercontent.com/4459398/76060692-18b03180-5f3f-11ea-8277-31b6f9dbf211.png)

### After Safari `13.0.5`

![timeline-padding-after-safari](https://user-images.githubusercontent.com/4459398/76060744-38475a00-5f3f-11ea-9b04-cdd45fa41702.png)
@andrew-goldstein andrew-goldstein added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.7.0 labels Mar 6, 2020
@andrew-goldstein andrew-goldstein self-assigned this Mar 6, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/siem (Team:SIEM)

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@andrew-goldstein andrew-goldstein merged commit 060b9fb into elastic:master Mar 6, 2020
@andrew-goldstein andrew-goldstein deleted the restore-timeline-padding branch March 6, 2020 15:45
andrew-goldstein added a commit that referenced this pull request Mar 6, 2020
…#59561)

## [SIEM] Update Timeline to use the latest euiFlyoutBody style

[A recent update to EUI](elastic/eui#2837) requires an update to Timeline to restore its original padding, per the before / after screenshots below:

### Before

The previous code, which was using the `euiFlyoutBody__overflow` style, has extra padding (before this PR):

![timeline-padding-before-chrome](https://user-images.githubusercontent.com/4459398/76060425-81e37500-5f3e-11ea-8083-a58297afee85.png)

### After Chrome `80.0.3987.132`

The new code in this PR uses `euiFlyoutBody__overflowContent`, which restores the Timeline's original padding:

![timeline-paddng-after-chrome-default-theme](https://user-images.githubusercontent.com/4459398/76060436-8b6cdd00-5f3e-11ea-80d6-9ff0e74722c3.png)

![timeline-padding-after-chrome-dark-theme](https://user-images.githubusercontent.com/4459398/76060601-dedf2b00-5f3e-11ea-8a46-1008d7defe09.png)

### After Firefox `73.0.1`

![timeline-padding-after-firefox](https://user-images.githubusercontent.com/4459398/76060692-18b03180-5f3f-11ea-8277-31b6f9dbf211.png)

### After Safari `13.0.5`

![timeline-padding-after-safari](https://user-images.githubusercontent.com/4459398/76060744-38475a00-5f3f-11ea-9b04-cdd45fa41702.png)
gmmorris added a commit to gmmorris/kibana that referenced this pull request Mar 9, 2020
* master: (154 commits)
  Add an optional authentication mode for HTTP resources (elastic#58589)
  Implement embeddable drilldown menu options (elastic#59232)
  [Alerting] "Create alert" graph visualization design improvements (elastic#59399)
  Alerting update route throttle property is missing (elastic#59580)
  [SIEM] Adds 'Load prebuilt rules' Cypress test (elastic#59529)
  Show error if field is not found during filter rendering (elastic#59298)
  Navigate back to discover app during test, because the saved search from the preceding test has major performance problems when used with this test (elastic#59571)
  Check for alert dialog when doing a force logout (elastic#59329)
  ensure fs deletes are not cwd dependent (elastic#59570)
  Empty message for APM service map (elastic#59518)
  [Drilldowns] <ActionWizard/> Component (elastic#59032)
  [Reporting] Improve the page exit error messages (elastic#59351)
  Ensure logged out starting state for tests that need it (elastic#59322)
  Hide input value from kbn-config-schema error messages (elastic#58843)
  [ML] Transforms: Migrate client plugin to NP. (elastic#59443)
  [ML] Disable failing functional tests
  [SIEM] Update Timeline to use the latest euiFlyoutBody style (elastic#59524)
  Temporarily remove the project mappings for PR labels (elastic#59493)
  [Alerting] replace index threshold graph usage of watcher APIs with new API (elastic#59385)
  [ML] Show view series link in anomalies table for machine_learning_user role (elastic#59549)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release_note:skip Skip the PR/issue when compiling release notes Team:SIEM v7.7.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants