Chore: tweak header controls #35848
Chore: tweak header controls #35848
Conversation
w33ble
added
review
Team:Presentation
|
Pinging @elastic/kibana-canvas |
| <EuiButton size="s" fill iconType="refresh" onClick={doRefresh} isDisabled={inFlight}> | ||
| Refresh | ||
| </EuiButton> | ||
| <RefreshControl /> |
There was a problem hiding this comment.
The refresh button in the popover is an intentional duplication, since we plan to swap out that control at the top based on the refresh state; see #35849.
| }} | ||
| /> | ||
| </div> | ||
| <EuiFlexGroup> |
There was a problem hiding this comment.
Using flex here so that I can put more setting next to this in a new <EuiFlexItem>
| @@ -0,0 +1,3 @@ | |||
| .canvasControlSettings__popover { | |||
There was a problem hiding this comment.
This is just a replacement for refresh_control.scss, the style on the base class that used to be there wasn't used, nothing had that class.
w33ble
force-pushed
the
chore/tweak-header-controls
branch
3 times, most recently
from
a9ef6a4 to
e37971a
Compare
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
There was a problem hiding this comment.
Looks good, just a couple of minor tweaks. Let's remove the <dd> and/or change the <dt> to an <li>. The current formatting looks like a title that applies to the settings below, but the bottom half pertains to 'automated' refresh.
I am also suggesting we change the text up top to be more about refreshing the element data. The current wording struck me as reloading the browser since it's such a common phrase.
With those changes, we end up with something looking like this:
|
Just as an FYI, there has been some discussion around the list display of the time picker using EuiFlexGrid (#35684) because it causes the order to zig-zag vs column first. You may want to consider also tweaking this design so that it's left column first like: |
|
@ryankeairns This is kind of out of scope for this PR, and I'm really not sure what you're recommending I change, other than the wording at the top. I liked the idea of re-ordering the presets, so I did that. Here's where I've landed with it; the default state:
And then when you set auto-refresh:
|
|
@w33ble that's what I get for lazily just changing things in inspector and not actually poking at the code. I'll give it a quick go and see if I can't change it myself... be right back. |
💚 Build Succeeded |
the components are only used there, and aren't really intended to be reused anywhere else
separate and use refresh control, move popover to settings control
w33ble
force-pushed
the
chore/tweak-header-controls
branch
from
350bf17 to
d4e8cab
Compare
|
@w33ble the latest wording changes you made addressed my initial confusion up in the title area. I'll save the visual edits for a separate PR. Thanks! |
💚 Build Succeeded |
* chore: move control components into workpad_header the components are only used there, and aren't really intended to be reused anywhere else * chore: change header controls separate and use refresh control, move popover to settings control * chore: tweak refresh setting appearance
* chore: move control components into workpad_header the components are only used there, and aren't really intended to be reused anywhere else * chore: change header controls separate and use refresh control, move popover to settings control * chore: tweak refresh setting appearance
Summary
This PR just changes the controls in the workpad header slightly, such that the refresh control is always accessible. The settings for that control were moved to a new settings component (and icon), but the content of the popover is mostly unchanged.
Pre-req for Kiosk mode, since I plan to add those settings next to the refresh controls in the popover.
This is also part of some broader changes we'd like to make to the controls.
Before
After