feat(dialog:headless): allow overriding css classes

GregOnNet · GregOnNet · commit 231b01a9cb78 · 2023-04-08T10:59:40.000+02:00
diff --git a/packages/headless/src/components/dialog/dialog.tsx b/packages/headless/src/components/dialog/dialog.tsx
@@ -19,6 +19,14 @@ import A11yDialog from 'a11y-dialog';
 import stylesDialogContainer from './dialog-container.css?inline';
 import stylesDialogContent from './dialog-content.css?inline';
 
+interface DialogStyleProps {
+  classNames?: { container: string; content: string };
+}
+
+interface StyleProps {
+  class?: string;
+}
+
 interface DialogContextSignals {
   /** Indicates whether Dialog is open or not. */
   isOpenSignal: Signal<boolean>;
@@ -65,7 +73,7 @@ const Root = component$(() => {
   );
 });
 
-const Trigger = component$(() => {
+const Trigger = component$((props: StyleProps) => {
   const dialogContext = useContext(dialogContextId);
   const a11yDialog = useSignal<NoSerialize<A11yDialog>>();
 
@@ -95,16 +103,16 @@ const Trigger = component$(() => {
   );
 
   return (
-    <div role="button">
+    <div role="button" class={props.class}>
       <Slot />
     </div>
   );
 });
 
-// TODO: We need a way to add the template as nearest as possible to the <body>-Element
+// TODO: We need a way to add the template as nearest as possible to the </body>-Element
 //       This ensures the dialog being displayed on top of all other elements
 //       React has a built-in way to create portals. How to we handle this in Qwik-UI?
-const Portal = component$(() => {
+const Portal = component$((props: DialogStyleProps) => {
   useStylesScoped$(stylesDialogContainer);
 
   const dialogContext = useContext(dialogContextId);
@@ -119,15 +127,15 @@ const Portal = component$(() => {
       ref={containerRefSignal}
       aria-labelledby="your-dialog-title-id"
       aria-hidden="true"
-      class="dialog-container"
+      // class={`dialog-container ${props.classNames?.container}`}
+      class={`${props.classNames?.container || 'dialog-container'}`}
     >
       <div
         data-a11y-dialog-hide
         class="dialog-overlay"
         onClick$={() => (dialogContext.isOpenSignal.value = false)}
       ></div>
-
-      <div role="document">
+      <div role="document" class={props.classNames?.content}>
         <Slot />
       </div>
     </div>
