From 749024c59bee8872a5b8ef74a20d8fc5f7aaac23 Mon Sep 17 00:00:00 2001
From: gchaps <33642766+gchaps@users.noreply.github.com>
Date: Mon, 12 Mar 2018 09:43:51 -0700
Subject: [PATCH] fixed text for Add and Remove (#489)

* fixed wording of add button

* some more changes
---
 src-docs/src/views/guidelines/button.js |  11 +-
 src-docs/src/views/guidelines/modals.js | 270 +++++++++++++-----------
 2 files changed, 152 insertions(+), 129 deletions(-)

diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js
index faffa586559..80912312ed5 100644
--- a/src-docs/src/views/guidelines/button.js
+++ b/src-docs/src/views/guidelines/button.js
@@ -506,8 +506,9 @@ export default() => (
           </EuiTableRowCell>
 
           <EuiTableRowCell>
-            Adds an object to a list or database. Always followed by an object,
-            for example, Add visualization. Do not use &quot;Add new.&quot; Remove is the correct opposite.
+            Establishes a new relationship.  Often used in a create-then-add scenario.  
+            You create a dashboard, then add a visualization.  Always followed by an object. 
+            Do not use &quot;Add new.&quot; Remove is the correct opposite.
           </EuiTableRowCell>
         </EuiTableRow>
 
@@ -533,7 +534,7 @@ export default() => (
           <EuiTableRowCell>
             Creates a new object from scratch. Always followed by an object,
             for example, “Create pipeline.” Do not use &quot;Create new.&quot;
-            Exception: “Add user” is more intuitive than “Create user.” Delete is the correct opposite
+            Exception: “Add user” is more intuitive than “Create user.” Delete is the correct opposite.
           </EuiTableRowCell>
         </EuiTableRow>
 
@@ -562,8 +563,8 @@ export default() => (
             <EuiButtonIcon size="s" color="danger" iconType="cross" aria-label="Remove"/>
           </EuiTableRowCell>
           <EuiTableRowCell>
-            Removes an item not related to a database, such as a row from a table.
-            Do not confuse with Delete, which permanenty removes data from a database.
+            Removes a relationship, but doesn&apos;t permanently delete data.  
+            For example, you remove a visualization from a dashboard. Add is the correct opposite.
           </EuiTableRowCell>
         </EuiTableRow>
 
diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js
index c8d0a81d7c0..01ee64c6139 100644
--- a/src-docs/src/views/guidelines/modals.js
+++ b/src-docs/src/views/guidelines/modals.js
@@ -14,6 +14,7 @@ import {
 import {
   EuiButton,
   EuiText,
+  EuiHorizontalRule,
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
@@ -26,9 +27,9 @@ export default () => (
   <GuidePage title="">
 
     <EuiText>
-      <h1>Modals</h1>
+      <h1>Modal guidelines</h1>
       <p>
-        A modal says “pay attention to me and nothing else.”  Modals work best for focusing users&apos; attention on a short
+        A modal says “pay attention to me and nothing else.”  They work best for focusing users&apos; attention on a short
         amount of content and getting them to make a decision.
       </p>
 
@@ -39,7 +40,8 @@ export default () => (
       </Link>
     </EuiText>
 
-    <EuiSpacer />
+    <EuiHorizontalRule/>
+
 
     <GuideRuleTitle>Anatomy</GuideRuleTitle>
 
@@ -60,115 +62,102 @@ export default () => (
 
       <EuiFlexItem >
         <EuiText>
-          <h4><strong>The header sets the context for the user</strong></h4>
+          <h4><strong>The header sets the context</strong></h4>
           <p>Short and sentence-case, it lets the user know the task that needs to get done.</p>
           <h4><strong>The body supports a single task</strong></h4>
           <p>This task should be critical to continuing the current process.</p>
           <h4><strong>Buttons are right-aligned</strong></h4>
           <p>The primary action is a filled button, and the secondary action is a link button.
           </p>
-          <h4><strong>An overlay is optional</strong></h4>
+          <h4><strong>An overlay is always used</strong></h4>
           <p>It lets the user know that the content behind the modal isn&apos;t active.</p>
         </EuiText>
       </EuiFlexItem>
     </EuiFlexGroup>
-
+    
     <EuiSpacer />
+    
+    <EuiHorizontalRule/>
 
-    <GuideRuleTitle>Usage</GuideRuleTitle>
-
-    <EuiSpacer size="xxl" />
-
-    <EuiFlexGroup wrap={true}>
-      <EuiFlexItem style={{ minWidth: 300 }}>
-        <EuiPanel paddingSize="l">
-          <EuiText>
-            <h3>Use modals sparingly</h3>
-            <p>
-              Modals pull users out of their current context.
-              They are well-suited for asking users to confirm an action and for short, focused input.
-              Otherwise, it&apos;s better to show the content within the page.
-            </p>
-          </EuiText>
-        </EuiPanel>
-      </EuiFlexItem>
-
-      <EuiFlexItem style={{ minWidth: 300 }}>
-
-        <EuiPanel paddingSize="l">
-          <EuiText>
-            <h3>Keep content clean & simple</h3>
-            <p>
-              A modal should be a short, direct conversation with the user.
-              If you’re trying to stuff a lot of content into your modal, then you should probably consider
-              a different solution, such as <EuiLink href="https://elastic.github.io/eui/#/forms/form" >form</EuiLink>.
-            </p>
-          </EuiText>
-        </EuiPanel>
-      </EuiFlexItem>
-
-      <EuiFlexItem style={{ minWidth: 300 }}>
-        <EuiPanel paddingSize="l">
-          <EuiText>
-            <h3>Open on a user action</h3>
-            <p>
-              Don&apos;t just pop open a modal. Let a user action,
-              such as clicking a button, trigger a modal.
-            </p>
-          </EuiText>
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-
-    <GuideRuleTitle>Content</GuideRuleTitle>
 
+    <GuideRuleTitle>Input</GuideRuleTitle>
 
+    
+    
     <GuideRule
-      description="
-        The header directs users' attention to the task, and the body contains the
-        text and components to support it.
-        Button text should always reinforce the header."
+      heading=""
+      description="An input modal (EuiModal) is for a simple task that doesn't require a lot of explanatory information or user interaction."
     >
+
       <GuideRuleExample
+        frame
         panel={false}
         type="do"
-        text="
-          Do. Pare down the content to just the essential
-          elements. Match the header and button text.
-        "
+        text="Do. The header is short and sentence-case, the body supports input for one task, and the buttons use action verbs."
       >
+
         <div style={{ textAlign: 'center' }}>
 
           <EuiImage
-            alt="Modal with good header, body, and button text"
+            alt="proper use of input modal"
             size="l"
-            url="https://imgur.com/6x4RDuJ.jpg"
+            url="https://imgur.com/34HqJB5.jpg"
           />
         </div>
+
+
+
+
       </GuideRuleExample>
 
+
+
+
+
+
       <GuideRuleExample
-        type="dont"
         panel={false}
-        text="Don't start with a vague header such as &quot;Are you sure?&quot;
-          It doesn't add value and makes the header longer.
-          Instead of Yes and No buttons, use labels that describe the action."
+        type="dont"
+        text="Don't. If you have a lot of content that scrolls out of view, or if the content warrants multiple steps, use a form instead."
       >
+
         <div style={{ textAlign: 'center' }}>
+
           <EuiImage
-            alt="Don't use Are you sure in the title"
+
+            alt="page without primary button"
             size="l"
-            url="https://imgur.com/QmXWlnJ.jpg."
+            url="https://imgur.com/jNvh44g.jpg"
           />
         </div>
+
       </GuideRuleExample>
     </GuideRule>
+    
+    <GuideRule
+      heading="Content should fit in a single screen"
+      description="If your modal has numerous options or a long list of items, 
+      use scrolling only if it&apso;s better than other design solutions, such as keeping the content on the page."
+      />
+      
+      <GuideRule
+        heading="Don't launch a modal from a modal"
+        description="Using a modal on top of a modal typically means your workflow is too complex—users shouldn't 
+        have to remember which modal they are in. Instead, use a component that supports multiple steps, such as a form or steps"
+        />
+    
+    
+    <EuiSpacer />
 
-    <GuideRuleTitle>Confirmation modal</GuideRuleTitle>
+    <EuiHorizontalRule/>
 
+    <GuideRuleTitle>Confirmation Modal</GuideRuleTitle>
 
     <GuideRule
-      description="The most common use of a modal in the EUI Framework is to ask the user to confirm an action."
+      heading=""
+      description="The most common use of a modal in the EUI Framework is to 
+      ask the user to confirm an action. It starts with a question and gives 
+      users enough information to make a decision."
     >
 
       <GuideRuleExample
@@ -190,7 +179,7 @@ export default () => (
       <GuideRuleExample
         panel={false}
         type="dont"
-        text="Don't use a modal for a message.  Use a toast for a success message because it is less disruptive.
+        text="Don't use a confirmation modal for a message.  Use a toast for a success message because it is less disruptive.
             Keep error and warning messages on the page."
       >
         <div style={{ textAlign: 'center' }}>
@@ -202,131 +191,121 @@ export default () => (
             url="https://imgur.com/cZXGOtz.jpg"
           />
         </div>
+        
+        </GuideRuleExample>
+
+      </GuideRule>
 
-      </GuideRuleExample>
-    </GuideRule>
 
     <GuideRule
-      description="For readability, create separate confirmations for single and bulk actions.
-      It avoids the awkwardness of &quot;Delete 1 pipeline(s)&quot;."
+      heading="Button text should always reinforce the header."
+      description="
+        Some explanation here"
     >
       <GuideRuleExample
         panel={false}
         type="do"
-        text="Do. Asking users to delete a single item should ideally include its name in the title.
-        Use single quotes around the name if it helps clarify meaning."
+        text="
+          Do. Match the header and button text.
+        "
       >
         <div style={{ textAlign: 'center' }}>
+
           <EuiImage
-            alt="modal for single confirmation"
+            alt="Modal with good header, body, and button text"
             size="l"
-            url="https://imgur.com/fis6cP2.jpg"
+            url="https://imgur.com/6x4RDuJ.jpg"
           />
         </div>
       </GuideRuleExample>
 
       <GuideRuleExample
-        type="do"
+        type="dont"
         panel={false}
-        text="Do. For bulk actions, consider including the number of items in the title.
-        Don't get fancy with the button label&mdash;&quot;Delete&quot; is faster to parse
-        than &quot;Delete 6 pipelines&quot;."
+        text="Don't start with a vague question such as &quot;Are you sure?&quot;
+          Instead of Yes and No buttons, use labels that describe the action."
       >
         <div style={{ textAlign: 'center' }}>
           <EuiImage
-            alt="modal for bulk confirmations"
+            alt="Don't use Are you sure in the title"
             size="l"
-            url="https://imgur.com/HVzhp3z.jpg"
+            url="https://imgur.com/QmXWlnJ.jpg."
           />
         </div>
       </GuideRuleExample>
     </GuideRule>
-
+    
     <GuideRule
-      description="You can omit the body if users understand the decision
-      from the header and button text alone."
+      heading="Create separate confirmations for single and bulk actions"
+      description="
+      It avoids the awkwardness of &quot;Delete 1 pipeline(s)&quot; and improves readability."
     >
       <GuideRuleExample
         panel={false}
         type="do"
-        text="Do. Sometimes a header and body is enough."
+        text="Do. Asking users to delete a single item should ideally include its name in the title.
+        Use single quotes around the name if it helps clarify meaning."
       >
         <div style={{ textAlign: 'center' }}>
           <EuiImage
+            alt="modal for single confirmation"
             size="l"
-            alt="the header and the buttons convey the task"
-            url="https://imgur.com/GMEIjXx.jpg"
+            url="https://imgur.com/fis6cP2.jpg"
           />
         </div>
       </GuideRuleExample>
 
       <GuideRuleExample
-        type="dont"
+        type="do"
         panel={false}
-        text="Don't. Body text that repeats the title is just extra text to read."
+        text="Do. For bulk actions, consider including the number of items in the title.
+        Don't get fancy with the button label&mdash;&quot;Delete&quot; is faster to parse
+        than &quot;Delete 6 pipelines&quot;."
       >
         <div style={{ textAlign: 'center' }}>
           <EuiImage
-            alt="unneccessary body text"
+            alt="modal for bulk confirmations"
             size="l"
-            url="https://imgur.com/T2R9akR.jpg"
+            url="https://imgur.com/HVzhp3z.jpg"
           />
         </div>
       </GuideRuleExample>
     </GuideRule>
 
-    <GuideRuleTitle>Simple input modal</GuideRuleTitle>
-
-
     <GuideRule
-      description="Keep an input modal to a simple task that doesn't require a lot of explanatory information or user interaction."
+      heading="Avoid repetition"
+      description="You can omit the body if users understand the decision
+      from the header and button text alone."
     >
-
       <GuideRuleExample
         panel={false}
         type="do"
-        text="Do. The header is short and sentence-case, the body supports input for one task, and the buttons use action verbs."
+        text="Do. Sometimes a header and body is enough."
       >
-
         <div style={{ textAlign: 'center' }}>
-
           <EuiImage
-            alt="proper use of input modal"
             size="l"
-            url="https://imgur.com/34HqJB5.jpg"
+            alt="the header and the buttons convey the task"
+            url="https://imgur.com/GMEIjXx.jpg"
           />
         </div>
-
-
-
-
       </GuideRuleExample>
 
-
-
-
-
-
       <GuideRuleExample
-        panel={false}
         type="dont"
-        text="Don't. If you have a lot of content that scrolls out of view, or if the content warrants multiple steps, use a form instead."
+        panel={false}
+        text="Don't. Body text that repeats the title is just extra text to read."
       >
-
         <div style={{ textAlign: 'center' }}>
-
           <EuiImage
-
-            alt="page without primary button"
+            alt="unneccessary body text"
             size="l"
-            url="https://imgur.com/jNvh44g.jpg"
+            url="https://imgur.com/T2R9akR.jpg"
           />
         </div>
-
       </GuideRuleExample>
     </GuideRule>
-
-
+    
 
     <GuideRuleTitle>Things to avoid</GuideRuleTitle>
 
@@ -373,5 +352,48 @@ export default () => (
         </EuiPanel>
       </EuiFlexItem>
     </EuiFlexGroup>
+    
+    <EuiFlexGroup wrap={true}>
+      <EuiFlexItem style={{ minWidth: 300 }}>
+        <EuiPanel paddingSize="l">
+          <EuiText>
+            <h3>Use modals sparingly</h3>
+            <p>
+              Modals pull users out of their current context.
+              They are well-suited for asking users to confirm an action and for short, focused input.
+              Otherwise, it&apos;s better to show the content within the page.
+            </p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem style={{ minWidth: 300 }}>
+
+        <EuiPanel paddingSize="l">
+          <EuiText>
+            <h3>Keep content clean & simple</h3>
+            <p>
+              A modal should be a short, direct conversation with the user.
+              If you’re trying to stuff a lot of content into your modal, then you should probably consider
+              a different solution, such as <EuiLink href="https://elastic.github.io/eui/#/forms/form" >form</EuiLink>.
+            </p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem style={{ minWidth: 300 }}>
+        <EuiPanel paddingSize="l">
+          <EuiText>
+            <h3>Open on a user action</h3>
+            <p>
+              Don&apos;t just pop open a modal. Let a user action,
+              such as clicking a button, trigger a modal.
+            </p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
+    
   </GuidePage>
 );