mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-28 17:55:15 +02:00
https://linear.app/unleash/issue/2-1509/discovery-stacked-sticky-elements Adds a new `Sticky` element that will attempt to stack sticky elements in the DOM in a smart way. This needs a wrapping `StickyProvider` that will keep track of sticky elements. This PR adapts a few components to use this new element: - `DemoBanner` - `FeatureOverviewSidePanel` - `DraftBanner` - `MaintenanceBanner` - `MessageBanner` Pre-existing `top` properties are taken into consideration for the top offset, so we can have nice margins like in the feature overview side panel. ### Before - Sticky elements overlap 😞  ### After - Sticky elements stack 😄 
13 lines
420 B
TypeScript
13 lines
420 B
TypeScript
import { RefObject, createContext } from 'react';
|
|
|
|
export interface IStickyContext {
|
|
stickyItems: RefObject<HTMLDivElement>[];
|
|
registerStickyItem: (ref: RefObject<HTMLDivElement>) => void;
|
|
unregisterStickyItem: (ref: RefObject<HTMLDivElement>) => void;
|
|
getTopOffset: (ref: RefObject<HTMLDivElement>) => number;
|
|
}
|
|
|
|
export const StickyContext = createContext<IStickyContext | undefined>(
|
|
undefined,
|
|
);
|