diff --git a/CHANGELOG.md b/CHANGELOG.md index df175e857c..e1874169dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Add `Attachment` component @levithomason ([#220](https://github.com/stardust-ui/react/pull/220)) +- Add `atMention="me"` value to Text API @codepretty ([#277](https://github.com/stardust-ui/react/pull/277)) ### Documentation - Add `Theming` guide @almedint, @levithomason ([#152](https://github.com/stardust-ui/react/pull/152)) diff --git a/docs/src/examples/components/Text/Variations/TextExampleAtMention.shorthand.tsx b/docs/src/examples/components/Text/Variations/TextExampleAtMention.shorthand.tsx index 1260064467..2db91ee587 100644 --- a/docs/src/examples/components/Text/Variations/TextExampleAtMention.shorthand.tsx +++ b/docs/src/examples/components/Text/Variations/TextExampleAtMention.shorthand.tsx @@ -1,6 +1,12 @@ import React from 'react' import { Text } from '@stardust-ui/react' -const TextExampleAtMentionShorthand = () => +const TextExampleAtMentionShorthand = () => ( +
+ +
+ +
+) export default TextExampleAtMentionShorthand diff --git a/docs/src/examples/components/Text/Variations/TextExampleAtMention.tsx b/docs/src/examples/components/Text/Variations/TextExampleAtMention.tsx index c3be095005..c16ce492f4 100644 --- a/docs/src/examples/components/Text/Variations/TextExampleAtMention.tsx +++ b/docs/src/examples/components/Text/Variations/TextExampleAtMention.tsx @@ -1,6 +1,12 @@ import React from 'react' import { Text } from '@stardust-ui/react' -const TextExampleAtMention = () => @Russell Wilson +const TextExampleAtMention = () => ( +
+ @someone +
+ @me +
+) export default TextExampleAtMention diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 41d30be669..92b019a74e 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -8,7 +8,7 @@ import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/them export interface ITextProps { as?: any - atMention?: boolean + atMention?: boolean | 'me' className?: string content?: any disabled?: boolean @@ -41,8 +41,8 @@ class Text extends UIComponent, any> { /** Change the default element type of the Text component */ as: customPropTypes.as, - /** Set as @mention Text component */ - atMention: PropTypes.bool, + /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */ + atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]), /** Additional CSS class name(s) to apply. */ className: PropTypes.string, diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index b775161f4a..af930c9b45 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -27,7 +27,13 @@ export default { }: TextStylesParams): ICSSInJSStyle => { return { ...(truncated && truncateStyle), - ...(atMention && { color: v.atMentionTextColor }), + ...(atMention === true && { + color: v.atMentionOtherTextColor, + }), + ...(atMention === 'me' && { + color: v.atMentionMeTextColor, + fontWeight: v.atMentionMeFontWeight, + }), ...(disabled && { color: v.disabledTextColor }), ...(error && { color: v.errorTextColor }), ...(success && { color: v.successTextColor }), diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index 3094dea4fe..d31e1710b6 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -6,7 +6,9 @@ export interface ITextVariables { textWeightRegular: number textWeightSemibold: number textWeightBold: number - atMentionTextColor: string + atMentionMeFontWeight: number + atMentionMeTextColor: string + atMentionOtherTextColor: string disabledTextColor: string errorTextColor: string successTextColor: string @@ -32,7 +34,10 @@ export interface ITextVariables { export default (siteVariables): ITextVariables => { return { - atMentionTextColor: siteVariables.orange04, + atMentionOtherTextColor: siteVariables.brand06, + atMentionMeTextColor: siteVariables.orange04, + atMentionMeFontWeight: siteVariables.fontWeightBold, + disabledTextColor: siteVariables.gray06, errorTextColor: siteVariables.red, successTextColor: siteVariables.green04,