fix:update notification dismiss button (#716)

docs/pages/components/notification.md

@@ -19,7 +19,7 @@ summary:
 <div class="fd-notification">
     <div class="fd-notification__header">
         <div class="fd-notification__title">Default Notification Title</div>
-        <button class="fd-button fd-button--transparent sap-icon--decline fd-notification__close"></button>
+        <button class="fd-button fd-button--compact fd-button--transparent sap-icon--decline fd-notification__close"></button>
     </div>
     <div class="fd-notification__body">
         <div class="fd-notification__content">

src/notification.scss

@@ -124,23 +124,12 @@ $block: #{$fd-namespace}-notification;
   }
 
   &__close {
-    color: $fd-notification-title-color;
     position: relative;
     top: 0.45rem;
-    right: 0.35rem;
-    min-width: 36px;
-    min-height: 36px;
-    width: 36px;
-    height: 36px;
-
-    &:hover {
-      color: $fd-notification-title-color;
-      border: none;
-      background-color: $fd-notification-background-color;
-    }
+    right: 0.45rem;
 
     @include fd-rtl() {
-      right: -0.35rem;
+      right: -0.45rem;
     }
   }
 

test/templates/notification/index.njk

@@ -373,70 +373,4 @@
 {% endset %}
 {{- format(example) -}}
 
-
-<br><br>
-
-<h1>RTL support</h1>
-
-{% set example %}
-<div class="fd-notification--group" dir="rtl">
-    <div class="fd-notification fd-notification--success fd-notification--m">
-        <div class="fd-notification__header">
-            <div class="fd-notification__indicator--success"></div>
-            <div class="fd-notification__title">This is the notifications title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-            <button class="btn-playground fd-notification__close"></button>
-        </div>
-        <div class="fd-notification__body">
-            <div class="fd-notification__content">
-                <div class="fd-notification__avatar">
-                    <span class="test-notification-avatar">WW</span>
-                </div>
-                <div class="fd-notification__text">
-                    <div class="fd-notification__description">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    </div>
-                    <div class="fd-notification__metadata">
-                        Author | 10 mins ago
-                    </div>
-                </div>
-            </div>
-            <div class="fd-notification__footer">
-                <button class="btn-playground">More Info</button>
-                <div class="fd-notification__actions">
-                    <button class="btn-playground">Approve All</button>
-                    <button class="btn-playground">Reject All</button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="fd-notification fd-notification--warning fd-notification--m">
-        <div class="fd-notification__header">
-            <div class="fd-notification__indicator--warning"></div>
-            <div class="fd-notification__title">This is the notifications title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-            <button class="btn-playground fd-notification__close"></button>
-        </div>
-        <div class="fd-notification__body">
-            <div class="fd-notification__content">
-                <div class="fd-notification__avatar">
-                    <span class="test-notification-avatar">WW</span>
-                </div>
-                <div class="fd-notification__text">
-                    <div class="fd-notification__description">
-                        Lorem ipsum dolor sit amet.
-                    </div>
-                </div>
-            </div>
-            <div class="fd-notification__footer">
-                <button class="btn-playground">More Info</button>
-                <div class="fd-notification__actions">
-                    <button class="btn-playground">Approve</button>
-                    <button class="btn-playground">Reject</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endset %}
-{{- format(example) -}}
-
 {% endblock %}