diff --git a/CHANGELOG.md b/CHANGELOG.md index f5f64e16b2..e94ad98cf2 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx new file mode 100644 index 0000000000..6cf03f6f1a --- /dev/null +++ b/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 = () => ( +
+ Correct: +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ Incorrect (Border should not be visible, unless in Contrast theme): +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+) + +export default AvatarUsageExampleShorthand diff --git a/docs/src/examples/components/Avatar/Usage/index.tsx b/docs/src/examples/components/Avatar/Usage/index.tsx new file mode 100644 index 0000000000..f36e0513fc --- /dev/null +++ b/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 = () => ( + + + +) + +export default Usage diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx index 6d51923171..a28b0c081b 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx +++ b/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' }} /> {defaultAvatar} diff --git a/docs/src/examples/components/Avatar/index.tsx b/docs/src/examples/components/Avatar/index.tsx index 67c45fa58a..184521ade5 100644 --- a/docs/src/examples/components/Avatar/index.tsx +++ b/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 = () => (
+
) diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index fdc128042c..f54dcb36b3 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -69,14 +69,15 @@ class Status extends UIComponent, any> { state: 'unknown', } - renderComponent({ ElementType, classes, rest, styles }) { + renderComponent({ ElementType, classes, rest, variables, styles }) { const { icon, renderIcon } = this.props as StatusPropsWithDefaults return ( {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, }, diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts index 2cb5935cc6..1c7dd1e97b 100644 --- a/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/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 => { return { color: siteVars.white, colorActive: siteVars.white, diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts index a94ed81c1f..6178d5f597 100644 --- a/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/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 => ({ + primaryColor: siteVars.brand06, + textColor: siteVars.gray02, +}) diff --git a/src/themes/teams-dark/components/Text/textVariables.ts b/src/themes/teams-dark/components/Text/textVariables.ts index 60735f9659..31cc44a4ce 100644 --- a/src/themes/teams-dark/components/Text/textVariables.ts +++ b/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 => ({ + atMentionMeColor: siteVariables.orange04, + atMentionOtherColor: siteVariables.brand06, + disabledColor: siteVariables.gray06, + errorColor: siteVariables.red, + importantColor: siteVariables.red, + successColor: siteVariables.green04, + timestampColor: siteVariables.gray04, + timestampHoverColor: siteVariables.gray02, +}) diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index f975eed9e2..50aa18654c 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/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' diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts new file mode 100644 index 0000000000..4780286ced --- /dev/null +++ b/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 => ({ + statusBorderColor: siteVariables.black, +}) diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 8df71f9082..193a92452d 100644 --- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/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 => ({ + dividerColor: siteVars.white, + textColor: siteVars.white, + primaryColor: siteVars.white, +}) diff --git a/src/themes/teams-high-contrast/components/Text/textVariables.ts b/src/themes/teams-high-contrast/components/Text/textVariables.ts index d66dde94cc..aa425fbd5d 100644 --- a/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/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 => ({ + atMentionMeColor: siteVariables.accessibleYellow, + atMentionOtherColor: siteVariables.accessibleYellow, + disabledColor: siteVariables.accessibleGreen, + errorColor: siteVariables.red, + importantColor: siteVariables.red, + successColor: siteVariables.green04, + timestampColor: siteVariables.white, + timestampHoverColor: siteVariables.white, +}) diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 47d3776e14..00ffad9f0e 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/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 // diff --git a/src/themes/teams/components/Avatar/avatarVariables.ts b/src/themes/teams/components/Avatar/avatarVariables.ts index 82614d9278..87bf062513 100644 --- a/src/themes/teams/components/Avatar/avatarVariables.ts +++ b/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, }) diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index f6b675d631..b363fbd31f 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/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, diff --git a/types/utils.d.ts b/types/utils.d.ts index 5a6b3b0569..b4bfde157e 100644 --- a/types/utils.d.ts +++ b/types/utils.d.ts @@ -8,6 +8,8 @@ export type Extendable = T & { [key: string]: any } +export type Partial = { [Key in keyof T]?: T[Key] } + export type ArgOf = T extends (arg: infer TArg) => any ? TArg : never export type ResultOf = T extends (...arg: any[]) => infer TResult ? TResult : never