diff --git a/rfcs/react-components/components/portal-mount-node.md b/rfcs/react-components/components/portal-mount-node.md new file mode 100644 index 00000000000000..df7ee1f224c022 --- /dev/null +++ b/rfcs/react-components/components/portal-mount-node.md @@ -0,0 +1,84 @@ +# RFC: Extend `mountNode` prop in `Portal` + +[@layeshifter](https://github.com/layershifter) + +## Summary + +This RFC proposes extending the `mountNode` prop in the `Portal` component and its underlying components such as `Tooltip` and `Popup` to accept an object. + +## Background + +The `Portal` component has a `mountNode` prop that allows customizing the element to which the `Portal` will be attached. However, there is no way to customize classes applied to that element. Customization is needed to apply styles such as custom `z-index`es. We need to be able to customize the `mountNode` element to apply this type of custom styles ([microsoft/fluentui#26758](https://github.com/microsoft/fluentui/issues/26758)). + +## Problem statement + +Currently, there is no way to customize classes applied to that element. + +## Detailed Design or Proposal + +The proposal is to allow passing objects to the `mountNode` prop. This can be achieved by extending the `mountNode` prop to accept an object, which can be one of the following: + +```tsx +function App() { + return ( + <> + {/* Current usage, already exists */} + + + {/* Proposed usages */} + + + + + ); +} +``` + +### Pros and Cons + +- 👍 Similar to `positioning` prop. +- 👍 Not a breaking change. +- 👎 May create the impression that `mountNode` is a slot. + +## Discarded Solutions + +### Deprecate `mountNode`, add `portal` prop + +```tsx +function App() { + return ( + <> + + + + + ); +} +``` + +### Pros and Cons + +- 👍 Similar to the `positioning` prop. +- 👎 Can create an impression that `portal` is a slot. +- 👎 Creates a breaking change in the future. +- 👎 `` is not obvious as ``. + +### Add `mountNodeClassName` prop + +```tsx +function App() { + return ( + <> + {/* Current usage, already exists */} + + + {/* Proposed usages */} + + + ); +} +``` + +### Pros and Cons + +- 👎 Does not scale: what if we will need to add another property to manage?