fix the message strip dismiss button styling (#714)

docs/pages/components/message-strip.md

@@ -19,10 +19,10 @@ The Message Strip provides information that is useful and relevant, but not crit
 
 {% capture default-message-strip %}
 <div class="fd-message-strip fd-message-strip--dismissible" role="alert"  id="ZvPBg609" >
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et mattis erat vel aliquet in sem urna et sagittis diam in vehicula. <a href="#" class="fd-link">Learn More</a>
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close"></button>
 </div>
 <br>
 {% endcapture %}
@@ -34,10 +34,10 @@ Add the modifier class `fd-message-strip--information` for Information Message S
 
 {% capture information-message-strip %}
 <div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert"  id="JwPcf464" >
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="JwPcf464" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. <a href="#" class="fd-link">Learn More</a>
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="JwPcf464" aria-label="Close"></button>
 </div>
 <br>
 
@@ -50,10 +50,10 @@ Add the modifier class `fd-message-strip--success` for Success Message Strip.
 
 {% capture success-message-strip %}
 <div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible" role="alert" id="ulr5z216">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ulr5z216" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ulr5z216" aria-label="Close"></button>
 </div>
 {% endcapture %}
 
@@ -66,10 +66,10 @@ Add the modifier class `fd-message-strip--warning` for Warning Message Strip.
 
 {% capture warning-message-strip %}
 <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible" role="alert" id="fwYq4606">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="fwYq4606" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="fwYq4606" aria-label="Close"></button>
 </div>
 {% endcapture %}
 
@@ -82,10 +82,10 @@ Add the modifier class `fd-message-strip--error` for Error Message Strip.
 
 {% capture error-message-strip %}
 <div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert" id="SsoiW591">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
 </div>
 {% endcapture %}
 
@@ -98,34 +98,34 @@ Add the modifier class `fd-message-strip--no-icon` to render Message Strip witho
 {% capture no-icon %}
 <div class="fd-message-strip fd-message-strip--information fd-message-strip--no-icon fd-message-strip--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
 </div>
 <br />
 <div class="fd-message-strip fd-message-strip--success fd-message-strip--no-icon fd-message-strip--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
 </div>
 <br />
 <div class="fd-message-strip fd-message-strip--warning fd-message-strip--no-icon fd-message-strip--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
 </div>
 <br />
 <div class="fd-message-strip fd-message-strip--error fd-message-strip--no-icon fd-message-strip--dismissible" 
      role="alert" id="SsoiW591">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
   <p class="fd-message-strip__text">
     Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
   </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW591" aria-label="Close"></button>
 </div>
 {% endcapture %}
 
@@ -138,10 +138,10 @@ If right to left text direction is provided, the dismiss button moves to left si
 
 {% capture default-message-strip %}
 <div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert" id="BQ6WP516" dir="rtl">
-  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="BQ6WP516" aria-label="Close"></button>
   <p class="fd-message-strip__text">
    حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانيأسي.
    </p>
+  <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="BQ6WP516" aria-label="Close"></button>
 </div>
 {% endcapture %}
 

src/alert.scss

@@ -27,8 +27,8 @@ $block: #{$fd-namespace}-alert;
 
   @mixin fd-alert-close-btn-container {
     position: absolute;
-    top: 0.0625rem;
-    right: 0.0625rem;
+    top: 0.125rem;
+    right: 0.125rem;
   }
 
   // SUCCESS
@@ -78,10 +78,8 @@ $block: #{$fd-namespace}-alert;
 
   // Elements
   &__close {
-    @include fd-button-reset();
     @include fd-alert-close-btn-container();
     @include fd-icon("decline", "m");
-    @include fd-focus();
 
     @include fd-rtl() {
       left: 0.125rem;

src/message-strip.scss

@@ -27,8 +27,8 @@ $block: #{$fd-namespace}-message-strip;
 
   @mixin fd-message-strip-close-btn-container {
     position: absolute;
-    top: 0.0625rem;
-    right: 0.0625rem;
+    top: 0.125rem;
+    right: 0.125rem;
   }
 
   // SUCCESS
@@ -68,20 +68,10 @@ $block: #{$fd-namespace}-message-strip;
   align-items: center;
   min-height: 2rem;
 
-  // DEPRECATE v1.6 (brute force embedded solution to adopt new styles)
-  .sap-icon--message-strip-error,
-  .sap-icon--message-strip-warning,
-  .sap-icon--message-strip-success,
-  .sap-icon--message-strip-information {
-    display: none;
-  }
-
   // Elements
   &__close {
-    @include fd-button-reset();
     @include fd-message-strip-close-btn-container();
     @include fd-icon("decline", "m");
-    @include fd-focus();
 
     @include fd-rtl() {
       left: 0.125rem;

test/resources/layout.css

@@ -62,6 +62,7 @@ body {
 }
 
 .btn-playground,
+.btn-playground--compact,
 .btn-playground--emphasized {
   border: 1px solid black;
   border-radius: 4px;
@@ -71,6 +72,10 @@ body {
   margin: 0;
 }
 
+.btn-playground--compact{
+  padding: 4px;
+}
+
 .btn-playground--emphasized {
   background: pink;
 }