diff --git a/src/ToastContainer.tsx b/src/ToastContainer.tsx index b31d591030..d5f3824b3b 100644 --- a/src/ToastContainer.tsx +++ b/src/ToastContainer.tsx @@ -44,9 +44,7 @@ const propTypes = { ]), /** - * By default the container is rendered with `position-absolute` utility class. Provide a string to use other `position-*` utility classes, or an empty string to remove it. - * - * @default 'absolute' + * Specify the positioning method for the container. */ containerPosition: PropTypes.string, }; @@ -71,7 +69,7 @@ const ToastContainer: BsPrefixRefForwardingComponent< { bsPrefix, position, - containerPosition = 'absolute', + containerPosition, className, // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595 as: Component = 'div', @@ -87,10 +85,8 @@ const ToastContainer: BsPrefixRefForwardingComponent< {...props} className={classNames( bsPrefix, - position && [ - containerPosition ? `position-${containerPosition}` : null, - positionClasses[position], - ], + position && positionClasses[position], + containerPosition && `position-${containerPosition}`, className, )} /> diff --git a/test/ToastContainerSpec.tsx b/test/ToastContainerSpec.tsx index 4fbf302784..73d5ba83e8 100644 --- a/test/ToastContainerSpec.tsx +++ b/test/ToastContainerSpec.tsx @@ -1,7 +1,7 @@ import { render } from '@testing-library/react'; import ToastContainer, { ToastPosition } from '../src/ToastContainer'; -const expectedClassesWithoutPosition: Record> = { +const expectedClasses: Record> = { 'top-start': ['top-0', 'start-0'], 'top-center': ['top-0', 'start-50', 'translate-middle-x'], 'top-end': ['top-0', 'end-0'], @@ -13,14 +13,6 @@ const expectedClassesWithoutPosition: Record> = { 'bottom-end': ['bottom-0', 'end-0'], }; -const createExpectedClasses = (containerPosition = 'absolute') => - Object.fromEntries( - Object.entries(expectedClassesWithoutPosition).map(([key, value]) => [ - key, - containerPosition ? [`position-${containerPosition}`, ...value] : value, - ]), - ); - describe('ToastContainer', () => { it('should render a basic toast container', () => { const { container } = render(); @@ -28,57 +20,22 @@ describe('ToastContainer', () => { .true; }); - describe('without containerPosition', () => { - const expectedClasses = createExpectedClasses(); - - Object.keys(expectedClasses).forEach((position: ToastPosition) => { - it(`should render classes for position=${position} with position-absolute`, () => { - const { container } = render(); - expectedClasses[position].map( - (className) => - container.firstElementChild!.classList.contains(className).should.be - .true, - ); - }); - }); + it('should render the containerPosition', () => { + const { container } = render( + , + ); + container.firstElementChild!.classList.contains('position-relative').should + .be.true; }); - describe('with containerPosition = "" (empty string)', () => { - const expectedClasses = createExpectedClasses(''); - - Object.keys(expectedClasses).forEach((position: ToastPosition) => { - it(`should render classes for position=${position} without position-*`, () => { - const { container } = render(); - expectedClasses[position].map( - (className) => - container.firstElementChild!.classList.contains(className).should.be - .true, - ); - }); + Object.keys(expectedClasses).forEach((position: ToastPosition) => { + it(`should render position=${position}`, () => { + const { container } = render(); + expectedClasses[position].map( + (className) => + container.firstElementChild!.classList.contains(className).should.be + .true, + ); }); }); - - ['absolute', 'fixed', 'relative', 'sticky', 'custom'].forEach( - (containerPosition) => { - describe(`with containerPosition=${containerPosition}`, () => { - const expectedClasses = createExpectedClasses(containerPosition); - - Object.keys(expectedClasses).forEach((position: ToastPosition) => { - it(`should render classes for position=${position} with position-${containerPosition}`, () => { - const { container } = render( - , - ); - expectedClasses[position].map( - (className) => - container.firstElementChild!.classList.contains(className) - .should.be.true, - ); - }); - }); - }); - }, - ); });