Skip to content

Commit 3c28a58

Browse files
karpolankarpolan
committed
fix: missing default color for Button
fix: DialogContent top padding refactor: AppButton to pass variant property withot mgic refactor: Login form to use Button instead of AppButton update: tests
1 parent e525638 commit 3c28a58

File tree

13 files changed

+95
-64
lines changed

13 files changed

+95
-64
lines changed

‎src/components/AppButton/AppButton.test.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { render, screen } from '@testing-library/react';
22
import AppButton from './AppButton';
33
import { ColorName } from '../../utils/style';
4+
import { AppThemeProvider } from '../../theme';
45

56
/**
67
* Test specific color for AppButton
@@ -11,7 +12,11 @@ import { ColorName } from '../../utils/style';
1112
function testButtonColor(colorName: string, expectedClassName = colorName, ignoreClassName = false) {
1213
it(`supports "${colorName}" color`, async () => {
1314
let text = `${colorName} button`;
14-
await render(<AppButton color={colorName as ColorName}>{text}</AppButton>);
15+
await render(
16+
<AppThemeProvider>
17+
<AppButton color={colorName as ColorName}>{text}</AppButton>
18+
</AppThemeProvider>
19+
);
1520

1621
let span = await screen.getByText(text); // <span> with specific text
1722
expect(span).toBeDefined();
@@ -30,7 +35,11 @@ describe('AppButton component', () => {
3035

3136
it('renders itself', async () => {
3237
let text = 'sample button';
33-
await render(<AppButton>{text}</AppButton>);
38+
await render(
39+
<AppThemeProvider>
40+
<AppButton>{text}</AppButton>
41+
</AppThemeProvider>
42+
);
3443
let span = await screen.getByText(text);
3544
expect(span).toBeDefined();
3645
expect(span).toHaveTextContent(text);
@@ -54,7 +63,11 @@ describe('AppButton component', () => {
5463
it('supports className property', async () => {
5564
let text = 'button with specific class';
5665
let className = 'someClassName';
57-
await render(<AppButton className={className}>{text}</AppButton>);
66+
await render(
67+
<AppThemeProvider>
68+
<AppButton className={className}>{text}</AppButton>
69+
</AppThemeProvider>
70+
);
5871
let span = await screen.getByText(text);
5972
expect(span).toBeDefined();
6073
let button = await span.closest('button'); // parent <button> element
@@ -64,7 +77,11 @@ describe('AppButton component', () => {
6477

6578
it('supports label property', async () => {
6679
let text = 'button with label';
67-
await render(<AppButton label={text} />);
80+
await render(
81+
<AppThemeProvider>
82+
<AppButton label={text} />
83+
</AppThemeProvider>
84+
);
6885
let span = await screen.getByText(text);
6986
expect(span).toBeDefined();
7087
let button = await span.closest('button'); // parent <button> element
@@ -73,7 +90,11 @@ describe('AppButton component', () => {
7390

7491
it('supports text property', async () => {
7592
let text = 'button with text';
76-
await render(<AppButton text={text} />);
93+
await render(
94+
<AppThemeProvider>
95+
<AppButton text={text} />
96+
</AppThemeProvider>
97+
);
7798
let span = await screen.getByText(text);
7899
expect(span).toBeDefined();
79100
let button = await span.closest('button'); // parent <button> element

‎src/components/AppButton/AppButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,14 @@ const AppButton: React.FC<Props> = ({
5656
mr = APP_BUTTON_MARGIN,
5757
text,
5858
underline = 'none',
59+
variant = APP_BUTTON_VARIANT,
5960
...restOfProps
6061
}) => {
6162
const classes = useStyles();
6263
const classButton = clsx(classes[color as ColorName], className);
6364
return (
6465
<Box {...{ m, mt, mb, ml, mr }} className={classes.box}>
65-
<Button className={classButton} variant={APP_BUTTON_VARIANT} {...{ ...restOfProps, underline }}>
66+
<Button className={classButton} variant={variant} {...{ ...restOfProps, underline }}>
6667
{children || label || text}
6768
</Button>
6869
</Box>

‎src/components/AppForm/AppForm.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactNode, FormHTMLAttributes } from 'react';
2-
import { Grid } from '@mui/material';
2+
import { Box, Grid } from '@mui/material';
33
import { Theme } from '@mui/material/styles';
44
import makeStyles from '@mui/styles/makeStyles';
55
import { formStyle } from '../../utils/style';
@@ -22,9 +22,7 @@ const AppForm: React.FC<Props> = ({ children, ...resOfProps }) => {
2222
return (
2323
<form {...resOfProps}>
2424
<Grid container direction="column" alignItems="center">
25-
<Grid item className={classes.formBody}>
26-
{children}
27-
</Grid>
25+
<Box className={classes.formBody}>{children}</Box>
2826
</Grid>
2927
</form>
3028
);

‎src/components/AppIconButton/AppIconButton.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,12 @@ const AppIconButton: React.FC<Props> = ({ color, className, children, disabled,
3737
const colorButton = getValidMuiColor(color);
3838

3939
const renderIcon = () => (
40-
<IconButton
41-
className={classButton}
42-
color={colorButton}
43-
disabled={disabled}
44-
{...restOfProps}
45-
// size="large" TODO: was added by CodeMod, do we need it?
46-
>
40+
<IconButton className={classButton} color={colorButton} disabled={disabled} {...restOfProps}>
4741
<AppIcon icon={icon} />
4842
{children}
4943
</IconButton>
5044
);
5145

52-
// TODO: in MUI 5.x Tooltips are now interactive by default. We can optimize the rendering mess :)
53-
5446
// When title is set, wrap te IconButton with Tooltip.
5547
// Note: when IconButton is disabled the Tooltip is not working, so we don't need it
5648
if (title && !disabled) {

‎src/components/AppLink/AppLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const AppLink = forwardRef<any, Props>(
2626
children,
2727
color = DEFAULT_APP_LINK_COLOR,
2828
underline = DEFAULT_APP_LINK_UNDERLINE,
29-
to,
29+
to = '',
3030
href,
3131
openInNewTab = Boolean(href), // Open external links in new Tab by default
3232
...restOfProps

‎src/components/TopBar/TopBar.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import AppIconButton from '../AppIconButton';
55

66
const useStyles = makeStyles((theme: Theme) => ({
77
root: {
8-
//boxShadow: 'none',
8+
// boxShadow: 'none', // Uncomment to hide shadow
99
minWidth: '20rem',
10+
// backgroundColor: theme.palette.primary.main, // Uncomment if you also need colored background in dark mode
1011
},
1112
toolbar: {
1213
paddingLeft: theme.spacing(1),

‎src/components/dialogs/CompositionDialog.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactNode } from 'react';
2-
import { Dialog, DialogActions, DialogContent, DialogProps } from '@mui/material';
2+
import { Box, Dialog, DialogActions, DialogContent, DialogProps } from '@mui/material';
33
import makeStyles from '@mui/styles/makeStyles';
44
import createStyles from '@mui/styles/createStyles';
55
import { AppDialogTitle } from './components';
@@ -42,8 +42,11 @@ const CompositionDialog: React.FC<Props> = ({
4242
{title}
4343
</AppDialogTitle>
4444
<DialogContent className={classes.content}>
45-
{content}
46-
{children}
45+
{/* Box is temporary fix for https://github.com/mui-org/material-ui/issues/27851 */}
46+
<Box pt={1}>
47+
{content}
48+
{children}
49+
</Box>
4750
</DialogContent>
4851
<DialogActions className={classes.actions}>{actions}</DialogActions>
4952
</Dialog>

‎src/components/dialogs/components/AppDialogTitle.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme: Theme) =>
88
createStyles({
99
titleContainer: {
1010
display: 'flex',
11-
maxWidth: `calc(100% - ${theme.spacing(4)})`, // TODO: 'px)' was removed by CodeMod
11+
maxWidth: `calc(100% - ${theme.spacing(4)})`,
1212
},
1313
title: {
1414
textOverflow: 'ellipsis',
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
2121

2222
/**
2323
* Renders Material UI Dialog Title with optional (x) button to close the dialog
24-
* @param {function} [onClose] - when set the (x) button aded to Dialog Title and event called on button click
24+
* @param {function} [onClose] - when set the (x) button added to Dialog Title and event called on button click
2525
*/
2626
interface Props extends DialogTitleProps {
2727
onClose?: (event: {}) => void;
@@ -34,7 +34,14 @@ const AppDialogTitle: React.FC<Props> = ({ children, onClose, ...props }) => {
3434
<span className={classes.title}>{children}</span>
3535
</div>
3636
{Boolean(onClose) ? (
37-
<AppIconButton className={classes.xButton} icon="close" aria-label="close" title="Close" onClick={onClose} />
37+
<AppIconButton
38+
className={classes.xButton}
39+
size="large"
40+
icon="close"
41+
title="Close"
42+
aria-label="close"
43+
onClick={onClose}
44+
/>
3845
) : null}
3946
</DialogTitle>
4047
);

‎src/theme.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,7 @@
33
* See for details: https://material-ui.com/customization/default-theme/?expand-path=$.palette
44
* Martial Color tool: https://material.io/resources/color
55
*/
6-
import {
7-
createTheme,
8-
DeprecatedThemeOptions,
9-
ThemeProvider,
10-
Theme,
11-
StyledEngineProvider,
12-
adaptV4Theme,
13-
} from '@mui/material/styles';
6+
import { createTheme, ThemeProvider, Theme, StyledEngineProvider, ThemeOptions } from '@mui/material/styles';
147
import CssBaseline from '@mui/material/CssBaseline';
158
import { useAppStore } from './store/AppStore';
169

@@ -38,7 +31,7 @@ const FRONT_COLORS = {
3831
/**
3932
* Material UI theme config for "Light Mode"
4033
*/
41-
const LIGHT_THEME: DeprecatedThemeOptions = {
34+
const LIGHT_THEME: ThemeOptions = {
4235
palette: {
4336
mode: 'light',
4437
// background: {
@@ -52,7 +45,7 @@ const LIGHT_THEME: DeprecatedThemeOptions = {
5245
/**
5346
* Material UI theme config for "Dark Mode"
5447
*/
55-
const DARK_THEME: DeprecatedThemeOptions = {
48+
const DARK_THEME: ThemeOptions = {
5649
palette: {
5750
mode: 'dark',
5851
// background: {
@@ -68,8 +61,8 @@ const DARK_THEME: DeprecatedThemeOptions = {
6861
*/
6962
const AppThemeProvider: React.FunctionComponent = ({ children }) => {
7063
const [state] = useAppStore();
71-
// const theme = useMemo(() => (state.darkMode ? createMuiTheme(DARK_THEME) : createMuiTheme(LIGHT_THEME)));
72-
const theme = state.darkMode ? createTheme(adaptV4Theme(DARK_THEME)) : createTheme(adaptV4Theme(LIGHT_THEME));
64+
// const theme = useMemo(() => (state.darkMode ? createTheme(DARK_THEME) : createTheme(LIGHT_THEME)));
65+
const theme = state.darkMode ? createTheme(DARK_THEME) : createTheme(LIGHT_THEME);
7366

7467
return (
7568
<StyledEngineProvider injectFirst>

‎src/utils/form.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,6 @@ export function useAppForm({ validationSchema, initialValues = {} }: UseAppFormP
9595

9696
// Event to call on every Input change. Note: the "name" props of the Input control must be set!
9797
const onFieldChange = useCallback((event) => {
98-
// event.persist(); // Todo: Do we need this in React 17 ?
99-
10098
const name = event.target?.name;
10199
const value =
102100
event.target?.type === 'checkbox'

0 commit comments

Comments
 (0)