💄(react) make Modal close button sticky

We want to make sure this button is always visible inside scrollable modals. Fixes #278
openfun · Feb 28, 2024 · 680365a · 680365a
1 parent c5e5d9f
commit 680365a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/.changeset/early-timers-march.md b/.changeset/early-timers-march.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+make Modal close button sticky
diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
@@ -69,9 +69,19 @@
   }
 
   &__close {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: end;
+    z-index: 1;
+    height: 0;
+
+    .c__button {
+      right: -0.75rem;
+      top: -0.75rem;
+      position: relative;
+      background: var(--c--components--modal--background-color);
+    }
   }
 
   &__footer {

diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
@@ -132,7 +132,7 @@ export const ModalInner = (props: ModalProps) => {
                 <Button
                   icon={<span className="material-icons">close</span>}
                   color="tertiary-text"
-                  size="nano"
+                  size="small"
                   onClick={() => props.onClose()}
                 />
               </div>