refactor(PopoverTitle): rename to PopoverHeader (react-bootstrap#5679)

Author: kyletsang

src/Popover.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
 import { useBootstrapPrefix } from './ThemeProvider';
-import PopoverTitle from './PopoverTitle';
+import PopoverHeader from './PopoverHeader';
 import PopoverBody from './PopoverBody';
 import { ArrowProps, Placement } from './types';
 import { BsPrefixProps } from './helpers';
@@ -134,7 +134,7 @@ Popover.propTypes = propTypes as any;
 Popover.defaultProps = defaultProps;
 
 export default Object.assign(Popover, {
-  Title: PopoverTitle,
+  Header: PopoverHeader,
   Body: PopoverBody,
 
   // Default popover offset.

src/PopoverHeader.tsx

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

src/PopoverTitle.tsx

@@ -143,7 +143,7 @@ export type { PaginationProps } from './Pagination';
 export { default as Popover } from './Popover';
 export type { PopoverProps } from './Popover';
 
-export { default as PopoverTitle } from './PopoverTitle';
+export { default as PopoverHeader } from './PopoverHeader';
 export { default as PopoverBody } from './PopoverBody';
 export { default as ProgressBar } from './ProgressBar';
 export type { ProgressBarProps } from './ProgressBar';

src/index.tsx

@@ -7,7 +7,7 @@ describe('Popover', () => {
   it('Should output a popover title and content', () => {
     mount(
       <Popover id="test-popover">
-        <Popover.Title>Popover title</Popover.Title>
+        <Popover.Header>Popover title</Popover.Header>
         <Popover.Body>
           <strong>Popover Content</strong>
         </Popover.Body>

test/PopoverSpec.js

@@ -883,9 +883,9 @@ const MegaComponent = () => (
       bsPrefix="popover"
       style={style}
     >
-      <Popover.Title as="div" bsPrefix="prefix" style={style}>
+      <Popover.Header as="div" bsPrefix="prefix" style={style}>
         Popover title
-      </Popover.Title>
+      </Popover.Header>
       <Popover.Body as="div" bsPrefix="prefix" style={style}>
         <strong>Popover Content</strong>
       </Popover.Body>

tests/simple-types-test.tsx

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

www/src/examples/Overlays/PopoverBasic.js

@@ -20,7 +20,7 @@ function Example() {
         containerPadding={20}
       >
         <Popover id="popover-contained">
-          <Popover.Title as="h3">Popover bottom</Popover.Title>
+          <Popover.Header as="h3">Popover bottom</Popover.Header>
           <Popover.Body>
             <strong>Holy guacamole!</strong> Check this info.
           </Popover.Body>

www/src/examples/Overlays/PopoverContained.js

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

www/src/examples/Overlays/PopoverPositioned.js

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