Can you provide a new example for the nested panel in the layout component?

[johntieu]

Hello,

I'm currently looking to nest a panel within a component, instead of having it sized with a height of 100% / displayed absolute. I found this example within the layer component that has an example to trap the panel using Customizer.
In the code, i can see that Customizer is deprecated. Can you provide another example using the recommended themeProvider?

Thank you!

[palonza]

Hi @johntieu,

here's an example of how you can nest a panel within a component using 'themeprovider' (I hope it is useful for you, tell my):

import * as React from 'react';
import { Panel, PanelType, ThemeProvider, createTheme } from '@fluentui/react';

const customTheme = createTheme({
  // Customize your theme here
  // For example, you can change the background color of the panel
  palette: {
    themePrimary: '#0078D4',
    themeLighterAlt: '#eff6fc',
    themeLighter: '#deecf9',
    themeLight: '#c7e0f4',
    themeTertiary: '#71afe5',
    themeSecondary: '#2b88d8',
    themeDarkAlt: '#106ebe',
    themeDark: '#005a9e',
    themeDarker: '#004578',
    neutralLighterAlt: '#f8f8f8',
    neutralLighter: '#f4f4f4',
    neutralLight: '#eaeaea',
    neutralQuaternaryAlt: '#dadada',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c8c8',
    neutralTertiary: '#c2c2c2',
    neutralSecondary: '#858585',
    neutralPrimaryAlt: '#4b4b4b',
    neutralPrimary: '#333333',
    neutralDark: '#272727',
    black: '#1d1d1d',
    white: '#ffffff',
  },
});

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handlePanelDismiss = React.useCallback(() => {
    setIsOpen(false);
  }, []);

  return (
    <ThemeProvider theme={customTheme}>
      <div>
        <button onClick={() => setIsOpen(true)}>Open Panel</button>

        <Panel
          isOpen={isOpen}
          onDismiss={handlePanelDismiss}
          type={PanelType.medium}
          headerText="Example Panel"
        >
          <p>This is an example of a nested panel using Fluent UI and ThemeProvider.</p>
        </Panel>
      </div>
    </ThemeProvider>
  );
};

export default App;

[johntieu]

Hi @palonza ,

Thank you for the quick reply! Does this trap the panel within the component however? In the layer example, there is one case in which the panel is able to be trapped within a component:

I'd like to have it not show in an absolute position and trapped within a component instead.
Thank you!

[palonza]

ok... in the following example you can encapsulated the panel logic within the MyComponent. You can use this custom component in other parts of your application just like any other component. Inside the MyComponent component, we have used the same approaches and CSS styles to nest the panel and display it in an absolute position within a container component.

If I understood your requirement correctly and my example works for you, then you could convert the inline styles into classes in separate css file.

import * as React from 'react';
import { Panel, PanelType, Layer } from '@fluentui/react';

const MyComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handlePanelDismiss = React.useCallback(() => {
    setIsOpen(false);
  }, []);

  return (
    <div style={{ position: 'relative', height: '500px' }}>
      <button onClick={() => setIsOpen(true)}>Open Panel</button>

      {isOpen && (
        <Layer>
          <div style={{ position: 'absolute', top: '50px', left: '50px' }}>
            <Panel
              isOpen={isOpen}
              onDismiss={handlePanelDismiss}
              type={PanelType.medium}
              headerText="Example Panel"
            >
              <p>This is an example of nesting a panel using Fluent UI and Layer component.</p>
            </Panel>
          </div>
        </Layer>
      )}
    </div>
  );
};

export default MyComponent;

[johntieu]

Hi @palonza, it's possible I am not explaining it correctly so I apologize. I am mainly trying to
replicate the example that this page has linked, it is the example "Using Customizer to control the default layer behavior". There is a toggle to trap the panel in a specified container:

This is different from the default behavior of the panel, which is positioned absolute to the browser:

If you look at the code, you can see that the customizer tag is deprecated, and that we'd need to use themeprovider instead. I wanted to ask if there was perhaps an example of achieving the trapped behavior with ThemeProvider.
In the example above, do you mean that I should be nesting your component within a container to achieve this effect?

Thank you very much for your assistance!

[palonza]

Hi @johntieu,

Here I have made a solution (working) in which 'Customizer' is replaced by 'ThemeProvider', please check the following example and tell me if working to you:

https://codesandbox.io/s/fluentui-replace-customizer-v1-0-2-ok2qtv

The code working is as follow:

import * as React from "react";
import { useId, useBoolean } from "@fluentui/react-hooks";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import {
  ThemeProvider,
  Panel,
  Toggle,
  LayerHost,
  ILayerProps,
  IFocusTrapZoneProps,
  mergeStyles
} from "@fluentui/react";

initializeIcons();

export default function LayerCustomizedExample() {
  const [
    isPanelOpen,
    { setTrue: showPanel, setFalse: dismissPanel }
  ] = useBoolean(false);
  const [trapPanel, { toggle: toggleTrapPanel }] = useBoolean(false);

  const layerHostClass = mergeStyles({
    position: "relative",
    height: 400,
    overflow: "hidden",
    border: "1px solid #ccc"
  });

  const focusTrapZoneProps: IFocusTrapZoneProps = {
    isClickableOutsideFocusTrap: true,
    forceFocusInsideTrap: false
  };

  function useLayerSettings(
    trapPanel: boolean,
    layerHostId: string
  ): { Layer?: ILayerProps } {
    return React.useMemo(() => {
      if (trapPanel) {
        const layerProps: ILayerProps = { hostId: layerHostId };
        return { Layer: layerProps };
      }
      return {};
    }, [trapPanel, layerHostId]);
  }

  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const layerHostId = useId("layerHost");

  const scopedSettings = useLayerSettings(trapPanel, layerHostId);

  return (
    <div>
      <p>
        A <code>Panel</code> is rendered, trapped in a specified container. Use{" "}
        <b>Show panel</b> to show/hide the panel (or select the X to dismiss
        it). Use <b>Trap panel</b> to release the panel from its bounds.
      </p>
      <Toggle
        label="Show panel"
        inlineLabel
        checked={isPanelOpen}
        onChange={isPanelOpen ? dismissPanel : showPanel}
      />
      <Toggle
        label="Trap panel"
        inlineLabel
        checked={trapPanel}
        onChange={toggleTrapPanel}
      />
      <ThemeProvider theme={{ components: scopedSettings }}>
        {isPanelOpen && (
          <Panel
            isOpen
            hasCloseButton
            headerText="Sample panel"
            focusTrapZoneProps={focusTrapZoneProps}
            onDismiss={dismissPanel}
            styles={{
              root: { backgroundColor: "rgba(128, 128, 128, 0.5)" }
            }}
          >
            This panel {trapPanel ? "is" : "is not"} trapped.
          </Panel>
        )}
      </ThemeProvider>
      <LayerHost id={layerHostId} className={layerHostClass} />
    </div>
  );
}

The code is adapted to work in "@fluentui/react": version 8, where 'Customizer' is deprecated and is based on the original that you have provided at Microsoft.

You may notice that I have added a 'transparent shadow' to highlight the modal.

[palonza]

@johntieu Have you been able to see the code I sent you? Please mark it as answered or resolved if it works.

[johntieu]

Hi @palonza,

Thank you! Apologies for the delayed response. Yes, that's more or less what I was looking for! I really appreciate the help, I wonder if there is a way to have this be the latest example in the fluent docs.

Thank you again,
John