ui-components fix(#1146): update icon button variants

This PR addresses https://github.com/GovAlta/ui-components/issues/1146 with the following changes:

Adds light variant
Updates colours for other variants from the Figma design
Uses dark styling for nocolor
Uses light styling for inverted
Adds transition animation to all variants, not just color and dark
Adds console warnings that nocolor and inverted are deprecated

PR checklist

[x] I have run a build locally.
[x] I have ran unit tests locally.
[x] I have tested the functionality.

May 10 '24 17:05 bdfranck

Testing the new variant styling...

	color	dark	nocolor	light	inverted	destructive
Default
Hover
Active
Focus
Disabled

May 10 '24 17:05 bdfranck

Here's how the inverted variants look on alpha... inverted variants on alpha

This PR changes their styling all to light: inverted variants on branch

I checked with @twjeffery who confirmed that there isn't a legitimate use case for any of these inverted variants, such as .destructive.inverted.

May 10 '24 18:05 bdfranck

Testing the acceptance criteria

[x] Indicate nocolor it is deprecated
[x] Don't change icon color on focus
[x] Border radius is m

Light & inverted variant

Default

[x] Icon is greyscale/white

Hover

[x] Icon is greyscale/white
[x] Background is greyscale/700

Active & focus

[x] Icon is greyscale/white
[x] background is greyscale/700
[x] Has focus border

Disabled

[x] Icon is greyscale/500

Dark & nocolor variant

Default

[x] Icon is greyscale/black

Hover

[x] Icon is greyscale/black
[x] Background is greyscale/100

Active & focus

[x] Icon is greyscale/black
[x] Background is greyscale/100
[x] Has focus border

Disabled

[x] Icon is greyscale/500

Destructive variant

Default

[x] Icon color is status/emergency-dark

Hover

[x] Icon is status/emergency-dark
[x] Background is status/emergency-light

Active & focus

[x] Icon is status/emergency-dark
[x] Background is status/emergency-light
[x] Has focus border

Disabled

[x] Icon is status/emergency-dark
[x] Opacity is 50%

May 10 '24 18:05 bdfranck

My local tests pass.

May 10 '24 18:05 bdfranck

for angular, the error message should read goa-icon-button instead of GoAIconButton

May 13 '24 21:05 lizhuomeng71

I have a question about inverted, is this being dropped completely? means no more variant="inverted" or inverted={true} , thanks very much

May 13 '24 21:05 lizhuomeng71

@lizhuomeng71 Yes, the old inverted property does the same job as the new light variant: lighten the icon to work on dark backgrounds.

I kept the inverted property with a warning so the PR doesn't introduce a breaking change. But teams should use the light variant in future work.

May 13 '24 22:05 bdfranck

for angular, the error message should read goa-icon-button instead of GoAIconButton

@lizhuomeng71 I've updated my PR to use goa-icon-button instead of GoAIconButton in the console warnings.

May 14 '24 14:05 bdfranck

D'oh! I forgot to push my local changes. Now I've pushed my updated console warnings.

May 14 '24 16:05 bdfranck

Issue is verified on chrome, firefox and edge, for react and angular.

May 14 '24 18:05 lizhuomeng71

:tada: This PR is included in version 1.17.0-alpha.51 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

May 21 '24 16:05 tzuge

:tada: This PR is included in version 4.17.0-alpha.25 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

May 21 '24 16:05 tzuge

:tada: This PR is included in version 1.21.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Jun 11 '24 21:06 tzuge

:tada: This PR is included in version 4.21.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Jun 11 '24 21:06 tzuge

:tada: This PR is included in version 3.0.0-alpha.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Jun 27 '24 16:06 tzuge

:tada: This PR is included in version 3.0.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Jun 27 '24 17:06 tzuge