github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Dashboard] Add maxWidth 's' to Panel Settings flyouts and 'm' to drilldown widths not already specified in dashboard (#189009)

Browse source 
## Summary

Closes https://github.com/elastic/kibana/issues/163981

The Dashboard and Panel Settings Flyouts already seem to be fixed but
the Controls Settings Flyout did not specify the maxWidth.

The drilldown (manage and create) flyouts did not have a maxWidth
specified but based on main, it seems to match medium. To avoid any
unclearness, I have added the maxWidth property to the flyout.

The edit and create drilldowns that didn't have specified maxWidths can
be toggled to each other so they should be the same. I think there can
be a little bit of a debate on which makes the most sense. Although
there is some white space to the right of the buttons in the create
drilldown I think it makes the most sense for the manage drilldowns to
not be cramped and have the maxWidths be medium if possible.

<img width="900" alt="Screenshot 2024-07-24 at 1 19 51 PM"
src="https://github.com/user-attachments/assets/549c34df-5d85-40f4-bfb4-dd5d17d96ca5">

### Edit drilldown
Size s makes it look more cramped and breaks the word Discover onto two
lines:
<img width="626" alt="Screenshot 2024-07-24 at 1 15 09 PM"
src="https://github.com/user-attachments/assets/89013146-f437-4180-8de0-12d033198b88">

Size m
<img width="1044" alt="Screenshot 2024-07-24 at 1 09 35 PM"
src="https://github.com/user-attachments/assets/60dd3838-724a-42c4-b717-c2d7e75a3c10">

### Create drilldown: 
I'm leaning towards size 's' for the create drilldown flyout based on
the following screenshots:

Size s
<img width="631" alt="Screenshot 2024-07-24 at 1 12 46 PM"
src="https://github.com/user-attachments/assets/7e052bbf-3d02-492e-9332-8998b01c95b7">

Size m
<img width="710" alt="Screenshot 2024-07-24 at 1 10 58 PM"
src="https://github.com/user-attachments/assets/6f35ee9c-5858-400d-9498-c90323f44303">
This commit is contained in:
Rachel Shen 2024-07-26 19:06:32 -06:00 • committed by GitHub
parent 83e6e8fbed
commit 1f00087e61
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 15 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/plugins/controls/public/control_group/editor/open_edit_control_group_flyout.tsx
View file

@ -52,6 +52,7 @@ export function openEditControlGroupFlyout(this: ControlGroupContainer) {
{ theme, i18n }
),
{
size: 's',
'aria-label': ControlGroupStrings.manageControl.getFlyoutCreateTitle(),
outsideClickCloses: false,
onClose: () => {

2
x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/drilldown_shared.ts
View file

@ -75,3 +75,5 @@ export const createDrilldownTemplatesFromSiblings = (
return templates;
};
export const DRILLDOWN_MAX_WIDTH = 500;

7
x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
View file

@ -34,7 +34,11 @@ import {
import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
import React from 'react';
import { StartDependencies } from '../../../../plugin';
import { createDrilldownTemplatesFromSiblings, ensureNestedTriggers } from '../drilldown_shared';
import {
createDrilldownTemplatesFromSiblings,
DRILLDOWN_MAX_WIDTH,
ensureNestedTriggers,
} from '../drilldown_shared';
export const OPEN_FLYOUT_ADD_DRILLDOWN = 'OPEN_FLYOUT_ADD_DRILLDOWN';
@ -126,6 +130,7 @@ export class FlyoutCreateDrilldownAction implements Action<EmbeddableApiContext>
core
),
{
maxWidth: DRILLDOWN_MAX_WIDTH,
ownFocus: true,
'data-test-subj': 'createDrilldownFlyout',
onClose: () => {

7
x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
View file

@ -32,7 +32,11 @@ import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public';
import { txtDisplayName } from './i18n';
import { MenuItem } from './menu_item';
import { StartDependencies } from '../../../../plugin';
import { createDrilldownTemplatesFromSiblings, ensureNestedTriggers } from '../drilldown_shared';
import {
createDrilldownTemplatesFromSiblings,
DRILLDOWN_MAX_WIDTH,
ensureNestedTriggers,
} from '../drilldown_shared';
export const OPEN_FLYOUT_EDIT_DRILLDOWN = 'OPEN_FLYOUT_EDIT_DRILLDOWN';
@ -95,6 +99,7 @@ export class FlyoutEditDrilldownAction implements Action<EmbeddableApiContext> {
core
),
{
maxWidth: DRILLDOWN_MAX_WIDTH,
ownFocus: true,
'data-test-subj': 'editDrilldownFlyout',
onClose: () => {