Merge pull request #34 from qupaya/is/refactor/fallback-dialog-close-…

…button refactor: add fallback close button and update documentation
qupaya · Aug 27, 2024 · c4ee979 · c4ee979
2 parents a52d977 + f852531
commit c4ee979
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 4 deletions.
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -60,6 +60,40 @@
     </sk-dialog>
   </div>
 
+  <div>
+    <button (click)="isDialogWithFallbackButtonOpen = true">
+      open Dialog with fallback outer button right
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithFallbackButtonOpen"
+      (close)="isDialogWithFallbackButtonOpen = false"
+      [showCloseButton]="true"
+    >
+      <div>
+        here comes some content. This is a dialog with the fallback Close
+        Button. (when the user don't have a close button)
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithInnerFallbackButtonOpen = true">
+      open Dialog with fallback inner button right
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithInnerFallbackButtonOpen"
+      (close)="isDialogWithInnerFallbackButtonOpen = false"
+      [showCloseButton]="true"
+    >
+      <div>
+        here comes some content. This is a dialog with the inner fallback Close
+        Button. (when the user don't have a close button)
+      </div>
+    </sk-dialog>
+  </div>
+
   <div>
     <button (click)="isDialogWithInnerButtonOpen = true">
       open Dialog with inner button right (default)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -20,7 +20,8 @@ export class DialogSampleComponent {
   isDialogWithInnerButtonOpen = false;
   isDialogWithOuterButtonLeftOpen = false;
   isDialogWithInnerButtonLeftOpen = false;
-  isDialogWithStyledButtonOpen = false;
+  isDialogWithFallbackButtonOpen = false;
+  isDialogWithInnerFallbackButtonOpen = false;
   isDialogWithShadowOpen = false;
   isFullscreenDialogOpen = false;
   isDialogWithOverflowOpen = false;

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -45,6 +45,8 @@ All of these options are getting recognized by `(close)`. So just set your varia
 
 The close button is not shown by default. To show it, set `[showCloseButton]` to `true`.
 
+> If you set `[showCloseButton]` to `true` but don't provide a close button, a default button will be shown in the top right corner outside the container.
+
 If you want to show it, you can decide if the button is placed inside or outside your Container.
 By default, it is placed outside. To place it within the content set `[innerCloseButton]` to `true`.
 
@@ -65,8 +67,6 @@ Here is an example:
 
 > You can define the space of the actual content to the Close Button (inside) and the space of the Container to the Close Button (outside). Look at the [Content Section - Spacing](#content) to see how.
 
-[comment]: <> (TODO: ADJUST WHEN NG-CONTENT HAS DEFAULT OPTION! The placeholder transparent button positioned in the top right corner with a black cross in it.)
-
 ### Backdrop
 
 The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -113,3 +113,15 @@
   width: calc(100% - (var(--sk-dialog-margin) * 2));
   max-width: calc(100svw - (var(--sk-dialog-margin) * 2));
 }
+
+.fallback-close-button {
+  border: none;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -20,7 +20,33 @@
           'sk-dialog-inner-close-button-left': innerCloseButton() && closeButtonPosition() === CloseButtonPosition.Left,
       }"
     >
-      <ng-content select="[closeButton]"></ng-content>
+      <ng-content select="[closeButton]">
+        <button (click)="close.emit()" class="fallback-close-button">
+          <svg
+            width="15px"
+            height="15px"
+            viewBox="0 0 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="0"
+              y1="100"
+              x2="100"
+              y2="0"
+              stroke-width="15"
+              stroke="black"
+            />
+            <line
+              x1="0"
+              y1="0"
+              x2="100"
+              y2="100"
+              stroke-width="15"
+              stroke="black"
+            />
+          </svg>
+        </button>
+      </ng-content>
     </div>
     }
     <div