refactor(close-button): use sgds-icon

GovTechSG · Dec 20, 2024 · aeafb4b · aeafb4b
1 parent 2734472
commit aeafb4b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -1152,6 +1152,8 @@ <h3>Button Full Width</h3>
       <h2>Close Button</h2>
       <div class="row">
         <sgds-close-button></sgds-close-button>
+        <sgds-close-button variant="light"></sgds-close-button>
+        <sgds-close-button variant="dark"></sgds-close-button>
         <sgds-close-button size="sm"></sgds-close-button>
       </div>
     </div>

diff --git a/src/internals/CloseButton/close-button.css b/src/internals/CloseButton/close-button.css
@@ -13,31 +13,14 @@
   border: var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);
   border-radius: var(--sgds-close-btn-border-radius);
   background-color: var(--sgds-default-bg-transparent);
+  display:flex;
+  justify-content: center;
+  align-items: center;
 }
-
-.btn-close::before {
-  content: '';
-  color: var(--sgds-default-color);
-  background-color: currentColor;
-  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.61396 5.61394C5.75461 5.47329 5.94538 5.39427 6.14429 5.39427C6.3432 5.39427 6.53397 5.47329 6.67462 5.61394L11.9779 10.9172L17.2812 5.61394C17.4219 5.47329 17.6126 5.39427 17.8116 5.39427C18.0105 5.39427 18.2012 5.47329 18.3419 5.61394C18.4825 5.7546 18.5616 5.94536 18.5616 6.14427C18.5616 6.34319 18.4825 6.53395 18.3419 6.6746L13.0386 11.9779L18.3419 17.2812C18.4825 17.4219 18.5616 17.6126 18.5616 17.8115C18.5616 18.0104 18.4825 18.2012 18.3419 18.3419C18.2012 18.4825 18.0105 18.5615 17.8116 18.5615C17.6126 18.5615 17.4219 18.4825 17.2812 18.3419L11.9779 13.0386L6.67462 18.3419C6.53397 18.4825 6.3432 18.5615 6.14429 18.5615C5.94538 18.5615 5.75461 18.4825 5.61396 18.3419C5.47331 18.2012 5.39429 18.0104 5.39429 17.8115C5.39429 17.6126 5.47331 17.4219 5.61396 17.2812L10.9173 11.9779L5.61396 6.6746C5.47331 6.53395 5.39429 6.34319 5.39429 6.14427C5.39429 5.94536 5.47331 5.7546 5.61396 5.61394Z'/%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.61396 5.61394C5.75461 5.47329 5.94538 5.39427 6.14429 5.39427C6.3432 5.39427 6.53397 5.47329 6.67462 5.61394L11.9779 10.9172L17.2812 5.61394C17.4219 5.47329 17.6126 5.39427 17.8116 5.39427C18.0105 5.39427 18.2012 5.47329 18.3419 5.61394C18.4825 5.7546 18.5616 5.94536 18.5616 6.14427C18.5616 6.34319 18.4825 6.53395 18.3419 6.6746L13.0386 11.9779L18.3419 17.2812C18.4825 17.4219 18.5616 17.6126 18.5616 17.8115C18.5616 18.0104 18.4825 18.2012 18.3419 18.3419C18.2012 18.4825 18.0105 18.5615 17.8116 18.5615C17.6126 18.5615 17.4219 18.4825 17.2812 18.3419L11.9779 13.0386L6.67462 18.3419C6.53397 18.4825 6.3432 18.5615 6.14429 18.5615C5.94538 18.5615 5.75461 18.4825 5.61396 18.3419C5.47331 18.2012 5.39429 18.0104 5.39429 17.8115C5.39429 17.6126 5.47331 17.4219 5.61396 17.2812L10.9173 11.9779L5.61396 6.6746C5.47331 6.53395 5.39429 6.34319 5.39429 6.14427C5.39429 5.94536 5.47331 5.7546 5.61396 5.61394Z'/%3E%3C/svg%3E");
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  box-sizing: content-box;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: var(--sgds-border-radius);
-  width: var(--sgds-icon-size-md);
-  height: var(--sgds-icon-size-md);
-}
-.btn-close-light::before {
+.btn-close-light {
   color: var(--sgds-default-color-on-dark);
 }
-.btn-close-dark::before {
+.btn-close-dark {
   color: var(--sgds-default-color-on-light);
 }
 .btn-close:hover {
@@ -56,7 +39,7 @@
   height: var(--sgds-dimension-24);
 }
 
-.btn-close.btn-close-sm::before {
+.btn-close.btn-close-sm {
   width: var(--sgds-icon-size-sm);
   height: var(--sgds-icon-size-sm);
 }
diff --git a/src/internals/CloseButton/sgds-close-button.ts b/src/internals/CloseButton/sgds-close-button.ts
@@ -4,6 +4,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import SgdsElement from "../../base/sgds-element";
 import closeButtonStyles from "./close-button.css";
+import { warnUnregisteredElements } from "../../utils/ce-registry";
 /**
  * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
  *
@@ -29,6 +30,10 @@ export class SgdsCloseButton extends SgdsElement {
     return;
   };
 
+  firstUpdated() {
+    /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */
+    warnUnregisteredElements("sgds-icon");
+  }
   render() {
     return html`
       <button
@@ -40,7 +45,9 @@ export class SgdsCloseButton extends SgdsElement {
         })}
         aria-label=${ifDefined(this.ariaLabel)}
         @click=${this._handleClick}
-      ></button>
+      >
+        <sgds-icon name="cross" size=${this.size}></sgds-icon>
+      </button>
     `;
   }
 }

diff --git a/test/close-button.test.ts b/test/close-button.test.ts
@@ -10,7 +10,9 @@ describe("<sgds-close-button>", () => {
     assert.shadowDom.equal(
       el,
       `
-      <button class="btn-close btn-close-md" aria-label="Close button"></button>
+      <button class="btn-close btn-close-md" aria-label="Close button">
+        <sgds-icon name="cross" size="md"></sgds-icon>
+      </button>
       `
     );
   });