TextButton & IconButton - fix icon&font color for hover & pressed state

[thrbnhrtmnn]

Description / User Story

The icon & font color of the Icon- and TextButton are changing in pressed and hover state, when they should not.
Most buttons should have the same color in rest, hover and pressed state, but some (secondary & silent) have different colors. Currently all buttons have different colors in rest, hover and pressed state.

---

Acceptance Criteria

• The icon color of the IconButton is as defined in design in the pressed and hover state:
  • Light Mode CTA hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,90%,1)
  • Light Mode Primary hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,90%,1) in hover and hsl(220,65%,50%,1) in pressed
  • Light Mode Destructive hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,80%,1)
  • Light Mode Encourage hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,80%,1)
  • Dark Mode CTA hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,30%,1)
  • Dark Mode Primary hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,30%,1) in hover and hsl(220,65%,40%,1) in pressed
  • Dark Mode Destructive hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,40%,1)
  • Dark Mode Encourage hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,40%,1)
• The icon & font color of the TextButton is as defined in design in the pressed and hover state:
  • Light Mode CTA hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,90%,1)
  • Light Mode Primary hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,90%,1) in hover and hsl(220,65%,50%,1) in pressed
  • Light Mode Destructive hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,80%,1)
  • Light Mode Encourage hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,80%,1)
  • Dark Mode CTA hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,30%,1)
  • Dark Mode Primary hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,30%,1) in hover and hsl(220,65%,40%,1) in pressed
  • Dark Mode Destructive hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,40%,1)
  • Dark Mode Encourage hover & pressed are hsl(0,0%,100%,1) instead of hsl(220,10%,40%,1)
• Also the xxs size variant for the iconButton has been removed in Storybook, as it is not defined in design

---

Background information

• This was found after TextButton - rename tokens #532 & IconButton - rename tokens #531 were done, therefor the errors are likely caused by semantic tokens and not by component tokens
• Other things found that need to be discussed:
  • Is it correct, that there are also hover, pressed and focus states for the loading state?
  • I assume the focus ring will be correctly applied in Focus State - global improvement #330 and after this issue we wont have different approaches for IconButton (outer border) and TextButton (inner border) plus the focus ring will be white in dark-mode
  • I assume preventing that loading and disabled can be simultaneously true in SB is not that easy and thats why we don't do it for release 1.0
  • Loading state for text & icon button will be fixed within TextButton, IconButton - fix loading state #498
  • Is it correct to apply the focus ring after a pressing the button and moving the mouse away? As the pressed state does not have the focus ring in design, I suppose not. I see that some other DS however do that, like carbon, where the button already is styled like it is focused when pressing. But others don't do it, like for example nordhealth and atlassian. What is interesting here is, that in nordhealth the focus ring will be removed for example when another button than the focussed is clicked but in atlassian the focus ring always stays on the same element even if some other button is clicked.

[thrbnhrtmnn]

As discussed in todays design review session: Differences between design and code could not be validated, so I will have a look again at this.

[thrbnhrtmnn]

Hey @RubirajAccenture , I checked the component and all colors are correct now.

But I still see that the last AC is open "Also the xxs size variant for the iconButton has been removed in Storybook, as it is not defined in design". Could you have a look and remove the xxs size variant for the Icon Button?

[thrbnhrtmnn]

Hey @DenizSaganak , I saw the change on develop, so I would just close this issue now. Or is there anything open you still want to do? :-)

[DenizSaganak]

It is merged just now. I moved the ticket to ready for approval to have the design approval in design merge session to be on the safe side :) but it think you can just close the issue.

[thrbnhrtmnn]

Nice, I think we can save the time in the design review and do not have to discuss this one :-) I close it now. Thank you!