fix(Avatar): Adding dark and contrast theme files for Avatar and Status Indicator.

CHANGELOG.md

@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add warning for rendering components outside provider @Bugaa92 ([#378](https://github.com/stardust-ui/react/pull/378))
 - Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384))
 - Do not render the Attachment's `progress` value to the DOM @levithomason ([#402](https://github.com/stardust-ui/react/pull/402))
+- Add dark theme and contrast theme for Avatar and Status Indicator @bcalvery ([#373](https://github.com/stardust-ui/react/pull/373))
 - Add Segment background color @levithomason ([#408](https://github.com/stardust-ui/react/pull/408))
 - Make `eventStack` subscription logic to be always async @kuzhelov ([#391](https://github.com/stardust-ui/react/pull/391))
 - Fix for dotted focus outline in Firefox for `Button` component in docs @Bugaa92 ([#390](https://github.com/stardust-ui/react/pull/390))
@@ -41,6 +42,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add Focus Trap Zone @sophieH29 ([#239](https://github.com/stardust-ui/react/pull/239))
 - Add compose icons to Teams theme @joheredi ([#396](https://github.com/stardust-ui/react/pull/396))
 - Expose access to input element of `Input` via `inputRef` prop @silviuavram ([#377](https://github.com/stardust-ui/react/pull/377))
+- Adding `Partial` utility to enable partial Variables implementations @kuzhelov ([#373](https://github.com/stardust-ui/react/pull/373))
 
 ### Documentation
 - Add `Provider` examples @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))

docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Avatar } from '@stardust-ui/react'
+
+const status = { color: 'green', icon: 'check', title: 'Available' }
+
+const AvatarUsageExampleShorthand = () => (
+  <div>
+    Correct:
+    <div>
+      <div style={{ backgroundColor: 'violet', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'violet' }}
+        />
+      </div>
+      <div style={{ backgroundColor: 'yellowgreen', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'yellowgreen' }}
+        />
+      </div>
+      <div style={{ backgroundColor: 'orangered', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'orangered' }}
+        />
+      </div>
+      <div style={{ backgroundColor: 'cornflowerblue', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'cornflowerblue' }}
+        />
+      </div>
+    </div>
+    Incorrect (Border should not be visible, unless in Contrast theme):
+    <div>
+      <div style={{ backgroundColor: 'violet', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+      <div style={{ backgroundColor: 'yellowgreen', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+      <div style={{ backgroundColor: 'orangered', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+      <div style={{ backgroundColor: 'cornflowerblue', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+    </div>
+  </div>
+)
+
+export default AvatarUsageExampleShorthand

docs/src/examples/components/Avatar/Usage/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Match Background Example"
+      description="The status border for avatar should be set to match whatever background it is on."
+      examplePath="components/Avatar/Usage/AvatarUsageExample"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx

@@ -26,7 +26,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
         icon: 'check',
         title: 'Available',
       }}
-      variables={{ statusBorderColor: 'black' }}
+      variables={{ statusBorderColor: 'orange' }}
     />
     <Text content="Status can have different size for the same avatar size" />
     {defaultAvatar}

docs/src/examples/components/Avatar/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import Types from './Types'
 import Variations from './Variations'
+import Usage from './Usage'
 
 const AvatarExamples = () => (
   <div>
     <Types />
     <Variations />
+    <Usage />
   </div>
 )
 

src/components/Status/Status.tsx

@@ -69,14 +69,15 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
     state: 'unknown',
   }
 
-  renderComponent({ ElementType, classes, rest, styles }) {
+  renderComponent({ ElementType, classes, rest, variables, styles }) {
     const { icon, renderIcon } = this.props as StatusPropsWithDefaults
     return (
       <ElementType {...rest} className={classes.root}>
         {Icon.create(icon, {
           defaultProps: {
             size: 'tiny',
-            variables: { color: 'white' }, // This is temporary. There is a ToDo to use icon's text/fill color for box-shadow, currently it uses color
+            styles: styles.icon,
+            variables: variables.icon,
             xSpacing: 'none',
             render: renderIcon,
           },

src/themes/teams-dark/components/Button/buttonVariables.ts

@@ -1,59 +1,7 @@
-export interface ButtonVariables {
-  [key: string]: string | number
+import { ButtonVariables } from '../../../teams/components/Button/buttonVariables'
+import { Partial } from 'types/utils'
 
-  color: string
-  colorActive: string
-  colorHover: string
-  colorFocus: string
-  colorDisabled: string
-  backgroundColor: string
-  backgroundColorActive: string
-  backgroundColorHover: string
-  backgroundColorFocus: string
-  backgroundColorDisabled: string
-  borderColor: string
-  borderColorActive: string
-  borderColorHover: string
-  borderColorFocus: string
-  borderColorFocusIndicator: string
-  borderColorDisabled: string
-
-  primaryColor: string
-  primaryBackgroundColor: string
-  primaryBackgroundColorActive: string
-  primaryBackgroundColorHover: string
-  primaryBackgroundColorFocus: string
-  primaryBorderColor: string
-  primaryBorderColorActive: string
-  primaryBorderColorHover: string
-  primaryBorderColorFocus: string
-  primaryBorderColorFocusIndicator: string
-
-  primaryCircularBorderColorFocusIndicator: string
-
-  circularColor: string
-  circularColorActive: string
-  circularBackgroundColor: string
-  circularBackgroundColorActive: string
-  circularBackgroundColorHover: string
-  circularBackgroundColorFocus: string
-  circularBorderColor: string
-  circularBorderColorActive: string
-  circularBorderColorHover: string
-  circularBorderColorFocus: string
-  circularBorderColorFocusIndicator: string
-
-  textColor: string
-  textColorHover: string
-  textPrimaryColor: string
-  textPrimaryColorHover: string
-  textSecondaryColor: string
-  textSecondaryColorHover: string
-
-  boxShadow: string
-}
-
-export default (siteVars: any): ButtonVariables => {
+export default (siteVars: any): Partial<ButtonVariables> => {
   return {
     color: siteVars.white,
     colorActive: siteVars.white,

src/themes/teams-dark/components/Divider/dividerVariables.ts

@@ -1,6 +1,7 @@
-export default (siteVars: any) => {
-  return {
-    primaryColor: siteVars.brand06,
-    textColor: siteVars.gray02,
-  }
-}
+import { DividerVariables } from '../../../teams/components/Divider/dividerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<DividerVariables> => ({
+  primaryColor: siteVars.brand06,
+  textColor: siteVars.gray02,
+})

src/themes/teams-dark/components/Text/textVariables.ts

@@ -1,23 +1,13 @@
-export interface TextVariables {
-  atMentionMeColor: string
-  atMentionOtherColor: string
-  disabledColor: string
-  errorColor: string
-  importantColor: string
-  successColor: string
-  timestampColor: string
-  timestampHoverColor: string
-}
+import { TextVariables } from '../../../teams/components/Text/textVariables'
+import { Partial } from 'types/utils'
 
-export default (siteVariables): TextVariables => {
-  return {
-    atMentionMeColor: siteVariables.orange04,
-    atMentionOtherColor: siteVariables.brand06,
-    disabledColor: siteVariables.gray06,
-    errorColor: siteVariables.red,
-    importantColor: siteVariables.red,
-    successColor: siteVariables.green04,
-    timestampColor: siteVariables.gray04,
-    timestampHoverColor: siteVariables.gray02,
-  }
-}
+export default (siteVariables): Partial<TextVariables> => ({
+  atMentionMeColor: siteVariables.orange04,
+  atMentionOtherColor: siteVariables.brand06,
+  disabledColor: siteVariables.gray06,
+  errorColor: siteVariables.red,
+  importantColor: siteVariables.red,
+  successColor: siteVariables.green04,
+  timestampColor: siteVariables.gray04,
+  timestampHoverColor: siteVariables.gray02,
+})

src/themes/teams-high-contrast/componentVariables.ts

@@ -1,2 +1,3 @@
-export { default as Text } from './components/Text/textVariables'
+export { default as Avatar } from './components/Avatar/avatarVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Text } from './components/Text/textVariables'

src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts

@@ -0,0 +1,6 @@
+import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVariables: any): Partial<AvatarVariables> => ({
+  statusBorderColor: siteVariables.black,
+})

src/themes/teams-high-contrast/components/Divider/dividerVariables.ts

@@ -1,7 +1,8 @@
-export default (siteVars: any) => {
-  return {
-    dividerColor: siteVars.white,
-    textColor: siteVars.white,
-    primaryColor: siteVars.white,
-  }
-}
+import { DividerVariables } from '../../../teams/components/Divider/dividerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<DividerVariables> => ({
+  dividerColor: siteVars.white,
+  textColor: siteVars.white,
+  primaryColor: siteVars.white,
+})

src/themes/teams-high-contrast/components/Text/textVariables.ts

@@ -1,23 +1,13 @@
-export interface TextVariables {
-  atMentionMeColor: string
-  atMentionOtherColor: string
-  disabledColor: string
-  errorColor: string
-  importantColor: string
-  successColor: string
-  timestampColor: string
-  timestampHoverColor: string
-}
+import { TextVariables } from '../../../teams/components/Text/textVariables'
+import { Partial } from 'types/utils'
 
-export default (siteVariables): TextVariables => {
-  return {
-    atMentionMeColor: siteVariables.accessibleYellow,
-    atMentionOtherColor: siteVariables.accessibleYellow,
-    disabledColor: siteVariables.accessibleGreen,
-    errorColor: siteVariables.red,
-    importantColor: siteVariables.red,
-    successColor: siteVariables.green04,
-    timestampColor: siteVariables.white,
-    timestampHoverColor: siteVariables.white,
-  }
-}
+export default (siteVariables): Partial<TextVariables> => ({
+  atMentionMeColor: siteVariables.accessibleYellow,
+  atMentionOtherColor: siteVariables.accessibleYellow,
+  disabledColor: siteVariables.accessibleGreen,
+  errorColor: siteVariables.red,
+  importantColor: siteVariables.red,
+  successColor: siteVariables.green04,
+  timestampColor: siteVariables.white,
+  timestampHoverColor: siteVariables.white,
+})

src/themes/teams-high-contrast/siteVariables.ts

@@ -12,6 +12,21 @@ export const accessibleCyan = '#1aebff'
 export const red = '#f00'
 export const green04 = green
 
+//
+// STATUS COLORS
+//
+// TODO: bcalvery - color alone is not an adequate means for differentiating in an accessible way.
+export const successStatusBackgroundColor = accessibleGreen
+export const successStatusTextColor = black
+export const infoStatusBackgroundColor = accessibleCyan
+export const infoStatusTextColor = black
+export const warningStatusBackgroundColor = accessibleYellow
+export const warningStatusTextColor = black
+export const errorStatusBackgroundColor = red
+export const errorStatusTextColor = black
+export const unknownStatusBackgroundColor = white
+export const unknownStatusTextColor = black
+
 //
 // SEMANTIC ASSIGNMENTS
 //

src/themes/teams/components/Avatar/avatarVariables.ts

@@ -1,4 +1,9 @@
-export default () => ({
-  statusBorderColor: 'white',
+export interface AvatarVariables {
+  statusBorderColor: string
+  statusBorderWidth: number
+}
+
+export default (siteVariables): AvatarVariables => ({
+  statusBorderColor: siteVariables.bodyBackground,
   statusBorderWidth: 2,
 })

src/themes/teams/components/Divider/dividerVariables.ts

@@ -1,6 +1,16 @@
 import { pxToRem } from '../../../../lib'
 
-export default (siteVars: any) => {
+export interface DividerVariables {
+  dividerColor: string
+  textColor: string
+  textFontSize: string
+  textLineHeight: string
+  primaryColor: string
+  importantFontWeight: string
+  dividerPadding: string
+}
+
+export default (siteVars: any): DividerVariables => {
   return {
     dividerColor: siteVars.gray09,
     textColor: siteVars.gray03,

types/utils.d.ts

@@ -8,6 +8,8 @@ export type Extendable<T> = T & {
   [key: string]: any
 }
 
+export type Partial<T> = { [Key in keyof T]?: T[Key] }
+
 export type ArgOf<T> = T extends (arg: infer TArg) => any ? TArg : never
 export type ResultOf<T> = T extends (...arg: any[]) => infer TResult ? TResult : never