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.

Sign up for GitHub

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

Jump to bottom

use useStyles instead of withStyles in next #3453

Closed
57 of 66 tasks
fzaninotto opened this issue Jul 24, 2019 · 7 comments
Closed
57 of 66 tasks

use useStyles instead of withStyles in next #3453

fzaninotto opened this issue Jul 24, 2019 · 7 comments
Labels
good first issue help wanted

Comments

@fzaninotto
Copy link
Member

fzaninotto commented Jul 24, 2019 •
edited
Loading

Material-ui v4 promotes the usage of hooks instead of HOCs to apply CSS styles to a component. The current code base still uses a lot of withStyles in next. If you feel like contributing, an easy task is to convert these components to useStyles.

We need your help! Check out #3328 for an example.

  • examples/demo/src/layout/Login.js
  • ra-input-rich-text/src/index.js
  • ra-tree-ui-materialui/src/DragLayer.js
  • ra-tree-ui-materialui/src/DragPreview.js
  • ra-tree-ui-materialui/src/NodeActions.js
  • ra-tree-ui-materialui/src/NodeForm.js
  • ra-tree-ui-materialui/src/NodeView.js
  • ra-tree-ui-materialui/src/RootDropTarget.js
  • ra-tree-ui-materialui/src/Tree.js
  • ra-tree-ui-materialui/src/TreeNode.js
  • ra-ui-materialui/src/Link.tsx
  • ra-ui-materialui/src/auth/Login.tsx
  • ra-ui-materialui/src/auth/LoginForm.tsx
  • ra-ui-materialui/src/button/CreateButton.js
  • ra-ui-materialui/src/button/SaveButton.js
  • ra-ui-materialui/src/field/BooleanField.tsx
  • ra-ui-materialui/src/field/ChipField.tsx
  • ra-ui-materialui/src/field/FileField.tsx
  • ra-ui-materialui/src/field/ImageField.tsx
  • ra-ui-materialui/src/form/FormInput.js
  • ra-ui-materialui/src/form/SimpleFormIterator.js
  • ra-ui-materialui/src/form/TabbedForm.js
  • ra-ui-materialui/src/form/Toolbar.js
  • ra-ui-materialui/src/input/AutocompleteArrayInput.js
  • ra-ui-materialui/src/input/AutocompleteArrayInputChip.js
  • ra-ui-materialui/src/input/AutocompleteInput.js
  • ra-ui-materialui/src/input/CheckboxGroupInput.js
  • ra-ui-materialui/src/input/FileInput.js
  • ra-ui-materialui/src/input/FileInputPreview.js
  • ra-ui-materialui/src/input/ImageInput.js
  • ra-ui-materialui/src/input/Labeled.js
  • ra-ui-materialui/src/input/NullableBooleanInput.js
  • ra-ui-materialui/src/input/RadioButtonGroupInput.js
  • ra-ui-materialui/src/input/ResettableTextField.js
  • ra-ui-materialui/src/input/SearchInput.js
  • ra-ui-materialui/src/input/SelectArrayInput.js
  • ra-ui-materialui/src/input/SelectInput.js
  • ra-ui-materialui/src/layout/AppBar.js
  • ra-ui-materialui/src/layout/CardContentInner.js
  • ra-ui-materialui/src/layout/Confirm.js
  • ra-ui-materialui/src/layout/Error.js
  • ra-ui-materialui/src/layout/Layout.js (not possible because of componentDidCatch)
  • ra-ui-materialui/src/layout/LinearProgress.js
  • ra-ui-materialui/src/layout/Loading.js
  • ra-ui-materialui/src/layout/LoadingIndicator.js
  • ra-ui-materialui/src/layout/Menu.js
  • ra-ui-materialui/src/layout/MenuItemLink.js
  • ra-ui-materialui/src/layout/NotFound.js
  • ra-ui-materialui/src/layout/Notification.js
  • ra-ui-materialui/src/layout/Sidebar.js
  • ra-ui-materialui/src/list/BulkActions.js
  • ra-ui-materialui/src/list/BulkActionsToolbar.js
  • ra-ui-materialui/src/list/Datagrid.js
  • ra-ui-materialui/src/list/DatagridHeaderCell.js
  • ra-ui-materialui/src/list/DatagridLoading.js
  • ra-ui-materialui/src/list/Filter.js
  • ra-ui-materialui/src/list/FilterButton.js
  • ra-ui-materialui/src/list/FilterForm.js
  • ra-ui-materialui/src/list/PaginationActions.js
  • ra-ui-materialui/src/list/SimpleList.js
  • ra-ui-materialui/src/list/SingleFieldList.js

And then there is the doc:

  • CreateEdit.md
  • Fields.md
  • List.md
  • Theming.md
  • Tutorial.md
@fzaninotto fzaninotto pinned this issue Jul 24, 2019
fzaninotto added a commit that referenced this issue Jul 24, 2019
@fzaninotto
Use useStyles in documentation
95d7243 
Refs #3453
@fzaninotto fzaninotto mentioned this issue Jul 24, 2019
Merged
@MohammedFaragallah
Copy link
Contributor

I'm gathering my courage to working on this as my first open source contribution
few quewstions

  • most of these components are class based what should i do with that
  • withWidth HOC will be deprecated should i update it with useMediaQuery

@fzaninotto
Copy link
Member Author

  • you should convert class components to function components. But Field and Input components are already functional components, you can start there.
  • keep the withWidth HOC for now - I'm adding new helpers for width and responsive in another PR

@MohammedFaragallah MohammedFaragallah mentioned this issue Jul 25, 2019
Closed
66 tasks
@MohammedFaragallah MohammedFaragallah mentioned this issue Aug 2, 2019
Closed
@m4theushw m4theushw mentioned this issue Aug 3, 2019
Merged
2 tasks
@MohammedFaragallah MohammedFaragallah mentioned this issue Aug 3, 2019
Closed
@Kunnu01
Copy link
Contributor

Kunnu01 commented Aug 7, 2019

Is there anything I can help with or work on in this issue?

@Kunnu01 Kunnu01 mentioned this issue Aug 7, 2019
Closed
@Kmaschta
Copy link
Contributor

Kmaschta commented Aug 8, 2019

Sure! Just open a PR like you did.
You can sync with @MohammedFaragallah who is already migrating some components, just to avoid conflicts.
Thanks for your help!

@Kunnu01
Copy link
Contributor

Kunnu01 commented Aug 8, 2019

@djhi @fzaninotto, in Layout component componentDidCatch is used and there is no hook corresponding to this for now. Any idea how to convert it to the functional component?

@djhi
Copy link
Collaborator

djhi commented Aug 8, 2019

You can't, don't try to convert this one: it should not use makeStyles

@jaytula jaytula mentioned this issue Aug 20, 2019
Merged
Kunnu01 added a commit to Kunnu01/react-admin that referenced this issue Aug 21, 2019
@Kunnu01
add makeStyles in BooleanField
0868c29 
ref: marmelab#3453
@Kunnu01 Kunnu01 mentioned this issue Aug 21, 2019
Merged
4 tasks
Kunnu01 added a commit to Kunnu01/react-admin that referenced this issue Aug 22, 2019
@Kunnu01
add makeStyles in BooleanField
75dcf88 
ref: marmelab#3453

use useStyles in ChipField

use useStyles in FileField

use useStyles in ImageField

fix FileField's tests

fix tests

migrate ImageField tests to testing-library

fix tests

migrate tests of ChipField and FileField
djhi pushed a commit that referenced this issue Aug 22, 2019
@Kunnu01 @djhi
add makeStyles in BooleanField
64481d6 
ref: #3453

use useStyles in ChipField

use useStyles in FileField

use useStyles in ImageField

fix FileField's tests

fix tests

migrate ImageField tests to testing-library

fix tests

migrate tests of ChipField and FileField
@m4theushw m4theushw mentioned this issue Aug 22, 2019
Closed
4 tasks
@jaytula jaytula mentioned this issue Aug 22, 2019
Merged
@m4theushw m4theushw mentioned this issue Aug 22, 2019
Merged
This was referenced Aug 22, 2019
Merged
Merged
Merged
@fzaninotto
Copy link
Member Author

Thanks to the collective effort, there aren't many components left. We can close this issue.

Thank you all!

@fzaninotto fzaninotto unpinned this issue Sep 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@fzaninotto @djhi @Kmaschta @MohammedFaragallah @Kunnu01