From 36bc8f469faabd4520669daf843028cc58505367 Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Thu, 7 Apr 2022 20:15:29 +0800
Subject: [PATCH 1/3] close button: migrate TipBox

---
 packages/vue-components/src/TipBox.vue        | 20 +++++++++++--------
 .../__snapshots__/TipBox.spec.js.snap         | 12 +++--------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/vue-components/src/TipBox.vue b/packages/vue-components/src/TipBox.vue
index c7c2e535f8..3b5cdef90a 100644
--- a/packages/vue-components/src/TipBox.vue
+++ b/packages/vue-components/src/TipBox.vue
@@ -52,11 +52,10 @@
         <button
           v-if="dismissible"
           type="button"
-          class="close close-with-heading"
-          data-dismiss="alert"
+          class="btn-close close-with-heading"
+          data-bs-dismiss="alert"
           aria-label="Close"
         >
-          <span aria-hidden="true">&times;</span>
         </button>
       </div>
 
@@ -98,11 +97,10 @@
         <button
           v-if="dismissible && !headerBool()"
           type="button"
-          class="close"
-          data-dismiss="alert"
+          class="btn-close"
+          data-bs-dismiss="alert"
           aria-label="Close"
         >
-          <span aria-hidden="true">&times;</span>
         </button>
       </div>
     </div>
@@ -346,14 +344,20 @@ export default {
     }
 
     .close-with-heading {
-        top: auto;
-        padding: 0 1.25rem;
+        top: 0;
+        right: 0;
+        position: absolute;
+        padding: 1rem;
     }
 
     .close-with-heading > span {
         vertical-align: text-top;
     }
 
+    .alert-dismissible .btn-close {
+        padding: 1rem ;
+    }
+
     .contents > :last-child {
         margin-bottom: 0;
     }
diff --git a/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap
index 8d671b1b51..8bbc7e06ee 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/TipBox.spec.js.snap
@@ -755,16 +755,10 @@ exports[`TipBox with dismissible option renders correctly 1`] = `
        
       <button
         aria-label="Close"
-        class="close"
-        data-dismiss="alert"
+        class="btn-close"
+        data-bs-dismiss="alert"
         type="button"
-      >
-        <span
-          aria-hidden="true"
-        >
-          ×
-        </span>
-      </button>
+      />
     </div>
   </div>
 </div>

From 79db03fe5a925c4e2ac33e8c715122141a1a02a2 Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Thu, 7 Apr 2022 20:34:56 +0800
Subject: [PATCH 2/3] close button: migrate Modal

---
 packages/vue-components/src/Modal.vue         |  3 +-
 .../__snapshots__/Modal.spec.js.snap          | 60 ++++---------------
 2 files changed, 13 insertions(+), 50 deletions(-)

diff --git a/packages/vue-components/src/Modal.vue b/packages/vue-components/src/Modal.vue
index 180fa74962..126d0df720 100644
--- a/packages/vue-components/src/Modal.vue
+++ b/packages/vue-components/src/Modal.vue
@@ -21,11 +21,10 @@
         </h5>
         <button
           type="button"
-          class="close"
+          class="btn-close"
           aria-label="Close"
           @click="close()"
         >
-          <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
index efe46193bb..a2cce49141 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
@@ -51,15 +51,9 @@ exports[`Modal can be centered 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -129,15 +123,9 @@ exports[`Modal can be large 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -207,15 +195,9 @@ exports[`Modal can be small 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -285,15 +267,9 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -431,15 +407,9 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div
@@ -509,15 +479,9 @@ exports[`Modal should not show footer when no footer is given 1`] = `
              
             <button
               aria-label="Close"
-              class="close"
+              class="btn-close"
               type="button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                ×
-              </span>
-            </button>
+            />
           </div>
            
           <div

From de99e508a2c475db3253545bf38dc63822a55cfb Mon Sep 17 00:00:00 2001
From: Jovyn Tan <jovyn.tls@gmail.com>
Date: Thu, 7 Apr 2022 20:39:53 +0800
Subject: [PATCH 3/3] Linting

---
 packages/vue-components/src/TipBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-components/src/TipBox.vue b/packages/vue-components/src/TipBox.vue
index 3b5cdef90a..588aa13ecf 100644
--- a/packages/vue-components/src/TipBox.vue
+++ b/packages/vue-components/src/TipBox.vue
@@ -355,7 +355,7 @@ export default {
     }
 
     .alert-dismissible .btn-close {
-        padding: 1rem ;
+        padding: 1rem;
     }
 
     .contents > :last-child {