fix(ui): add pf5 button style config

[ciiay]

Description

A theme config for a Material-UI Button (v4) to look as similar as possible to a PF5 Button.

Which issue(s) does this PR fix

• Fixes RHIDP-1163: Add MUI theme config so that Buttons looks similar to PF5

PR acceptance criteria

Please make sure that the following steps are complete:

• GitHub Actions are completed and successful
• Unit Tests are updated and passing
• E2E Tests are updated and passing
• Documentation is updated if necessary (requirement for new features)
• Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

Light theme buttons:

Contained_button

Contained_button_hover

Contained_button_disabled

Outlined_button

Outlined_button_hover

Text_button

Text_button_hover

Dark theme buttons:
Contained button and text button:

updated_contained_button_in_dark_theme.mov

Contained_button_disabled

Outline_button

Outline_button_hover

Dark theme palette reference:
https://www.patternfly.org/developer-resources/dark-theme-handbook/
https://github.com/patternfly/patternfly/blob/main/src/patternfly/sass-utilities/themes/dark/scss-variables.scss
https://github.com/patternfly/patternfly/blob/main/src/patternfly/sass-utilities/themes/dark/colors.scss

[changeset-bot]

🦋 Changeset detected

Latest commit: 7d657d2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
app	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-957!

[janus-idp]

backstage-showcase Tests on commit db274a0 finished successfully.
View test log

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-957!

[ShiranHi]

@ciiay that looks great, thank you!
I have 2 questions:

1. It appear that the button's dark theme color differs between light and dark modes? From what I saw, it should remain the same shade of blue, shouldn't it?

2. Is there a way to improve the visibility of the disabled "Contained_button_disabled" button in dark mode? It seems to blend too much with the background color. Is there something we can do? could we adjust the background color to make the button stand out more?

[ciiay]

Hi @ShiranHi , thanks for the review.

1. According to the Blue color palette on PF5 dark theme handbook documentation, the primary blue (blue-300) gets updated for the dark theme. You can also check the updated color code in here and here. Let me know if we want to keep the original primary blue in dark theme. Here's a preview of it.

Comparing with the updated primary blue:

2. Our current card background color doesn't match the PF5 value. @jerolimov and I discussed about this issue and we're going to create a ticket to update the card style to match PF5. Then the disabled contained button would look good. Here's a preview.
   PF5 style in dark theme:

Current style in dark theme:

Also there's a demo for PF5 style we can refer, and the sidebar menu color in dark theme looks pretty different from our current one. You can toggle theme using the bottom right button. Let us know if we want to match it or keep our current style. Thanks.

[gashcrumb]

This looks great! If the dark theme card background is a separate issue I think this is good to go. 👍

Well, and probably this will need a changeset added too @ciiay

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-957!

[ShiranHi]

1. According to the Blue color palette on PF5 dark theme handbook documentation, the primary blue (blue-300) gets updated for the dark theme. You can also check the updated color code in here and here. Let me know if we want to keep the original primary blue in dark theme. Here's a preview of it.

I see, then let's follow the PF guidelines. I am a bit confused because when I switch between the bright and dark mode on the PF page (top right corner), the blue color stays the same.

Our current card background color doesn't match the PF5 value. @jerolimov and I discussed about this issue and we're going to create a ticket to update the card style to match PF5. Then the disabled contained button would look good. Here's a preview.

Thanks for the update, the card with the PF5 style in dark theme looks great!

Also there's a demo for PF5 style we can refer, and the sidebar menu color in dark theme looks pretty different from our current one. You can toggle theme using the bottom right button. Let us know if we want to match it or keep our current style. Thanks.

Yes, let's follow this demo. I think this is what @debsmita1 is working on in this PR

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-957!

[ciiay]

Hi @ShiranHi , as confirmed with the PF team, the contained button background stays the same color in dark theme as the light theme. I have updated a screen video to show the updated style. Here's how it looks now.

Hover:

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-957!

[ShiranHi]

@ciiay thanks for making those adjustments! lgtm

[christoph-jerolimov]

Hi, this looks like a step into the right direction. Here are two recordings where I've tested MUI v4 and v5 buttons with the default Janus and the RHDH theme.

Main branch:

before.mp4

With this PR:

after.mp4

I saw some minor issues:

1. The buttons still have the ripple effect; there is nothing wrong with keeping them for now. If we/you want to disable it, please check that there is a focus indicator.
2. The shadow is only removed from primary buttons, not secondary ones.
3. Is the sensory button color not changed in dark mode?

In the long term, we should use the palette colors from the team instead of creating a new palette of colors!

For me, it's fine to merge this because we also didn't use the primary color from app-config.yaml for buttons before.

[christoph-jerolimov]

To test if I can add approval ...

/approve
/lgtm cancel

[invincibleJai]

/approve

Thanks @jerolimov, added approval and feel free to add lgtm when ready

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[ciiay]

@jerolimov Thanks for the review. I have updated this PR to address your feedback. Please take a look.

[github-actions]

The image is available at: quay.io/janus-idp/backstage-showcase:pr-957!

[christoph-jerolimov]

Thanks for the update! Lgtm! 👍

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: gashcrumb, invincibleJai, jerolimov

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [invincibleJai]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment