From 2b7e8ef20511449ecb3a46236c8a54fabb3c525c Mon Sep 17 00:00:00 2001 From: Anuj <69952370+anuujj@users.noreply.github.com> Date: Thu, 25 Jul 2024 01:28:52 +0530 Subject: [PATCH 1/5] [material-ui][Divider] Enable borderStyle enhancement in divider with children (#42715) --- packages/mui-material/src/Divider/Divider.js | 45 ++++++++++++++++--- .../mui-material/src/Divider/Divider.test.js | 37 ++++++++++++++- 2 files changed, 76 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 26784a02c5daee..e78d0a50aa24e7 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -106,14 +106,48 @@ const DividerRoot = styled('div', { content: '""', alignSelf: 'center', }, - }), - }), - ({ theme, ownerState }) => ({ - ...(ownerState.children && - ownerState.orientation !== 'vertical' && { + }, + { + props: { + orientation: 'vertical', + }, + style: { + height: '100%', + borderBottomWidth: 0, + borderRightWidth: 'thin', + }, + }, + { + props: { + flexItem: true, + }, + style: { + alignSelf: 'stretch', + height: 'auto', + }, + }, + { + props: ({ ownerState }) => !!ownerState.children, + style: { + display: 'flex', + whiteSpace: 'nowrap', + textAlign: 'center', + border: 0, + borderTopStyle: 'solid', + borderLeftStyle: 'solid', + '&::before, &::after': { + content: '""', + alignSelf: 'center', + }, + }, + }, + { + props: ({ ownerState }) => ownerState.children && ownerState.orientation !== 'vertical', + style: { '&::before, &::after': { width: '100%', borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, + borderTopStyle: 'inherit', }, }), }), @@ -124,6 +158,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 index 2dfd208d321d3e..7f71c7e59ce7f0 100644 --- 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 { 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('', () => { 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(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 dashed border-top-style in before and after pseudo-elements when orientation is 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'); + }); + }); }); describe('prop: variant', () => { From e7d63a251bad1cef10a03619368b961f213bc87f Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 25 Jul 2024 18:21:28 +0530 Subject: [PATCH 2/5] fix logic --- packages/mui-material/src/Divider/Divider.js | 45 +++----------------- 1 file changed, 7 insertions(+), 38 deletions(-) diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index e78d0a50aa24e7..a356c9760d10fb 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -102,48 +102,17 @@ const DividerRoot = styled('div', { whiteSpace: 'nowrap', textAlign: 'center', border: 0, + borderTopStyle: 'solid', + borderLeftStyle: 'solid', '&::before, &::after': { content: '""', alignSelf: 'center', }, - }, - { - props: { - orientation: 'vertical', - }, - style: { - height: '100%', - borderBottomWidth: 0, - borderRightWidth: 'thin', - }, - }, - { - props: { - flexItem: true, - }, - style: { - alignSelf: 'stretch', - height: 'auto', - }, - }, - { - props: ({ ownerState }) => !!ownerState.children, - style: { - display: 'flex', - whiteSpace: 'nowrap', - textAlign: 'center', - border: 0, - borderTopStyle: 'solid', - borderLeftStyle: 'solid', - '&::before, &::after': { - content: '""', - alignSelf: 'center', - }, - }, - }, - { - props: ({ ownerState }) => ownerState.children && ownerState.orientation !== 'vertical', - style: { + }), + }), + ({ theme, ownerState }) => ({ + ...(ownerState.children && + ownerState.orientation !== 'vertical' && { '&::before, &::after': { width: '100%', borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, From a6a6b295155cbc25052f69c52365d59aa4591766 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 25 Jul 2024 18:53:36 +0530 Subject: [PATCH 3/5] change to @mui-internal/test-utils --- package.json | 3 --- packages/mui-material/src/Divider/Divider.test.js | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index b5ed700d23213d..897bdcbd824517 100644 --- a/package.json +++ b/package.json @@ -191,9 +191,6 @@ "yargs": "^17.7.2" }, "packageManager": "pnpm@9.4.0", - "engines": { - "pnpm": "9.4.0" - }, "resolutions": { "@babel/core": "^7.23.9", "@babel/code-frame": "^7.23.5", diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 7f71c7e59ce7f0..0d2eccb6a6b09f 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/packages/mui-material/src/Divider/Divider.test.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer } from '@mui/internal-test-utils'; +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'; From c10879da249ed56f87e09311d79ce661a1c597ba Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 25 Jul 2024 18:54:33 +0530 Subject: [PATCH 4/5] revert package.json change --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 897bdcbd824517..b5ed700d23213d 100644 --- a/package.json +++ b/package.json @@ -191,6 +191,9 @@ "yargs": "^17.7.2" }, "packageManager": "pnpm@9.4.0", + "engines": { + "pnpm": "9.4.0" + }, "resolutions": { "@babel/core": "^7.23.9", "@babel/code-frame": "^7.23.5", From e924c9c6181924fdf6d65d6828afa580e3740eee Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Thu, 25 Jul 2024 16:59:41 -0400 Subject: [PATCH 5/5] Trigger CI