Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Security Solution] Adjusts the width of the
Actions
column and act…
…ion icon buttons (elastic#118454) ## [Security Solution] Adjusts the width of the `Actions` column and action icon buttons This PR adjusts the width of the `Actions` column, and normalizes the action icon button sizes throughout the Security Solution, per elastic#115726 ### Before / after screenshots This section provides before / after screenshots for the following views: - Alerts - Alerts > Event rendered - Rules > Details - Rules > Details > Event rendered - Host > Events - Host > External alerts - Network > External alerts - Timeline > Query tab - Timeline > Correlation tab - Timeline > Pinned tab - Observability > alerts (no change) #### Alerts (before) ![01-security_alerts_before](https://user-images.githubusercontent.com/4459398/141429498-a6040f8b-5bfb-468e-aa1a-993caa7f179c.png) #### Alerts (after) ![01a-security_alerts_after](https://user-images.githubusercontent.com/4459398/141429618-8ad313e1-fabc-424e-9e7d-c24240861c1d.png) #### Alerts > Event rendered (before) ![02-security_alerts_event_rendered_before](https://user-images.githubusercontent.com/4459398/141430881-2bfeb57a-9881-47f1-99e4-cc7eadcfff69.png) #### Alerts > Event rendered (after) ![02a-security_alerts_event_rendered_after](https://user-images.githubusercontent.com/4459398/141430976-88f8099a-81b1-4f1c-99a2-26f86218f909.png) #### Rules > Details (before) ![03-security_rules_details_before](https://user-images.githubusercontent.com/4459398/141431149-a308f171-a170-4ce9-9616-77e5c08dc406.png) #### Rules > Details (after) ![03a-security_rules_details_after](https://user-images.githubusercontent.com/4459398/141431221-06701540-97bb-400a-97bf-f2d22cd65caf.png) #### Rules > Details > Event rendered (before) ![04-security_rule_details_event_rendered_before](https://user-images.githubusercontent.com/4459398/141431394-12b29689-41c8-44b6-b69f-7796f99c5424.png) #### Rules > Details > Event rendered (after) ![04a-security_rule_details_event_rendered_after](https://user-images.githubusercontent.com/4459398/141431477-049804c0-1455-4216-a241-a44df5c9d398.png) #### Host > Events (before) ![05-host_events_before](https://user-images.githubusercontent.com/4459398/141431858-31116980-47f7-4779-af26-3b3785638137.png) #### Host > Events (after) ![05a-host_events_after](https://user-images.githubusercontent.com/4459398/141431956-664f86b9-2ad7-4281-bf82-8278fa23c755.png) #### Host > External alerts (before) ![06-host_external_alerts_before](https://user-images.githubusercontent.com/4459398/141432103-8cc9c10e-4d2d-42ec-a62c-a1e5867bf2d8.png) #### Host > External alerts (after) ![06a-host_external_alerts_after](https://user-images.githubusercontent.com/4459398/141432185-4d7e4007-dea9-47f3-af4b-1719f338a5ba.png) #### Network > External alerts (before) ![07-network_external_alerts_before](https://user-images.githubusercontent.com/4459398/141432331-2bb5a714-f733-4c97-91dc-73ff76633daa.png) #### Network > External alerts (after) ![07a-network_external_alerts_after](https://user-images.githubusercontent.com/4459398/141432428-b7b20450-db87-44ab-8014-cf4d6032dfe3.png) #### Timeline > Query tab (before) ![08-timeline_query_tab_before](https://user-images.githubusercontent.com/4459398/141432638-e484813b-275d-4eff-aa38-1705f913ce59.png) #### Timeline > Query tab (after) ![08a-timeline_query_tab_after](https://user-images.githubusercontent.com/4459398/141434461-1d36bba5-8fd1-484a-bacd-733aede95815.png) #### Timeline > Correlation tab (before) ![09-timeline_correlation_tab_before](https://user-images.githubusercontent.com/4459398/141434637-33f05447-e3d3-4eac-b38a-3612945e8379.png) #### Timeline > Correlation tab (after) ![09a-timeline_correlation_tab_after](https://user-images.githubusercontent.com/4459398/141434751-250fd26b-25fc-48cc-8a06-dbb17e53dce7.png) #### Timeline > Pinned tab (before) ![10-timeline_pinned_tab_before](https://user-images.githubusercontent.com/4459398/141434893-3f2b3d17-7e4b-4e0c-9096-ab1ee57f096f.png) #### Timeline > Pinned tab (after) ![10a-timeline_pinned_tab_after](https://user-images.githubusercontent.com/4459398/141435431-26eac065-bce4-4a25-99fd-095d447fb6f3.png) #### Observability > alerts (before) ![11-observability_alerts_before](https://user-images.githubusercontent.com/4459398/141435607-da059e9c-af03-4a21-bb1b-e47d44d61dde.png) #### Observability > alerts (after / no change) ![11a-observability_alerts_after_no_change](https://user-images.githubusercontent.com/4459398/141435696-52bcc5e1-6823-4b6a-b2da-32e3f8733dc8.png) ### Additional details - Per [this comment](elastic#115726 (comment)) from @monina-n , the size of all action buttons have been normalized match the size off the `...` overflow button (`28 x 32` at the time of this writing) via the `EuiButtonIcon` `size` prop: ``` size="s" ``` - The horizontal alignment of the `Analyze event` icon was updated by the EUI team in the following PR: elastic/eui#5365
- Loading branch information