refactor(PopoverContent): rename to PopoverBody (react-bootstrap#5677)

Author: kyletsang

src/Popover.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
 import { useBootstrapPrefix } from './ThemeProvider';
 import PopoverTitle from './PopoverTitle';
-import PopoverContent from './PopoverContent';
+import PopoverBody from './PopoverBody';
 import { ArrowProps, Placement } from './Overlay';
 import { BsPrefixProps } from './helpers';
 
@@ -15,7 +15,7 @@ export interface PopoverProps
   placement?: Placement;
   title?: string;
   arrowProps?: ArrowProps;
-  content?: boolean;
+  body?: boolean;
   popper?: any;
   show?: boolean;
 }
@@ -69,10 +69,10 @@ const propTypes = {
   }),
 
   /**
-   * When this prop is set, it creates a Popover with a Popover.Content inside
+   * When this prop is set, it creates a Popover with a Popover.Body inside
    * passing the children directly to it
    */
-  content: PropTypes.bool,
+  body: PropTypes.bool,
 
   /** @private */
   popper: PropTypes.object,
@@ -93,7 +93,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
       className,
       style,
       children,
-      content,
+      body,
       arrowProps,
       popper: _,
       show: _1,
@@ -124,7 +124,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
         {...props}
       >
         <div className="popover-arrow" {...arrowProps} />
-        {content ? <PopoverContent>{children}</PopoverContent> : children}
+        {body ? <PopoverBody>{children}</PopoverBody> : children}
       </div>
     );
   },
@@ -135,5 +135,5 @@ Popover.defaultProps = defaultProps;
 
 export default Object.assign(Popover, {
   Title: PopoverTitle,
-  Content: PopoverContent,
+  Body: PopoverBody,
 });

src/PopoverBody.tsx

@@ -0,0 +1,3 @@
+import createWithBsPrefix from './createWithBsPrefix';
+
+export default createWithBsPrefix('popover-body');

src/PopoverContent.tsx

@@ -144,7 +144,7 @@ export { default as Popover } from './Popover';
 export type { PopoverProps } from './Popover';
 
 export { default as PopoverTitle } from './PopoverTitle';
-export { default as PopoverContent } from './PopoverContent';
+export { default as PopoverBody } from './PopoverBody';
 export { default as ProgressBar } from './ProgressBar';
 export type { ProgressBarProps } from './ProgressBar';
 

src/index.tsx

@@ -8,9 +8,9 @@ describe('Popover', () => {
     mount(
       <Popover id="test-popover">
         <Popover.Title>Popover title</Popover.Title>
-        <Popover.Content>
+        <Popover.Body>
           <strong>Popover Content</strong>
-        </Popover.Content>
+        </Popover.Body>
       </Popover>,
     ).assertSingle(
       '.popover[x-placement="right"][role="tooltip"].bs-popover-end strong',

test/PopoverSpec.js

@@ -886,9 +886,9 @@ const MegaComponent = () => (
       <Popover.Title as="div" bsPrefix="prefix" style={style}>
         Popover title
       </Popover.Title>
-      <Popover.Content as="div" bsPrefix="prefix" style={style}>
+      <Popover.Body as="div" bsPrefix="prefix" style={style}>
         <strong>Popover Content</strong>
-      </Popover.Content>
+      </Popover.Body>
     </Popover>
     <div>
       <ProgressBar striped variant="success" min={-10} now={40} max={200} />

tests/simple-types-test.tsx

@@ -1,10 +1,10 @@
 const popover = (
   <Popover id="popover-basic">
     <Popover.Title as="h3">Popover right</Popover.Title>
-    <Popover.Content>
+    <Popover.Body>
       And here's some <strong>amazing</strong> content. It's very engaging.
       right?
-    </Popover.Content>
+    </Popover.Body>
   </Popover>
 );
 

www/src/examples/Overlays/PopoverBasic.js

@@ -21,9 +21,9 @@ function Example() {
       >
         <Popover id="popover-contained">
           <Popover.Title as="h3">Popover bottom</Popover.Title>
-          <Popover.Content>
+          <Popover.Body>
             <strong>Holy guacamole!</strong> Check this info.
-          </Popover.Content>
+          </Popover.Body>
         </Popover>
       </Overlay>
     </div>

www/src/examples/Overlays/PopoverContained.js

@@ -7,9 +7,9 @@
       overlay={
         <Popover id={`popover-positioned-${placement}`}>
           <Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
-          <Popover.Content>
+          <Popover.Body>
             <strong>Holy guacamole!</strong> Check this info.
-          </Popover.Content>
+          </Popover.Body>
         </Popover>
       }
     >

www/src/examples/Overlays/PopoverPositioned.js

@@ -1,9 +1,9 @@
 const popover = (position) => (
   <Popover id={`popover-positioned-scrolling-${position}`}>
     <Popover.Title as="h3">{`Popover ${position}`}</Popover.Title>
-    <Popover.Content>
+    <Popover.Body>
       <strong>Holy guacamole!</strong> Check this info.
-    </Popover.Content>
+    </Popover.Body>
   </Popover>
 );