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,