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 } >;