From b830a2330745f2b0ff33a51e6e17d95660b57c84 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Sat, 4 May 2019 12:56:15 -0700 Subject: [PATCH 1/8] basic themeing for dialogs --- .../themes/teams-dark/componentVariables.ts | 1 + .../components/Dialog/dialogVariables.ts | 11 +++++ .../teams-high-contrast/componentVariables.ts | 1 + .../components/Dialog/dialogVariables.ts | 11 +++++ .../react/src/themes/teams/componentStyles.ts | 2 + .../src/themes/teams/componentVariables.ts | 2 + .../teams/components/Dialog/dialogStyles.ts | 47 +++++++++++++++++++ .../components/Dialog/dialogVariables.ts | 39 +++++++++++++++ 8 files changed, 114 insertions(+) create mode 100644 packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts create mode 100644 packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts create mode 100644 packages/react/src/themes/teams/components/Dialog/dialogStyles.ts create mode 100644 packages/react/src/themes/teams/components/Dialog/dialogVariables.ts diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index 35737d7fd7..28790fb4e9 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/packages/react/src/themes/teams-dark/componentVariables.ts @@ -2,6 +2,7 @@ export { default as Attachment } from './components/Attachment/attachmentVariabl export { default as Button } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' +export { default as Dialog } from './components/Dialog/dialogVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' export { default as Input } from './components/Input/inputVariables' diff --git a/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts new file mode 100644 index 0000000000..7de812219e --- /dev/null +++ b/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts @@ -0,0 +1,11 @@ +import { DialogVariables } from '../../../teams/components/Dialog/dialogVariables' + +export default (siteVars: any): Partial => { + return { + boxShadow: siteVars.shadowLevel4, + rootBackground: '#2d2c2c', // gray[650] with new color palette + foregroundColor: siteVars.colors.white, + + overlayBackground: 'rgba(37, 36, 36, .74)', // todo: ask daisy what this color should map to + } +} diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts index ee58d15a46..05df51c682 100644 --- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts @@ -3,6 +3,7 @@ export { default as Avatar } from './components/Avatar/avatarVariables' export { default as Button } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' +export { default as Dialog } from './components/Dialog/dialogVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' export { default as Input } from './components/Input/inputVariables' diff --git a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts new file mode 100644 index 0000000000..2b92d22d13 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts @@ -0,0 +1,11 @@ +import { DialogVariables } from '../../../teams/components/Dialog/dialogVariables' + +export default (siteVars: any): Partial => { + return { + boxShadow: 'none', + rootBackground: siteVars.colors.black, + foregroundColor: siteVars.colors.white, + + overlayBackground: 'rgba(37, 36, 36, .74)', // todo: ask daisy what this color should map to + } +} diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts index 6948746e73..b1756bc7a7 100644 --- a/packages/react/src/themes/teams/componentStyles.ts +++ b/packages/react/src/themes/teams/componentStyles.ts @@ -15,6 +15,8 @@ export { default as Chat } from './components/Chat/chatStyles' export { default as ChatItem } from './components/Chat/chatItemStyles' export { default as ChatMessage } from './components/Chat/chatMessageStyles' +export { default as Dialog } from './components/Dialog/dialogStyles' + export { default as Divider } from './components/Divider/dividerStyles' export { default as Dropdown } from './components/Dropdown/dropdownStyles' diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts index 7e034e308e..d448665c28 100644 --- a/packages/react/src/themes/teams/componentVariables.ts +++ b/packages/react/src/themes/teams/componentVariables.ts @@ -13,6 +13,8 @@ export { default as Chat } from './components/Chat/chatVariables' export { default as ChatItem } from './components/Chat/chatItemVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' +export { default as Dialog } from './components/Dialog/dialogVariables' + export { default as Divider } from './components/Divider/dividerVariables' export { default as Dropdown } from './components/Dropdown/dropdownVariables' diff --git a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts new file mode 100644 index 0000000000..0a96d199cf --- /dev/null +++ b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts @@ -0,0 +1,47 @@ +import { DialogProps } from '../../../../components/Dialog/Dialog' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { DialogVariables } from './dialogVariables' + +type DialogStyleParams = ComponentStyleFunctionParam + +export default { + root: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + background: v.rootBackground, + borderRadius: v.rootBorderRadius, + boxShadow: v.boxShadow, + color: v.foregroundColor, + outline: 'none', + padding: v.rootPadding, + position: 'relative', + width: v.rootWidth, + }), + + actions: (): ICSSInJSStyle => ({ + textAlign: 'right', + }), + + content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + margin: v.contentMargin, + }), + + header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + fontSize: v.headerFontSize, + fontWeight: v.headerFontWeight, + margin: v.headerMargin, + }), + + overlay: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + alignItems: 'center', + background: v.overlayBackground, + bottom: 0, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + left: 0, + overflow: 'auto', + position: 'fixed', + right: 0, + top: 0, + zIndex: v.overlayZIndex, + }), +} diff --git a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts new file mode 100644 index 0000000000..7343dc9891 --- /dev/null +++ b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts @@ -0,0 +1,39 @@ +import { pxToRem } from '../../../../lib' + +export interface DialogVariables { + boxShadow: string + foregroundColor: string + + rootBackground: string + rootBorderRadius: string + rootPadding: string + rootWidth: string + + contentMargin: string + + headerFontSize: string + headerFontWeight: number + headerMargin: string + + overlayBackground: string + overlayZIndex: number +} + +export default (siteVariables): DialogVariables => ({ + boxShadow: siteVariables.shadowLevel4, + foregroundColor: siteVariables.colors.grey[900], + + rootBackground: siteVariables.colors.white, + rootBorderRadius: pxToRem(3), + rootPadding: `${pxToRem(27)} ${pxToRem(32)} ${pxToRem(20)} ${pxToRem(32)}`, + rootWidth: '50vw', + + contentMargin: `0 0 ${pxToRem(20)} 0`, + + headerFontSize: siteVariables.fontSizes.large, + headerFontWeight: siteVariables.fontWeightBold, + headerMargin: `0 0 ${pxToRem(8)} 0`, + + overlayBackground: 'rgba(37, 36, 36, .74)', // todo: ask daisy what this color should map to + overlayZIndex: 1000, +}) From ae49ec8fda6b9c2d2b231ea5992315d50cb8a8da Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 6 May 2019 21:25:08 -0700 Subject: [PATCH 2/8] add changelog entry --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20e49853e6..1d2af7c88a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Fixes +- Add Teams dark and hc themeing for `Dialog` [redlines] @codepretty ([#1297](https://github.com/stardust-ui/react/pull/1297)) + ### Features - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282)) From 1ed90de0de81e33be6bb6e14ced0ee9deebce8d1 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 6 May 2019 22:03:34 -0700 Subject: [PATCH 3/8] adding border for high contrast theme --- .../src/themes/teams-high-contrast/componentStyles.ts | 1 + .../teams-high-contrast/components/Dialog/dialogStyles.ts | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts diff --git a/packages/react/src/themes/teams-high-contrast/componentStyles.ts b/packages/react/src/themes/teams-high-contrast/componentStyles.ts index 8b6c3884ac..c227fcb43f 100644 --- a/packages/react/src/themes/teams-high-contrast/componentStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/componentStyles.ts @@ -1,3 +1,4 @@ export { default as Attachment } from './components/Attachment/attachmentStyles' export { default as MenuItem } from './components/Menu/menuItemStyles' export { default as Alert } from './components/Alert/alertStyles' +export { default as Dialog } from './components/Dialog/dialogStyles' diff --git a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts new file mode 100644 index 0000000000..0894eca608 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts @@ -0,0 +1,7 @@ +import { ICSSInJSStyle } from '../../../types' + +export default { + root: ({ variables: v }): ICSSInJSStyle => ({ + border: `1px solid ${v.foregroundColor}`, + }), +} From faefe9a6cbbac289f75248880689a1baa271d1ec Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 7 May 2019 17:14:43 -0700 Subject: [PATCH 4/8] removing styles that are duplicated from base theme --- .../teams/components/Dialog/dialogStyles.ts | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts index 0a96d199cf..37c9c1e88b 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts @@ -6,42 +6,12 @@ type DialogStyleParams = ComponentStyleFunctionParam ({ - background: v.rootBackground, - borderRadius: v.rootBorderRadius, boxShadow: v.boxShadow, color: v.foregroundColor, - outline: 'none', - padding: v.rootPadding, - position: 'relative', - width: v.rootWidth, - }), - - actions: (): ICSSInJSStyle => ({ - textAlign: 'right', - }), - - content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ - margin: v.contentMargin, }), header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ fontSize: v.headerFontSize, fontWeight: v.headerFontWeight, - margin: v.headerMargin, - }), - - overlay: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({ - alignItems: 'center', - background: v.overlayBackground, - bottom: 0, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - left: 0, - overflow: 'auto', - position: 'fixed', - right: 0, - top: 0, - zIndex: v.overlayZIndex, }), } From 20fb1353863cf8e8f3cbd93921e618082558cffd Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 10 May 2019 15:35:04 -0700 Subject: [PATCH 5/8] reuse type for base theme --- .../themes/teams-dark/components/Dialog/dialogVariables.ts | 5 +---- .../teams-high-contrast/components/Dialog/dialogVariables.ts | 2 -- .../src/themes/teams/components/Dialog/dialogVariables.ts | 5 +++-- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts index 7de812219e..3e558c9b17 100644 --- a/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts @@ -2,10 +2,7 @@ import { DialogVariables } from '../../../teams/components/Dialog/dialogVariable export default (siteVars: any): Partial => { return { - boxShadow: siteVars.shadowLevel4, - rootBackground: '#2d2c2c', // gray[650] with new color palette + rootBackground: siteVars.colors.gray[650], foregroundColor: siteVars.colors.white, - - overlayBackground: 'rgba(37, 36, 36, .74)', // todo: ask daisy what this color should map to } } diff --git a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts index 2b92d22d13..9afb7ceb3c 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts @@ -5,7 +5,5 @@ export default (siteVars: any): Partial => { boxShadow: 'none', rootBackground: siteVars.colors.black, foregroundColor: siteVars.colors.white, - - overlayBackground: 'rgba(37, 36, 36, .74)', // todo: ask daisy what this color should map to } } diff --git a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts index 7343dc9891..ea4e885840 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts @@ -1,6 +1,7 @@ +import { DialogVariables as BaseDialogVariables } from '../../../base/components/Dialog/dialogVariables' import { pxToRem } from '../../../../lib' -export interface DialogVariables { +export interface DialogVariables extends BaseDialogVariables { boxShadow: string foregroundColor: string @@ -34,6 +35,6 @@ export default (siteVariables): DialogVariables => ({ headerFontWeight: siteVariables.fontWeightBold, headerMargin: `0 0 ${pxToRem(8)} 0`, - overlayBackground: 'rgba(37, 36, 36, .74)', // todo: ask daisy what this color should map to + overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one overlayZIndex: 1000, }) From 5ea69f96c1d75e7818bb9c72102149d04d38dfec Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 10 May 2019 16:22:05 -0700 Subject: [PATCH 6/8] fixed color variable --- .../src/themes/teams-dark/components/Dialog/dialogVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts index 3e558c9b17..d5e6cf03dc 100644 --- a/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts @@ -2,7 +2,7 @@ import { DialogVariables } from '../../../teams/components/Dialog/dialogVariable export default (siteVars: any): Partial => { return { - rootBackground: siteVars.colors.gray[650], + rootBackground: siteVars.colors.grey[650], foregroundColor: siteVars.colors.white, } } From 814fd506310dc03fc46c63efd93341f3ea721548 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 10 May 2019 16:27:36 -0700 Subject: [PATCH 7/8] fixing px to rems --- .../teams-high-contrast/components/Dialog/dialogStyles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts index 0894eca608..cceb08d11f 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts @@ -1,7 +1,8 @@ +import { pxToRem } from '../../../../lib' import { ICSSInJSStyle } from '../../../types' export default { root: ({ variables: v }): ICSSInJSStyle => ({ - border: `1px solid ${v.foregroundColor}`, + border: `${pxToRem(1)} solid ${v.foregroundColor}`, }), } From d447de215300650ebf0924ca1c1cb6def701a05b Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 17 May 2019 14:30:43 -0700 Subject: [PATCH 8/8] addressing pr feedback --- .../themes/teams/components/Dialog/dialogVariables.ts | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts index ea4e885840..07091ed10d 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts @@ -5,19 +5,8 @@ export interface DialogVariables extends BaseDialogVariables { boxShadow: string foregroundColor: string - rootBackground: string - rootBorderRadius: string - rootPadding: string - rootWidth: string - - contentMargin: string - headerFontSize: string headerFontWeight: number - headerMargin: string - - overlayBackground: string - overlayZIndex: number } export default (siteVariables): DialogVariables => ({