From 533f0886100aebb3f1207465a7a2165247f5efc1 Mon Sep 17 00:00:00 2001 From: Anton Kastritskiy Date: Fri, 25 Oct 2024 10:33:32 -0700 Subject: [PATCH] Sticky headers for collapsable panels Differential Revision: D64938295 fbshipit-source-id: 0a646f29eba98e1721616263960abf061b7e3304 --- desktop/flipper-plugin/src/ui/Panel.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/desktop/flipper-plugin/src/ui/Panel.tsx b/desktop/flipper-plugin/src/ui/Panel.tsx index efd3f91278b..82273f60cc3 100644 --- a/desktop/flipper-plugin/src/ui/Panel.tsx +++ b/desktop/flipper-plugin/src/ui/Panel.tsx @@ -13,9 +13,17 @@ import {TrackingScope} from './Tracked'; import {useLocalStorageState} from '../utils/useLocalStorageState'; import {useCallback} from 'react'; import styled from '@emotion/styled'; +import {css} from '@emotion/css'; import {Spacing, theme} from './theme'; import {Layout} from './Layout'; +const stickyHeader = css` + & .ant-collapse-header { + position: sticky !important; + top: 0; + } +`; + export const Panel: React.FC<{ title: string; /** @@ -28,6 +36,7 @@ export const Panel: React.FC<{ collapsed?: boolean; pad?: Spacing; gap?: Spacing; + stickyHeader?: boolean; extraActions?: React.ReactElement | null; className?: string; }> = (props) => { @@ -52,6 +61,7 @@ export const Panel: React.FC<{ onChange={toggle}>