[TextBasedEditor] Use resizable button from EUI #165935
Conversation
stratoula
added
Feature:ES|QL
|
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
There was a problem hiding this comment.
Thanks for putting this together, @stratoula! I left one small comment below.
Additionally, I was wondering if it would be possible to conditionally remove the bottom border on . uniSearchBar when the editor is in its expanded mode. That way we don't have the resizing icon overlaid on top of the dividing border when it's present (at least until we revisit the resizing styling as suggested in the Discover design refresh).
In any case, none of this is worth holding you up over, so I'm approving now. Thanks!
| <div | ||
| css={css` | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| `} | ||
| > | ||
| <EuiResizableButton | ||
| data-test-subj="TextBasedLangEditor-resize" | ||
| className="TextBasedLangEditor--resizableButton" | ||
| onMouseDown={onMouseDownResizeHandler} | ||
| onKeyDown={onKeyDownResizeHandler} | ||
| onClick={setFocus} | ||
| onTouchStart={onMouseDownResizeHandler} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Is this wrapping div element necessary? Or can the CSS positioning be applied directly to the EuiResizableButton component?
There was a problem hiding this comment.
You were right, I removed it! 4e7a0bc
It is possible but it will require some refactoring as this styling is outside of the editor component. We can explore in another PR, closer to the Discover redesign! |
Summary
When I created the text based editor, the resizable button was not exported from EUI so I had to create my own custom solution. It was recently been exported and merged in kibana so now we can remove the custom solution and use the EUI component instead!
elastic/eui#6100