Skip to content

[Discover] Replace temporary collapsible layout icons with EUI icons #262075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
akowalska622 merged 6 commits into from
Apr 13, 2026
+2 −33
Merged

[Discover] Replace temporary collapsible layout icons with EUI icons #262075

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
43d5682
replace temporary icons with EUI icons
akowalska622 Apr 8, 2026
5f98a42
Merge branch 'main' into replace-inline-icons-with-eui
akowalska622 Apr 13, 2026
b94f61f
Changes from node scripts/eslint_all_files --no-cache --fix
kibanamachine Apr 13, 2026
d5a78da
clean up imports
akowalska622 Apr 13, 2026
deb6eb1
Merge branch 'replace-inline-icons-with-eui' of github.com:akowalska6…
akowalska622 Apr 13, 2026
922adbb
Merge branch 'main' into replace-inline-icons-with-eui
akowalska622 Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 2 additions & 33 deletions src/platform/plugins/shared/discover/public/components/panels_toggle/panels_toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React, { useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import useObservable from 'react-use/lib/useObservable';
import type { BehaviorSubject } from 'rxjs';
import { useIsWithinBreakpoints, type IconType } from '@elastic/eui';
import { useIsWithinBreakpoints } from '@elastic/eui';
import { IconButtonGroup } from '@kbn/shared-ux-button-toolbar';
import { useAppStateSelector } from '../../application/main/state_management/redux';
import type { SidebarToggleState } from '../../application/types';
Expand All @@ -35,37 +35,6 @@ export interface PanelsToggleProps {
dataTestSubjSuffix?: string;
}

// Temporary, TODO: replace with appropriate icons when they are available in EUI (#257879)
const temporaryExpandTableIcon: IconType = (props) => (
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M8.5 3.29297L8.5 7.08594L10.1465 5.43945L10.8535 6.14649L8 9L5.14649 6.14648L5.85352 5.43945L7.5 7.08594L7.5 3.29297L8.5 3.29297Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 15C1.44771 15 1 14.5523 1 14L1 2C1 1.44772 1.44772 1 2 1L14 1C14.5523 1 15 1.44772 15 2L15 14C15 14.5523 14.5523 15 14 15L2 15ZM14 2L2 2L2 10L14 10L14 2ZM14 11.793L14 11L13.207 11L10.207 14L11.793 14L14 11.793ZM11.793 11L10.207 11L7.20703 14L8.79297 14L11.793 11ZM8.79297 11L7.20703 11L4.20703 14L5.79297 14L8.79297 11ZM5.79297 11L4.20703 11L2 13.207L2 14L2.79297 14L5.79297 11ZM2.79297 11L2 11L2 11.793L2.79297 11ZM14 13.207L13.207 14L14 14L14 13.207Z"
fill="currentColor"
/>
</svg>
);

const temporaryCollapseTableIcon: IconType = (props) => (
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M7.5 9L7.5 5.20703L5.85352 6.85352L5.14649 6.14648L8 3.29297L10.8535 6.14649L10.1465 6.85352L8.5 5.20703L8.5 9L7.5 9Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 15C1.44771 15 1 14.5523 1 14L1 2C1 1.44772 1.44772 1 2 1L14 1C14.5523 1 15 1.44772 15 2L15 14C15 14.5523 14.5523 15 14 15L2 15ZM14 2L2 2L2 10L14 10L14 2ZM14 11.793L14 11L13.207 11L10.207 14L11.793 14L14 11.793ZM11.793 11L10.207 11L7.20703 14L8.79297 14L11.793 11ZM8.79297 11L7.20703 11L4.20703 14L5.79297 14L8.79297 11ZM5.79297 11L4.20703 11L2 13.207L2 14L2.79297 14L5.79297 11ZM2.79297 11L2 11L2 11.793L2.79297 11ZM14 13.207L13.207 14L14 14L14 13.207Z"
fill="currentColor"
/>
</svg>
);

const getSidebarButton = ({
isHidden,
toggleSidebar,
Expand Down Expand Up @@ -140,7 +109,7 @@ const getTableButton = ({

return {
label,
iconType: isHidden ? temporaryCollapseTableIcon : temporaryExpandTableIcon,
iconType: isHidden ? 'transitionBottomIn' : 'transitionBottomOut',
'data-test-subj': isHidden ? 'dscShowTableButton' : 'dscHideTableButton',
'aria-expanded': !isHidden,
isDisabled,
Expand Down
Loading