refactor(modal): restructure close icon as button

eea · Mar 27, 2023 · f1b836e · f1b836e
1 parent 31ca523
commit f1b836e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/src/ui/Modal/Modal.stories.js b/src/ui/Modal/Modal.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal } from 'semantic-ui-react';
+import { Button, Modal, Icon } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Modal',
@@ -84,7 +84,7 @@ function ModalEEA({
   const [open, setOpen] = React.useState(false);
   return (
     <Modal
-      closeIcon
+      //closeIcon
       onClose={() => setOpen(false)}
       onOpen={() => setOpen(true)}
       open={open}
@@ -93,6 +93,10 @@ function ModalEEA({
       size={size}
       dimmer={dimmer}
     >
+      <Button className="close icon" onClick={() => setOpen(false)}  title='Close modal dialog'>
+        <Icon name="close" />
+      </Button>
+
       <Modal.Header>{header}</Modal.Header>
       <Modal.Content>
         <Modal.Description>{content}</Modal.Description>

diff --git a/theme/themes/eea/modules/modal.overrides b/theme/themes/eea/modules/modal.overrides
@@ -5,3 +5,16 @@
 .ui.modal > :last-child {
   overflow: hidden; // clear floats from modal
 }
+
+.ui.modal .ui.button.close {
+  background: @closeButtonBackground;
+  padding: @closeButtonPadding;
+
+  i {
+    color: @closeColor;
+  }
+}
+
+.ui.modal .ui.button.close:focus-visible {
+  outline: @focusVisibleOutline;
+}
diff --git a/theme/themes/eea/modules/modal.variables b/theme/themes/eea/modules/modal.variables
@@ -15,7 +15,11 @@
 /* Close Icon */
 @closeOpacity: 0.8;
 @closeSize: 1.25em;
-@closeColor: @black;
+@closeColor: @grey-6;
+
+/* Close Button */
+@closeButtonBackground: transparent;
+@closeButtonPadding: 0;
 
 @closeHitbox: 2.25rem;
 @closeDistance: 0.25rem;