diff --git a/src/plugins/controls/public/control_group/component/control_frame_component.tsx b/src/plugins/controls/public/control_group/component/control_frame_component.tsx index e4c647737f48c4..5da9a3233275f2 100644 --- a/src/plugins/controls/public/control_group/component/control_frame_component.tsx +++ b/src/plugins/controls/public/control_group/component/control_frame_component.tsx @@ -96,6 +96,7 @@ export const ControlFrame = ({ 'controlFrameFormControlLayout--twoLine': controlStyle === 'twoLine', })} fullWidth + compressed prepend={ <> {(embeddable && customPrepend) ?? null} diff --git a/src/plugins/controls/public/control_group/control_group.scss b/src/plugins/controls/public/control_group/control_group.scss index 9619e68274e168..e797f3b421297d 100644 --- a/src/plugins/controls/public/control_group/control_group.scss +++ b/src/plugins/controls/public/control_group/control_group.scss @@ -6,7 +6,6 @@ $controlMinWidth: $euiSize * 14; .controlsWrapper { display: flex; align-items: center; - min-height: $euiSize * 4; .controlGroup--endButtonGroup { align-self: end; @@ -47,7 +46,7 @@ $controlMinWidth: $euiSize * 14; .controlFrame__draggable { cursor: grabbing; - height: $euiButtonHeight; + height: $euiButtonHeightSmall; align-items: center; border-radius: $euiBorderRadius; font-weight: $euiFontWeightSemiBold; diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss index fc1cdf68e3fecf..f7175b74c792e5 100644 --- a/src/plugins/controls/public/options_list/components/options_list.scss +++ b/src/plugins/controls/public/options_list/components/options_list.scss @@ -8,7 +8,7 @@ } .optionsList--filterBtn { - height: $euiButtonHeight; + height: $euiButtonHeightSmall; &.optionsList--filterBtnPlaceholder { color: $euiTextSubduedColor; diff --git a/src/plugins/controls/public/options_list/components/options_list_control.tsx b/src/plugins/controls/public/options_list/components/options_list_control.tsx index ef3aa89bcc2cc8..cf18eaf53fc312 100644 --- a/src/plugins/controls/public/options_list/components/options_list_control.tsx +++ b/src/plugins/controls/public/options_list/components/options_list_control.tsx @@ -214,6 +214,7 @@ export const OptionsListControl = ({ className={classNames('optionsList--filterGroup', { 'optionsList--filterGroupSingle': controlStyle !== 'twoLine', })} + compressed > { id={id} fullWidth showTicks + compressed step={step} ticks={ticks} levels={levels} diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss index a66d39e95818a0..bb05f663ca42fa 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss @@ -1,7 +1,7 @@ .controlPanel { width: 100%; max-inline-size: 100% !important; - height: $euiButtonHeight; + height: $euiButtonHeightSmall; box-shadow: none !important; background-color: $euiFormBackgroundColor !important; border-radius: 0 $euiBorderRadius $euiBorderRadius 0 !important; @@ -11,11 +11,12 @@ } &--labelWrapper { - height: 100%; + height: $euiFormControlCompressedHeight; .controlPanel--label { @include euiTextTruncate; padding: 0; + height: $euiButtonHeightSmall; } } diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx index 9ed24904f25cd6..66ca8bef9df1e7 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx @@ -155,10 +155,12 @@ export const ControlPanel = diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx index 5411b6122ac25c..cad81a19200814 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -173,7 +173,7 @@ export const OptionsListControl = ({ ); return ( - + = ({ min={displayedMin} max={displayedMax} isLoading={isLoading} + compressed inputPopoverProps={{ className: controlPanelClassName, panelMinWidth: MIN_POPOVER_WIDTH, diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx index 0671442bf41200..54d0d83e102d8d 100644 --- a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx +++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx @@ -39,6 +39,7 @@ export function TimeSliderAnchoredRange(props: Props) { max={props.timeRangeMax} step={props.stepSize} ticks={props.ticks} + compressed /> ); } diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx index 584c20328496fa..55f9eb3dc62104 100644 --- a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx +++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx @@ -35,6 +35,7 @@ export function TimeSliderSlidingWindowRange(props: Props) { step={props.stepSize} ticks={props.ticks} isDraggable + compressed /> ); } diff --git a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss index d5196f140292fb..f0c51724b551ba 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss +++ b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss @@ -18,7 +18,6 @@ .dshDashboardViewport-controls { margin: 0 $euiSizeS 0 $euiSizeS; padding-top: $euiSizeS; - padding-bottom: $euiSizeXS; } .dashboardViewport--screenshotMode .controlsWrapper--empty { diff --git a/test/functional/screenshots/baseline/area_chart.png b/test/functional/screenshots/baseline/area_chart.png index fb2e7e295e3e93..07004fbb366551 100644 Binary files a/test/functional/screenshots/baseline/area_chart.png and b/test/functional/screenshots/baseline/area_chart.png differ diff --git a/test/functional/screenshots/baseline/dashboard_controls_dark.png b/test/functional/screenshots/baseline/dashboard_controls_dark.png index 8cd3d27384c3df..510532befc60b1 100644 Binary files a/test/functional/screenshots/baseline/dashboard_controls_dark.png and b/test/functional/screenshots/baseline/dashboard_controls_dark.png differ diff --git a/test/functional/screenshots/baseline/dashboard_controls_light.png b/test/functional/screenshots/baseline/dashboard_controls_light.png index df1cf54bdbe206..05b9897d3a6e3b 100644 Binary files a/test/functional/screenshots/baseline/dashboard_controls_light.png and b/test/functional/screenshots/baseline/dashboard_controls_light.png differ diff --git a/test/functional/screenshots/baseline/tsvb_dashboard.png b/test/functional/screenshots/baseline/tsvb_dashboard.png index f118bf55040e5a..8b33a0077efa23 100644 Binary files a/test/functional/screenshots/baseline/tsvb_dashboard.png and b/test/functional/screenshots/baseline/tsvb_dashboard.png differ