From 0d0536f9d7e3a566100f9ed8d8ebcbedd8e01b01 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 13:06:28 +0100
Subject: [PATCH] Fix vertical alignment of close button
---
.../src/components/additional.js | 17 ++++++++++++-----
.../src/components/overlay.js | 8 +-------
packages/react-error-overlay/src/styles.js | 4 ++--
3 files changed, 15 insertions(+), 14 deletions(-)
diff --git a/packages/react-error-overlay/src/components/additional.js b/packages/react-error-overlay/src/components/additional.js
index 080f68f1d..6e8b13b9a 100644
--- a/packages/react-error-overlay/src/components/additional.js
+++ b/packages/react-error-overlay/src/components/additional.js
@@ -1,6 +1,11 @@
/* @flow */
import { applyStyles } from '../utils/dom/css';
-import { groupStyle, groupElemLeft, groupElemRight } from '../styles';
+import {
+ additionalChildStyle,
+ groupStyle,
+ groupElemLeft,
+ groupElemRight,
+} from '../styles';
import { consumeEvent } from '../utils/dom/consumeEvent';
import { enableTabClick } from '../utils/dom/enableTabClick';
@@ -20,7 +25,9 @@ function updateAdditional(
return;
}
- const span = document.createElement('span');
+ const div = document.createElement('div');
+ applyStyles(div, additionalChildStyle);
+
const group = document.createElement('span');
applyStyles(group, groupStyle);
@@ -44,12 +51,12 @@ function updateAdditional(
group.appendChild(left);
group.appendChild(right);
- span.appendChild(group);
+ div.appendChild(group);
const text = `${currentError} of ${totalErrors} errors on the page`;
- span.appendChild(document.createTextNode(text));
+ div.appendChild(document.createTextNode(text));
- additionalReference.appendChild(span);
+ additionalReference.appendChild(div);
}
export type { SwitchCallback };
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 50766f011..1da6340ec 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -1,11 +1,6 @@
/* @flow */
import { applyStyles } from '../utils/dom/css';
-import {
- containerStyle,
- overlayStyle,
- headerStyle,
- additionalStyle,
-} from '../styles';
+import { containerStyle, overlayStyle, headerStyle } from '../styles';
import { createClose } from './close';
import { createFrames } from './frames';
import { createFooter } from './footer';
@@ -42,7 +37,6 @@ function createOverlay(
// Create "Errors X of Y" in case of multiple errors
const additional = document.createElement('div');
- applyStyles(additional, additionalStyle);
updateAdditional(
document,
additional,
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 0a2ed7cee..4ea0358ce 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -64,7 +64,7 @@ const closeButtonStyle = {
top: 0,
};
-const additionalStyle = {
+const additionalChildStyle = {
'margin-bottom': '0.5rem',
};
@@ -197,7 +197,7 @@ export {
hintsStyle,
hintStyle,
closeButtonStyle,
- additionalStyle,
+ additionalChildStyle,
headerStyle,
functionNameStyle,
linkStyle,
--
GitLab