diff --git a/src/components/bottom_bar/bottom_bar.test.tsx b/src/components/bottom_bar/bottom_bar.test.tsx
index 638efa063c..00f46b696d 100644
--- a/src/components/bottom_bar/bottom_bar.test.tsx
+++ b/src/components/bottom_bar/bottom_bar.test.tsx
@@ -94,7 +94,7 @@ describe('OuiBottomBar', () => {
test('insert root prop is altered', () => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
@@ -102,12 +102,7 @@ describe('OuiBottomBar', () => {
test('insert sibling prop is altered', () => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx
index b29b94eb76..c761a7323a 100644
--- a/src/components/bottom_bar/bottom_bar.tsx
+++ b/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 & {
+ /**
+ * 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 &
- _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(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,7 +155,7 @@ export const OuiBottomBar = forwardRef<
}
return () => {
- if (affordForDisplacement && usePortal) {
+ if (affordForDisplacement) {
document.body.style.paddingBottom = '';
}
@@ -171,7 +163,7 @@ export const OuiBottomBar = forwardRef<
document.body.classList.remove(bodyClassName);
}
};
- }, [affordForDisplacement, usePortal, dimensions, bodyClassName]);
+ }, [affordForDisplacement, dimensions, bodyClassName]);
const classes = classNames(
'ouiBottomBar',
diff --git a/src/components/portal/portal.test.tsx b/src/components/portal/portal.test.tsx
index a1f204a231..472ed4c17f 100644
--- a/src/components/portal/portal.test.tsx
+++ b/src/components/portal/portal.test.tsx
@@ -40,13 +40,8 @@ describe('OuiPortal', () => {
it('should render OuiPortal', () => {
const component = mount(Content);
- expect(component).toMatchSnapshot();
- });
-
- it('should attach Content to body', () => {
- mount(Content);
-
expect(document.body.innerHTML).toEqual('Content
');
+ expect(component).toMatchSnapshot();
});
it('should attach Content inside an element', () => {
diff --git a/src/components/portal/portal.tsx b/src/components/portal/portal.tsx
index 56fe35399a..931d9cb3ec 100644
--- a/src/components/portal/portal.tsx
+++ b/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 }
>;