Skip to content

Commit 5d496c3

Browse files
authored
[Discover] Don't hide fields button for mobile if sidebar is collapsed (elastic#271245)
## Summary Fixes: elastic#270461 After layout toggle refactor mobile-purpose button for fields was not being rendered if the `isSidebarCollapsed=true`. It should be visible always on mobile, regardless the `isSidebarCollapsed` value. https://github.com/user-attachments/assets/6473e2cc-4525-4859-aaaf-b46ec487cb98 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.
1 parent 3e33df1 commit 5d496c3

2 files changed

Lines changed: 10 additions & 2 deletions

File tree

src/platform/packages/shared/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar_container.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,7 @@ function ButtonVariant({
468468
<EuiPortal>
469469
<EuiFlyout
470470
size="s"
471+
container={null}
471472
onClose={() => setIsFieldListFlyoutVisible(false)}
472473
aria-labelledby="flyoutTitle"
473474
ownFocus

src/platform/plugins/shared/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState }
1111
import type { UiCounterMetricType } from '@kbn/analytics';
1212
import { i18n } from '@kbn/i18n';
1313
import { css } from '@emotion/react';
14-
import { EuiFlexGroup, EuiFlexItem, EuiHideFor, useEuiTheme } from '@elastic/eui';
14+
import {
15+
EuiFlexGroup,
16+
EuiFlexItem,
17+
EuiHideFor,
18+
useEuiTheme,
19+
useIsWithinBreakpoints,
20+
} from '@elastic/eui';
1521
import useObservable from 'react-use/lib/useObservable';
1622
import type { BehaviorSubject } from 'rxjs';
1723
import { of } from 'rxjs';
@@ -362,6 +368,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
362368
[onRemoveField]
363369
);
364370

371+
const isMobile = useIsWithinBreakpoints(['xs', 's']);
365372
const isSidebarCollapsed = useObservable(
366373
unifiedFieldListSidebarContainerApi?.sidebarVisibility.isCollapsed$ ?? of(false),
367374
false
@@ -410,7 +417,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
410417
gutterSize="none"
411418
css={css`
412419
height: 100%;
413-
display: ${isSidebarCollapsed ? 'none' : 'flex'};
420+
display: ${isSidebarCollapsed && !isMobile ? 'none' : 'flex'};
414421
// Make Discover's field list background distinguished for the "new chrome"
415422
background-color: ${chromeStyle === 'project'
416423
? euiTheme.colors.backgroundBasePlain

0 commit comments

Comments
 (0)