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

Invalid justifyContent/borderRadius props on login components #130

Open
ErnWong opened this issue Apr 5, 2020 · 0 comments
Open

Invalid justifyContent/borderRadius props on login components #130

ErnWong opened this issue Apr 5, 2020 · 0 comments
Labels
approved Issue has been approved by PM bug Something isn't working front-end Issues related to front-end development
Milestone

Comments

@ErnWong
Copy link
Contributor

ErnWong commented Apr 5, 2020

Describe the bug

A borderRadius prop was passed to a Button which doesn't have such prop.

borderRadius={30}

A justifyContent prop was passed to a Box which doesn't have such prop in the material ui version we are using.

<Container fixed justifyContent="center">

To Reproduce
Steps to reproduce the behavior:

  1. npm start the frontend to start it in development mode.
  2. Go to the login page.
  3. Open console.

Severity
Mark with an x.
[x]: Minor effect - not user facing, but indication of a fault needing to be fixed
[]: Functional error eg. App does not function correctly
[]: Severe eg. Crashing

Reproducibility
Mark with an x.
[x]: Consistent
[]: Occasional
[]: Cannot reproduce at the moment eg. unsure

Expected behavior
No errors shown. Hopefully have tests set up that ensure that these errors are caught before features are merged into master.

Screenshots, Images and Traces

Warning: React does not recognize the `justifyContent` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `justifycontent` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at Login.js:82)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Login.js:81)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Login.js:73)
    in Login (created by Context.Consumer)
    in Route (at App.js:14)
    in div (at App.js:13)
    in header (at App.js:12)
    in div (at App.js:11)
    in Router (created by HashRouter)
    in HashRouter (at App.js:10)
    in App (at src/index.js:6)
Warning: React does not recognize the `borderRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `borderradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in button (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button))
    in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at Login.js:129)
    in h3 (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography)) (at Login.js:128)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at Login.js:94)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at Login.js:84)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at Login.js:83)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at Login.js:82)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Login.js:81)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Login.js:73)
    in Login (created by Context.Consumer)
    in Route (at App.js:14)
    in div (at App.js:13)
    in header (at App.js:12)
    in div (at App.js:11)
    in Router (created by HashRouter)
    in HashRouter (at App.js:10)
    in App (at src/index.js:6)

Conditions
Ubuntu, Chromium/Firefox, material-ui 4.9.5 installed under /node_modules.

Issue Dependencies
TODO - Potentially another issue to refactor the styling code? I'm thinking that using Material-UI's styling solution would work quite well. That would provide modularity, theming, reuse of style parameters like colours, margins, etc.

Additional context
TODO

@ErnWong ErnWong added bug Something isn't working front-end Issues related to front-end development labels Apr 5, 2020
@ErnWong ErnWong added this to the Demo 2 milestone Apr 5, 2020
@kaplunket kaplunket added the approved Issue has been approved by PM label Apr 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Issue has been approved by PM bug Something isn't working front-end Issues related to front-end development
Projects
None yet
Development

No branches or pull requests

2 participants