Icon Only Button Loading + Hover/Active in Light Variant

[GCHQ-Developer-299]

Summary of the bug

When in a Loading State, the icon button variant should use the circular loading animation. The Figma designs don't account for a Loading Icon Variant, so this is assumed to be desired behaviour.

Currently Loading icon buttons use a linear loading animation. This is inherited by toggle buttons.

Additionally, the current Button (and therefore Toggle Button) do not match the designs for Light Appearance when hovered. The designs require that Light Secondary buttons get darker text/border when hovered but in Storybook their text and border remain white. Similar descrepencies occur in Dark variants, and for the Loading state version of Light/Dark buttons.

• [ ] Change Loading Icon Button loading indictor to be circular
• [ ] Ensure Light Appearance Secondary Buttons match the designs for :hover and :active states
• [ ] Ensure Dark Appearance Secondary Buttons match the designs for :hover and :active states
• [ ] Ensure these changes are inherited in Loading Icon and Light/Dark Toggle Buttons (Toggle Designs)

🪜 How to reproduce

In order to test Icon only loading button, boot up storybook and add a loading icon button:

<ic-button
          variant="icon"
          loading
          onclick="alert('test')"
          title="button"
          >
</ic-button>

📸 Screenshots

[mi6-577]

This is the same as #2029

Icon button has been replaced with primary, secondary and tertiary icon buttons - none of these have a loading state. Loading button atom would need to be extended to include a circular loading animation as well as linear, so it could be used with the icon buttons.

This would need 3 sizes for circular loading indicator in order to fit different icon button sizes;

• 16x16
• 20x20
• 24x24

Look to loading indicator for inspiration on how to manage animations for circular loading

[mi6-577]

This has been designed and is currently in a Figma branch, ready for dev