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

[material-ui][Divider] Enable borderStyle enhancement in divider with children #42715

Merged
merged 13 commits into from
Jul 24, 2024

Conversation

anuujj
Copy link
Contributor

@anuujj anuujj commented Jun 22, 2024

Closes #42569

@anuujj anuujj changed the title [material-ui] [Divider] borderStyle enhancement in divider with children [material-ui][Divider] borderStyle enhancement in divider with children Jun 22, 2024
@mui-bot
Copy link

mui-bot commented Jun 22, 2024

Netlify deploy preview

https://deploy-preview-42715--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against fe73d7f

@anuujj anuujj marked this pull request as ready for review June 22, 2024 22:59
@zannager zannager added the component: divider This is the name of the generic UI component, not the React module! label Jun 24, 2024
@zannager zannager requested a review from DiegoAndai June 24, 2024 13:23
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @anuujj! I left a question.

The solution is working as expected: https://codesandbox.io/p/sandbox/pr-42715-1-pyqg9y

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May I ask you to add a test to prevent future regressions? 😊

@anuujj
Copy link
Contributor Author

anuujj commented Jul 4, 2024

Hi @DiegoAndai, I tried adding a test for this but ran into a limitation of JSDOM i.e it does not implement the cascading of styles. So, the styling in test is different from the behaviour in browser. Similar issue is highlighted here #24761, if you are aware of any workaround, feel free to suggest that.
Screenshot 2024-07-04 at 1 34 56 PM

@ZeeshanTamboli ZeeshanTamboli added package: material-ui Specific to @mui/material enhancement This is not a bug, nor a new feature labels Jul 8, 2024
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @DiegoAndai, I tried adding a test for this but ran into a limitation of JSDOM i.e it does not implement the cascading of styles. So, the styling in test is different from the behaviour in browser. Similar issue is highlighted here #24761, if you are aware of any workaround, feel free to suggest that. Screenshot 2024-07-04 at 1 34 56 PM

Can you try to skip the test in JSDOM as suggested in the warning above:

if (/jsdom/.test(window.navigator.userAgent)) {
  this.skip();
}

You can take a look at other test files on how it's done. When you skip the test in JSDOM, it will run on browser instead.

}
});

it('should set the border-style dashed in before and after pseudoclass', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anuujj here's an example on how to assert:

expect(container.firstChild).toHaveComputedStyle({

We use expect.

On another note, the border left style should only be applied with the vertical prop, so we'll need two tests. One for horizontal and one for vertical.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I was low on bandwidth this week and having some issue with the local test setup. I will try to fix these on the weekend. Moving the PR to draft for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added two tests as you suggested and used expect for assertions. You can review now. Thanks.

@anuujj anuujj marked this pull request as draft July 12, 2024 17:15
@anuujj anuujj marked this pull request as ready for review July 13, 2024 07:07
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Jul 13, 2024

@anuujj I pushed a commit to fix the test structure and description in 89dcd02. Rest looks good. @DiegoAndai to review. I think we can cherry-pick this to master.

@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][Divider] borderStyle enhancement in divider with children [material-ui][Divider] Add borderStyle enhancement in divider with children Jul 13, 2024
@ZeeshanTamboli ZeeshanTamboli added the needs cherry-pick The PR should be cherry-picked to master after merge label Jul 13, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][Divider] Add borderStyle enhancement in divider with children [material-ui][Divider] Enable borderStyle enhancement in divider with children Jul 13, 2024
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks @anuujj and @ZeeshanTamboli.

@DiegoAndai DiegoAndai merged commit 4a64dae into mui:next Jul 24, 2024
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: divider This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature needs cherry-pick The PR should be cherry-picked to master after merge package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[material-ui][Divider] dashed borderStyle does not work for Divider with text
5 participants