feat: inline directive

vmware-clarity · Nov 12, 2024 · 7045cd9 · 7045cd9
1 parent 2da5fd9
commit 7045cd9
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 21 deletions.
diff --git a/...tories/modal/nested-side-panel.stories.ts → ...tories/modal/side-panel-inline.stories.ts b/...tories/modal/nested-side-panel.stories.ts → ...tories/modal/side-panel-inline.stories.ts
@@ -12,7 +12,7 @@ import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 import { CommonModules, removeFocusOutline } from '../../helpers/common';
 
 export default {
-  title: 'Modal/Nested Side Panel',
+  title: 'Modal/Side Panel (inline)',
   decorators: [
     moduleMetadata({
       imports: [...CommonModules, ClrSidePanelModule],
@@ -49,12 +49,12 @@ export default {
   },
 };
 
-const NestedSidePanelTemplate: StoryFn = args => ({
+const InlineSidePanelTemplate: StoryFn = args => ({
   template: `
     <div class="main-container">
       <div class="content-container">
         <div class="content-area" style="height: 300px">
-          <div class="modal-host" style="position: absolute; width: 800px; height: 200px">
+          <div clrModalHost cds-layout="p:md" style="border: 1px dashed hotpink; width: 800px; height: 200px">
             <button type="button" class="btn btn-primary" (click)="clrSidePanelOpen = true">Open Side Panel</button>
             <clr-side-panel
               [clrSidePanelBackdrop]="clrSidePanelBackdrop"
@@ -97,11 +97,11 @@ const NestedSidePanelTemplate: StoryFn = args => ({
 });
 
 export const SidePanel: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
 };
 
 export const SidePanelSmall: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -113,7 +113,7 @@ export const SidePanelSmall: StoryObj = {
 };
 
 export const SidePanelMedium: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -125,7 +125,7 @@ export const SidePanelMedium: StoryObj = {
 };
 
 export const SidePanelLarge: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -137,7 +137,7 @@ export const SidePanelLarge: StoryObj = {
 };
 
 export const SidePanelExtraLarge: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -149,7 +149,7 @@ export const SidePanelExtraLarge: StoryObj = {
 };
 
 export const SidePanelWithoutBackdrop: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -161,7 +161,7 @@ export const SidePanelWithoutBackdrop: StoryObj = {
 };
 
 export const SidePanelAlternateClose: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -178,7 +178,7 @@ export const SidePanelAlternateClose: StoryObj = {
 };
 
 export const SidePanelPinnable: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,
@@ -191,7 +191,7 @@ export const SidePanelPinnable: StoryObj = {
 };
 
 export const SidePanelFullScreen: StoryObj = {
-  render: NestedSidePanelTemplate,
+  render: InlineSidePanelTemplate,
   play: removeFocusOutline,
   args: {
     clrSidePanelOpen: true,

diff --git a/projects/angular/src/modal/_modal.clarity.scss b/projects/angular/src/modal/_modal.clarity.scss
@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.   
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -30,10 +30,11 @@
     padding-right: modal-variables.$clr-modal-xl-width !important;
   }
 
-  .modal-host {
-    border: 1px dashed hotpink;
+  .clr-modal-host {
     overflow: hidden;
-    .modal {
+    position: relative;
+    .modal,
+    .modal-backdrop {
       position: absolute;
     }
   }

diff --git a/projects/angular/src/modal/modal-host.directive.ts b/projects/angular/src/modal/modal-host.directive.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[clrModalHost]',
+  host: { '[class.clr-modal-host]': 'true' },
+})
+export class ClrModalHostDirective {}
diff --git a/projects/angular/src/modal/modal.html b/projects/angular/src/modal/modal.html
@@ -58,6 +58,6 @@
     </div>
     <div class="clr-sr-only">{{commonStrings.keys.modalContentEnd}}</div>
   </div>
-
-  <div [@fade] *ngIf="backdrop" class="modal-backdrop" aria-hidden="true" (click)="backdropClick()"></div>
 </div>
+
+<div [@fade] *ngIf="backdrop" class="modal-backdrop" aria-hidden="true" (click)="backdropClick()"></div>
diff --git a/projects/angular/src/modal/modal.module.ts b/projects/angular/src/modal/modal.module.ts
@@ -13,8 +13,9 @@ import { ClrIconModule } from '../icon/icon.module';
 import { CdkTrapFocusModule } from '../utils/cdk/cdk-trap-focus.module';
 import { ClrModal } from './modal';
 import { ClrModalBody } from './modal-body';
+import { ClrModalHostDirective } from './modal-host.directive';
 
-export const CLR_MODAL_DIRECTIVES: Type<any>[] = [ClrModal, ClrModalBody];
+export const CLR_MODAL_DIRECTIVES: Type<any>[] = [ClrModal, ClrModalBody, ClrModalHostDirective];
 
 @NgModule({
   imports: [CommonModule, CdkTrapFocusModule, ClrIconModule],

diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts
@@ -117,7 +117,7 @@ export class ClrModal implements OnChanges, OnDestroy {
   }
 
   private get hostElement(): HTMLElement {
-    return (this.elementRef.nativeElement as HTMLElement).closest('.modal-host') || document.body;
+    return (this.elementRef.nativeElement as HTMLElement).closest('.clr-modal-host') || document.body;
   }
 
   // Detect when _open is set to true and set no-scrolling to true

diff --git a/projects/angular/src/modal/side-panel.module.ts b/projects/angular/src/modal/side-panel.module.ts
@@ -18,6 +18,6 @@ export const CLR_SIDEPANEL_DIRECTIVES: Type<any>[] = [ClrSidePanel];
 @NgModule({
   imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrModalModule],
   declarations: [CLR_SIDEPANEL_DIRECTIVES],
-  exports: [CLR_SIDEPANEL_DIRECTIVES, ClrIconModule],
+  exports: [CLR_SIDEPANEL_DIRECTIVES, ClrModalModule, ClrIconModule],
 })
 export class ClrSidePanelModule {}