mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-11 00:08:30 +01:00
347c1cabbc
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 😄 
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import 'whatwg-fetch';
|
|
import 'themes/app.css';
|
|
import 'regenerator-runtime/runtime';
|
|
|
|
import ReactDOM from 'react-dom';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { ThemeProvider } from 'themes/ThemeProvider';
|
|
import { App } from 'component/App';
|
|
import { ScrollTop } from 'component/common/ScrollTop/ScrollTop';
|
|
import { AccessProvider } from 'component/providers/AccessProvider/AccessProvider';
|
|
import { basePath } from 'utils/formatPath';
|
|
import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider';
|
|
import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
|
|
import { InstanceStatus } from 'component/common/InstanceStatus/InstanceStatus';
|
|
import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
|
|
import { StickyProvider } from 'component/common/Sticky/StickyProvider';
|
|
|
|
window.global ||= window;
|
|
|
|
ReactDOM.render(
|
|
<UIProviderContainer>
|
|
<AccessProvider>
|
|
<BrowserRouter basename={basePath}>
|
|
<ThemeProvider>
|
|
<AnnouncerProvider>
|
|
<FeedbackCESProvider>
|
|
<StickyProvider>
|
|
<InstanceStatus>
|
|
<ScrollTop />
|
|
<App />
|
|
</InstanceStatus>
|
|
</StickyProvider>
|
|
</FeedbackCESProvider>
|
|
</AnnouncerProvider>
|
|
</ThemeProvider>
|
|
</BrowserRouter>
|
|
</AccessProvider>
|
|
</UIProviderContainer>,
|
|
document.getElementById('app'),
|
|
);
|