Change interface of OuiBottomBar component (#707)

Co-authored-by: Andrey Myssak <[email protected]>
Signed-off-by: Sergey Myssak <[email protected]>

src/components/bottom_bar/bottom_bar.test.tsx

@@ -94,20 +94,15 @@ describe('OuiBottomBar', () => {
 
     test('insert root prop is altered', () => {
       const component = render(
-        <OuiBottomBar insert={{ root: document.getElementById('main')! }} />
+        <OuiBottomBar insert={{ root: document.body }} />
       );
 
       expect(component).toMatchSnapshot();
     });
 
     test('insert sibling prop is altered', () => {
       const component = render(
-        <OuiBottomBar
-          insert={{
-            sibling: document.getElementById('main')!,
-            position: 'after',
-          }}
-        />
+        <OuiBottomBar insert={{ sibling: document.body, position: 'after' }} />
       );
 
       expect(component).toMatchSnapshot();

src/components/bottom_bar/bottom_bar.tsx

@@ -38,7 +38,7 @@ import React, {
 } from 'react';
 import { useCombinedRefs } from '../../services';
 import { OuiScreenReaderOnly } from '../accessibility';
-import { CommonProps, ExclusiveUnion } from '../common';
+import { CommonProps } from '../common';
 import { OuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { OuiPortal, OuiPortalInsert } from '../portal';
@@ -58,33 +58,30 @@ export const paddingSizeToClassNameMap: {
 export const POSITIONS = ['static', 'fixed', 'sticky'] as const;
 export type _BottomBarPosition = typeof POSITIONS[number];
 
-type _BottomBarExclusivePositions = ExclusiveUnion<
-  { position?: 'static' | 'sticky' },
-  {
-    position?: 'fixed';
+export type OuiBottomBarProps = CommonProps &
+  HTMLAttributes<HTMLElement> & {
+    /**
+     * How to position the bottom bar against its parent.
+     * Defaults to `fixed`.
+     */
+    position?: 'static' | 'sticky' | 'fixed';
     /**
      * Whether to wrap in OuiPortal. Can be configured using "insert" prop.
-     * Only works if `position` is `fixed`.
      */
     usePortal?: boolean;
     /**
      * Configuration for placing children in the DOM. By default, attaches children to the body element.
-     * Only works if `position` is `fixed` and `usePortal` is true.
+     * Only works if `usePortal` is true.
      */
     insert?: OuiPortalInsert;
     /**
-     * Whether the component should apply padding on the document body element to afford for its own displacement height.
-     * Only works if `position` is `fixed` and `usePortal` is true.
+     * Whether to apply padding to the document body to afford for its own displacement height.
+     * Only works if `position` is `fixed`.
      */
     affordForDisplacement?: boolean;
-  }
->;
-
-export type OuiBottomBarProps = CommonProps &
-  HTMLAttributes<HTMLElement> &
-  _BottomBarExclusivePositions & {
     /**
-     * Padding applied to the bar. Default is 'm'.
+     * Padding applied to the bar.
+     * Defaults to 'm'.
      */
     paddingSize?: BottomBarPaddingSize;
     /**
@@ -127,12 +124,12 @@ export const OuiBottomBar = forwardRef<
     {
       position = 'fixed',
       paddingSize = 'm',
-      affordForDisplacement = true,
+      affordForDisplacement,
       children,
       className,
       bodyClassName,
       landmarkHeading,
-      usePortal = true,
+      usePortal,
       insert,
       left,
       right,
@@ -143,18 +140,13 @@ export const OuiBottomBar = forwardRef<
     },
     ref
   ) => {
-    // Force some props if `fixed` position, but not if the user has supplied these
-    affordForDisplacement =
-      position !== 'fixed' ? false : affordForDisplacement;
-    usePortal = position !== 'fixed' ? false : usePortal;
-
     const [resizeRef, setResizeRef] = useState<HTMLElement | null>(null);
     const setRef = useCombinedRefs([setResizeRef, ref]);
     // TODO: Allow this hooke to be conditional
     const dimensions = useResizeObserver(resizeRef);
 
     useEffect(() => {
-      if (affordForDisplacement && usePortal) {
+      if (affordForDisplacement) {
         document.body.style.paddingBottom = `${dimensions.height}px`;
       }
 
@@ -163,15 +155,15 @@ export const OuiBottomBar = forwardRef<
       }
 
       return () => {
-        if (affordForDisplacement && usePortal) {
+        if (affordForDisplacement) {
           document.body.style.paddingBottom = '';
         }
 
         if (bodyClassName) {
           document.body.classList.remove(bodyClassName);
         }
       };
-    }, [affordForDisplacement, usePortal, dimensions, bodyClassName]);
+    }, [affordForDisplacement, dimensions, bodyClassName]);
 
     const classes = classNames(
       'ouiBottomBar',

src/components/portal/portal.test.tsx

@@ -40,13 +40,8 @@ describe('OuiPortal', () => {
   it('should render OuiPortal', () => {
     const component = mount(<OuiPortal>Content</OuiPortal>);
 
-    expect(component).toMatchSnapshot();
-  });
-
-  it('should attach Content to body', () => {
-    mount(<OuiPortal>Content</OuiPortal>);
-
     expect(document.body.innerHTML).toEqual('<div>Content</div>');
+    expect(component).toMatchSnapshot();
   });
 
   it('should attach Content inside an element', () => {

src/components/portal/portal.tsx

@@ -53,7 +53,7 @@ export const INSERT_POSITIONS: OuiPortalInsertPosition[] = keysOf(
 
 type OuiPortalInsertPosition = keyof typeof insertPositions;
 export type OuiPortalInsert = ExclusiveUnion<
-  { root?: HTMLElement },
+  { root: HTMLElement },
   { sibling: HTMLElement; position: OuiPortalInsertPosition }
 >;