Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(Chat): update ChatMessage styles in Teams themes #1246

Merged
layershifter merged 10 commits into from
Apr 24, 2019
Merged

fix(Chat): update ChatMessage styles in Teams themes #1246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8734cd8
fix propTypes and warnings
layershifter Apr 22, 2019
f908a09
fix styles
layershifter Apr 22, 2019
7606ddb
fix other themes
layershifter Apr 22, 2019
5b85ff3
add changelog entry
layershifter Apr 22, 2019
d4b058b
update colors
layershifter Apr 24, 2019
6b54f3b
Merge branch 'master' of https://github.com/stardust-ui/react into fi…
layershifter Apr 24, 2019
e6d0f09
move changelog entry
layershifter Apr 24, 2019
ba35ad3
Merge branches 'fix/chat-styles' and 'master' of https://github.com/s…
layershifter Apr 24, 2019
7a1760c
Merge branches 'fix/chat-styles' and 'master' of https://github.com/s…
layershifter Apr 24, 2019
8736193
update ch entry
layershifter Apr 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

## [Unreleased]

### Fixes
- Update `ChatMessage` styles in Teams themes @layershifter ([#1246](https://github.com/stardust-ui/react/pull/1246))

<!--------------------------------[ v0.29.0 ]------------------------------- -->
## [v0.29.0](https://github.com/stardust-ui/react/tree/v0.29.0) (2019-04-24)
[Compare changes](https://github.com/stardust-ui/react/compare/v0.28.1...v0.29.0)
Expand Down
7 changes: 5 additions & 2 deletions docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { Avatar, Chat } from '@stardust-ui/react'
import * as React from 'react'

const reactions = [{ icon: 'thumbs up', content: '1K' }, { icon: 'thumbs down', content: 5 }]
const reactions = [
{ key: 'up', icon: 'thumbs up', content: '1K' },
{ key: 'down', icon: 'thumbs down', content: 5 },
]

const items = [
{
Expand All @@ -27,7 +30,7 @@ const items = [
message: {
content: (
<Chat.Message
reactionGroup={[{ icon: 'thumbs up', content: '8' }]}
reactionGroup={[{ key: 'up', icon: 'thumbs up', content: '8' }]}
content="I'm back!"
author="John Doe"
timestamp="Yesterday, 10:15 PM"
Expand Down
8 changes: 3 additions & 5 deletions docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const items = [
message: {
content: (
<Chat.Message
reactionGroup={{ items: reactions }}
reactionGroupPosition={'end'}
reactionGroup={reactions}
reactionGroupPosition="end"
content="I'm back!"
author="John Doe"
timestamp="Yesterday, 10:15 PM"
Expand All @@ -50,9 +50,7 @@ const items = [
message: {
content: (
<Chat.Message
reactionGroup={{
items: reactions,
}}
reactionGroup={reactions}
content="Hi"
author="Jane Doe"
timestamp="Yesterday, 10:15 PM"
Expand Down
5 changes: 4 additions & 1 deletion docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import * as React from 'react'
import { Avatar, Chat, Provider } from '@stardust-ui/react'

const reactions = [{ icon: 'thumbs up', content: '1K' }, { icon: 'thumbs down', content: 5 }]
const reactions = [
{ key: 'up', icon: 'thumbs up', content: '1K' },
{ key: 'down', icon: 'thumbs down', content: 5 },
]

const janeAvatar = {
image: 'public/images/avatar/small/ade.jpg',
Expand Down
5 changes: 4 additions & 1 deletion packages/react/src/components/Chat/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,10 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
timestamp: customPropTypes.itemShorthand,
onBlur: PropTypes.func,
onFocus: PropTypes.func,
reactionGroup: customPropTypes.itemShorthand,
reactionGroup: PropTypes.oneOfType([
Copy link
Contributor

@mnajdova mnajdova Apr 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 My bad for not updating this change. We should update this on other places (Menu is the first one that pops out of my mind), but I will take care of those changes.

customPropTypes.collectionShorthand,
customPropTypes.itemShorthand,
]),
reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
}

Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
return {
backgroundColor: siteVars.gray10,
backgroundColorMine: '#3B3C54',
authorColor: siteVars.gray02, // will be gray[250] with new palette
contentColor: siteVars.colors.white,
color: siteVars.colors.white,
contentFocusOutlineColor: siteVars.brand,
hasMentionNubbinColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
return {
backgroundColor: siteVars.black,
backgroundColorMine: siteVars.black,
authorColor: siteVars.white,
contentColor: siteVars.white,
color: siteVars.white,
contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?)
border: `1px solid ${siteVars.white}`,
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ const chatMessageStyles: ComponentSlotStylesInput<

author: ({ props: p, variables: v }): ICSSInJSStyle => ({
...((p.mine || p.attached === 'bottom' || p.attached === true) && screenReaderContainerStyles),
color: v.authorColor,
marginRight: v.authorMarginRight,
marginBottom: v.headerMarginBottom,
fontWeight: v.authorFontWeight,
Expand All @@ -109,6 +110,7 @@ const chatMessageStyles: ComponentSlotStylesInput<
}),

content: ({ props: p, variables: v }): ICSSInJSStyle => ({
color: v.contentColor,
display: 'block',
'& a:focus': {
outline: 'none',
Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ export interface ChatMessageVariables {
offset: string
padding: string
authorMarginRight: string
authorColor: string
authorFontWeight: number
headerMarginBottom: string
contentColor: string
contentFocusOutlineColor: string
border: string
badgeShadow: string
Expand All @@ -37,8 +39,10 @@ export default (siteVars): ChatMessageVariables => ({
offset: pxToRem(100),
padding: pxToRem(16),
authorMarginRight: pxToRem(12),
authorFontWeight: siteVars.fontWeightBold,
authorColor: siteVars.gray02, // will be gray[500] with new palette
authorFontWeight: siteVars.fontWeightRegular,
Copy link
Collaborator

@codepretty codepretty Apr 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this even needed if it's regular?

Copy link
Member Author

@layershifter layershifter Apr 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, we don't need it. But we already have this variable and I don't want to remove it because it will be a breaking change...

headerMarginBottom: pxToRem(2),
contentColor: '#252423', // will be gray[750] with new palette
Copy link
Collaborator

@codepretty codepretty Apr 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a color variable here too. I wonder if we don't need this variable if the color prop above is set to this value.

Copy link
Member Author

@layershifter layershifter Apr 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But color is rgb(64, 64, 64) that points to #404040...

contentFocusOutlineColor: siteVars.colors.primary[500],
border: 'none',
badgeShadow: siteVars.shadowLevel1Darker,
Expand Down