From ee87c87d51a45467a78603c04f26e1a67e2cf60a Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 24 Oct 2023 18:18:15 +0200 Subject: [PATCH 1/8] fix: show border separator when high contrast mode --- .../react-drawer/src/shared/useDrawerBaseStyles.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts index 40fec51ab36a06..bfd606f08fcad2 100644 --- a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts +++ b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts @@ -48,10 +48,14 @@ const useDrawerStyles = makeStyles({ /* Positioning */ start: { + ...shorthands.borderRight(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke), + left: 0, right: 'auto', }, end: { + ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke), + right: 0, left: 'auto', }, From 57b1dc7ed6668f0bdd52342792fdc48abd1e5066 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 24 Oct 2023 18:19:13 +0200 Subject: [PATCH 2/8] fix: disable backdrop transition when reduced motion --- .../components/DrawerOverlay/useDrawerOverlayStyles.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 2ac2952e30e454..c893ee606d0113 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -59,6 +59,10 @@ const useBackdropStyles = makeStyles({ transitionProperty: 'opacity', transitionTimingFunction: tokens.curveEasyEase, willChange: 'opacity', + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.001ms', + }, }, visible: { From dbfc90e992f7408d481ba0f96205c90b6caa3e15 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 24 Oct 2023 18:20:29 +0200 Subject: [PATCH 3/8] fix: add missing changelog --- ...-react-drawer-b7d10669-1f23-47cb-bc3e-21e001e940f1.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-drawer-b7d10669-1f23-47cb-bc3e-21e001e940f1.json diff --git a/change/@fluentui-react-drawer-b7d10669-1f23-47cb-bc3e-21e001e940f1.json b/change/@fluentui-react-drawer-b7d10669-1f23-47cb-bc3e-21e001e940f1.json new file mode 100644 index 00000000000000..d680d56f4909d0 --- /dev/null +++ b/change/@fluentui-react-drawer-b7d10669-1f23-47cb-bc3e-21e001e940f1.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: improve high contrast mode", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} From dcf4daae946b6ad605b02eea3eaabdd4c0ae8436 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 24 Oct 2023 20:53:29 +0200 Subject: [PATCH 4/8] fix: update cypress tests --- .../src/components/DrawerInline/DrawerInline.cy.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx index e3723743604dad..e5deac5ff98264 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx @@ -17,22 +17,22 @@ describe('DrawerInline', () => { it('should not render any border when separator is false', () => { mountFluent(); - cy.get('#drawer').should('not.have.css', `border-right-width`, '1px'); - cy.get('#drawer').should('not.have.css', `border-left-width`, '1px'); + cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); + cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); }); it('should render correct border when when position is `start`', () => { mountFluent(); - cy.get('#drawer').should('not.have.css', `border-left-width`, '1px'); - cy.get('#drawer').should('have.css', `border-right-width`, '1px'); + cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); + cy.get('#drawer').should('not.have.css', `border-right-color`, '1px'); }); it('should render correct border when when position is `end`', () => { mountFluent(); - cy.get('#drawer').should('not.have.css', `border-right-width`, '1px'); - cy.get('#drawer').should('have.css', `border-left-width`, '1px'); + cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); + cy.get('#drawer').should('not.have.css', `border-left-color`, 'transparent'); }); }); }); From 2ec20a028f43df35e97a99439f0eef7802ba58ec Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 24 Oct 2023 20:53:56 +0200 Subject: [PATCH 5/8] fix: update cypress tests --- .../src/components/DrawerInline/DrawerInline.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx index e5deac5ff98264..1cab5c24a238ba 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx @@ -25,7 +25,7 @@ describe('DrawerInline', () => { mountFluent(); cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); - cy.get('#drawer').should('not.have.css', `border-right-color`, '1px'); + cy.get('#drawer').should('not.have.css', `border-right-color`, 'transparent'); }); it('should render correct border when when position is `end`', () => { From 617450429c41fb928fc0cea72ced3cf93b600729 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 25 Oct 2023 13:05:35 +0200 Subject: [PATCH 6/8] fix: update cypress tests --- .../components/DrawerInline/DrawerInline.cy.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx index 1cab5c24a238ba..c689a686ae9c45 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx @@ -14,25 +14,30 @@ describe('DrawerInline', () => { testDrawerBaseScenarios(DrawerInline); describe('separator prop', () => { - it('should not render any border when separator is false', () => { + it('should not render any border when separator is false and position is start', () => { mountFluent(); cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); + }); + + it('should not render any border when separator is false and position is end', () => { + mountFluent(); + cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); }); it('should render correct border when when position is `start`', () => { mountFluent(); - cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); - cy.get('#drawer').should('not.have.css', `border-right-color`, 'transparent'); + cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); + cy.get('#drawer').should('not.have.css', `border-left-color`, 'transparent'); }); it('should render correct border when when position is `end`', () => { mountFluent(); - cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); - cy.get('#drawer').should('not.have.css', `border-left-color`, 'transparent'); + cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); + cy.get('#drawer').should('not.have.css', `border-right-color`, 'transparent'); }); }); }); From 65db07ba7da5ee071dd2a44db6cb48e632263170 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 25 Oct 2023 13:53:39 +0200 Subject: [PATCH 7/8] fix: update cypress tests --- .../src/components/DrawerInline/DrawerInline.cy.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx index c689a686ae9c45..b2561d2c78de35 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx @@ -14,18 +14,6 @@ describe('DrawerInline', () => { testDrawerBaseScenarios(DrawerInline); describe('separator prop', () => { - it('should not render any border when separator is false and position is start', () => { - mountFluent(); - - cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); - }); - - it('should not render any border when separator is false and position is end', () => { - mountFluent(); - - cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); - }); - it('should render correct border when when position is `start`', () => { mountFluent(); From 6a862389c2c47f17db37b81cd99b7fcf56ec2246 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 25 Oct 2023 14:32:08 +0200 Subject: [PATCH 8/8] fix: update cypress tests --- .../src/components/DrawerInline/DrawerInline.cy.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx index b2561d2c78de35..383c7ffcdd3d7d 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx @@ -17,15 +17,13 @@ describe('DrawerInline', () => { it('should render correct border when when position is `start`', () => { mountFluent(); - cy.get('#drawer').should('have.css', `border-right-color`, 'transparent'); - cy.get('#drawer').should('not.have.css', `border-left-color`, 'transparent'); + cy.get('#drawer').should('not.have.css', `border-right-color`, 'transparent'); }); it('should render correct border when when position is `end`', () => { mountFluent(); - cy.get('#drawer').should('have.css', `border-left-color`, 'transparent'); - cy.get('#drawer').should('not.have.css', `border-right-color`, 'transparent'); + cy.get('#drawer').should('not.have.css', `border-left-color`, 'transparent'); }); }); });