fix: correct error Dialog icon position and wrapping fixes #492, fixes …

…#464 (#520)
adobe · Feb 5, 2020 · 1d56fd9 · 1d56fd9
1 parent 0909251
commit 1d56fd9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/components/dialog/index.css b/components/dialog/index.css
@@ -241,6 +241,9 @@ only screen and (max-device-height: 350px) {
 
 .spectrum-Dialog-typeIcon {
   display: block;
+  margin-left: var(--spectrum-dialog-icon-margin-left);
+  flex-shrink: 0;
+  align-self: flex-start;
 }
 
 .spectrum-Dialog-content {

diff --git a/components/dialog/metadata/dialog.yml b/components/dialog/metadata/dialog.yml
@@ -206,6 +206,29 @@ examples:
           <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">OK</button>
         </div>
       </div>
+  - id: dialog-error
+    name: Dialog - Alert Error with long title
+    status: Verified
+    description: An error alert dialog has an error icon in the header and long title text.
+    demoClassName: spectrum-CSSExample-example--overlay
+    markup: |
+      <button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Error Dialog</button>
+
+      <!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
+      <div class="spectrum-Dialog spectrum-Dialog--error spectrum-Dialog--alert is-open spectrum-CSSExample-dialog">
+        <div class="spectrum-Dialog-header">
+          <h2 class="spectrum-Dialog-title">Unable to Share Project to Behance Community</h2>
+          <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-AlertMedium" />
+          </svg>
+        </div>
+        <div class="spectrum-Dialog-content">
+          An error occurred while sharing your project. Please verify the email address and try again.
+        </div>
+        <div class="spectrum-Dialog-footer">
+          <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">OK</button>
+        </div>
+      </div>
   - id: dialog-error
     name: Dialog - Alert 3 buttons
     status: Verified

diff --git a/components/popover/index.css b/components/popover/index.css
@@ -17,6 +17,7 @@ governing permissions and limitations under the License.
   --spectrum-popover-target-offset: 13px;
   --spectrum-popover-dialog-padding: 30px 29px;
   --spectrum-popover-dialog-min-width: 270px;
+  --spectrum-popover-dialog-icon-margin-left: var(--spectrum-global-dimension-size-200);
 
   --spectrum-popover-min-width: var(--spectrum-global-dimension-size-400);
   --spectrum-popover-min-height: var(--spectrum-global-dimension-size-400);
@@ -143,3 +144,11 @@ governing permissions and limitations under the License.
     margin-left: -12px;
   }
 }
+
+.spectrum-Popover {
+  &.spectrum-Popover--dialog {
+    .spectrum-Dialog-typeIcon {
+      margin-left: var(--spectrum-popover-dialog-icon-margin-left);
+    }
+  }
+}
diff --git a/components/popover/metadata/popover.yml b/components/popover/metadata/popover.yml
@@ -56,7 +56,9 @@ examples:
       <div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right spectrum-Dialog--error is-open" style="max-width:320px">
         <div class="spectrum-Dialog-header">
           <div class="spectrum-Dialog-title">Very Long Error Message With Much Text</div>
-          <div class="spectrum-Dialog-typeIcon"></div>
+          <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-AlertMedium" />
+          </svg>
         </div>
         <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
         <div class="spectrum-Dialog-footer">