-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
UI Polish for Session viewer frame + buttons #128188
Conversation
If possible can you link the QA notes. |
x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts
Show resolved
Hide resolved
x-pack/plugins/session_view/public/components/session_view/styles.ts
Outdated
Show resolved
Hide resolved
x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
Outdated
Show resolved
Hide resolved
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.
Looking great, just a few notes.
x-pack/plugins/session_view/public/components/session_view/styles.ts
Outdated
Show resolved
Hide resolved
fetchNextPage={fetchNextPage} | ||
fetchPreviousPage={fetchPreviousPage} | ||
setSearchResults={setSearchResults} | ||
timeStampOn={displayOptions.timestamp} |
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.
note: think on the future we can replace to pass only one property displayOptions={displayOptions}
to suit all display options (don't need to do it right now)
…el, Timestamp bug fix
x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
Outdated
Show resolved
Hide resolved
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.
great, only a few notes
x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
Outdated
Show resolved
Hide resolved
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.
just the hardcoded font-size, other than that looks good.
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.
lgtm!
x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
Outdated
Show resolved
Hide resolved
x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts
Outdated
Show resolved
Hide resolved
💚 Build SucceededMetrics [docs]Module Count
Async chunks
History
To update your PR or re-run it, just comment with: cc @animehart |
Summary
UI Polish/Fixes based on QA Notes
Detail panel
➡️ Link to Figma file
Min width: 320 px; Max width: 640 px; Default width:w 360 px;
height: 32 px
Border-left box-shadow: 1px 0px 0px 0px #D3DAE6 inset;
Detail Panel
➡️ Toggle button specs in EUIToolbar
background: #EEF2F7;
EuiHorizontalRule
https://elastic.github.io/eui/#/layout/horizontal-ruleFind results interaction
background: #FEC514;
, Default state:background: #FEC51452;
border-radius
for highlightEuiFieldSearch
https://codesandbox.io/s/hz7boq?file=/demo.jsSession viewer frame
border: 1px solid #D3DAE6