-
Notifications
You must be signed in to change notification settings - Fork 29
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
feat(fab): created dynamic fab to be integrated in the RHDH app #307
feat(fab): created dynamic fab to be integrated in the RHDH app #307
Conversation
Changed Packages
|
10556fd
to
c82a28f
Compare
c82a28f
to
ab1212a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested with rhdh PR #2199 and it works as expected. Only a few UI issues I mentioned in the rhdh PR. If we want to address the UI issues in a separate PR we can merge this one.
/lgtm
workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md
Outdated
Show resolved
Hide resolved
workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md
Outdated
Show resolved
Hide resolved
ab1212a
to
d77ebf7
Compare
New changes are detected. LGTM label has been removed. |
f4dab37
to
c75054a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In general lgtm! Some tiny questions, but we can also go with the current version.
workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md
Outdated
Show resolved
Hide resolved
workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md
Outdated
Show resolved
Hide resolved
workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md
Outdated
Show resolved
Hide resolved
.../global-floating-action-button/plugins/global-floating-action-button/app-config.dynamic.yaml
Outdated
Show resolved
Hide resolved
...n/plugins/global-floating-action-button/src/components/DynamicGlobalFloatingActionButton.tsx
Outdated
Show resolved
Hide resolved
...s/global-floating-action-button/plugins/global-floating-action-button/src/components/FAB.tsx
Outdated
Show resolved
Hide resolved
console.warn( | ||
'Icon is missing from your FAB component(s). An icon is required to render a FAB button.', | ||
); | ||
return null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When we log the actionButton, it might be easier to understand which button miss the icon, or?
But: Isn't the icon optional? Then this warning could be removed, or?
console.warn( | |
'Icon is missing from your FAB component(s). An icon is required to render a FAB button.', | |
); | |
return null; | |
console.warn( | |
'Icon is missing from your FAB component. An icon is required to render a FAB button.', | |
actionButton, | |
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, didn't get it. In that UX ticket you mentioned that there the extended FAB button, which is a button with icon+text or just text. :-/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Allow me to explain
The FAB component has two variants: regular and extended.
- The regular variant is used when there’s only an icon.
- The extended variant is used when both an icon and text (label) are present.
According to UX guidelines:
- The FAB can either display an icon alone or an icon with a label but should not display a label only (as stated in the Material UI guidelines).
- The extended variant must not be used when there's only an icon.
In my implementation:
The extended variant is applied only when the user opts to showLabel
.
Otherwise, the regular variant is used.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My concern is: If someone likes to implement a temporary FAB button, I must understand from where I can get an icon. I know, you can use an inline svg, a remote png, a backstage icon.
But sometimes, it's a simple "Feedback" button that a customer might try for a week. And I don't see reason that we should be stricter here than the Material UI guidelines.
And currently, instead of enforcing a label (which is necessary for a11y) the code enforces an icon.
Imho:
label
is required. When there is no label, you will show a warning and you can skip that button. You can also render it if there is an icon if you prefer that.label
but no icon could show the extended FAB without icon automatically.label
withshowLabel
(maybe we should call itextended
?) shows also the extended FAB icon, but with an icon of course.label
with an icon (but without showLabel/extended would show the simple FAB button. Hopefully the common path.
And isn't the implementation simple:
if (!label) { console.warn(); return null; }
return (
<Fab variant={(extended || !icon) ? "extended" : undefned} aria-label={label}>
{icon}
{label}
</Fab>
)
I know there is maybe a bit more todo the spacing correctly. ;)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ShiranHi do you agree with this ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can handle it as a bug.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see reason that we should be stricter here than the Material UI guidelines.
I agree, we should follow the Material Design guidelines.
But please note that:
- The extended FAB must have a text label (cannot be only an icon) and avoid wrapping text
- We should not place text in a regular FAB
c75054a
to
4932bd6
Compare
4932bd6
to
c808c99
Compare
Quality Gate passedIssues Measures |
/hold for @christoph-jerolimov 's review |
Thanks @debsmita1 👍 That's great work here. For the icon I can open a bug. /unhold |
Resolves:
https://issues.redhat.com/browse/RHIDP-5402
✔️ Checklist