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

[material-ui][Divider] dashed borderStyle does not work for Divider with text #42569

Open
caseylum opened this issue Jun 7, 2024 · 3 comments · May be fixed by #42715
Open

[material-ui][Divider] dashed borderStyle does not work for Divider with text #42569

caseylum opened this issue Jun 7, 2024 · 3 comments · May be fixed by #42715
Assignees
@DiegoAndai
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 package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@caseylum
Copy link

caseylum commented Jun 7, 2024 •
edited by github-actions bot
Loading

Steps to reproduce

Link to live example: demo

Steps:

  1. Create a StyledDivider with borderStyle: 'dashed'
  2. Render a StyledDivider with no child
  3. Render a StyledDivider with child text element
  4. The second divider is not dashed.

Current behavior

When two of the same StyledDivider components are rendered, the one with child text is not dashed

Expected behavior

Both StyledDividers should be dashed

Context

A dashed Divider with text

Your environment

npx @mui/envinfo 
  in my project, I'm viewing a pdf in Google Chrome
  I'm using the CodeSandbox in Chrome as well

  System:
    OS: macOS 14.5
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4 
    @emotion/styled: 11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.19 
    @mui/icons-material: 5.15.19 => 5.15.19 
    @mui/material: 5.15.19 => 5.15.19 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: 17.0.75 => 17.0.75 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.9.5 => 4.9.5

Search keywords: Divider, borderStyle, dashed
@caseylum caseylum added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 7, 2024
@appleSimple
Copy link
Contributor

using borderTopStyle each pseudo elements(::before, ::after).

like this, demo.

const StyledDivider = styled(Divider)(({}) => ({
  '&::before': {
    width: '3.75rem',
    flex: '0 0 3.75rem',
    borderTopStyle: 'dashed',
  },
  '&::after': {
    borderTopStyle: 'dashed',
  },
}));

this issue occurs file Divider.js.

const DividerRoot = styled('div', {
...
    {
      props: ({ ownerState }) => {
        console.log('ownerState', ownerState);
        return ;
      },
      style: {
        '&::before, &::after': {
          width: '100%',
          borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, // this line!!
        },
      },
    },
...
}));

@appleSimple appleSimple mentioned this issue Jun 10, 2024
Closed
@zannager zannager added the component: divider This is the name of the generic UI component, not the React module! label Jun 10, 2024
@DiegoAndai DiegoAndai assigned DiegoAndai and unassigned siriwatknp Jun 14, 2024
@DiegoAndai DiegoAndai changed the title dashed borderStyle does not work for Divider with text [material-ui][Divider] dashed borderStyle does not work for Divider with text Jun 14, 2024
@DiegoAndai DiegoAndai added package: material-ui Specific to @mui/material enhancement This is not a bug, nor a new feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 14, 2024
@DiegoAndai
Copy link
Member

Hey @caseylum, thanks for the report. And thanks @appleSimple, for providing a workaround 🎉.

Ideally, borderStyle should work, so I'm accepting this as an enhancement. There's a PR up already so we can continue the work there 🙌🏼

@DiegoAndai DiegoAndai added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Jun 18, 2024
@anuujj
Copy link
Contributor

anuujj commented Jun 22, 2024

I would be happy to take it up. The idea is to inherit the border-style in before and after pseudo elements from DividerRoot in case DividerRoot has children.

@anuujj anuujj linked a pull request Jun 22, 2024 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DiegoAndai DiegoAndai

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 package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Milestone
No milestone
6 participants
@DiegoAndai @siriwatknp @anuujj @appleSimple @caseylum @zannager