Merge pull request #318 from josemarluedke/chore/modal-drawer-class-m…

…erge

feat: allow Modal and Drawer to get classes and merge class names

packages/overlays/src/components/drawer.gts

@@ -7,7 +7,12 @@ import DrawerFooter from './drawer/footer';
 import DrawerHeader from './drawer/header';
 import { CloseButton } from '@frontile/buttons';
 import type { WithBoundArgs } from '@glint/template';
-import { useStyles } from '@frontile/theme';
+import {
+  useStyles,
+  type SlotsToClasses,
+  type DrawerSlots,
+  type DrawerVariants
+} from '@frontile/theme';
 
 export interface DrawerArgs
   extends Pick<
@@ -61,14 +66,16 @@ export interface DrawerArgs
    *
    * @defaultValue 'right'
    */
-  placement?: 'top' | 'bottom' | 'left' | 'right';
+  placement?: DrawerVariants['placement'];
 
   /**
    * The Drawer size.
    *
    * @defaultValue 'md'
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  size?: DrawerVariants['size'];
+
+  classes?: SlotsToClasses<DrawerSlots>;
 }
 
 export interface DrawerSignature {
@@ -79,9 +86,9 @@ export interface DrawerSignature {
         CloseButton: WithBoundArgs<typeof CloseButton, 'onClick'> &
           WithBoundArgs<typeof CloseButton, 'class'>;
         Header: WithBoundArgs<typeof DrawerHeader, 'labelledById'> &
-          WithBoundArgs<typeof DrawerHeader, 'class'>;
-        Body: WithBoundArgs<typeof DrawerBody, 'class'>;
-        Footer: WithBoundArgs<typeof DrawerFooter, 'class'>;
+          WithBoundArgs<typeof DrawerHeader, 'classFromParent'>;
+        Body: WithBoundArgs<typeof DrawerBody, 'classFromParent'>;
+        Footer: WithBoundArgs<typeof DrawerFooter, 'classFromParent'>;
         headerId: string;
       }
     ];
@@ -109,18 +116,10 @@ export default class Drawer extends Component<DrawerSignature> {
   get classes() {
     const { drawer } = useStyles();
 
-    const { base, closeButton, header, body, footer } = drawer({
+    return drawer({
       placement: this.placement,
       size: this.args.size || 'md'
     });
-
-    return {
-      base: base(),
-      closeButton: closeButton(),
-      header: header(),
-      body: body(),
-      footer: footer()
-    };
   }
   get transition() {
     let options: OverlaySignature['Args']['transition'] = {
@@ -154,7 +153,7 @@ export default class Drawer extends Component<DrawerSignature> {
       @closeOnOverlayElementClick={{true}}
     >
       <div
-        class={{this.classes.base}}
+        class={{this.classes.base class=@classes.base}}
         tabindex="0"
         role="dialog"
         aria-labelledby={{this.headerId}}
@@ -164,23 +163,31 @@ export default class Drawer extends Component<DrawerSignature> {
           <CloseButton
             @onClick={{@onClose}}
             @size={{@closeButtonSize}}
-            @class={{this.classes.closeButton}}
+            @class={{this.classes.closeButton class=@classes.closeButton}}
           />
         {{/if}}
 
         {{yield
           (hash
             CloseButton=(component
-              CloseButton onClick=@onClose class=this.classes.closeButton
+              CloseButton
+              onClick=@onClose
+              class=(this.classes.closeButton class=@classes.closeButton)
             )
             Header=(component
-              DrawerHeader labelledById=this.headerId class=this.classes.header
+              DrawerHeader
+              labelledById=this.headerId
+              classFromParent=(this.classes.header class=@classes.header)
             )
             Body=(component
-              DrawerBody placement=this.placement class=this.classes.body
+              DrawerBody
+              placement=this.placement
+              classFromParent=(this.classes.body class=@classes.body)
             )
             Footer=(component
-              DrawerFooter placement=this.placement class=this.classes.footer
+              DrawerFooter
+              placement=this.placement
+              classFromParent=(this.classes.footer class=@classes.footer)
             )
             headerId=this.headerId
           )

packages/overlays/src/components/drawer/body.gts

@@ -1,7 +1,12 @@
 import Component from '@glimmer/component';
+import { twMerge } from '@frontile/theme';
 
 export interface DrawerBodyArgs {
   class?: string;
+  /**
+   * @internal
+   */
+  classFromParent?: string;
 }
 
 export interface DrawerBodySignature {
@@ -14,7 +19,7 @@ export interface DrawerBodySignature {
 
 export default class DrawerBody extends Component<DrawerBodySignature> {
   <template>
-    <div class={{@class}} ...attributes>
+    <div class={{twMerge @classFromParent @class}} ...attributes>
       {{yield}}
     </div>
   </template>

packages/overlays/src/components/drawer/footer.gts

@@ -1,7 +1,12 @@
 import Component from '@glimmer/component';
+import { twMerge } from '@frontile/theme';
 
 export interface DrawerFooterArgs {
   class?: string;
+  /**
+   * @internal
+   */
+  classFromParent?: string;
 }
 
 export interface DrawerFooterSignature {
@@ -14,7 +19,7 @@ export interface DrawerFooterSignature {
 
 export default class DrawerFooter extends Component<DrawerFooterSignature> {
   <template>
-    <div class={{@class}} ...attributes>
+    <div class={{twMerge @classFromParent @class}} ...attributes>
       {{yield}}
     </div>
   </template>

packages/overlays/src/components/drawer/header.gts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { twMerge } from '@frontile/theme';
 
 export interface DrawerHeaderArgs {
   /**
@@ -7,6 +8,11 @@ export interface DrawerHeaderArgs {
   labelledById: string;
 
   class?: string;
+
+  /**
+   * @internal
+   */
+  classFromParent?: string;
 }
 
 export interface DrawerHeaderSignature {
@@ -18,7 +24,11 @@ export interface DrawerHeaderSignature {
 }
 export default class DrawerHeader extends Component<DrawerHeaderSignature> {
   <template>
-    <div id={{@labelledById}} class={{@class}} ...attributes>
+    <div
+      id={{@labelledById}}
+      class={{twMerge @classFromParent @class}}
+      ...attributes
+    >
       {{yield}}
     </div>
   </template>

packages/overlays/src/components/modal.gts

@@ -6,7 +6,12 @@ import ModalFooter from './modal/footer';
 import ModalBody from './modal/body';
 import ModalHeader from './modal/header';
 import { CloseButton } from '@frontile/buttons';
-import { useStyles } from '@frontile/theme';
+import {
+  useStyles,
+  type SlotsToClasses,
+  type ModalSlots,
+  type ModalVariants
+} from '@frontile/theme';
 import type { WithBoundArgs } from '@glint/template';
 
 export interface ModalArgs
@@ -67,7 +72,9 @@ export interface ModalArgs
    *
    * @defaultValue 'lg'
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  size?: ModalVariants['size'];
+
+  classes?: SlotsToClasses<ModalSlots>;
 }
 
 export interface ModalSignature {
@@ -76,9 +83,12 @@ export interface ModalSignature {
     default: [
       {
         CloseButton: WithBoundArgs<typeof CloseButton, 'onClick' | 'class'>;
-        Header: WithBoundArgs<typeof ModalHeader, 'labelledById' | 'class'>;
-        Body: WithBoundArgs<typeof ModalBody, 'class'>;
-        Footer: WithBoundArgs<typeof ModalFooter, 'class'>;
+        Header: WithBoundArgs<
+          typeof ModalHeader,
+          'labelledById' | 'classFromParent'
+        >;
+        Body: WithBoundArgs<typeof ModalBody, 'classFromParent'>;
+        Footer: WithBoundArgs<typeof ModalFooter, 'classFromParent'>;
         headerId: string;
       }
     ];
@@ -106,18 +116,10 @@ export default class Modal extends Component<ModalSignature> {
   get classes() {
     const { modal } = useStyles();
 
-    const { base, closeButton, header, body, footer } = modal({
+    return modal({
       size: this.size,
       isCentered: this.args.isCentered
     });
-
-    return {
-      base: base(),
-      closeButton: closeButton(),
-      header: header(),
-      body: body(),
-      footer: footer()
-    };
   }
 
   get transition() {
@@ -152,7 +154,7 @@ export default class Modal extends Component<ModalSignature> {
       @closeOnOverlayElementClick={{true}}
     >
       <div
-        class={{this.classes.base}}
+        class={{this.classes.base class=@classes.base}}
         tabindex="0"
         role="dialog"
         aria-labelledby={{this.headerId}}
@@ -162,20 +164,29 @@ export default class Modal extends Component<ModalSignature> {
           <CloseButton
             @onClick={{@onClose}}
             @size={{@closeButtonSize}}
-            @class={{this.classes.closeButton}}
+            @class={{this.classes.closeButton class=@classes.closeButton}}
           />
         {{/if}}
 
         {{yield
           (hash
             CloseButton=(component
-              CloseButton onClick=@onClose class=this.classes.closeButton
+              CloseButton
+              onClick=@onClose
+              class=(this.classes.closeButton class=@classes.closeButton)
             )
             Header=(component
-              ModalHeader labelledById=this.headerId class=this.classes.header
+              ModalHeader
+              labelledById=this.headerId
+              classFromParent=(this.classes.header class=@classes.header)
+            )
+            Body=(component
+              ModalBody classFromParent=(this.classes.body class=@classes.body)
+            )
+            Footer=(component
+              ModalFooter
+              classFromParent=(this.classes.footer class=@classes.footer)
             )
-            Body=(component ModalBody class=this.classes.body)
-            Footer=(component ModalFooter class=this.classes.footer)
             headerId=this.headerId
           )
         }}

packages/overlays/src/components/modal/body.gts

@@ -1,7 +1,13 @@
 import Component from '@glimmer/component';
+import { twMerge } from '@frontile/theme';
 
 export interface ModalBodyArgs {
   class?: string;
+
+  /**
+   * @internal
+   */
+  classFromParent?: string;
 }
 
 export interface ModalBodySignature {
@@ -14,7 +20,7 @@ export interface ModalBodySignature {
 
 export default class ModalBody extends Component<ModalBodySignature> {
   <template>
-    <div class={{@class}} ...attributes>
+    <div class={{twMerge @classFromParent @class}} ...attributes>
       {{yield}}
     </div>
   </template>

packages/overlays/src/components/modal/footer.gts

@@ -1,7 +1,13 @@
 import Component from '@glimmer/component';
+import { twMerge } from '@frontile/theme';
 
 export interface ModalFooterArgs {
   class?: string;
+
+  /**
+   * @internal
+   */
+  classFromParent?: string;
 }
 
 export interface ModalFooterSignature {
@@ -14,7 +20,7 @@ export interface ModalFooterSignature {
 
 export default class ModalFooter extends Component<ModalFooterSignature> {
   <template>
-    <div class={{@class}} ...attributes>
+    <div class={{twMerge @classFromParent @class}} ...attributes>
       {{yield}}
     </div>
   </template>

packages/overlays/src/components/modal/header.gts

@@ -1,11 +1,17 @@
 import Component from '@glimmer/component';
+import { twMerge } from '@frontile/theme';
 
 export interface ModalHeaderArgs {
   class?: string;
   /**
    * The id used to reference labelledById in Modal component
    */
   labelledById: string;
+
+  /**
+   * @internal
+   */
+  classFromParent?: string;
 }
 
 export interface ModalHeaderSignature {
@@ -18,7 +24,11 @@ export interface ModalHeaderSignature {
 
 export default class ModalHeader extends Component<ModalHeaderSignature> {
   <template>
-    <div id={{@labelledById}} class={{@class}} ...attributes>
+    <div
+      id={{@labelledById}}
+      class={{twMerge @classFromParent @class}}
+      ...attributes
+    >
       {{yield}}
     </div>
   </template>

packages/theme/package.json

@@ -50,6 +50,7 @@
     "lodash.kebabcase": "^4.1.1",
     "lodash.mapkeys": "^4.6.0",
     "mini-svg-data-uri": "^1.4.4",
+    "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.1.20",
     "tailwindcss-ember-power-select": "^0.4.1"
   },

packages/theme/src/components/overlays.ts

@@ -1,4 +1,4 @@
-import { tv } from '../tw';
+import { tv, type VariantProps } from '../tw';
 
 const obscurer = `before:bg-gradient-to-b before:to-content1 before:from-content1/75 before:absolute before:left-0 before:w-full before:h-4 before:-top-4 before:content-['_']`;
 
@@ -251,4 +251,13 @@ const overlayTransitions = {
   }
 };
 
+export type OverlayVariants = VariantProps<typeof overlay>;
+export type OverlaySlots = keyof ReturnType<typeof overlay>;
+export type DrawerVariants = VariantProps<typeof drawer>;
+export type DrawerSlots = keyof ReturnType<typeof drawer>;
+export type ModalVariants = VariantProps<typeof modal>;
+export type ModalSlots = keyof ReturnType<typeof modal>;
+export type BackdropVariants = VariantProps<typeof backdrop>;
+export type BackdropSlots = keyof ReturnType<typeof backdrop>;
+
 export { overlay, drawer, modal, overlayTransitions, backdrop };