From 866c22c3364544114bc2f82b5da53c20b9ae8e89 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta.wolny@automattic.com>
Date: Fri, 29 Jul 2022 14:19:23 +0200
Subject: [PATCH] Use common/button component fot copy button

The proprietary button had displaying issues. This commit add props
that enable connection with a tooltip into the common button and replaces
the proprietary button with the common component.
[MAILPOET-4302]
---
 mailpoet/assets/css/src/generic/_forms.scss      |  6 ------
 mailpoet/assets/js/src/common/button/button.tsx  |  6 ++++++
 .../domain_key_component.tsx                     | 16 ++++++++--------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/mailpoet/assets/css/src/generic/_forms.scss b/mailpoet/assets/css/src/generic/_forms.scss
index fec51edb45..2bb1fe688e 100644
--- a/mailpoet/assets/css/src/generic/_forms.scss
+++ b/mailpoet/assets/css/src/generic/_forms.scss
@@ -23,9 +23,3 @@ label[for] {
   height: 16px;
   width: 16px;
 }
-
-.mailpoet-form-tooltip-without-icon {
-  height: 35px;
-  padding: 5px;
-  width: 35px;
-}
diff --git a/mailpoet/assets/js/src/common/button/button.tsx b/mailpoet/assets/js/src/common/button/button.tsx
index 63a27b5467..520b02729f 100644
--- a/mailpoet/assets/js/src/common/button/button.tsx
+++ b/mailpoet/assets/js/src/common/button/button.tsx
@@ -17,10 +17,14 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   target?: '_blank' | '_self' | '_parent' | '_top' | string;
   automationId?: string;
   className?: string;
+  dataTip?: boolean;
+  dataFor?: string;
 }
 
 export function Button({
   children,
+  dataFor,
+  dataTip,
   dimension,
   variant,
   withSpinner,
@@ -56,6 +60,8 @@ export function Button({
         'button-small': dimension === 'small',
       })}
       data-automation-id={automationId}
+      data-tip={dataTip}
+      data-for={dataFor}
     >
       {iconStart}
       {children && <span>{children}</span>}
diff --git a/mailpoet/assets/js/src/common/manage_sender_domain/domain_key_component.tsx b/mailpoet/assets/js/src/common/manage_sender_domain/domain_key_component.tsx
index 710cb05a5d..82a6e88a17 100644
--- a/mailpoet/assets/js/src/common/manage_sender_domain/domain_key_component.tsx
+++ b/mailpoet/assets/js/src/common/manage_sender_domain/domain_key_component.tsx
@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import { Tooltip } from 'common/tooltip/tooltip';
+import { Button } from 'common/button/button';
 import { useRef } from 'react';
+import { copy } from '@wordpress/icons';
 
 const copyTextToClipboard = (value: string) => {
   if (!navigator.clipboard) {
@@ -34,15 +36,13 @@ function DomainKeyComponent({ className = '', tooltip = '', ...props }) {
 
       {tooltip && (
         <>
-          <button
-            className="mailpoet-form-tooltip-without-icon button-secondary"
-            data-tip
-            data-for={props.name}
-            type="button"
+          <Button
+            iconStart={copy}
+            variant="secondary"
             onClick={performActionOnClick}
-          >
-            <span className="dashicons dashicons-clipboard" />
-          </button>
+            dataTip
+            dataFor={props.name}
+          />
           <Tooltip id={props.name} place="top">
             <span> {tooltip} </span>
           </Tooltip>