Merge pull request #61 from dabapps/modal-close-icon-update

Adjust modal close icon styles
dabapps · Jun 5, 2017 · bfbd852 · bfbd852
2 parents 8782c42 + a5628db
commit bfbd852
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/docs/src/ts/modals.tsx b/docs/src/ts/modals.tsx
@@ -63,6 +63,9 @@ class Modals extends React.Component<{}, IState> {
             <p>
               Store a list of Modals that can be rendered using the ModalRenderer.
             </p>
+            <p>
+              Note: ModalCloseIcon should be the first element inside the ModalHeader.
+            </p>
             <CodeBlock language="javascript">
               {`
                 public onClickCloseModal () {
@@ -78,10 +81,10 @@ class Modals extends React.Component<{}, IState> {
                   this.setState({
                     modals: [...this.state.modals, (
                       <Modal onClickOutside={this.onClickCloseModal}>
-                        <ModalCloseIcon onClick={this.onClickCloseModal}>
-                          x
-                        </ModalCloseIcon>
                         <ModalHeader>
+                          <ModalCloseIcon onClick={this.onClickCloseModal}>
+                            X
+                          </ModalCloseIcon>
                           <h5>
                             Header
                           </h5>
@@ -133,10 +136,10 @@ class Modals extends React.Component<{}, IState> {
     this.setState({
       modals: [...this.state.modals, (
         <Modal onClickOutside={this.onClickCloseModal}>
-          <ModalCloseIcon onClick={this.onClickCloseModal}>
-            x
-          </ModalCloseIcon>
           <ModalHeader>
+            <ModalCloseIcon onClick={this.onClickCloseModal}>
+              X
+            </ModalCloseIcon>
             <h5>
               Header
             </h5>

diff --git 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
@@ -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;