Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Design update - secondary button with icon - Wagtail Design System

See original GitHub issue

Good first issue for someone confident with SCSS/CSS

Is your proposal related to a problem?

There is not yet a officially supported button with icon that aligns with the secondary button styles (outline only button)
If button-secondary is applied to the current bicolor button styles, it works but should align with the new official Wagtail Design System

Describe the solution you’d like

Add support for the with icon (secondary, aka ghost) buttons as per the design system Figma
Add new variants using .button-secondary with bicolor button-icon in the styleguide https://github.com/wagtail/wagtail/blob/main/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
Add new variants using .button-secondary with bicolor button-icon in the pattern library https://github.com/wagtail/wagtail/blob/main/wagtail/admin/templates/wagtailadmin/shared/button.stories.tsx
Add styles for these variants in https://github.com/wagtail/wagtail/blob/main/client/scss/components/_button.scss
Must work in all supported browsers https://docs.wagtail.org/en/stable/contributing/developing.html#browser-and-device-support

Normal size button-secondary with icon

Very similar to the bicolor currently but with different colours, must support all existing supported DOM elements for buttons (a, button, and input[submit).

Default
Hover
Disabled
Focus state (existing global focus outline)

Normal size button-secondary with icon

When small and secondary the border is dropped, must support all existing supported DOM elements for buttons (a, button, and input[submit).

Default
Hover
Disabled (not shown)
Focus state (existing global focus outline)

Describe alternatives you’ve considered

Leave as current state and do not document .button-secondary when used with .bicolor.

`button bicolor button--icon button-secondary`	`button bicolor button--icon button-secondary button-small`

Additional context

The bulk of the original button designs issue was completed via https://github.com/wagtail/wagtail/issues/8790
As this button type was not officially supported or used, it ended up being out of scope.