From 4bb66d293b737fddde80b20a5ec843142fdc0a3b Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Fri, 1 Mar 2019 09:32:40 -0800 Subject: [PATCH 01/10] updates to Attachment Styles --- .../AttachmentActionExample.shorthand.tsx | 2 +- .../AttachmentActionableExample.shorthand.tsx | 11 ++-- .../themes/teams-dark/componentVariables.ts | 1 + .../Attachment/attachmentVariables.ts | 8 +++ .../teams-high-contrast/componentVariables.ts | 1 + .../Attachment/attachmentVariables.ts | 32 ++++++++++++ .../components/Attachment/attachmentStyles.ts | 16 +++++- .../Attachment/attachmentVariables.ts | 50 ++++++++++++------- 8 files changed, 97 insertions(+), 24 deletions(-) create mode 100644 packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts create mode 100644 packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx index f27f9ecc2b..287178b966 100644 --- a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx +++ b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx @@ -13,7 +13,7 @@ class AttachmentActionExampleShorthand extends React.Component { /> ) diff --git a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx index 43f78db42a..4380c299ac 100644 --- a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx +++ b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx @@ -2,18 +2,21 @@ import * as React from 'react' import { Attachment } from '@stardust-ui/react' class AttachmentActionableExampleShorthand extends React.Component { - handleClick = () => alert('Attachment was clicked') + handleClick = message => e => { + alert(`'${message}' was clicked`) + e.stopPropagation() + } render() { return ( ) } diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index 83179faa63..13dbd55329 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/packages/react/src/themes/teams-dark/componentVariables.ts @@ -1,3 +1,4 @@ +export { default as Attachment } from './components/Attachment/attachmentVariables' export { default as Button } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' diff --git a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts new file mode 100644 index 0000000000..c9e19f97d8 --- /dev/null +++ b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts @@ -0,0 +1,8 @@ +import { AttachmentVariables } from '../../../teams/components/Attachment/AttachmentVariables' + +export default (siteVariables: any): Partial => { + return { + textColor: siteVariables.colors.grey[50], + textColorHover: siteVariables.colors.grey[50], + } +} diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts index 5fe7ad8df0..59a0161036 100644 --- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts @@ -1,3 +1,4 @@ +export { default as Attachment } from './components/Attachment/attachmentVariables' export { default as Avatar } from './components/Avatar/avatarVariables' export { default as Button } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts new file mode 100644 index 0000000000..a371e443ac --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts @@ -0,0 +1,32 @@ +import { pxToRem } from '../../../../lib' +import { AttachmentVariables } from '../../../teams/components/Attachment/AttachmentVariables' + +export default (siteVariables: any): Partial => { + return { + padding: pxToRem(8), + iconSpace: pxToRem(12), + + border: `1px solid ${siteVariables.white}`, + borderRadius: '3px', + backgroundColor: siteVariables.black, + backgroundColorHover: siteVariables.accessibleYellow, + textColor: siteVariables.white, + textColorHover: siteVariables.black, + boxShadow: '', + + actionColorContrastOverride: 'black', + + progressColor: siteVariables.accessibleGreen, + progressHeight: 6, + + headerFontSize: siteVariables.fontSizes.medium, + headerFontWeight: siteVariables.fontWeightSemibold, + headerLineHeight: siteVariables.lineHeightMedium, + + descriptionFontSize: siteVariables.fontSizes.small, + descriptionFontWeight: siteVariables.fontWeightRegular, + descriptionLineHeight: siteVariables.lineHeightSmall, + + focusOutlineColor: siteVariables.colors.primary[500], + } +} diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index 37c4b363da..89978e814c 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -2,6 +2,7 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from './attachmentVariables' import { pxToRem } from '../../../../lib' +import Button from '../../../../components/Button/Button' const attachmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -15,6 +16,9 @@ const attachmentStyles: ComponentSlotStylesInput ({ + action: ({ variables: v }): ICSSInJSStyle => ({ flex: '0 0 auto', + border: '1px solid transparent', + + ':hover': { + borderColor: v.actionColorContrastOverride, + }, }), progress: ({ props: p, variables: v }): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index 5da4610179..6a425083fc 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -1,12 +1,18 @@ import { pxToRem } from '../../../../lib' export type AttachmentVariables = { - padding: number - iconSpace: number + padding: string + iconSpace: string + border: string + borderRadius: string backgroundColor: string backgroundColorHover: string textColor: string + textColorHover: string + boxShadow: string + + actionColorContrastOverride: string progressColor: string progressHeight: number @@ -22,24 +28,32 @@ export type AttachmentVariables = { focusOutlineColor: string } -export default siteVariables => ({ - padding: pxToRem(8), - iconSpace: pxToRem(12), +export default (siteVariables: any): AttachmentVariables => { + return { + padding: pxToRem(8), + iconSpace: pxToRem(12), + + border: `1px solid ${siteVariables.gray08}`, + borderRadius: '3px', + backgroundColor: siteVariables.gray10, + backgroundColorHover: siteVariables.gray08, + textColor: siteVariables.colors.grey[900], + textColorHover: siteVariables.colors.grey[900], + boxShadow: siteVariables.shadowLevel1, - backgroundColor: siteVariables.gray09, - backgroundColorHover: siteVariables.gray08, - textColor: siteVariables.colors.grey[900], + actionColorContrastOverride: '', - progressColor: siteVariables.naturalColors.lightGreen[900], - progressHeight: 4, + progressColor: siteVariables.naturalColors.lightGreen[900], + progressHeight: 4, - headerFontSize: siteVariables.fontSizes.medium, - headerFontWeight: siteVariables.fontWeightSemibold, - headerLineHeight: siteVariables.lineHeightSmall, + headerFontSize: siteVariables.fontSizes.medium, + headerFontWeight: siteVariables.fontWeightSemibold, + headerLineHeight: siteVariables.lineHeightMedium, - descriptionFontSize: siteVariables.fontSizes.small, - descriptionFontWeight: siteVariables.fontWeightRegular, - descriptionLineHeight: siteVariables.lineHeightSmall, + descriptionFontSize: siteVariables.fontSizes.small, + descriptionFontWeight: siteVariables.fontWeightRegular, + descriptionLineHeight: siteVariables.lineHeightSmall, - focusOutlineColor: siteVariables.colors.primary[500], -}) + focusOutlineColor: siteVariables.colors.primary[500], + } +} From 8beceffcc3b1a7ed71434e242e64dcdcea755862 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Fri, 1 Mar 2019 13:10:05 -0800 Subject: [PATCH 02/10] more refinement to attachment --- .../components/Attachment/attachmentVariables.ts | 15 +-------------- .../components/Attachment/attachmentStyles.ts | 7 +++++++ .../components/Attachment/attachmentVariables.ts | 3 +-- 3 files changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts index a371e443ac..872458fd35 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts @@ -1,13 +1,8 @@ -import { pxToRem } from '../../../../lib' import { AttachmentVariables } from '../../../teams/components/Attachment/AttachmentVariables' export default (siteVariables: any): Partial => { return { - padding: pxToRem(8), - iconSpace: pxToRem(12), - border: `1px solid ${siteVariables.white}`, - borderRadius: '3px', backgroundColor: siteVariables.black, backgroundColorHover: siteVariables.accessibleYellow, textColor: siteVariables.white, @@ -19,14 +14,6 @@ export default (siteVariables: any): Partial => { progressColor: siteVariables.accessibleGreen, progressHeight: 6, - headerFontSize: siteVariables.fontSizes.medium, - headerFontWeight: siteVariables.fontWeightSemibold, - headerLineHeight: siteVariables.lineHeightMedium, - - descriptionFontSize: siteVariables.fontSizes.small, - descriptionFontWeight: siteVariables.fontWeightRegular, - descriptionLineHeight: siteVariables.lineHeightSmall, - - focusOutlineColor: siteVariables.colors.primary[500], + focusOutlineColor: siteVariables.accessibleYellow, } } diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index 89978e814c..a3734a9d4b 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -6,6 +6,7 @@ import Button from '../../../../components/Button/Button' const attachmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ + boxSizing: 'border-box', position: 'relative', display: 'inline-flex', alignItems: 'center', @@ -22,6 +23,10 @@ const attachmentStyles: ComponentSlotStylesInput ({ flex: 1, + margin: '-2px 0', }), header: ({ variables: v }): ICSSInJSStyle => ({ @@ -68,6 +74,7 @@ const attachmentStyles: ComponentSlotStylesInput ({ flex: '0 0 auto', border: '1px solid transparent', + margin: '-1px', // negative margin should match border width. ':hover': { borderColor: v.actionColorContrastOverride, diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index 6a425083fc..a2a32dfbb7 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -30,9 +30,8 @@ export type AttachmentVariables = { export default (siteVariables: any): AttachmentVariables => { return { - padding: pxToRem(8), + padding: `${pxToRem(7)} ${pxToRem(3)} ${pxToRem(7)} ${pxToRem(11)}`, // padding set to 1px less to account for 1px border iconSpace: pxToRem(12), - border: `1px solid ${siteVariables.gray08}`, borderRadius: '3px', backgroundColor: siteVariables.gray10, From 5facf85f4d44964f251c537db00ffc5b85fb492c Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Mon, 4 Mar 2019 14:28:27 -0800 Subject: [PATCH 03/10] making action icon color match text color --- .../themes/teams/components/Attachment/attachmentStyles.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index a3734a9d4b..ab812a780c 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -3,6 +3,7 @@ import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from './attachmentVariables' import { pxToRem } from '../../../../lib' import Button from '../../../../components/Button/Button' +import Icon from '../../../../components/Icon/Icon' const attachmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -76,6 +77,10 @@ const attachmentStyles: ComponentSlotStylesInput Date: Mon, 11 Mar 2019 11:28:20 -0700 Subject: [PATCH 04/10] updating Changelog entry for PR --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4313888600..30840223ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Call update `node` if it was changed for `Ref` component @layershifter ([#993](https://github.com/stardust-ui/react/pull/993)) - Close previous `Popup` on enter key @jongsue ([#985](https://github.com/stardust-ui/react/pull/985)) - Fixed color of the `timestamp` in `ChatMessages` marked as `mine` in Teams theme @mnajdova ([#1010](https://github.com/stardust-ui/react/pull/1010)) +- Updated themeing for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033) ### Features - Add `delay` prop for `Loader` component @layershifter ([#969](https://github.com/stardust-ui/react/pull/969)) From 633ccc32e52ee6491fda95b4003fb5830d60846b Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Mon, 11 Mar 2019 11:45:40 -0700 Subject: [PATCH 05/10] fix file capitalization issue --- .../teams-dark/components/Attachment/attachmentVariables.ts | 2 +- .../components/Attachment/attachmentVariables.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts index c9e19f97d8..8cb3753e8f 100644 --- a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts @@ -1,4 +1,4 @@ -import { AttachmentVariables } from '../../../teams/components/Attachment/AttachmentVariables' +import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' export default (siteVariables: any): Partial => { return { diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts index 872458fd35..486af94ff4 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts @@ -1,4 +1,4 @@ -import { AttachmentVariables } from '../../../teams/components/Attachment/AttachmentVariables' +import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' export default (siteVariables: any): Partial => { return { From c27fcf82bc1be5c96ca1ad0ccbec1393a23ec0bc Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Mon, 11 Mar 2019 12:16:34 -0700 Subject: [PATCH 06/10] fix accident put changelog entry in wrong place --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43a703d782..bdf0bb2dbd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Do not propagate keyboard events outside `Popup`'s content only when focus trap is used @sophieH29 ([#1028](https://github.com/stardust-ui/react/pull/1028)) - Narrate the first adding/selection of a `Dropdown` item using aria live @silviuavram ([#1032](https://github.com/stardust-ui/react/pull/1032)) +- Updated themeing for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033) ### Features - Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017)) @@ -54,7 +55,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Close previous `Popup` on enter key @jongsue ([#985](https://github.com/stardust-ui/react/pull/985)) - Fixed Shift+Tab navigation from `DropdownSelectedItem` @silviuavram ([#1004](https://github.com/stardust-ui/react/pull/1004)) - Fixed color of the `timestamp` in `ChatMessages` marked as `mine` in Teams theme @mnajdova ([#1010](https://github.com/stardust-ui/react/pull/1010)) -- Updated themeing for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033) - Updated table `Icon` & search `Icon` ([#1011](https://github.com/stardust-ui/react/pull/1011)) - Improve `Menu` styling, vertical menu in Teams theme ([#934](https://github.com/stardust-ui/react/pull/934)) From 3030fa6d042130630f004ca9969ec6c634c54c5d Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Sun, 31 Mar 2019 00:11:03 -0700 Subject: [PATCH 07/10] updating attachment styles --- .../Attachment/attachmentVariables.ts | 12 ++-- .../src/themes/teams-dark/siteVariables.ts | 5 ++ .../teams-high-contrast/componentStyles.ts | 1 + .../components/Attachment/attachmentStyles.ts | 44 ++++++++++++++ .../Attachment/attachmentVariables.ts | 27 ++++----- .../components/Attachment/attachmentStyles.ts | 23 +++---- .../Attachment/attachmentVariables.ts | 60 +++++++++---------- 7 files changed, 101 insertions(+), 71 deletions(-) create mode 100644 packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts diff --git a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts index 8cb3753e8f..6e1c25384f 100644 --- a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts @@ -1,8 +1,8 @@ import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' -export default (siteVariables: any): Partial => { - return { - textColor: siteVariables.colors.grey[50], - textColorHover: siteVariables.colors.grey[50], - } -} +export default (siteVariables: any): Partial => ({ + textColor: siteVariables.colors.grey[50], + textColorHover: siteVariables.colors.grey[50], + borderColor: 'rgba(0, 0, 0, .05)', + boxShadow: siteVariables.shadowLevel1, +}) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 6064d903db..3d98854b88 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -30,6 +30,11 @@ export const red = '#d74654' // no mapping color export const red08 = '#4f232b' // no mapping color export const green04 = naturalColors.lightGreen[900] +// +// SHADOW LEVELS +// +export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)' + // // SEMANTIC ASSIGNMENTS // diff --git a/packages/react/src/themes/teams-high-contrast/componentStyles.ts b/packages/react/src/themes/teams-high-contrast/componentStyles.ts index d8b38bba66..0c27601f0f 100644 --- a/packages/react/src/themes/teams-high-contrast/componentStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/componentStyles.ts @@ -1 +1,2 @@ +export { default as Attachment } from './components/Attachment/attachmentStyles' export { default as MenuItem } from './components/Menu/menuItemStyles' diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts new file mode 100644 index 0000000000..d7457e836a --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts @@ -0,0 +1,44 @@ +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { AttachmentProps } from '../../../../components/Attachment/Attachment' +import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' +import Button from '../../../../components/Button/Button' +import Icon from '../../../../components/Icon/Icon' + +const attachmentStyles: ComponentSlotStylesInput = { + root: ({ props: p, variables: v }): ICSSInJSStyle => ({ + ...((p.actionable || p.onClick) && { + ...(p.isFromKeyboard && { + ':focus': { + backgroundColor: v.backgroundColorHover, + color: v.textColorHover, + + [`& .${Button.className}`]: { + color: v.textColorHover, + }, + + [`& .${Icon.className}`]: { + color: v.textColorHover, + }, + }, + }), + + ':hover': { + [`& .${Button.className}`]: { + color: v.textColorHover, + }, + + [`& .${Icon.className}`]: { + color: v.textColorHover, + }, + }, + }), + }), + + action: ({ variables: v }): ICSSInJSStyle => ({ + ':hover': { + outline: `1px solid ${v.textColorHover}`, + }, + }), +} + +export default attachmentStyles diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts index 486af94ff4..3fc6a96dfc 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts @@ -1,19 +1,12 @@ import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' -export default (siteVariables: any): Partial => { - return { - border: `1px solid ${siteVariables.white}`, - backgroundColor: siteVariables.black, - backgroundColorHover: siteVariables.accessibleYellow, - textColor: siteVariables.white, - textColorHover: siteVariables.black, - boxShadow: '', - - actionColorContrastOverride: 'black', - - progressColor: siteVariables.accessibleGreen, - progressHeight: 6, - - focusOutlineColor: siteVariables.accessibleYellow, - } -} +export default (siteVariables: any): Partial => ({ + borderColor: siteVariables.colors.white, + backgroundColor: siteVariables.colors.black, + backgroundColorHover: siteVariables.accessibleYellow, + textColor: siteVariables.colors.white, + textColorHover: siteVariables.colors.black, + boxShadow: undefined, + progressColor: siteVariables.accessibleGreen, + progressHeight: 6, +}) diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index ab812a780c..ed84c40be1 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -2,16 +2,15 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from './attachmentVariables' import { pxToRem } from '../../../../lib' -import Button from '../../../../components/Button/Button' import Icon from '../../../../components/Icon/Icon' const attachmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - boxSizing: 'border-box', position: 'relative', display: 'inline-flex', alignItems: 'center', - width: pxToRem(300), + width: '100%', + maxWidth: pxToRem(440), minHeight: pxToRem(48), padding: v.padding, marginBottom: pxToRem(2), @@ -19,18 +18,21 @@ const attachmentStyles: ComponentSlotStylesInput ({ flex: 1, - margin: '-2px 0', }), header: ({ variables: v }): ICSSInJSStyle => ({ @@ -74,16 +71,10 @@ const attachmentStyles: ComponentSlotStylesInput ({ flex: '0 0 auto', - border: '1px solid transparent', - margin: '-1px', // negative margin should match border width. [`& .${Icon.className}`]: { color: v.textColor, // this breaks the color change on hover }, - - ':hover': { - borderColor: v.actionColorContrastOverride, - }, }), progress: ({ props: p, variables: v }): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index a2a32dfbb7..ca127aea2e 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -4,7 +4,7 @@ export type AttachmentVariables = { padding: string iconSpace: string - border: string + borderColor: string borderRadius: string backgroundColor: string backgroundColorHover: string @@ -12,8 +12,6 @@ export type AttachmentVariables = { textColorHover: string boxShadow: string - actionColorContrastOverride: string - progressColor: string progressHeight: number @@ -25,34 +23,32 @@ export type AttachmentVariables = { descriptionFontWeight: number descriptionLineHeight: number - focusOutlineColor: string + focusInnerBorderColor: string + focusOuterBorderColor: string } -export default (siteVariables: any): AttachmentVariables => { - return { - padding: `${pxToRem(7)} ${pxToRem(3)} ${pxToRem(7)} ${pxToRem(11)}`, // padding set to 1px less to account for 1px border - iconSpace: pxToRem(12), - border: `1px solid ${siteVariables.gray08}`, - borderRadius: '3px', - backgroundColor: siteVariables.gray10, - backgroundColorHover: siteVariables.gray08, - textColor: siteVariables.colors.grey[900], - textColorHover: siteVariables.colors.grey[900], - boxShadow: siteVariables.shadowLevel1, - - actionColorContrastOverride: '', - - progressColor: siteVariables.naturalColors.lightGreen[900], - progressHeight: 4, - - headerFontSize: siteVariables.fontSizes.medium, - headerFontWeight: siteVariables.fontWeightSemibold, - headerLineHeight: siteVariables.lineHeightMedium, - - descriptionFontSize: siteVariables.fontSizes.small, - descriptionFontWeight: siteVariables.fontWeightRegular, - descriptionLineHeight: siteVariables.lineHeightSmall, - - focusOutlineColor: siteVariables.colors.primary[500], - } -} +export default (siteVariables: any): AttachmentVariables => ({ + padding: `${pxToRem(7)} ${pxToRem(3)} ${pxToRem(7)} ${pxToRem(11)}`, // padding set to 1px less to account for 1px border + iconSpace: pxToRem(12), + borderColor: siteVariables.gray08, + borderRadius: pxToRem(3), + backgroundColor: siteVariables.gray10, + backgroundColorHover: siteVariables.gray08, + textColor: siteVariables.colors.grey[900], + textColorHover: siteVariables.colors.grey[900], + boxShadow: siteVariables.shadowLevel1, + + progressColor: siteVariables.naturalColors.lightGreen[900], + progressHeight: 4, + + headerFontSize: siteVariables.fontSizes.medium, + headerFontWeight: siteVariables.fontWeightSemibold, + headerLineHeight: siteVariables.lineHeightMedium, + + descriptionFontSize: siteVariables.fontSizes.small, + descriptionFontWeight: siteVariables.fontWeightRegular, + descriptionLineHeight: siteVariables.lineHeightSmall, + + focusInnerBorderColor: siteVariables.colors.white, + focusOuterBorderColor: siteVariables.colors.black, +}) From 1e2e448a7dae384d974ec1e0b01f11510557ed82 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 2 Apr 2019 19:00:24 -0700 Subject: [PATCH 08/10] updating icon in the attachment examples and making it show filled state on hover --- .../Slots/AttachmentActionExample.shorthand.tsx | 16 ++++++++++++++-- .../AttachmentProgressExample.shorthand.tsx | 8 +++++++- .../AttachmentActionableExample.shorthand.tsx | 8 +++++++- .../components/Attachment/attachmentStyles.ts | 11 +++++++++++ 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx index 287178b966..49f1de37d9 100644 --- a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx +++ b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx @@ -9,11 +9,23 @@ class AttachmentActionExampleShorthand extends React.Component {
) diff --git a/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx b/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx index 75ae4db11d..26e2408f71 100644 --- a/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx +++ b/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx @@ -4,7 +4,13 @@ import { Attachment } from '@stardust-ui/react' const AttachmentProgressExampleShorthand = () => ( alert("'X' is clicked!") }} + action={{ + icon: { + name: 'close', + outline: true, + }, + onClick: () => alert("'X' is clicked!"), + }} progress={33} /> ) diff --git a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx index 4380c299ac..a5d4b85d93 100644 --- a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx +++ b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx @@ -14,7 +14,13 @@ class AttachmentActionableExampleShorthand extends React.Component { icon="table" header="Document.docx" description="800 Kb" - action={{ icon: 'more', onClick: this.handleClick('More Action') }} + action={{ + icon: { + name: 'more', + outline: true, + }, + onClick: this.handleClick('More Action'), + }} progress={33} onClick={this.handleClick('Attachment')} /> diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index ed84c40be1..8ea6324bae 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -3,6 +3,7 @@ import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from './attachmentVariables' import { pxToRem } from '../../../../lib' import Icon from '../../../../components/Icon/Icon' +import { teamsIconClassNames } from '../Icon/svg' const attachmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -75,6 +76,16 @@ const attachmentStyles: ComponentSlotStylesInput ({ From 5f8026b02071ce4e1b221b26eb50165b044b796e Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 5 Apr 2019 14:29:15 -0700 Subject: [PATCH 09/10] updating color for attachment dark theme border and backgroundColor --- .../teams-dark/components/Attachment/attachmentVariables.ts | 4 +++- packages/react/src/themes/teams-dark/siteVariables.ts | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts index 6e1c25384f..6a984dba37 100644 --- a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts @@ -3,6 +3,8 @@ import { AttachmentVariables } from '../../../teams/components/Attachment/attach export default (siteVariables: any): Partial => ({ textColor: siteVariables.colors.grey[50], textColorHover: siteVariables.colors.grey[50], - borderColor: 'rgba(0, 0, 0, .05)', + + backgroundColor: siteVariables.gray600, + borderColor: siteVariables.gray850, boxShadow: siteVariables.shadowLevel1, }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 3d98854b88..a3b5d8508d 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -13,6 +13,8 @@ export const gray08 = '#484644' // light theme gray02 export const gray09 = '#3b3a39' // no mapping color export const gray10 = '#323130' // no mapping color export const gray14 = '#292828' // no mapping color +export const gray850 = '#1b1a1a' +export const gray600 = '#323131' export const brand = '#6264A7' // light theme brand - primary[500] export const brand02 = '#e2e2f6' // light theme brand14 - primary[100] From 58cc768bbb78b31551ffcdd7cb41172ad7ee6e7e Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 5 Apr 2019 14:31:57 -0700 Subject: [PATCH 10/10] updating changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f2e51e9c9..3a40316333 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix click triggering logic of `Space` and `Enter` keys for `MenuItem` @kuzhelov ([#1175](https://github.com/stardust-ui/react/pull/1175)) - Truncate `content` and `header` of `ListItem` when used from `DropdownSelectedItem` @silviuavram ([#1161](https://github.com/stardust-ui/react/pull/1161)) - Fix `rotate` prop on `Icon` not working in `rtl` @mnajdova ([#1179](https://github.com/stardust-ui/react/pull/1179)) +- Updated themeing for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033) - `FocusTrapZone` - Do not propagate any keyboard events @sophieH29 ([#1180](https://github.com/stardust-ui/react/pull/1180)) @@ -63,7 +64,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Fix narration for `Menu` @miroslavstastny ([#1105](https://github.com/stardust-ui/react/pull/1105)) - Fix `timestamp` to be shown if the `reactionGroup` prop is applied on the `ChatMessage` component in Teams theme @mnajdova ([#1100](https://github.com/stardust-ui/react/pull/1100)) -- Updated themeing for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033) - Fix typings for `FlexProps` and `FlexItemProps` @miroslavstastny ([#1089](https://github.com/stardust-ui/react/pull/1089)) - Fix `selectableFocusHoverColor` value in `List` for Teams theme @layershifter ([#1113](https://github.com/stardust-ui/react/pull/1113)) - Align `slotClassNames` property for all components @Bugaa92 ([#1093](https://github.com/stardust-ui/react/pull/1093))