Closed
Description
openedon Mar 17, 2022
Background
Some of the UI props on Session view page needs to be updated to follow the latest Figma design. The list of the changes required are listed on the QA Notes ( https://www.figma.com/file/3v90FFYIKKZ7aIPxj2fxiH/%5B8.2%5D-%5BSession-viewer%5D-Session-View-for-Sessions-and-Processes?node-id=1885%3A361276 )
Tasks
Detail panel
- Detail Panels sizing:
Default size: 25% of viewport, but no less than 320 px. Max size: 40% of viewport
➡️ Link to Figma file QA - Fix typography in Detail Items
- Detail Items
height: 32 px
- Fix spacing between Items
- Fix padding between last Item and next section. Should be 16 px
- Add Border-left to Details Panel
Border-left box-shadow: 1px 0px 0px 0px #D3DAE6 inset;
- Fix button states for
Detail Panel
➡️ Toggle button specs in EUI - In a case when the row has a multiple values, we display first 5 and the link 'Show more'. After clicking on this link we expand all list of values and link copy changed to 'Show less' ➡️ Link to Figma file QA
Toolbar
- Change background color to
background: #EEF2F7;
- Change copy in search field from "Search" to "Find"
- Add divider between Toolbar and Session frame:
EuiHorizontalRule
https://elastic.github.io/eui/#/layout/horizontal-rule
Find results interaction
- Highlighted findings specs: Selected state:
$euiColorWarning
, Default state:$euiColorWarning 32% opacity
- No
border-radius
for highlight - Jump to findings below the viewport should scroll the session viewer content
- There is an issue with a long text in the search field. It overlaps with stepper-control. Text should go under stepper control. Example
EuiFieldSearch
https://codesandbox.io/s/hz7boq?file=/demo.js
Session viewer frame
- Border around the entire session viewer:
border: 1px solid #D3DAE6
- Fix Expandable badges style. ➡️ Link to Figma file QA
- Fix paddings in process line ➡️ Link to Figma file QA
- Fix font styles for process lines ➡️ Link to Figma file QA
- States for process rows ➡️ Link to Figma file QA
- Update icons ➡️ Link to Figma file QA
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment