diff --git a/docs/src/ts/modals.tsx b/docs/src/ts/modals.tsx
index ef74723d1..a1e3b8f15 100644
--- a/docs/src/ts/modals.tsx
+++ b/docs/src/ts/modals.tsx
@@ -63,6 +63,9 @@ class Modals extends React.Component<{}, IState> {
Store a list of Modals that can be rendered using the ModalRenderer.
+
+ Note: ModalCloseIcon should be the first element inside the ModalHeader.
+
{`
public onClickCloseModal () {
@@ -78,10 +81,10 @@ class Modals extends React.Component<{}, IState> {
this.setState({
modals: [...this.state.modals, (
-
- x
-
+
+ X
+
Header
@@ -133,10 +136,10 @@ class Modals extends React.Component<{}, IState> {
this.setState({
modals: [...this.state.modals, (
-
- x
-
+
+ X
+
Header
diff --git a/package.json b/package.json
index 4b514ce13..6fe05f04d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "roe",
- "version": "0.4.3",
+ "version": "0.4.4",
"description": "A Collection of React Components for Project Development",
"main": "dist/js/index.js",
"types": "dist/js/index.d.ts",
diff --git a/src/less/modals.less b/src/less/modals.less
index 4d4664e2b..b6e861ead 100644
--- a/src/less/modals.less
+++ b/src/less/modals.less
@@ -81,12 +81,11 @@
}
.modal-close-icon {
- position: absolute;
- top: 0;
- right: 0;
+ float: right;
width: 24px;
height: 24px;
- margin: @padding-base;
+ margin: @padding-large;
+ margin-right: 0;
fill: @primary;
color: @primary;
cursor: pointer;