From 335400f16d67681a1d7263af399a7478dd6d1ff0 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Thu, 18 Oct 2018 14:50:28 -0700 Subject: [PATCH 1/9] Adding dark and contrast theme files for Avatar and Status Indicator. --- .../Usage/AvatarUsageExample.shorthand.tsx | 57 +++++++++++++++++ .../components/Avatar/Usage/index.tsx | 15 +++++ ...arExampleStatusCustomization.shorthand.tsx | 2 +- docs/src/examples/components/Avatar/index.tsx | 2 + src/themes/teams-dark/componentVariables.ts | 8 ++- .../components/Avatar/avatarStyles.ts | 40 ++++++++++++ .../components/Avatar/avatarVariables.ts | 9 +++ .../components/Status/statusStyles.ts | 63 +++++++++++++++++++ .../components/Status/statusVariables.ts | 29 +++++++++ .../teams-high-contrast/componentVariables.ts | 7 ++- .../components/Avatar/avatarStyles.ts | 40 ++++++++++++ .../components/Avatar/avatarVariables.ts | 9 +++ .../components/Status/statusStyles.ts | 63 +++++++++++++++++++ .../components/Status/statusVariables.ts | 29 +++++++++ .../components/Avatar/avatarVariables.ts | 9 ++- 15 files changed, 377 insertions(+), 5 deletions(-) create mode 100644 docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx create mode 100644 docs/src/examples/components/Avatar/Usage/index.tsx create mode 100644 src/themes/teams-dark/components/Avatar/avatarStyles.ts create mode 100644 src/themes/teams-dark/components/Avatar/avatarVariables.ts create mode 100644 src/themes/teams-dark/components/Status/statusStyles.ts create mode 100644 src/themes/teams-dark/components/Status/statusVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts create mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Status/statusStyles.ts create mode 100644 src/themes/teams-high-contrast/components/Status/statusVariables.ts 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..1a892ed5bf --- /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: +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+) + +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/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index 34c15933b6..9a3f944318 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1,3 +1,9 @@ +export { default as Avatar } from './components/Avatar/avatarVariables' + export { default as Button } from './components/Button/buttonVariables' -export { default as Text } from './components/Text/textVariables' + export { default as Divider } from './components/Divider/dividerVariables' + +export { default as Status } from './components/Status/statusVariables' + +export { default as Text } from './components/Text/textVariables' diff --git a/src/themes/teams-dark/components/Avatar/avatarStyles.ts b/src/themes/teams-dark/components/Avatar/avatarStyles.ts new file mode 100644 index 0000000000..70bdc5be5b --- /dev/null +++ b/src/themes/teams-dark/components/Avatar/avatarStyles.ts @@ -0,0 +1,40 @@ +import { pxToRem } from '../../../../lib' +import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' +import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' + +const avatarStyles: IComponentPartStylesInput = { + root: ({ props: { size } }): ICSSInJSStyle => { + const sizeInRem = pxToRem(size) + return { + position: 'relative', + backgroundColor: 'inherit', + display: 'inline-block', + verticalAlign: 'middle', + height: sizeInRem, + width: sizeInRem, + } + }, + image: (): ICSSInJSStyle => ({ + verticalAlign: 'top', + }), + label: ({ props: { size } }): ICSSInJSStyle => { + const sizeInRem = pxToRem(size) + return { + display: 'inline-block', + width: sizeInRem, + height: sizeInRem, + lineHeight: sizeInRem, + fontSize: pxToRem(size / 2.333), + verticalAlign: 'top', + textAlign: 'center', + padding: '0px', + } + }, + status: ({ props, variables }): ICSSInJSStyle => ({ + position: 'absolute', + bottom: `-${variables.statusBorderWidth}px`, + right: `-${variables.statusBorderWidth}px`, + }), +} + +export default avatarStyles diff --git a/src/themes/teams-dark/components/Avatar/avatarVariables.ts b/src/themes/teams-dark/components/Avatar/avatarVariables.ts new file mode 100644 index 0000000000..f03014a8d6 --- /dev/null +++ b/src/themes/teams-dark/components/Avatar/avatarVariables.ts @@ -0,0 +1,9 @@ +export interface IAvatarVariables { + statusBorderColor: string + statusBorderWidth: number +} + +export default siteVariables => ({ + statusBorderColor: siteVariables.bodyBackground, + statusBorderWidth: 2, +}) diff --git a/src/themes/teams-dark/components/Status/statusStyles.ts b/src/themes/teams-dark/components/Status/statusStyles.ts new file mode 100644 index 0000000000..a932a43e97 --- /dev/null +++ b/src/themes/teams-dark/components/Status/statusStyles.ts @@ -0,0 +1,63 @@ +import { pxToRem } from '../../../../lib' +import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' +import { IStatusPropsWithDefaults } from '../../../../components/Status/Status' +import { IStatusVariables } from './statusVariables' + +const getBackgroundColor = (state: string, variables: IStatusVariables) => { + switch (state) { + case 'success': + return variables.successBackgroundColor + case 'info': + return variables.infoBackgroundColor + case 'warning': + return variables.warningBackgroundColor + case 'error': + return variables.errorBackgroundColor + case 'unknown': + default: + return variables.defaultBackgroundColor + } +} + +const getTextColor = (state: string, variables: IStatusVariables) => { + switch (state) { + case 'success': + return variables.successTextColor + case 'info': + return variables.infoTextColor + case 'warning': + return variables.warningTextColor + case 'error': + return variables.errorTextColor + case 'unknown': + default: + return variables.defaultTextColor + } +} + +const statusStyles: IComponentPartStylesInput = { + root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { + const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0)) + return { + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + height: sizeInRem, + width: sizeInRem, + verticalAlign: 'middle', + borderRadius: '9999px', + ...(variables.borderColor && { + borderColor: variables.borderColor, + borderWidth: pxToRem(variables.borderWidth), + borderStyle: 'solid', + }), + backgroundColor: color || getBackgroundColor(state, variables), + } + }, + + icon: ({ props: { state }, variables }): ICSSInJSStyle => ({ + color: getTextColor(state, variables), + }), +} + +export default statusStyles diff --git a/src/themes/teams-dark/components/Status/statusVariables.ts b/src/themes/teams-dark/components/Status/statusVariables.ts new file mode 100644 index 0000000000..0cfacbd803 --- /dev/null +++ b/src/themes/teams-dark/components/Status/statusVariables.ts @@ -0,0 +1,29 @@ +export interface IStatusVariables { + borderColor: string + borderWidth: number + successBackgroundColor: string + successTextColor: string + infoBackgroundColor: string + infoTextColor: string + warningBackgroundColor: string + warningTextColor: string + errorBackgroundColor: string + errorTextColor: string + defaultBackgroundColor: string + defaultTextColor: string +} + +export default siteVariables => ({ + borderColor: undefined, + borderWidth: 2, + successBackgroundColor: siteVariables.successStatusBackgroundColor, + successTextColor: siteVariables.successStatusTextColor, + infoBackgroundColor: siteVariables.infoStatusBackgroundColor, + infoTextColor: siteVariables.infoStatusTextColor, + warningBackgroundColor: siteVariables.warningStatusBackgroundColor, + warningTextColor: siteVariables.warningStatusTextColor, + errorBackgroundColor: siteVariables.errorStatusBackgroundColor, + errorTextColor: siteVariables.errorStatusTextColor, + defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor, + defaultTextColor: siteVariables.unknownStatusTextColor, +}) diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index f975eed9e2..d39119ee3f 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,2 +1,7 @@ -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 Status } from './components/Status/statusVariables' + +export { default as Text } from './components/Text/textVariables' diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts new file mode 100644 index 0000000000..70bdc5be5b --- /dev/null +++ b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts @@ -0,0 +1,40 @@ +import { pxToRem } from '../../../../lib' +import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' +import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' + +const avatarStyles: IComponentPartStylesInput = { + root: ({ props: { size } }): ICSSInJSStyle => { + const sizeInRem = pxToRem(size) + return { + position: 'relative', + backgroundColor: 'inherit', + display: 'inline-block', + verticalAlign: 'middle', + height: sizeInRem, + width: sizeInRem, + } + }, + image: (): ICSSInJSStyle => ({ + verticalAlign: 'top', + }), + label: ({ props: { size } }): ICSSInJSStyle => { + const sizeInRem = pxToRem(size) + return { + display: 'inline-block', + width: sizeInRem, + height: sizeInRem, + lineHeight: sizeInRem, + fontSize: pxToRem(size / 2.333), + verticalAlign: 'top', + textAlign: 'center', + padding: '0px', + } + }, + status: ({ props, variables }): ICSSInJSStyle => ({ + position: 'absolute', + bottom: `-${variables.statusBorderWidth}px`, + right: `-${variables.statusBorderWidth}px`, + }), +} + +export default avatarStyles 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..893b67764b --- /dev/null +++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts @@ -0,0 +1,9 @@ +export interface IAvatarVariables { + statusBorderColor: string + statusBorderWidth: number +} + +export default siteVariables => ({ + statusBorderColor: siteVariables.black, + statusBorderWidth: 3, +}) diff --git a/src/themes/teams-high-contrast/components/Status/statusStyles.ts b/src/themes/teams-high-contrast/components/Status/statusStyles.ts new file mode 100644 index 0000000000..a932a43e97 --- /dev/null +++ b/src/themes/teams-high-contrast/components/Status/statusStyles.ts @@ -0,0 +1,63 @@ +import { pxToRem } from '../../../../lib' +import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' +import { IStatusPropsWithDefaults } from '../../../../components/Status/Status' +import { IStatusVariables } from './statusVariables' + +const getBackgroundColor = (state: string, variables: IStatusVariables) => { + switch (state) { + case 'success': + return variables.successBackgroundColor + case 'info': + return variables.infoBackgroundColor + case 'warning': + return variables.warningBackgroundColor + case 'error': + return variables.errorBackgroundColor + case 'unknown': + default: + return variables.defaultBackgroundColor + } +} + +const getTextColor = (state: string, variables: IStatusVariables) => { + switch (state) { + case 'success': + return variables.successTextColor + case 'info': + return variables.infoTextColor + case 'warning': + return variables.warningTextColor + case 'error': + return variables.errorTextColor + case 'unknown': + default: + return variables.defaultTextColor + } +} + +const statusStyles: IComponentPartStylesInput = { + root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { + const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0)) + return { + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + height: sizeInRem, + width: sizeInRem, + verticalAlign: 'middle', + borderRadius: '9999px', + ...(variables.borderColor && { + borderColor: variables.borderColor, + borderWidth: pxToRem(variables.borderWidth), + borderStyle: 'solid', + }), + backgroundColor: color || getBackgroundColor(state, variables), + } + }, + + icon: ({ props: { state }, variables }): ICSSInJSStyle => ({ + color: getTextColor(state, variables), + }), +} + +export default statusStyles diff --git a/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/src/themes/teams-high-contrast/components/Status/statusVariables.ts new file mode 100644 index 0000000000..0cfacbd803 --- /dev/null +++ b/src/themes/teams-high-contrast/components/Status/statusVariables.ts @@ -0,0 +1,29 @@ +export interface IStatusVariables { + borderColor: string + borderWidth: number + successBackgroundColor: string + successTextColor: string + infoBackgroundColor: string + infoTextColor: string + warningBackgroundColor: string + warningTextColor: string + errorBackgroundColor: string + errorTextColor: string + defaultBackgroundColor: string + defaultTextColor: string +} + +export default siteVariables => ({ + borderColor: undefined, + borderWidth: 2, + successBackgroundColor: siteVariables.successStatusBackgroundColor, + successTextColor: siteVariables.successStatusTextColor, + infoBackgroundColor: siteVariables.infoStatusBackgroundColor, + infoTextColor: siteVariables.infoStatusTextColor, + warningBackgroundColor: siteVariables.warningStatusBackgroundColor, + warningTextColor: siteVariables.warningStatusTextColor, + errorBackgroundColor: siteVariables.errorStatusBackgroundColor, + errorTextColor: siteVariables.errorStatusTextColor, + defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor, + defaultTextColor: siteVariables.unknownStatusTextColor, +}) diff --git a/src/themes/teams/components/Avatar/avatarVariables.ts b/src/themes/teams/components/Avatar/avatarVariables.ts index 82614d9278..f03014a8d6 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 IAvatarVariables { + statusBorderColor: string + statusBorderWidth: number +} + +export default siteVariables => ({ + statusBorderColor: siteVariables.bodyBackground, statusBorderWidth: 2, }) From daf16d34d5454b79fe16d40666c82af0cdc016f8 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Tue, 23 Oct 2018 12:11:16 -0700 Subject: [PATCH 2/9] Making Avatar Status Indicator respond to theme change. --- .../Usage/AvatarUsageExample.shorthand.tsx | 2 +- .../AvatarExampleStatus.shorthand.tsx | 18 +++++++++++++----- src/components/Status/Status.tsx | 3 ++- .../components/Avatar/avatarStyles.ts | 6 +++--- .../components/Status/statusStyles.ts | 12 ++++++------ .../components/Status/statusVariables.ts | 2 +- .../components/Avatar/avatarStyles.ts | 6 +++--- .../components/Status/statusStyles.ts | 12 ++++++------ .../components/Status/statusVariables.ts | 2 +- .../teams-high-contrast/siteVariables.ts | 14 ++++++++++++++ 10 files changed, 50 insertions(+), 27 deletions(-) diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx index 1a892ed5bf..c38ff4d200 100644 --- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx @@ -36,7 +36,7 @@ const AvatarUsageExampleShorthand = () => ( /> - Incorrect: + Incorrect, unless in Contrast theme:
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx index 0d2d497615..c33422a86b 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx @@ -5,24 +5,32 @@ const AvatarExampleStatusShorthand = () => (
  - + +   +
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index fdc128042c..4361d27cc9 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -76,7 +76,8 @@ class Status extends UIComponent, any> { {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 + // HOW DO I GET THE COLOR FROM statusStyles??? + // variables: { color: 'red' }, // This is temporary. There is a ToDo to use icon's text/fill color for box-shadow, currently it uses color xSpacing: 'none', render: renderIcon, }, diff --git a/src/themes/teams-dark/components/Avatar/avatarStyles.ts b/src/themes/teams-dark/components/Avatar/avatarStyles.ts index 70bdc5be5b..1c4a6d0f78 100644 --- a/src/themes/teams-dark/components/Avatar/avatarStyles.ts +++ b/src/themes/teams-dark/components/Avatar/avatarStyles.ts @@ -1,8 +1,8 @@ import { pxToRem } from '../../../../lib' -import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' -import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' -const avatarStyles: IComponentPartStylesInput = { +const avatarStyles: ComponentSlotStylesInput = { root: ({ props: { size } }): ICSSInJSStyle => { const sizeInRem = pxToRem(size) return { diff --git a/src/themes/teams-dark/components/Status/statusStyles.ts b/src/themes/teams-dark/components/Status/statusStyles.ts index a932a43e97..8d3e7ceb31 100644 --- a/src/themes/teams-dark/components/Status/statusStyles.ts +++ b/src/themes/teams-dark/components/Status/statusStyles.ts @@ -1,9 +1,9 @@ import { pxToRem } from '../../../../lib' -import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' -import { IStatusPropsWithDefaults } from '../../../../components/Status/Status' -import { IStatusVariables } from './statusVariables' +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { StatusPropsWithDefaults } from '../../../../components/Status/Status' +import { StatusVariables } from './statusVariables' -const getBackgroundColor = (state: string, variables: IStatusVariables) => { +const getBackgroundColor = (state: string, variables: StatusVariables) => { switch (state) { case 'success': return variables.successBackgroundColor @@ -19,7 +19,7 @@ const getBackgroundColor = (state: string, variables: IStatusVariables) => { } } -const getTextColor = (state: string, variables: IStatusVariables) => { +const getTextColor = (state: string, variables: StatusVariables) => { switch (state) { case 'success': return variables.successTextColor @@ -35,7 +35,7 @@ const getTextColor = (state: string, variables: IStatusVariables) => { } } -const statusStyles: IComponentPartStylesInput = { +const statusStyles: ComponentSlotStylesInput = { root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0)) return { diff --git a/src/themes/teams-dark/components/Status/statusVariables.ts b/src/themes/teams-dark/components/Status/statusVariables.ts index 0cfacbd803..df290a12eb 100644 --- a/src/themes/teams-dark/components/Status/statusVariables.ts +++ b/src/themes/teams-dark/components/Status/statusVariables.ts @@ -1,4 +1,4 @@ -export interface IStatusVariables { +export interface StatusVariables { borderColor: string borderWidth: number successBackgroundColor: string diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts index 70bdc5be5b..1c4a6d0f78 100644 --- a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts +++ b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts @@ -1,8 +1,8 @@ import { pxToRem } from '../../../../lib' -import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' -import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' -const avatarStyles: IComponentPartStylesInput = { +const avatarStyles: ComponentSlotStylesInput = { root: ({ props: { size } }): ICSSInJSStyle => { const sizeInRem = pxToRem(size) return { diff --git a/src/themes/teams-high-contrast/components/Status/statusStyles.ts b/src/themes/teams-high-contrast/components/Status/statusStyles.ts index a932a43e97..8d3e7ceb31 100644 --- a/src/themes/teams-high-contrast/components/Status/statusStyles.ts +++ b/src/themes/teams-high-contrast/components/Status/statusStyles.ts @@ -1,9 +1,9 @@ import { pxToRem } from '../../../../lib' -import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' -import { IStatusPropsWithDefaults } from '../../../../components/Status/Status' -import { IStatusVariables } from './statusVariables' +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { StatusPropsWithDefaults } from '../../../../components/Status/Status' +import { StatusVariables } from './statusVariables' -const getBackgroundColor = (state: string, variables: IStatusVariables) => { +const getBackgroundColor = (state: string, variables: StatusVariables) => { switch (state) { case 'success': return variables.successBackgroundColor @@ -19,7 +19,7 @@ const getBackgroundColor = (state: string, variables: IStatusVariables) => { } } -const getTextColor = (state: string, variables: IStatusVariables) => { +const getTextColor = (state: string, variables: StatusVariables) => { switch (state) { case 'success': return variables.successTextColor @@ -35,7 +35,7 @@ const getTextColor = (state: string, variables: IStatusVariables) => { } } -const statusStyles: IComponentPartStylesInput = { +const statusStyles: ComponentSlotStylesInput = { root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0)) return { diff --git a/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/src/themes/teams-high-contrast/components/Status/statusVariables.ts index 0cfacbd803..df290a12eb 100644 --- a/src/themes/teams-high-contrast/components/Status/statusVariables.ts +++ b/src/themes/teams-high-contrast/components/Status/statusVariables.ts @@ -1,4 +1,4 @@ -export interface IStatusVariables { +export interface StatusVariables { borderColor: string borderWidth: number successBackgroundColor: string diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 47d3776e14..f1bfdef030 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -12,6 +12,20 @@ export const accessibleCyan = '#1aebff' export const red = '#f00' export const green04 = green +// +// STATUS COLORS +// +export const successStatusBackgroundColor = white +export const successStatusTextColor = black +export const infoStatusBackgroundColor = white +export const infoStatusTextColor = black +export const warningStatusBackgroundColor = white +export const warningStatusTextColor = black +export const errorStatusBackgroundColor = white +export const errorStatusTextColor = black +export const unknownStatusBackgroundColor = white +export const unknownStatusTextColor = black + // // SEMANTIC ASSIGNMENTS // From 0a3b556f03ec384ae6cc56eb7ae622800fb41c6c Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Tue, 23 Oct 2018 14:15:58 -0700 Subject: [PATCH 3/9] pass through styles variables and classes for icon in status indicator --- src/components/Status/Status.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index 4361d27cc9..c8a6a1c846 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -69,15 +69,16 @@ 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', - // HOW DO I GET THE COLOR FROM statusStyles??? - // variables: { color: 'red' }, // 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, + className: classes.icon, xSpacing: 'none', render: renderIcon, }, From 15d9245af51e31d6722188f48b2e56b988e95e0e Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Tue, 23 Oct 2018 15:52:54 -0700 Subject: [PATCH 4/9] reverting changes for avatar example shorthand. --- .../AvatarExampleStatus.shorthand.tsx | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx index c33422a86b..0d2d497615 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx @@ -5,32 +5,24 @@ const AvatarExampleStatusShorthand = () => (
  - -   - +
From 6ec6b914e385314d1c610351f0f6d1debb2704ab Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Thu, 25 Oct 2018 10:38:45 -0700 Subject: [PATCH 5/9] changing language for usage example. giving contrast theme status colors. fixing contrast theme status border width. --- .../Avatar/Usage/AvatarUsageExample.shorthand.tsx | 2 +- .../components/Avatar/avatarVariables.ts | 2 +- src/themes/teams-high-contrast/siteVariables.ts | 9 +++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx index c38ff4d200..6cf03f6f1a 100644 --- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx @@ -36,7 +36,7 @@ const AvatarUsageExampleShorthand = () => ( />
- Incorrect, unless in Contrast theme: + Incorrect (Border should not be visible, unless in Contrast theme):
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts index 893b67764b..2f37ca926c 100644 --- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts +++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts @@ -5,5 +5,5 @@ export interface IAvatarVariables { export default siteVariables => ({ statusBorderColor: siteVariables.black, - statusBorderWidth: 3, + statusBorderWidth: 2, }) diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index f1bfdef030..00ffad9f0e 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -15,13 +15,14 @@ export const green04 = green // // STATUS COLORS // -export const successStatusBackgroundColor = white +// 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 = white +export const infoStatusBackgroundColor = accessibleCyan export const infoStatusTextColor = black -export const warningStatusBackgroundColor = white +export const warningStatusBackgroundColor = accessibleYellow export const warningStatusTextColor = black -export const errorStatusBackgroundColor = white +export const errorStatusBackgroundColor = red export const errorStatusTextColor = black export const unknownStatusBackgroundColor = white export const unknownStatusTextColor = black From 48e7aa11d48339a31fe9862666c37239d52aa1bf Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Tue, 30 Oct 2018 14:29:15 -0700 Subject: [PATCH 6/9] changes based on Roman's comments. --- src/components/Status/Status.tsx | 1 - src/themes/teams-dark/componentVariables.ts | 4 -- .../components/Avatar/avatarStyles.ts | 40 ------------ .../components/Avatar/avatarVariables.ts | 9 --- .../components/Status/statusStyles.ts | 63 ------------------- .../components/Status/statusVariables.ts | 29 --------- .../teams-high-contrast/componentVariables.ts | 4 -- .../components/Avatar/avatarStyles.ts | 40 ------------ .../components/Avatar/avatarVariables.ts | 9 --- .../components/Status/statusStyles.ts | 63 ------------------- .../components/Status/statusVariables.ts | 29 --------- src/themes/teams-high-contrast/index.ts | 10 ++- 12 files changed, 9 insertions(+), 292 deletions(-) delete mode 100644 src/themes/teams-dark/components/Avatar/avatarStyles.ts delete mode 100644 src/themes/teams-dark/components/Avatar/avatarVariables.ts delete mode 100644 src/themes/teams-dark/components/Status/statusStyles.ts delete mode 100644 src/themes/teams-dark/components/Status/statusVariables.ts delete mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts delete mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts delete mode 100644 src/themes/teams-high-contrast/components/Status/statusStyles.ts delete mode 100644 src/themes/teams-high-contrast/components/Status/statusVariables.ts diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index c8a6a1c846..f54dcb36b3 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -78,7 +78,6 @@ class Status extends UIComponent, any> { size: 'tiny', styles: styles.icon, variables: variables.icon, - className: classes.icon, xSpacing: 'none', render: renderIcon, }, diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index 9a3f944318..8e388747b4 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1,9 +1,5 @@ -export { default as Avatar } from './components/Avatar/avatarVariables' - export { default as Button } from './components/Button/buttonVariables' export { default as Divider } from './components/Divider/dividerVariables' -export { default as Status } from './components/Status/statusVariables' - export { default as Text } from './components/Text/textVariables' diff --git a/src/themes/teams-dark/components/Avatar/avatarStyles.ts b/src/themes/teams-dark/components/Avatar/avatarStyles.ts deleted file mode 100644 index 1c4a6d0f78..0000000000 --- a/src/themes/teams-dark/components/Avatar/avatarStyles.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' - -const avatarStyles: ComponentSlotStylesInput = { - root: ({ props: { size } }): ICSSInJSStyle => { - const sizeInRem = pxToRem(size) - return { - position: 'relative', - backgroundColor: 'inherit', - display: 'inline-block', - verticalAlign: 'middle', - height: sizeInRem, - width: sizeInRem, - } - }, - image: (): ICSSInJSStyle => ({ - verticalAlign: 'top', - }), - label: ({ props: { size } }): ICSSInJSStyle => { - const sizeInRem = pxToRem(size) - return { - display: 'inline-block', - width: sizeInRem, - height: sizeInRem, - lineHeight: sizeInRem, - fontSize: pxToRem(size / 2.333), - verticalAlign: 'top', - textAlign: 'center', - padding: '0px', - } - }, - status: ({ props, variables }): ICSSInJSStyle => ({ - position: 'absolute', - bottom: `-${variables.statusBorderWidth}px`, - right: `-${variables.statusBorderWidth}px`, - }), -} - -export default avatarStyles diff --git a/src/themes/teams-dark/components/Avatar/avatarVariables.ts b/src/themes/teams-dark/components/Avatar/avatarVariables.ts deleted file mode 100644 index f03014a8d6..0000000000 --- a/src/themes/teams-dark/components/Avatar/avatarVariables.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface IAvatarVariables { - statusBorderColor: string - statusBorderWidth: number -} - -export default siteVariables => ({ - statusBorderColor: siteVariables.bodyBackground, - statusBorderWidth: 2, -}) diff --git a/src/themes/teams-dark/components/Status/statusStyles.ts b/src/themes/teams-dark/components/Status/statusStyles.ts deleted file mode 100644 index 8d3e7ceb31..0000000000 --- a/src/themes/teams-dark/components/Status/statusStyles.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { StatusPropsWithDefaults } from '../../../../components/Status/Status' -import { StatusVariables } from './statusVariables' - -const getBackgroundColor = (state: string, variables: StatusVariables) => { - switch (state) { - case 'success': - return variables.successBackgroundColor - case 'info': - return variables.infoBackgroundColor - case 'warning': - return variables.warningBackgroundColor - case 'error': - return variables.errorBackgroundColor - case 'unknown': - default: - return variables.defaultBackgroundColor - } -} - -const getTextColor = (state: string, variables: StatusVariables) => { - switch (state) { - case 'success': - return variables.successTextColor - case 'info': - return variables.infoTextColor - case 'warning': - return variables.warningTextColor - case 'error': - return variables.errorTextColor - case 'unknown': - default: - return variables.defaultTextColor - } -} - -const statusStyles: ComponentSlotStylesInput = { - root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { - const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0)) - return { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - height: sizeInRem, - width: sizeInRem, - verticalAlign: 'middle', - borderRadius: '9999px', - ...(variables.borderColor && { - borderColor: variables.borderColor, - borderWidth: pxToRem(variables.borderWidth), - borderStyle: 'solid', - }), - backgroundColor: color || getBackgroundColor(state, variables), - } - }, - - icon: ({ props: { state }, variables }): ICSSInJSStyle => ({ - color: getTextColor(state, variables), - }), -} - -export default statusStyles diff --git a/src/themes/teams-dark/components/Status/statusVariables.ts b/src/themes/teams-dark/components/Status/statusVariables.ts deleted file mode 100644 index df290a12eb..0000000000 --- a/src/themes/teams-dark/components/Status/statusVariables.ts +++ /dev/null @@ -1,29 +0,0 @@ -export interface StatusVariables { - borderColor: string - borderWidth: number - successBackgroundColor: string - successTextColor: string - infoBackgroundColor: string - infoTextColor: string - warningBackgroundColor: string - warningTextColor: string - errorBackgroundColor: string - errorTextColor: string - defaultBackgroundColor: string - defaultTextColor: string -} - -export default siteVariables => ({ - borderColor: undefined, - borderWidth: 2, - successBackgroundColor: siteVariables.successStatusBackgroundColor, - successTextColor: siteVariables.successStatusTextColor, - infoBackgroundColor: siteVariables.infoStatusBackgroundColor, - infoTextColor: siteVariables.infoStatusTextColor, - warningBackgroundColor: siteVariables.warningStatusBackgroundColor, - warningTextColor: siteVariables.warningStatusTextColor, - errorBackgroundColor: siteVariables.errorStatusBackgroundColor, - errorTextColor: siteVariables.errorStatusTextColor, - defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor, - defaultTextColor: siteVariables.unknownStatusTextColor, -}) diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index d39119ee3f..1a2dab13a8 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,7 +1,3 @@ -export { default as Avatar } from './components/Avatar/avatarVariables' - export { default as Divider } from './components/Divider/dividerVariables' -export { default as Status } from './components/Status/statusVariables' - export { default as Text } from './components/Text/textVariables' diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts deleted file mode 100644 index 1c4a6d0f78..0000000000 --- a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar' - -const avatarStyles: ComponentSlotStylesInput = { - root: ({ props: { size } }): ICSSInJSStyle => { - const sizeInRem = pxToRem(size) - return { - position: 'relative', - backgroundColor: 'inherit', - display: 'inline-block', - verticalAlign: 'middle', - height: sizeInRem, - width: sizeInRem, - } - }, - image: (): ICSSInJSStyle => ({ - verticalAlign: 'top', - }), - label: ({ props: { size } }): ICSSInJSStyle => { - const sizeInRem = pxToRem(size) - return { - display: 'inline-block', - width: sizeInRem, - height: sizeInRem, - lineHeight: sizeInRem, - fontSize: pxToRem(size / 2.333), - verticalAlign: 'top', - textAlign: 'center', - padding: '0px', - } - }, - status: ({ props, variables }): ICSSInJSStyle => ({ - position: 'absolute', - bottom: `-${variables.statusBorderWidth}px`, - right: `-${variables.statusBorderWidth}px`, - }), -} - -export default avatarStyles diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts deleted file mode 100644 index 2f37ca926c..0000000000 --- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface IAvatarVariables { - statusBorderColor: string - statusBorderWidth: number -} - -export default siteVariables => ({ - statusBorderColor: siteVariables.black, - statusBorderWidth: 2, -}) diff --git a/src/themes/teams-high-contrast/components/Status/statusStyles.ts b/src/themes/teams-high-contrast/components/Status/statusStyles.ts deleted file mode 100644 index 8d3e7ceb31..0000000000 --- a/src/themes/teams-high-contrast/components/Status/statusStyles.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { StatusPropsWithDefaults } from '../../../../components/Status/Status' -import { StatusVariables } from './statusVariables' - -const getBackgroundColor = (state: string, variables: StatusVariables) => { - switch (state) { - case 'success': - return variables.successBackgroundColor - case 'info': - return variables.infoBackgroundColor - case 'warning': - return variables.warningBackgroundColor - case 'error': - return variables.errorBackgroundColor - case 'unknown': - default: - return variables.defaultBackgroundColor - } -} - -const getTextColor = (state: string, variables: StatusVariables) => { - switch (state) { - case 'success': - return variables.successTextColor - case 'info': - return variables.infoTextColor - case 'warning': - return variables.warningTextColor - case 'error': - return variables.errorTextColor - case 'unknown': - default: - return variables.defaultTextColor - } -} - -const statusStyles: ComponentSlotStylesInput = { - root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { - const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0)) - return { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - height: sizeInRem, - width: sizeInRem, - verticalAlign: 'middle', - borderRadius: '9999px', - ...(variables.borderColor && { - borderColor: variables.borderColor, - borderWidth: pxToRem(variables.borderWidth), - borderStyle: 'solid', - }), - backgroundColor: color || getBackgroundColor(state, variables), - } - }, - - icon: ({ props: { state }, variables }): ICSSInJSStyle => ({ - color: getTextColor(state, variables), - }), -} - -export default statusStyles diff --git a/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/src/themes/teams-high-contrast/components/Status/statusVariables.ts deleted file mode 100644 index df290a12eb..0000000000 --- a/src/themes/teams-high-contrast/components/Status/statusVariables.ts +++ /dev/null @@ -1,29 +0,0 @@ -export interface StatusVariables { - borderColor: string - borderWidth: number - successBackgroundColor: string - successTextColor: string - infoBackgroundColor: string - infoTextColor: string - warningBackgroundColor: string - warningTextColor: string - errorBackgroundColor: string - errorTextColor: string - defaultBackgroundColor: string - defaultTextColor: string -} - -export default siteVariables => ({ - borderColor: undefined, - borderWidth: 2, - successBackgroundColor: siteVariables.successStatusBackgroundColor, - successTextColor: siteVariables.successStatusTextColor, - infoBackgroundColor: siteVariables.infoStatusBackgroundColor, - infoTextColor: siteVariables.infoStatusTextColor, - warningBackgroundColor: siteVariables.warningStatusBackgroundColor, - warningTextColor: siteVariables.warningStatusTextColor, - errorBackgroundColor: siteVariables.errorStatusBackgroundColor, - errorTextColor: siteVariables.errorStatusTextColor, - defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor, - defaultTextColor: siteVariables.unknownStatusTextColor, -}) diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts index 4cd2c1e2b5..37f065a915 100644 --- a/src/themes/teams-high-contrast/index.ts +++ b/src/themes/teams-high-contrast/index.ts @@ -3,4 +3,12 @@ import * as siteVariables from './siteVariables' import * as componentVariables from './componentVariables' import teams from '../teams' -export default mergeThemes(teams, { siteVariables, componentVariables }) +const darkThemeOverrides = { + componentVariables: { + Avatar: { + statusBorderColor: siteVariables.black, + }, + }, +} + +export default mergeThemes(teams, { siteVariables, componentVariables }, darkThemeOverrides) From a26b31994c666cf65cdf031941606e8a92c82a83 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Tue, 30 Oct 2018 14:39:31 -0700 Subject: [PATCH 7/9] undoing unnecessary file changes --- src/themes/teams-dark/componentVariables.ts | 4 +--- src/themes/teams-high-contrast/componentVariables.ts | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index 8e388747b4..34c15933b6 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1,5 +1,3 @@ export { default as Button } from './components/Button/buttonVariables' - -export { default as Divider } from './components/Divider/dividerVariables' - export { default as Text } from './components/Text/textVariables' +export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index 1a2dab13a8..f975eed9e2 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,3 +1,2 @@ -export { default as Divider } from './components/Divider/dividerVariables' - export { default as Text } from './components/Text/textVariables' +export { default as Divider } from './components/Divider/dividerVariables' From afe1a9965e3c9d37eb4aae762dfefb03fa31e6f8 Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Wed, 31 Oct 2018 03:38:55 +0300 Subject: [PATCH 8/9] remove duplication in theme variations --- .../components/Button/buttonVariables.ts | 58 +------------------ .../components/Divider/dividerVariables.ts | 13 +++-- .../components/Text/textVariables.ts | 34 ++++------- .../teams-high-contrast/componentVariables.ts | 3 +- .../components/Avatar/avatarVariables.ts | 6 ++ .../components/Divider/dividerVariables.ts | 15 ++--- .../components/Text/textVariables.ts | 34 ++++------- src/themes/teams-high-contrast/index.ts | 10 +--- .../components/Avatar/avatarVariables.ts | 4 +- .../components/Divider/dividerVariables.ts | 12 +++- types/utils.d.ts | 2 + 11 files changed, 66 insertions(+), 125 deletions(-) create mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts 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/index.ts b/src/themes/teams-high-contrast/index.ts index 37f065a915..4cd2c1e2b5 100644 --- a/src/themes/teams-high-contrast/index.ts +++ b/src/themes/teams-high-contrast/index.ts @@ -3,12 +3,4 @@ import * as siteVariables from './siteVariables' import * as componentVariables from './componentVariables' import teams from '../teams' -const darkThemeOverrides = { - componentVariables: { - Avatar: { - statusBorderColor: siteVariables.black, - }, - }, -} - -export default mergeThemes(teams, { siteVariables, componentVariables }, darkThemeOverrides) +export default mergeThemes(teams, { siteVariables, componentVariables }) diff --git a/src/themes/teams/components/Avatar/avatarVariables.ts b/src/themes/teams/components/Avatar/avatarVariables.ts index f03014a8d6..87bf062513 100644 --- a/src/themes/teams/components/Avatar/avatarVariables.ts +++ b/src/themes/teams/components/Avatar/avatarVariables.ts @@ -1,9 +1,9 @@ -export interface IAvatarVariables { +export interface AvatarVariables { statusBorderColor: string statusBorderWidth: number } -export default siteVariables => ({ +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 From 110fd799428c6ddc69b9b5fe3de41e982e5741c9 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 31 Oct 2018 13:05:17 -0700 Subject: [PATCH 9/9] Added changelog entries --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6583b9c2d6..e7e2e0c714 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,12 +25,14 @@ 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)) +- Adding dark theme and contrast theme for Avatar and Status Indicator @bcalvery ([#373](https://github.com/stardust-ui/react/pull/373)) ### Features - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285)) - 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))