Add close button for modals in published sites (#4600)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

.changeset/rnd-12671-modal-close-button.md

@@ -0,0 +1,5 @@
+---
+"@gitbook/react-contentkit": patch
+---
+
+Show a close button on ContentKit modals rendered on published sites.

packages/gitbook/src/components/DocumentView/Integration/contentkit.css

@@ -130,15 +130,38 @@
 .contentkit-modal-header {
     @apply flex flex-col gap-2 px-4 py-2;
 }
+.contentkit-modal-header-with-close {
+    @apply flex-row items-start gap-4 px-4 pb-0 pt-4;
+}
+.contentkit-modal-header-content {
+    @apply min-w-0 flex-1;
+}
 
 .contentkit-modal-title {
     @apply text-2xl font-medium text-tint-strong;
 }
+.contentkit-modal-header-with-close .contentkit-modal-subtitle {
+    @apply break-words text-sm text-tint;
+}
+.contentkit-modal-header-with-close .contentkit-modal-title {
+    @apply break-words;
+}
 
 .contentkit-modal-body {
     @apply px-4 py-4;
 }
 
+.contentkit-modal-footer {
+    @apply flex justify-end gap-2 px-4 pb-4;
+}
+
+.contentkit-modal-close {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-full text-tint transition-colors hover:bg-tint-hover hover:text-tint-strong focus-visible:outline-2 focus-visible:outline-primary;
+}
+.contentkit-modal-close-icon {
+    @apply size-4;
+}
+
 .contentkit-modal-header + .contentkit-modal-body {
     @apply pt-0;
 }

packages/react-contentkit/src/ElementModal.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import type { ContentKitModal } from '@gitbook/api';
+import { Icon } from '@gitbook/icons';
 
 import { useContentKitClientContext } from './context';
 import type { ContentKitClientElementProps } from './types';
@@ -18,7 +19,6 @@ export function ElementModal(
     const clientContext = useContentKitClientContext();
 
     // TODO:
-    // - close button
     // - invalid rendering on close?
     // - submit
 
@@ -45,13 +45,41 @@ export function ElementModal(
                     event.stopPropagation();
                 }}
             >
-                <div className={classNames('contentkit-modal-header')}>
+                <div
-                    {element.title ? (
+                    className={classNames(
-                        <h1 className={classNames('contentkit-modal-title')}>{element.title}</h1>
+                        'contentkit-modal-header',
-                    ) : null}
+                        'contentkit-modal-header-with-close'
-                    {subtitle ? <div className="contentkit-modal-subtitle">{subtitle}</div> : null}
+                    )}
+                >
+                    <div className="contentkit-modal-header-content">
+                        {element.title ? (
+                            <h1 className={classNames('contentkit-modal-title')}>
+                                {element.title}
+                            </h1>
+                        ) : null}
+                        {subtitle ? (
+                            <div className="contentkit-modal-subtitle">{subtitle}</div>
+                        ) : null}
+                    </div>
+                    <button
+                        type="button"
+                        aria-label="Close"
+                        className="contentkit-modal-close"
+                        onClick={onClose}
+                    >
+                        <Icon icon="xmark" className="contentkit-modal-close-icon" />
+                    </button>
                 </div>
                 <div className={classNames('contentkit-modal-body')}>{children}</div>
+                <div className="contentkit-modal-footer">
+                    <button
+                        type="button"
+                        className="contentkit-button contentkit-button-confirm contentkit-button-style-secondary"
+                        onClick={onClose}
+                    >
+                        Cancel
+                    </button>
+                </div>
             </div>
         </div>
     );