Style default secondary buttons with icons

- Style secondary button with icon to match according to Wagtail Design System
- Fixes #9198

CHANGELOG.txt

@@ -24,6 +24,7 @@ Changelog
  * Add development (contributing to Wagtail) documentation notes for development on Windows (Akua Dokua Asiedu)
  * Clean up linting on legacy code and add shared util `hasOwn` in TypeScript (Loveth Omokaro)
  * Remove unnecessary box-sizing: border-box declarations in SCSS (Albina Starykova)
+ * Add full support for secondary buttons with icons in the Wagtail design system - `button bicolor button--icon button-secondary` including the `button-small` variant (Seremba Patrick)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Fix: Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
  * Fix: Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)

client/scss/components/_button.scss

@@ -150,7 +150,22 @@
     }
 
     &.button-secondary {
-      border-color: theme('colors.black-20');
+      .icon-wrapper {
+        border-inline-end: 1px solid $color-button;
+        background-color: transparent;
+      }
+
+      &:hover {
+        background-color: theme('colors.secondary.50');
+      }
+
+      &:disabled,
+      &[disabled],
+      &.disabled {
+        .icon-wrapper {
+          border-color: $color-grey-4;
+        }
+      }
     }
 
     &.button-small {
@@ -164,6 +179,35 @@
         @include svg-icon(0.9rem);
         padding: 0.25em;
       }
+
+      &.button-secondary {
+        border: 0;
+        padding-inline-start: 2.2em;
+
+        .icon-wrapper {
+          border: 1px solid $color-button;
+          border-radius: 50%;
+          height: fit-content;
+          width: fit-content;
+        }
+
+        &:hover {
+          background-color: transparent;
+
+          .icon-wrapper {
+            background-color: $color-button;
+            color: $color-white;
+          }
+        }
+
+        &:disabled,
+        &[disabled],
+        &.disabled {
+          .icon-wrapper {
+            background-color: transparent;
+          }
+        }
+      }
     }
   }
 

docs/releases/4.2.md

@@ -33,6 +33,7 @@ depth: 1
  * Add development (contributing to Wagtail) documentation notes for [development on Windows](development_on_windows) (Akua Dokua Asiedu)
  * Clean up linting on legacy code and add shared util `hasOwn` in TypeScript (Loveth Omokaro)
  * Remove unnecessary box-sizing: border-box declarations in SCSS (Albina Starykova)
+ * Add full support for secondary buttons with icons in the Wagtail design system - `button bicolor button--icon button-secondary` including the `button-small` variant (Seremba Patrick)
 
 ### Bug fixes