From 3b686256b2da67807075542bf9f1bb62cb3dc091 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 16 Apr 2019 22:38:38 -0700 Subject: [PATCH 1/6] fixing bug with the at mentione being the wrong color --- .../Chat/Types/ChatMessageExampleBadge.shorthand.tsx | 6 ++++-- .../components/Chat/chatMessageVariables.ts | 4 ++++ .../src/themes/teams/components/Chat/chatMessageStyles.ts | 2 +- .../themes/teams/components/Chat/chatMessageVariables.ts | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx index 676aeb0fdc..b08ea9185d 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx @@ -16,9 +16,10 @@ const items = [ timestamp="Yesterday, 10:15 PM" mine badge={{ - icon: 'exclamation', + icon: 'redbang', }} badgePosition="start" + variables={{ isImportant: true }} /> ), }, @@ -34,8 +35,9 @@ const items = [ author="Jane Doe" timestamp="Yesterday, 10:15 PM" badge={{ - icon: 'at', + icon: 'mention', }} + variables={{ hasMention: true }} /> ), }, diff --git a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts index 5298ef31b4..26bee754ff 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -7,5 +7,9 @@ export default (siteVars: any): Partial => { color: siteVars.white, contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?) border: `1px solid ${siteVars.white}`, + hasMentionColor: siteVars.accessibleYellow, + hasMentionNubbinColor: siteVars.accessibleYellow, + isImportantColor: siteVars.accessibleYellow, + badgeTextColor: siteVars.colors.black, } } diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts index 39f33b3234..e256e151ca 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -123,7 +123,7 @@ const chatMessageStyles: ComponentSlotStylesInput< badge: ({ props: p, variables: v }) => { const sidePosition = p.badgePosition === 'start' ? 'left' : 'right' return { - backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor, + backgroundColor: v.hasMention ? v.hasMentionNubbinColor : v.isImportantColor, color: v.badgeTextColor, boxShadow: v.badgeShadow, position: 'absolute', diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index b14e4a0b1f..86cb6caf14 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -19,6 +19,7 @@ export interface ChatMessageVariables { isImportant: boolean hasMention: boolean hasMentionColor: string + hasMentionNubbinColor: string isImportantColor: string badgeTextColor: string reactionGroupMarginLeft: string @@ -43,7 +44,8 @@ export default (siteVars): ChatMessageVariables => ({ badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, hasMention: false, - hasMentionColor: siteVars.naturalColors.darkOrange[400], + hasMentionColor: siteVars.naturalColors.orange[900], + hasMentionNubbinColor: siteVars.naturalColors.darkOrange[400], // orange[400] when the new palette pr is checked in isImportantColor: siteVars.colors.red[900], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), From 95803e0149f6d5e4c36b9967b45afb98c7ba07c4 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 16 Apr 2019 22:42:39 -0700 Subject: [PATCH 2/6] adding screener tests for all themes --- .../Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts new file mode 100644 index 0000000000..81b7a6894d --- /dev/null +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts @@ -0,0 +1,3 @@ +const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] } + +export default config From 066a6f31e392fde174594050dbbf48753826569a Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 16 Apr 2019 22:54:19 -0700 Subject: [PATCH 3/6] adding entry in changelog for themeing of mentions in chat messages --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 23465ea4d1..14654ee0d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195)) - Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208)) - Fix `content` prop type in `Dialog` @layershifter ([#1212](https://github.com/stardust-ui/react/pull/1212)) +- Fix themeing for at mention nubbin and left bar in `ChatMessage` @codepretty ([#1232](https://github.com/stardust-ui/react/pull/1232)) - Add `keyboard` up & down key controls for the `Tree` component @priyankar205 ([#1219](https://github.com/stardust-ui/react/pull/1219)) - Simplify DOM structure in `List` component when not all slot are defined @layershifter ([#1218](https://github.com/stardust-ui/react/pull/1218)) From 7985b9f78ff7c5d70eb696d0d8d363bcc9670bab Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 17 Apr 2019 16:55:50 -0700 Subject: [PATCH 4/6] update changelog entry to specify 'Teams' theme and '[redlines]' --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd67f97626..fdd93e062e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,7 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195)) - Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208)) - Fix `content` prop type in `Dialog` @layershifter ([#1212](https://github.com/stardust-ui/react/pull/1212)) -- Fix themeing for at mention nubbin and left bar in `ChatMessage` @codepretty ([#1232](https://github.com/stardust-ui/react/pull/1232)) +- Fix themeing for Teams theme at mention nubbin and left bar in `ChatMessage` [redlines] @codepretty ([#1232](https://github.com/stardust-ui/react/pull/1232)) - Add `keyboard` up & down key controls for the `Tree` component @priyankar205 ([#1219](https://github.com/stardust-ui/react/pull/1219)) - Simplify DOM structure in `List` component when not all slot are defined @layershifter ([#1218](https://github.com/stardust-ui/react/pull/1218)) - `Menu` as `Toolbar` - left/right arrow keys should not activate prev/next parent when focus in in the toolbar submenu @sophieH29 ([#1199](https://github.com/stardust-ui/react/pull/1199)) From 7c614e7d341eb1d6c9d0c2ec8437094b12b8d094 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 17 Apr 2019 18:59:11 -0700 Subject: [PATCH 5/6] updated Teams dark theme at-mention and important colors --- .../themes/teams-dark/components/Chat/chatMessageVariables.ts | 2 ++ .../src/themes/teams/components/Chat/chatMessageVariables.ts | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 9228d1ab1d..ddaaf3413d 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -6,5 +6,7 @@ export default (siteVars: any): Partial => { backgroundColorMine: '#3B3C54', color: siteVars.colors.white, contentFocusOutlineColor: siteVars.brand, + hasMentionNubbinColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in + isImportantColor: '#e73550', // red[300] when the new palette pr is checked in } } diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index 86cb6caf14..f206b873d0 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -44,9 +44,9 @@ export default (siteVars): ChatMessageVariables => ({ badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, hasMention: false, - hasMentionColor: siteVars.naturalColors.orange[900], + hasMentionColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in hasMentionNubbinColor: siteVars.naturalColors.darkOrange[400], // orange[400] when the new palette pr is checked in - isImportantColor: siteVars.colors.red[900], + isImportantColor: siteVars.colors.red[900], // red[400] when the new palette pr is checked in badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), timestampColorMine: siteVars.gray02, From 3fb9f30895f009a833348931df26d8ce844da199 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 17 Apr 2019 19:13:58 -0700 Subject: [PATCH 6/6] setting high contrast variable for timestampColorMine --- .../teams-high-contrast/components/Chat/chatMessageVariables.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts index 26bee754ff..6727b67b4a 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -11,5 +11,6 @@ export default (siteVars: any): Partial => { hasMentionNubbinColor: siteVars.accessibleYellow, isImportantColor: siteVars.accessibleYellow, badgeTextColor: siteVars.colors.black, + timestampColorMine: siteVars.colors.white, } }