fix(button): add destructive red to borderless (#2130)

eBay · Aug 9, 2023 · 9e0691a · 9e0691a
1 parent 90c1237
commit 9e0691a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/dist/button/button.css b/dist/button/button.css
@@ -63,6 +63,10 @@ button.btn--borderless[aria-disabled="true"],
 a.fake-btn--borderless[aria-disabled="true"] {
   border-color: transparent;
 }
+button.btn--borderless.btn--destructive,
+a.fake-btn--borderless.btn--destructive {
+  color: var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
+}
 button.btn--slim,
 a.fake-btn--slim {
   height: 40px;

diff --git a/src/less/button/button.less b/src/less/button/button.less
@@ -44,6 +44,11 @@ a.fake-btn--borderless[aria-disabled="true"] {
     border-color: transparent;
 }
 
+button.btn--borderless.btn--destructive,
+a.fake-btn--borderless.btn--destructive {
+    .color-token(btn-secondary-destructive-foreground-color, color-foreground-attention);
+}
+
 button.btn--slim,
 a.fake-btn--slim {
     height: @button-height-regular;

diff --git a/src/less/button/stories/destructive-button/borderless.stories.js b/src/less/button/stories/destructive-button/borderless.stories.js
@@ -0,0 +1,4 @@
+export default { title: "Skin/Button/Destructive/Borderless" };
+
+export const base = () =>
+    '<button class="btn btn--borderless btn--destructive">Destructive Borderless Button</button>';