[material-ui][Divider] Enable borderStyle enhancement in divider with…

… children (#42715)
mui · Jul 24, 2024 · 4a64dae · 4a64dae
1 parent 02fde66
commit 4a64dae
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
@@ -137,6 +137,8 @@ const DividerRoot = styled('div', {
         whiteSpace: 'nowrap',
         textAlign: 'center',
         border: 0,
+        borderTopStyle: 'solid',
+        borderLeftStyle: 'solid',
         '&::before, &::after': {
           content: '""',
           alignSelf: 'center',
@@ -149,6 +151,7 @@ const DividerRoot = styled('div', {
         '&::before, &::after': {
           width: '100%',
           borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+          borderTopStyle: 'inherit',
         },
       },
     },
@@ -159,6 +162,7 @@ const DividerRoot = styled('div', {
         '&::before, &::after': {
           height: '100%',
           borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+          borderLeftStyle: 'inherit',
         },
       },
     },

diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
+import { styled } from '@mui/material/styles';
 import Divider, { dividerClasses as classes } from '@mui/material/Divider';
 import describeConformance from '../../test/describeConformance';
 
@@ -83,6 +84,40 @@ describe('<Divider />', () => {
         expect(container.querySelectorAll(`.${classes.textAlignLeft}`).length).to.equal(0);
       });
     });
+
+    describe('custom border style', function test() {
+      before(function beforeHook() {
+        if (/jsdom/.test(window.navigator.userAgent)) {
+          this.skip();
+        }
+      });
+
+      const StyledDivider = styled(Divider)(() => ({
+        borderStyle: 'dashed',
+      }));
+
+      it('should set the dashed border-left-style in before and after pseudo-elements when orientation is vertical', () => {
+        const { container } = render(<StyledDivider orientation="vertical">content</StyledDivider>);
+        expect(
+          getComputedStyle(container.firstChild, '::before').getPropertyValue('border-left-style'),
+        ).to.equal('dashed');
+        expect(
+          getComputedStyle(container.firstChild, '::after').getPropertyValue('border-left-style'),
+        ).to.equal('dashed');
+      });
+
+      it('should set the dashed border-top-style in before and after pseudo-elements when orientation is horizontal', () => {
+        const { container } = render(
+          <StyledDivider orientation="horizontal">content</StyledDivider>,
+        );
+        expect(
+          getComputedStyle(container.firstChild, '::before').getPropertyValue('border-top-style'),
+        ).to.equal('dashed');
+        expect(
+          getComputedStyle(container.firstChild, '::after').getPropertyValue('border-top-style'),
+        ).to.equal('dashed');
+      });
+    });
   });
 
   describe('prop: variant', () => {