fix(kalert): slotted links default styling [KHCP-14152] (#2528)

Kong · Nov 26, 2024 · 631a287 · 631a287
1 parent a941be5
commit 631a287
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 10 deletions.
diff --git a/sandbox/pages/SandboxAlert.vue b/sandbox/pages/SandboxAlert.vue
@@ -18,24 +18,52 @@
       <SandboxSectionComponent title="appearance">
         <KAlert
           appearance="info"
-          message="This is info alert."
           title="Info"
-        />
+        >
+          This is info alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
         <KAlert
           appearance="success"
-          message="This is success alert."
           title="Success"
-        />
+        >
+          This is success alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
         <KAlert
           appearance="warning"
-          message="This is warning alert."
           title="Warning"
-        />
+        >
+          This is warning alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
         <KAlert
           appearance="danger"
-          message="This is danger alert."
           title="Danger"
-        />
+        >
+          This is danger alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="showIcon">
         <KAlert

diff --git a/src/components/KAlert/KAlert.vue b/src/components/KAlert/KAlert.vue
@@ -105,14 +105,26 @@ const getAlertIcon = computed((): AlertIcon => {
 @mixin kAlertAppearance(
   $backgroundColor: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest),
   $textColor: var(--kui-color-text-primary, $kui-color-text-primary),
-  $dismissIconHoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) {
+  $hoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) {
   background-color: $backgroundColor;
   color: $textColor;
 
   .alert-dismiss-icon {
     &:hover,
     &:focus {
-      color: $dismissIconHoverColor !important;
+      color: $hoverColor !important;
+    }
+  }
+
+  .alert-content {
+    .alert-message {
+      :slotted(a) {
+        color: $textColor;
+
+        &:hover {
+          color: $hoverColor;
+        }
+      }
     }
   }
 }