fix(ToastContainer): allow setting containerPosition without `posit…

…ion` (#6574)
react-bootstrap · Apr 7, 2023 · 41ec134 · 41ec134
1 parent 3c6ea8d
commit 41ec134
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 66 deletions.
diff --git 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
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import ToastContainer, { ToastPosition } from '../src/ToastContainer';
 
-const expectedClassesWithoutPosition: Record<ToastPosition, Array<string>> = {
+const expectedClasses: Record<ToastPosition, Array<string>> = {
   'top-start': ['top-0', 'start-0'],
   'top-center': ['top-0', 'start-50', 'translate-middle-x'],
   'top-end': ['top-0', 'end-0'],
@@ -13,72 +13,29 @@ const expectedClassesWithoutPosition: Record<ToastPosition, Array<string>> = {
   '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(<ToastContainer />);
     container.firstElementChild!.classList.contains('toast-container').should.be
       .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(<ToastContainer position={position} />);
-        expectedClasses[position].map(
-          (className) =>
-            container.firstElementChild!.classList.contains(className).should.be
-              .true,
-        );
-      });
-    });
+  it('should render the containerPosition', () => {
+    const { container } = render(
+      <ToastContainer containerPosition="relative" />,
+    );
+    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(<ToastContainer position={position} />);
-        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(<ToastContainer position={position} />);
+      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(
-              <ToastContainer
-                position={position}
-                containerPosition={containerPosition}
-              />,
-            );
-            expectedClasses[position].map(
-              (className) =>
-                container.firstElementChild!.classList.contains(className)
-                  .should.be.true,
-            );
-          });
-        });
-      });
-    },
-  );
 });