From 2a09646e8dc2cebfb064f9ee36767fadb258bc6b Mon Sep 17 00:00:00 2001
From: David Remer <webmaster@websupporter.net>
Date: Fri, 12 Aug 2022 09:47:16 +0300
Subject: [PATCH] Use TextInput help and label for step name and adjust width
 and position of side name dropdown

[MAILPOET-4445]
---
 .../components-automation-editor/_panel.scss  | 16 ++++------
 .../editor/components/panel/step-name.tsx     | 30 ++++++++-----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/mailpoet/assets/css/src/components-automation-editor/_panel.scss b/mailpoet/assets/css/src/components-automation-editor/_panel.scss
index b4d1855025..b0eb3714aa 100644
--- a/mailpoet/assets/css/src/components-automation-editor/_panel.scss
+++ b/mailpoet/assets/css/src/components-automation-editor/_panel.scss
@@ -34,21 +34,17 @@
   }
 
   .mailpoet-automation-panel-plain-body-title-action {
-    margin-top: -13px;
+    margin-top: -10px;
     padding-right: 0;
     padding-top: 0;
   }
 }
 
-.mailpoet-step-name-input,
-.mailpoet-step-name-description,
-.mailpoet-step-name-title {
-  min-width: 250px;
+.mailpoet-step-name-popover {
+  margin-top: -25px;
+  padding: 8px;
 }
 
-.mailpoet-step-name-title {
-  font-size: 13px;
-  font-weight: normal;
-  line-height: 1.5;
-  margin: 1em 0;
+.mailpoet-step-name-input {
+  min-width: 208px;
 }
diff --git a/mailpoet/assets/js/src/automation/editor/components/panel/step-name.tsx b/mailpoet/assets/js/src/automation/editor/components/panel/step-name.tsx
index 83bd4e26d5..7d9cab2e95 100644
--- a/mailpoet/assets/js/src/automation/editor/components/panel/step-name.tsx
+++ b/mailpoet/assets/js/src/automation/editor/components/panel/step-name.tsx
@@ -19,7 +19,8 @@ export function StepName({ step }: Props): JSX.Element {
   return (
     <Dropdown
       className="mailpoet-step-name-dropdown"
-      position="bottom center"
+      contentClassName="mailpoet-step-name-popover"
+      position="bottom left"
       renderToggle={({ isOpen, onToggle }) => (
         <PlainBodyTitle
           title={step.name && step.name.length > 0 ? step.name : stepType.title}
@@ -34,22 +35,17 @@ export function StepName({ step }: Props): JSX.Element {
         </PlainBodyTitle>
       )}
       renderContent={() => (
-        <>
-          <h3 className="mailpoet-step-name-title">Step name</h3>
-          <TextControl
-            className="mailpoet-step-name-input"
-            placeholder={stepType.title}
-            value={step.name}
-            onChange={(value) => {
-              dispatch(store).updateStepName(step.id, value);
-            }}
-          />
-          <p className="mailpoet-step-name-description">
-            Give the automation step a name that indicates its purpose. E.g
-            “Abandoned cart recovery”. <br />
-            This name will be displayed only to you and not to the clients.
-          </p>
-        </>
+        <TextControl
+          label="Step name"
+          className="mailpoet-step-name-input"
+          placeholder={stepType.title}
+          value={step.name}
+          onChange={(value) => {
+            dispatch(store).updateStepName(step.id, value);
+          }}
+          help="Give the automation step a name that indicates its purpose. E.g
+            “Abandoned cart recovery”. This name will be displayed only to you and not to the clients."
+        />
       )}
     />
   );