Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(theme): match tabs style with PF design #139

Conversation

ciiay
Copy link
Contributor

@ciiay ciiay commented Dec 6, 2024

Hey, I just made a Pull Request!

For RHIDP-5176,

  • added hover border bottom for default tabs
  • moved indicator to left for vertical tabs, referring PF vertical tabs style
  • added a content box for better preview on vertical tabs tests

image

✔️ Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)

Before
image

After

rhidp_5176_fix.mp4

@rhdh-gh-app
Copy link

rhdh-gh-app bot commented Dec 6, 2024

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-mui4-test workspaces/theme/plugins/mui4-test none v0.1.0
@red-hat-developer-hub/backstage-plugin-mui5-test workspaces/theme/plugins/mui5-test none v0.1.0
@red-hat-developer-hub/backstage-plugin-theme workspaces/theme/plugins/theme patch v0.4.3

@ciiay ciiay requested a review from ShiranHi December 6, 2024 06:59
Comment on lines +427 to +434
'& > div > div > button[class*="v5"]': {
alignItems: 'baseline',
textAlign: 'left',
},
'& > div > div > button > span': {
alignItems: 'baseline',
textAlign: 'left',
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A small thing we could improve later. You can also use a class selector like this:

Suggested change
'& > div > div > button[class*="v5"]': {
alignItems: 'baseline',
textAlign: 'left',
},
'& > div > div > button > span': {
alignItems: 'baseline',
textAlign: 'left',
},
// MUI v5
'& > div > div > button.v5-MuiTab-root': {
alignItems: 'baseline',
textAlign: 'left',
},
// MUI v4
'& > div > div > button > span': {
alignItems: 'baseline',
textAlign: 'left',
},

},
},
indicator: {
left: 0,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also if I don't see an issue with the current solution, its better if we could unset right here:

Suggested change
left: 0,
left: 0,
right: unset,

@christoph-jerolimov christoph-jerolimov merged commit a62d5b8 into redhat-developer:main Dec 6, 2024
7 checks passed
04kash pushed a commit to 04kash/rhdh-plugins that referenced this pull request Dec 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants