From 0e82a2b51bdaf9b2508270d2c45e2632bd962a1f Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 6 Jan 2023 18:16:18 +0100 Subject: [PATCH 1/5] fix: added border with correct contrast ratio in HC in MessageBar --- .../MessageBar/MessageBar.styles.ts | 37 +++++++++++++------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts index 2bdf67fdff79c0..3f0b00118a7da2 100644 --- a/packages/react/src/components/MessageBar/MessageBar.styles.ts +++ b/packages/react/src/components/MessageBar/MessageBar.styles.ts @@ -1,5 +1,6 @@ import { HighContrastSelector, + HighContrastSelectorWhite, ScreenWidthMaxSmall, getScreenSelector, getGlobalClassNames, @@ -43,15 +44,6 @@ const backgroundColor: { [key: string]: keyof ISemanticColors } = { [MessageBarType.info]: 'infoBackground', }; -const highContrastBackgroundColor: { [key: string]: string } = { - [MessageBarType.error]: 'rgba(255, 0, 0, 0.3)', - [MessageBarType.blocked]: 'rgba(255, 0, 0, 0.3)', - [MessageBarType.success]: 'rgba(48, 241, 73, 0.3)', - [MessageBarType.warning]: 'rgba(255, 254, 57, 0.3)', - [MessageBarType.severeWarning]: 'rgba(255, 0, 0, 0.3)', - [MessageBarType.info]: 'Window', -}; - const iconColor: { [key: string]: keyof ISemanticColors } = { [MessageBarType.error]: 'errorIcon', [MessageBarType.blocked]: 'errorIcon', @@ -71,7 +63,7 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { expandSingleLine, messageBarType = MessageBarType.info, } = props; - const { semanticColors, fonts } = theme; + const { semanticColors, fonts, palette } = theme; const SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall); @@ -116,6 +108,24 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { }, ]; + const highContrastBorderColor: { [key: string]: string } = { + [MessageBarType.error]: 'rgba(255, 0, 0)', + [MessageBarType.blocked]: 'rgba(255, 0, 0)', + [MessageBarType.success]: palette.greenLight, + [MessageBarType.warning]: palette.yellowLight, + [MessageBarType.severeWarning]: 'rgba(255, 0, 0)', + [MessageBarType.info]: 'WindowText', + }; + + const highContrastWhiteBorderColor: { [key: string]: string } = { + [MessageBarType.error]: palette.red, + [MessageBarType.blocked]: palette.red, + [MessageBarType.success]: palette.green, + [MessageBarType.warning]: 'rgba(150, 100, 0)', + [MessageBarType.severeWarning]: palette.orange, + [MessageBarType.info]: 'WindowText', + }; + return { root: [ classNames.root, @@ -146,10 +156,13 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { }, [HighContrastSelector]: { ...getHighContrastNoAdjustStyle(), - background: highContrastBackgroundColor[messageBarType], - border: '1px solid WindowText', + background: 'transparent', + border: `1px solid ${highContrastBorderColor[messageBarType]}`, color: 'WindowText', }, + [HighContrastSelectorWhite]: { + border: `1px solid ${highContrastWhiteBorderColor[messageBarType]}`, + }, }, }, isMultiline && { From 453cccf8368f880815fd809daae0d21003df8e8b Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 6 Jan 2023 18:36:40 +0100 Subject: [PATCH 2/5] Changed files --- ...luentui-react-a39133e5-d27c-4a7e-8493-1324e7905f01.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-a39133e5-d27c-4a7e-8493-1324e7905f01.json diff --git a/change/@fluentui-react-a39133e5-d27c-4a7e-8493-1324e7905f01.json b/change/@fluentui-react-a39133e5-d27c-4a7e-8493-1324e7905f01.json new file mode 100644 index 00000000000000..10a3a2791f9224 --- /dev/null +++ b/change/@fluentui-react-a39133e5-d27c-4a7e-8493-1324e7905f01.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: added border with correct contrast ratio in HC in MessageBar", + "packageName": "@fluentui/react", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} From 952589c831e4b956b35034f7fa6c87c2917c433b Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 10 Jan 2023 13:29:29 +0100 Subject: [PATCH 3/5] Fixed bug with disappearing border on 100% width --- packages/react/src/components/MessageBar/MessageBar.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts index 3f0b00118a7da2..a3fbd80165dc16 100644 --- a/packages/react/src/components/MessageBar/MessageBar.styles.ts +++ b/packages/react/src/components/MessageBar/MessageBar.styles.ts @@ -140,6 +140,7 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { !isMultiline && truncated && classNames.expandingSingleLine, { background: semanticColors[backgroundColor[messageBarType]], + boxSizing: 'border-box', color: semanticColors.messageText, minHeight: 32, width: '100%', From 6f7b0007fa69c94bfbd8393e99db2a19d53a7288 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 10 Jan 2023 17:10:13 +0100 Subject: [PATCH 4/5] Updated snapshots --- .../__snapshots__/MessageBar.test.tsx.snap | 88 ++++++++++++++----- 1 file changed, 68 insertions(+), 20 deletions(-) diff --git a/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap index 745a3ac67ac6fb..404b3af800156e 100644 --- a/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap +++ b/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap @@ -9,6 +9,7 @@ exports[`MessageBar snapshots renders MessageBar correctly 1`] = ` -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: #f3f2f1; + box-sizing: border-box; color: #323130; display: flex; flex-direction: column; @@ -27,11 +28,14 @@ exports[`MessageBar snapshots renders MessageBar correctly 1`] = ` } @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; - background: Window; + background: transparent; border: 1px solid WindowText; color: WindowText; forced-color-adjust: none; } + @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& { + border: 1px solid WindowText; + } >
Date: Fri, 13 Jan 2023 13:16:00 +0100 Subject: [PATCH 5/5] PR fix --- .../MessageBar/MessageBar.styles.ts | 38 +++++++++---------- .../__snapshots__/MessageBar.test.tsx.snap | 12 +++--- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts index a3fbd80165dc16..5fca8a237c7bb9 100644 --- a/packages/react/src/components/MessageBar/MessageBar.styles.ts +++ b/packages/react/src/components/MessageBar/MessageBar.styles.ts @@ -53,6 +53,24 @@ const iconColor: { [key: string]: keyof ISemanticColors } = { [MessageBarType.info]: 'infoIcon', }; +const highContrastBorderColor: { [key: string]: string } = { + [MessageBarType.error]: '#ff0000', + [MessageBarType.blocked]: '#ff0000', + [MessageBarType.success]: '#bad80a', + [MessageBarType.warning]: '#fff100', + [MessageBarType.severeWarning]: '#ff0000', + [MessageBarType.info]: 'WindowText', +}; + +const highContrastWhiteBorderColor: { [key: string]: string } = { + [MessageBarType.error]: '#e81123', + [MessageBarType.blocked]: '#e81123', + [MessageBarType.success]: '#107c10', + [MessageBarType.warning]: '#966400', + [MessageBarType.severeWarning]: '#d83b01', + [MessageBarType.info]: 'WindowText', +}; + export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { const { theme, @@ -63,7 +81,7 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { expandSingleLine, messageBarType = MessageBarType.info, } = props; - const { semanticColors, fonts, palette } = theme; + const { semanticColors, fonts } = theme; const SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall); @@ -108,24 +126,6 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => { }, ]; - const highContrastBorderColor: { [key: string]: string } = { - [MessageBarType.error]: 'rgba(255, 0, 0)', - [MessageBarType.blocked]: 'rgba(255, 0, 0)', - [MessageBarType.success]: palette.greenLight, - [MessageBarType.warning]: palette.yellowLight, - [MessageBarType.severeWarning]: 'rgba(255, 0, 0)', - [MessageBarType.info]: 'WindowText', - }; - - const highContrastWhiteBorderColor: { [key: string]: string } = { - [MessageBarType.error]: palette.red, - [MessageBarType.blocked]: palette.red, - [MessageBarType.success]: palette.green, - [MessageBarType.warning]: 'rgba(150, 100, 0)', - [MessageBarType.severeWarning]: palette.orange, - [MessageBarType.info]: 'WindowText', - }; - return { root: [ classNames.root, diff --git a/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap index 404b3af800156e..323192151eed1f 100644 --- a/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap +++ b/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap @@ -160,7 +160,7 @@ exports[`MessageBar snapshots renders a error MessageBar correctly 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; background: transparent; - border: 1px solid rgba(255, 0, 0); + border: 1px solid #ff0000; color: WindowText; forced-color-adjust: none; } @@ -551,7 +551,7 @@ exports[`MessageBar snapshots renders a multiline error MessageBar correctly 1`] @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; background: transparent; - border: 1px solid rgba(255, 0, 0); + border: 1px solid #ff0000; color: WindowText; forced-color-adjust: none; } @@ -812,7 +812,7 @@ exports[`MessageBar snapshots renders a multiline severeWarning MessageBar corre @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& { -ms-high-contrast-adjust: none; background: transparent; - border: 1px solid rgba(255, 0, 0); + border: 1px solid #ff0000; color: WindowText; forced-color-adjust: none; } @@ -1079,7 +1079,7 @@ exports[`MessageBar snapshots renders a multiline warning MessageBar correctly 1 forced-color-adjust: none; } @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& { - border: 1px solid rgba(150, 100, 0); + border: 1px solid #966400; } >