From 45c9c7cebf9b73777198cc9d332f6ddc37226d16 Mon Sep 17 00:00:00 2001 From: anuujj Date: Sun, 23 Jun 2024 03:27:01 +0530 Subject: [PATCH 01/11] dashed border enhancement in divider --- packages/mui-material/src/Divider/Divider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 906b8c8c36f0d5..d71627820d78e4 100644 --- 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', }, }, }, From 088f12863b444f327d9f3da3b4348ce07eb433a4 Mon Sep 17 00:00:00 2001 From: anuujj Date: Sun, 23 Jun 2024 04:03:33 +0530 Subject: [PATCH 02/11] retrigger checks From bb2a9121983008deba8a6476d5a5e21431a0a9e9 Mon Sep 17 00:00:00 2001 From: anuujj Date: Tue, 9 Jul 2024 01:33:50 +0530 Subject: [PATCH 03/11] test case added --- .../mui-material/src/Divider/Divider.test.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 57f7fbc689a643..569f01fa9d9545 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -3,9 +3,17 @@ import { expect } from 'chai'; import { createRenderer } from '@mui/internal-test-utils'; import Divider, { dividerClasses as classes } from '@mui/material/Divider'; import describeConformance from '../../test/describeConformance'; +import { styled } from '..'; describe('', () => { const { render } = createRenderer(); + const StyledDivider = styled(Divider)(() => ({ + '&::before': { + width: '4.75rem', + flex: '0 0 3.75rem', + }, + borderStyle: `dashed`, + })); describeConformance(, () => ({ classes, @@ -83,6 +91,30 @@ describe('', () => { expect(container.querySelectorAll(`.${classes.textAlignLeft}`).length).to.equal(0); }); }); + + describe('styled border: borderStyle dashed', () => { + before(function beforeHook() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + }); + + it('should set the border-style dashed in before and after pseudoclass', () => { + const { container } = render(content); + getComputedStyle(container.firstChild, '::before') + .getPropertyValue('border-top-style') + .should.equal('dashed'); + getComputedStyle(container.firstChild, '::before') + .getPropertyValue('border-left-style') + .should.equal('dashed'); + getComputedStyle(container.firstChild, '::after') + .getPropertyValue('border-top-style') + .should.equal('dashed'); + getComputedStyle(container.firstChild, '::after') + .getPropertyValue('border-left-style') + .should.equal('dashed'); + }); + }); }); describe('prop: variant', () => { From 102f536c8f950ddba4916d928f6294f48d08f2c3 Mon Sep 17 00:00:00 2001 From: anuujj Date: Sun, 23 Jun 2024 03:27:01 +0530 Subject: [PATCH 04/11] dashed border enhancement in divider --- packages/mui-material/src/Divider/Divider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 906b8c8c36f0d5..d71627820d78e4 100644 --- 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', }, }, }, From 166781f94547b101a2f01705827b47048b40a48d Mon Sep 17 00:00:00 2001 From: anuujj Date: Sun, 23 Jun 2024 04:03:33 +0530 Subject: [PATCH 05/11] retrigger checks From 20ffdab8f67e8c46a1d94e529c6cfb72bb91a43b Mon Sep 17 00:00:00 2001 From: anuujj Date: Tue, 9 Jul 2024 01:33:50 +0530 Subject: [PATCH 06/11] test case added --- .../mui-material/src/Divider/Divider.test.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 57f7fbc689a643..569f01fa9d9545 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -3,9 +3,17 @@ import { expect } from 'chai'; import { createRenderer } from '@mui/internal-test-utils'; import Divider, { dividerClasses as classes } from '@mui/material/Divider'; import describeConformance from '../../test/describeConformance'; +import { styled } from '..'; describe('', () => { const { render } = createRenderer(); + const StyledDivider = styled(Divider)(() => ({ + '&::before': { + width: '4.75rem', + flex: '0 0 3.75rem', + }, + borderStyle: `dashed`, + })); describeConformance(, () => ({ classes, @@ -83,6 +91,30 @@ describe('', () => { expect(container.querySelectorAll(`.${classes.textAlignLeft}`).length).to.equal(0); }); }); + + describe('styled border: borderStyle dashed', () => { + before(function beforeHook() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + }); + + it('should set the border-style dashed in before and after pseudoclass', () => { + const { container } = render(content); + getComputedStyle(container.firstChild, '::before') + .getPropertyValue('border-top-style') + .should.equal('dashed'); + getComputedStyle(container.firstChild, '::before') + .getPropertyValue('border-left-style') + .should.equal('dashed'); + getComputedStyle(container.firstChild, '::after') + .getPropertyValue('border-top-style') + .should.equal('dashed'); + getComputedStyle(container.firstChild, '::after') + .getPropertyValue('border-left-style') + .should.equal('dashed'); + }); + }); }); describe('prop: variant', () => { From 2fd81b77b76f6a6d11957a06ed09d39afe45de7a Mon Sep 17 00:00:00 2001 From: anuujj Date: Sat, 13 Jul 2024 11:20:07 +0530 Subject: [PATCH 07/11] test fixed --- .../mui-material/src/Divider/Divider.test.js | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 569f01fa9d9545..ea23889a6b5968 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -99,20 +99,25 @@ describe('', () => { } }); - it('should set the border-style dashed in before and after pseudoclass', () => { - const { container } = render(content); - getComputedStyle(container.firstChild, '::before') - .getPropertyValue('border-top-style') - .should.equal('dashed'); - getComputedStyle(container.firstChild, '::before') - .getPropertyValue('border-left-style') - .should.equal('dashed'); - getComputedStyle(container.firstChild, '::after') - .getPropertyValue('border-top-style') - .should.equal('dashed'); - getComputedStyle(container.firstChild, '::after') - .getPropertyValue('border-left-style') - .should.equal('dashed'); + it('should set the border-left-style dashed in before and after pseudoclass if orientation="vertical', () => { + const { container } = render(content); + 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 border-top-style dashed in before and after pseudoclass if orientation="horizontal', () => { + const { container } = render( + content, + ); + expect( + getComputedStyle(container.firstChild, '::before').getPropertyValue('border-top-style'), + ).to.equal('dashed'); + expect( + getComputedStyle(container.firstChild, '::after').getPropertyValue('border-top-style'), + ).to.equal('dashed'); }); }); }); From eff0d1e42a91694900bf7f7b3a74e14b9ea1abeb Mon Sep 17 00:00:00 2001 From: anuujj Date: Sat, 13 Jul 2024 12:25:12 +0530 Subject: [PATCH 08/11] test lint fix --- packages/mui-material/src/Divider/Divider.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index ea23889a6b5968..2293c437b72c2c 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -108,6 +108,7 @@ describe('', () => { getComputedStyle(container.firstChild, '::after').getPropertyValue('border-left-style'), ).to.equal('dashed'); }); + it('should set the border-top-style dashed in before and after pseudoclass if orientation="horizontal', () => { const { container } = render( content, From 89dcd02fb7f8b82e522bbec4fa379ecd4b8f07bb Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 13 Jul 2024 18:50:59 +0530 Subject: [PATCH 09/11] fix test structure --- .../mui-material/src/Divider/Divider.test.js | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 2293c437b72c2c..24b5cd01ac343e 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -1,19 +1,12 @@ 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'; -import { styled } from '..'; describe('', () => { const { render } = createRenderer(); - const StyledDivider = styled(Divider)(() => ({ - '&::before': { - width: '4.75rem', - flex: '0 0 3.75rem', - }, - borderStyle: `dashed`, - })); describeConformance(, () => ({ classes, @@ -92,14 +85,16 @@ describe('', () => { }); }); - describe('styled border: borderStyle dashed', () => { - before(function beforeHook() { - if (/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } - }); + describe('custom border style', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + + const StyledDivider = styled(Divider)(() => ({ + borderStyle: 'dashed', + })); - it('should set the border-left-style dashed in before and after pseudoclass if orientation="vertical', () => { + it('should set the dashed border-left-style in before and after pseudo-elements when orientation is vertical', () => { const { container } = render(content); expect( getComputedStyle(container.firstChild, '::before').getPropertyValue('border-left-style'), @@ -109,7 +104,7 @@ describe('', () => { ).to.equal('dashed'); }); - it('should set the border-top-style dashed in before and after pseudoclass if orientation="horizontal', () => { + it('should set the dashed border-top-style in before and after pseudo-elements when orientation is horizontal', () => { const { container } = render( content, ); From 8fa8ac8f7e6f2cb7893f737d9a1d81b29e68d1ce Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 13 Jul 2024 19:02:02 +0530 Subject: [PATCH 10/11] add back before hook --- packages/mui-material/src/Divider/Divider.test.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 24b5cd01ac343e..7f71c7e59ce7f0 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -86,9 +86,11 @@ describe('', () => { }); describe('custom border style', function test() { - if (/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } + before(function beforeHook() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + }); const StyledDivider = styled(Divider)(() => ({ borderStyle: 'dashed', From c95a5c07335a747e9e97d4953cc7871ab01ca251 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 24 Jul 2024 12:30:04 -0400 Subject: [PATCH 11/11] Trigger CI