Skip to content

Commit 41fc49f

Browse files
its-mitesh-kumardebsmita1
its-mitesh-kumar
and
debsmita1
authored
fix(fab): fixing css issues (#427)
* fixing css issues Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * adding changeset Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * updated the FAB menu actions * Revert "updated the FAB menu actions" * Revert "Revert "updated the FAB menu actions"" * fix/fab: adding transiotn , removing text tranform Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * fix slide transition * fix/fab: buttons should appear from button Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * making transition faster Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * fixing sonar cloud issues Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * moving iconcolor to fab Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * updating api report Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * Update workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FABWithSubmenu.tsx Co-authored-by: Debsmita Santra <debsmita.santra@gmail.com> * buttons background white Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> --------- Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: debsmita1 <debsmita.santra@gmail.com>
1 parent e14ffff commit 41fc49f

10 files changed

Lines changed: 142 additions & 128 deletions

File tree

‎workspaces/global-floating-action-button/.changeset/sharp-squids-fly.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch
3+
---
4+
5+
fixed css issues in fab

‎workspaces/global-floating-action-button/packages/app/src/components/Root/Root.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,14 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
9898
},
9999
{
100100
slot: Slot.BOTTOM_LEFT,
101-
icon: <LibraryBooks />,
102-
label: 'Api Docs',
103-
toolTip: 'Api Docs',
101+
icon: <ExtensionIcon />,
102+
label: 'APIs',
103+
toolTip: 'APIs',
104104
to: '/api-docs',
105105
},
106106
{
107107
slot: Slot.BOTTOM_LEFT,
108-
icon: <ExtensionIcon />,
108+
icon: <LibraryBooks />,
109109
showLabel: true,
110110
label: 'Docs',
111111
toolTip: 'Docs',
@@ -118,22 +118,13 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
118118
onClick: toggleModal,
119119
},
120120
{
121-
color: 'success',
122121
icon: <GitHubIcon />,
123-
label: 'RHDH pluginsssssssssssssss',
122+
label: 'RHDH plugins',
124123
showLabel: true,
125124
toolTip: 'RHDH plugins',
126125
to: 'https://github.com/redhat-developer/rhdh-plugins',
127126
visibleOnPaths: ['/catalog'],
128127
},
129-
{
130-
color: 'success',
131-
icon: <GitHubIcon />,
132-
label: 'RHDH pluginsssssssssssssss',
133-
toolTip: 'External link',
134-
to: 'https://github.com/redhat-developer/rhdh-plugins',
135-
visibleOnPaths: ['/catalog'],
136-
},
137128
{
138129
color: 'success',
139130
icon: <UserSettingsSignInAvatar />,

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/report.api.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export type FloatingActionButton = {
3939
| 'secondary'
4040
| 'success'
4141
| 'warning';
42+
iconColor?: string;
4243
onClick?: React.MouseEventHandler;
4344
to?: string;
4445
toolTip?: string;

workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FAB.tsx renamed to workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/CustomFab.tsx

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const FABLabel = ({
4545
const styles = useStyles();
4646
const marginStyle = slotOptions[slot].margin;
4747
return (
48-
<Typography sx={{ display: 'flex' }}>
48+
<>
4949
{showExternalIcon && (
5050
<OpenInNewIcon
5151
className={styles.openInNew}
@@ -58,6 +58,7 @@ const FABLabel = ({
5858
...marginStyle,
5959
color: '#151515',
6060
order: 2,
61+
textTransform: 'none',
6162
}}
6263
>
6364
{label}
@@ -68,11 +69,11 @@ const FABLabel = ({
6869
<FabIcon icon={icon} />
6970
</Typography>
7071
)}
71-
</Typography>
72+
</>
7273
);
7374
};
7475

75-
export const FAB = ({
76+
export const CustomFab = ({
7677
actionButton,
7778
size,
7879
className,
@@ -106,9 +107,6 @@ export const FAB = ({
106107
if (actionButton.color) {
107108
return actionButton.color;
108109
}
109-
if (!className) {
110-
return 'info';
111-
}
112110
return undefined;
113111
};
114112

@@ -122,39 +120,39 @@ export const FAB = ({
122120
slotOptions[actionButton.slot || Slot.PAGE_END].tooltipDirection
123121
}
124122
>
125-
<div className={className}>
126-
<Fab
127-
{...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}
128-
style={{ color: '#1f1f1f' }}
129-
variant={
130-
actionButton.showLabel || isExternal || !actionButton.icon
131-
? 'extended'
132-
: 'circular'
123+
<Fab
124+
{...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}
125+
className={className}
126+
style={{
127+
color: actionButton?.iconColor || '#1f1f1f',
128+
backgroundColor: actionButton.color ? '' : 'white',
129+
}}
130+
variant={
131+
actionButton.showLabel || isExternal || !actionButton.icon
132+
? 'extended'
133+
: 'circular'
134+
}
135+
size={size || actionButton.size || 'medium'}
136+
color={getColor()}
137+
aria-label={actionButton.label}
138+
data-testid={(actionButton.label || '')
139+
.replace(' ', '-')
140+
.toLocaleLowerCase('en-US')}
141+
onClick={actionButton.onClick || navigateTo}
142+
{...(isExternal ? { href: actionButton.to } : {})}
143+
>
144+
<FABLabel
145+
showExternalIcon={isExternal}
146+
icon={actionButton.icon}
147+
label={actionButton.showLabel || !actionButton.icon ? labelText : ''}
148+
order={
149+
displayOnRight
150+
? { externalIcon: isExternal ? 1 : -1, icon: 3 }
151+
: { externalIcon: isExternal ? 3 : -1, icon: 1 }
133152
}
134-
size={size || actionButton.size || 'medium'}
135-
color={getColor()}
136-
aria-label={actionButton.label}
137-
data-testid={(actionButton.label || '')
138-
.replace(' ', '-')
139-
.toLocaleLowerCase('en-US')}
140-
onClick={actionButton.onClick || navigateTo}
141-
{...(isExternal ? { href: actionButton.to } : {})}
142-
>
143-
<FABLabel
144-
showExternalIcon={isExternal}
145-
icon={actionButton.icon}
146-
label={
147-
actionButton.showLabel || !actionButton.icon ? labelText : ''
148-
}
149-
order={
150-
displayOnRight
151-
? { externalIcon: isExternal ? 1 : -1, icon: 3 }
152-
: { externalIcon: isExternal ? 3 : -1, icon: 1 }
153-
}
154-
slot={actionButton.slot || Slot.PAGE_END}
155-
/>
156-
</Fab>
157-
</div>
153+
slot={actionButton.slot || Slot.PAGE_END}
154+
/>
155+
</Fab>
158156
</Tooltip>
159157
);
160158
};

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FAB.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
import { render, screen } from '@testing-library/react';
1717
import GitIcon from '@mui/icons-material/GitHub';
1818
import * as React from 'react';
19-
import { FAB } from './FAB';
19+
import { CustomFab } from './CustomFab';
2020

2121
jest.mock('react-router-dom', () => ({
2222
useNavigate: jest.fn(),
@@ -44,7 +44,7 @@ jest.mock('@backstage/core-plugin-api', () => ({
4444
describe('Floating Action Button', () => {
4545
it('should render the floating action button with icon and label', () => {
4646
render(
47-
<FAB
47+
<CustomFab
4848
actionButton={{
4949
color: 'success',
5050
icon: <GitIcon />,
@@ -63,7 +63,7 @@ describe('Floating Action Button', () => {
6363

6464
it('should render the floating action button with icon', () => {
6565
render(
66-
<FAB
66+
<CustomFab
6767
actionButton={{
6868
color: 'success',
6969
icon: <GitIcon />,

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FABWithSubmenu.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ describe('Floating Button with submenu', () => {
7676
]}
7777
/>,
7878
);
79-
expect(screen.getByTestId('fab-with-submenu')).toBeInTheDocument();
79+
expect(
80+
screen.getByTestId('floating-button-with-submenu'),
81+
).toBeInTheDocument();
8082
expect(screen.getByTestId('MenuIcon')).toBeInTheDocument();
8183
const button = screen.getByTestId('MenuIcon');
8284
fireEvent.click(button);

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FABWithSubmenu.tsx‎

Lines changed: 71 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,40 +15,54 @@
1515
*/
1616

1717
import * as React from 'react';
18+
import classnames from 'classnames';
19+
1820
import { useLocation } from 'react-router-dom';
1921
import { makeStyles } from '@mui/styles';
2022
import Fab from '@mui/material/Fab';
2123
import Tooltip from '@mui/material/Tooltip';
22-
import { useTheme } from '@mui/material/styles';
24+
import Box from '@mui/material/Box';
25+
2326
import CloseIcon from '@mui/icons-material/Close';
2427
import MenuIcon from '@mui/icons-material/Menu';
25-
import Collapse from '@mui/material/Collapse';
26-
import { FAB } from './FAB';
28+
import Slide from '@mui/material/Slide';
29+
import { CustomFab } from './CustomFab';
2730
import { slotOptions } from '../utils';
2831
import { FloatingActionButton, Slot } from '../types';
32+
import Typography from '@mui/material/Typography';
2933

3034
const useStyles = makeStyles(theme => ({
35+
fabContainer: {
36+
zIndex: 200,
37+
display: 'flex',
38+
position: 'fixed',
39+
alignItems: 'center',
40+
gap: '10px',
41+
},
3142
button: {
32-
paddingTop: '10px',
43+
zIndex: 205,
3344
color:
3445
theme && Object.keys(theme).length > 0
3546
? theme.palette.grey[500]
3647
: '#9e9e9e',
3748
},
3849
menuButtonStyle: {
39-
color: '#1f1f1f',
50+
color: 'white',
4051
},
4152
}));
4253

4354
export const FABWithSubmenu = ({
55+
className,
4456
fabs,
4557
slot,
4658
}: {
4759
fabs: FloatingActionButton[];
4860
slot: Slot;
61+
className?: string;
4962
}) => {
63+
const containerRef = React.useRef<HTMLElement>(null);
5064
const styles = useStyles();
51-
const theme = useTheme();
65+
const fab = useStyles();
5266
const { pathname } = useLocation();
5367
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
5468

@@ -59,50 +73,65 @@ export const FABWithSubmenu = ({
5973
}, [pathname]);
6074

6175
const handleClick = () => {
62-
setIsMenuOpen(prev => !prev);
76+
if (isMenuOpen) {
77+
setTimeout(() => {
78+
setIsMenuOpen(false);
79+
}, 300);
80+
} else {
81+
setIsMenuOpen(true);
82+
}
6383
};
84+
6485
return (
65-
<>
86+
<Box
87+
className={classnames(fab.fabContainer, className)}
88+
sx={{
89+
flexDirection: 'column-reverse',
90+
}}
91+
id="floating-button-with-submenu"
92+
data-testid="floating-button-with-submenu"
93+
>
6694
<Tooltip title="Menu" placement={slotOptions[slot].tooltipDirection}>
67-
<Fab
68-
size="medium"
69-
color="info"
70-
onClick={handleClick}
71-
aria-label="Menu"
72-
variant="circular"
73-
data-testid="fab-with-submenu"
74-
>
75-
{isMenuOpen ? (
76-
<CloseIcon className={styles.menuButtonStyle} />
77-
) : (
78-
<MenuIcon className={styles.menuButtonStyle} />
79-
)}
80-
</Fab>
95+
<Typography>
96+
<Box ref={containerRef} sx={{ overflow: 'hidden' }} />
97+
<Fab
98+
size="medium"
99+
color="info"
100+
onClick={handleClick}
101+
aria-label="Menu"
102+
variant="circular"
103+
sx={{ zIndex: 1000 }}
104+
>
105+
{isMenuOpen ? (
106+
<CloseIcon className={styles.menuButtonStyle} />
107+
) : (
108+
<MenuIcon className={styles.menuButtonStyle} />
109+
)}
110+
</Fab>
111+
</Typography>
81112
</Tooltip>
82-
<Collapse
83-
style={{ textAlign: slotOptions[slot].textAlign }}
84-
in={isMenuOpen}
85-
mountOnEnter
86-
unmountOnExit
87-
orientation="vertical"
88-
easing={{
89-
enter: theme.transitions.easing.easeOut,
90-
exit: theme.transitions.easing.sharp,
91-
}}
92-
>
93-
<>
94-
{fabs?.map(fb => {
95-
return (
96-
<FAB
113+
{fabs?.map(fb => {
114+
return (
115+
<Slide
116+
key={fb.label}
117+
direction="up"
118+
container={containerRef?.current}
119+
in={isMenuOpen}
120+
mountOnEnter
121+
unmountOnExit
122+
timeout={500}
123+
>
124+
<Box>
125+
<CustomFab
97126
actionButton={fb}
98127
size="medium"
99128
key={fb.label}
100129
className={styles.button}
101130
/>
102-
);
103-
})}
104-
</>
105-
</Collapse>
106-
</>
131+
</Box>
132+
</Slide>
133+
);
134+
})}
135+
</Box>
107136
);
108137
};

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FloatingButton.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@ describe('Floating Button', () => {
107107
slot={Slot.BOTTOM_LEFT}
108108
/>,
109109
);
110-
expect(screen.getByTestId('floating-button')).toBeInTheDocument();
110+
expect(
111+
screen.getByTestId('floating-button-with-submenu'),
112+
).toBeInTheDocument();
111113
expect(screen.getByTestId('MenuIcon')).toBeInTheDocument();
112114
const button = screen.getByTestId('MenuIcon');
113115
fireEvent.click(button);

0 commit comments

Comments
 (0)