[Controls Anywhere] Add UI for grow and width settings to sticky controls by Zacqary · Pull Request #240149 · elastic/kibana

Zacqary · 2025-10-22T17:37:23Z

Summary

Closes #234681

controlwidth.mov

Adds a DisplaySettingsPopover element to the control panel, and anchors it to the left hand side drag handle/title label. This popover is not triggered by clicking its anchor
Opens the popover when the user clicks the new Settings hover action, which is only compatible with pinned controls

elasticmachine · 2025-10-22T17:37:27Z

Pinging @elastic/kibana-presentation (Team:Presentation)

src/platform/plugins/shared/controls/public/actions/create_time_slider_action.tsx

Zacqary · 2025-10-22T17:40:16Z

src/platform/plugins/shared/controls/kibana.jsonc

      "unifiedSearch",
-      "uiActions"
+      "uiActions",
+      "kibanaReact"


Editing floating_actions.tsx without this present started throwing errors about kibanaReact being missing, because the controls renderer package imports useKibana. Not sure why this is suddenly being enforced, but I had to add this to get it to build.

Heenawter · 2025-10-22T17:45:11Z

Oh!! I guess I totally misunderstood what the fix for the jumping popover was going to be. I thought we were trying to move the actual gear icon, not just the anchor of the popover. @ThomThomson Is the video in the PR description inline with what you were thinking? It feels strange to me that a popover would not be attached to the action that triggered it, but 🤷 This is a good low-effort solution for the jumping possibly?

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

ThomThomson · 2025-10-22T18:01:55Z

@Heenawter yes this is exactly what I was intending from the fix. I agree it is a little weird having the popover not attached to the hover action that caused it, but I think it's a pretty small drawback.

Unrelatedly, we might consider calling Settings something more specific, like Width.

This reverts commit ecd69a3. # Conflicts: # src/platform/packages/private/kbn-controls-renderer/src/components/floating_actions.tsx

…/Zacqary/kibana into 234681-controls-display-settings

Zacqary · 2025-10-22T19:57:43Z

newline.mov

One remaining question is what to do about the popover when changing the width setting moves the control to a new line, e.g. it's next to two controls with min widths of large.

I don't see an obvious solution here. Should we call this good enough or try and come up with something?

Zacqary · 2025-10-22T20:07:45Z

@ThomThomson Renamed Settings to Width though I don't love the gear icon for that name. Any better options? expand has some connotations on dashboard already so I don't think it works either.

src/platform/plugins/shared/controls/public/actions/edit_control_display_settings.tsx

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

src/platform/plugins/shared/controls/public/actions/edit_control_display_settings.tsx

Heenawter · 2025-10-27T15:23:22Z

src/platform/plugins/shared/controls/public/actions/edit_control_display_settings.tsx

+
+  constructor() {}
+
+  public readonly MenuItem = ({ context }: { context: EmbeddableApiContext }) => {


In the past, we put the component in a separate file - see src/platform/plugins/shared/dashboard/public/dashboard_actions/filters_notification_action.tsx. It helps keep the action code simpler and easier to follow IMO. What do you think @Zacqary?

I actually don't mind this all being in one file TBH. We try to keep files under 300ish lines, and IMO if there at or around this limit, breaking them into multiple files isn't really worth the overhead.

Welp I already moved it, whoops

Is it worth reverting @ThomThomson or should I just merge as-is?

elasticmachine · 2025-10-27T17:10:05Z

💔 Build Failed

Buildkite Build
Commit: d124c1c

Failed CI Steps

History

Heenawter

Everything LGTM!! 🎉

Zacqary added 6 commits October 21, 2025 12:56

Add edit control display settings action and lock hover actions

af73b41

Make display setting changes take effect

a622337

Fix label ids

3d75532

Simplify grow and width state handling

14c579c

Make timeslider medium minimum width

bfa8f82

Anchor display settings popover to left of control

fac2974

Zacqary requested a review from a team as a code owner October 22, 2025 17:37

Zacqary added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// Project:Controls labels Oct 22, 2025

Zacqary commented Oct 22, 2025

View reviewed changes

src/platform/plugins/shared/controls/public/actions/create_time_slider_action.tsx Outdated Show resolved Hide resolved

Zacqary commented Oct 22, 2025

View reviewed changes

Zacqary added 2 commits October 22, 2025 12:42

Remove lock hover actions code from floating actions

ecd69a3

Revert suboptimal type import

e73016a

Zacqary and others added 2 commits October 22, 2025 12:46

Revert time slider size

5edb6ab

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

e79bd50

Heenawter reviewed Oct 22, 2025

View reviewed changes

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx Outdated Show resolved Hide resolved

Zacqary added 3 commits October 22, 2025 14:38

Render popover with prop anchor

a72b625

Revert "Remove lock hover actions code from floating actions"

24f115c

This reverts commit ecd69a3. # Conflicts: # src/platform/packages/private/kbn-controls-renderer/src/components/floating_actions.tsx

Merge branch '234681-controls-display-settings' of https://github.com…

923592d

…/Zacqary/kibana into 234681-controls-display-settings

Rename settings action to width

e42eb67

Heenawter reviewed Oct 22, 2025

View reviewed changes

src/platform/plugins/shared/controls/public/actions/edit_control_display_settings.tsx Outdated Show resolved Hide resolved

src/platform/plugins/shared/controls/public/actions/edit_control_display_settings.tsx Outdated Show resolved Hide resolved

Heenawter reviewed Oct 22, 2025

View reviewed changes

src/platform/plugins/shared/controls/public/actions/edit_control_display_settings.tsx Outdated Show resolved Hide resolved

Change width tooltip to display settings

e108510

Heenawter reviewed Oct 27, 2025

View reviewed changes

Import default grow/width in edit_control_display_settings

2a5188c

Zacqary added 2 commits October 27, 2025 10:51

Move control display settings popover to separate file

e0e6b2c

Fix label truncation

d124c1c

Heenawter approved these changes Oct 27, 2025

View reviewed changes

Zacqary merged commit c8517cf into elastic:controlsAnywhere Oct 27, 2025
10 of 12 checks passed


		constructor() {}

		public readonly MenuItem = ({ context }: { context: EmbeddableApiContext }) => {

Conversation

Zacqary commented Oct 22, 2025

Summary

Uh oh!

elasticmachine commented Oct 22, 2025

Uh oh!

Uh oh!

Zacqary Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Heenawter commented Oct 22, 2025

Uh oh!

Uh oh!

ThomThomson commented Oct 22, 2025

Uh oh!

Zacqary commented Oct 22, 2025

Uh oh!

Zacqary commented Oct 22, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Heenawter Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

ThomThomson Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Zacqary Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Zacqary Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💔 Build Failed

Failed CI Steps

History

Uh oh!

Heenawter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

elasticmachine commented Oct 27, 2025 •

edited

Loading