[EuiPopover] Deprecate anchorClassName and buttonRef

changelogs/upcoming/7488.md

@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- Removed deprecated `anchorClassName` prop from `EuiPopover`. Use `className` instead
+- Removed deprecated `buttonRef` prop from `EuiPopover`. Use `popoverRef` instead

src/components/popover/__snapshots__/popover.test.tsx.snap

@@ -19,19 +19,10 @@ exports[`EuiPopover is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiPopover props anchorClassName is rendered 1`] = `
-<div
-  class="euiPopover test emotion-euiPopover-inline-block"
-  id="3"
->
-  <button />
-</div>
-`;
-
 exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 <div
   class="euiPopover emotion-euiPopover-inline-block"
-  id="6"
+  id="5"
 >
   <button />
 </div>
@@ -40,7 +31,7 @@ exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 <div
   class="euiPopover emotion-euiPopover-inline-block"
-  id="8"
+  id="7"
 >
   <button />
 </div>
@@ -49,7 +40,7 @@ exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 <div
   class="euiPopover emotion-euiPopover-inline-block"
-  id="7"
+  id="6"
 >
   <button />
 </div>
@@ -59,7 +50,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="20"
+    id="19"
   >
     <button />
     <div
@@ -111,7 +102,7 @@ exports[`EuiPopover props buffer 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="21"
+    id="20"
   >
     <button />
     <div
@@ -161,7 +152,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="22"
+    id="21"
   >
     <button />
     <div
@@ -220,7 +211,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="16"
+    id="15"
   >
     <button />
     <div
@@ -269,7 +260,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
 exports[`EuiPopover props isOpen defaults to false 1`] = `
 <div
   class="euiPopover emotion-euiPopover-inline-block"
-  id="9"
+  id="8"
 >
   <button />
 </div>
@@ -279,7 +270,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="10"
+    id="9"
   >
     <button />
     <div
@@ -329,7 +320,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="11"
+    id="10"
   >
     <button />
     <div
@@ -379,7 +370,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="12"
+    id="11"
   >
     <button />
     <div
@@ -420,7 +411,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="13"
+    id="12"
   >
     <button />
     <div
@@ -470,7 +461,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="14"
+    id="13"
   >
     <button />
     <div
@@ -520,7 +511,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="15"
+    id="14"
   >
     <button />
     <div
@@ -571,7 +562,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
 <div>
   <div
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-    id="23"
+    id="22"
   >
     <button />
     <div

src/components/popover/popover.test.tsx

@@ -87,21 +87,6 @@ describe('EuiPopover', () => {
       });
     });
 
-    describe('anchorClassName', () => {
-      test('is rendered', () => {
-        const { container } = render(
-          <EuiPopover
-            id={getId()}
-            anchorClassName="test"
-            button={<button />}
-            closePopover={() => {}}
-          />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
-    });
-
     describe('closePopover', () => {
       it('is called when ESC key is hit and the popover is open', () => {
         const closePopoverHandler = jest.fn();

src/components/popover/popover.tsx

@@ -70,12 +70,6 @@ export type PopoverAnchorPosition = (typeof popoverAnchorPosition)[number];
 type AnchorPosition = 'up' | 'right' | 'down' | 'left';
 
 export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
-  /**
-   * Class name passed to the direct parent of the button
-   *
-   * @deprecated Use `className` instead
-   */
-  anchorClassName?: string;
   /**
    * Alignment of the popover and arrow relative to the button
    */
@@ -89,10 +83,6 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
    * Triggering element for which to align the popover to
    */
   button: NonNullable<ReactNode>;
-  /**
-   * @deprecated Use `popoverRef` instead
-   */
-  buttonRef?: RefCallback<HTMLDivElement>;
   /**
    * Callback to handle hiding of the popover
    */
@@ -603,15 +593,13 @@ export class EuiPopover extends Component<Props, State> {
 
   popoverRef = (node: HTMLDivElement | null) => {
     this.button = node;
-    setMultipleRefs([this.props.popoverRef, this.props.buttonRef], node);
+    setMultipleRefs([this.props.popoverRef], node);
   };
 
   render() {
     const {
-      anchorClassName,
       anchorPosition,
       button,
-      buttonRef,
       insert,
       isOpen,
       ownFocus,
@@ -653,8 +641,7 @@ export class EuiPopover extends Component<Props, State> {
       {
         'euiPopover-isOpen': this.state.isOpening,
       },
-      className,
-      anchorClassName
+      className
     );
 
     const showArrow = hasArrow && !attachToAnchor;