feat(fab): update fab content #258
Conversation
Changed Packages
|
| const getColor = () => { | ||
| if (actionButton.color) { | ||
| return actionButton.color; | ||
| } | ||
| if (!className) { | ||
| return 'info'; | ||
| } | ||
| return undefined; | ||
| }; |
There was a problem hiding this comment.
Just asking myself: Why are you mixing className and color here?
Couldn't we use info always as fallback?
There was a problem hiding this comment.
@christoph-jerolimov As per the UX the sub-menu actions should have the secondary color (ref: --pf-t--global--background--color--secondary--default , https://www.patternfly.org/design-foundations/colors/#background-colors) by default if the color is not specified. And for the main FAB button the default color should be blue or 'info'
cc @ShiranHi
...s/global-floating-action-button/plugins/global-floating-action-button/src/components/FAB.tsx
Outdated
Show resolved
Hide resolved
...oating-action-button/plugins/global-floating-action-button/src/components/FABWithSubmenu.tsx
Outdated
Show resolved
Hide resolved
...oating-action-button/plugins/global-floating-action-button/src/components/FABWithSubmenu.tsx
Outdated
Show resolved
Hide resolved
workspaces/global-floating-action-button/plugins/global-floating-action-button/src/plugin.ts
Outdated
Show resolved
Hide resolved
workspaces/global-floating-action-button/plugins/global-floating-action-button/package.json
Outdated
Show resolved
Hide resolved
| <Fab | ||
| {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})} | ||
| style={{ color: 'var(--pf-t--global--icon--color--regular)' }} |
There was a problem hiding this comment.
Sorry, but that isn't acceptable. We should respect the MUI theme.
If we really need other colors for this we should add that to the theme palette, but always fallback to a useful default.
With this code, we couldn't contribute that plugin to the Backstage community, and it's not reasonable to load PF CSS file for one color.
There was a problem hiding this comment.
I believe I caused some confusion, and I apologize for that. Since this is a new component, I requested the use of theme colors which is based on the PF color guidelines. How can we ensure it aligns well with our theme?
There was a problem hiding this comment.
I have used color: theme.palette.grey[500], for the default sub-menu actions color
and for the icon and text color I have used the hex codes to match the pf color
| color: theme.palette.grey[500], | ||
| }, | ||
| menuButtonStyle: { | ||
| color: '#1f1f1f', |
There was a problem hiding this comment.
This color shouldn't be hard coded when the background color comes from the theme.
I personally think we should just remove that to use the inverse color from the theme.
Anyway, we can go with that and improve that later. But I like to take a look together with @ShiranHi before we ship a 1.0. :)
There was a problem hiding this comment.
I have created this https://issues.redhat.com/browse/RHIDP-5482 to track it
| </> | ||
| </Slide> | ||
| )} | ||
| <Collapse |
There was a problem hiding this comment.
I hoped that the buttons slides in from behind that button. But it looks much better then without any animation. So thanks for adding this.
Also here we might come back later when everything else works as expected. :)
There was a problem hiding this comment.
I have created this https://issues.redhat.com/browse/RHIDP-5482 to track it
Resolves:
https://issues.redhat.com/browse/RHIDP-5398
GIF/Screenshots:
Added slide transition
https://github.com/user-attachments/assets/1b27522e-c0db-48d4-8a4c-ab623b442552
The below screenshot shows the following:
-pf-tglobalbackgroundcolorsecondary-default, text to be--pf-t--global--text--color--regularand icon color to be--pf-t--global--icon--color--regularAdded instructions to recommend users to use only filled icons from the Material Design library
✔️ Checklist