fix(attachment): themeing and redline

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))

docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx

@@ -13,7 +13,7 @@ class AttachmentActionExampleShorthand extends React.Component {
         />
         <Attachment
           header="Document.docx"
-          action={{ icon: 'ellipsis horizontal', onClick: this.handleClick('Show more') }}
+          action={{ icon: 'more', onClick: this.handleClick('Show more') }}
         />
       </div>
     )

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 (
       <Attachment
         actionable
-        icon="file word outline"
+        icon="table"
         header="Document.docx"
         description="800 Kb"
-        action={{ icon: 'x' }}
+        action={{ icon: 'more', onClick: this.handleClick('More Action') }}
         progress={33}
-        onClick={this.handleClick}
+        onClick={this.handleClick('Attachment')}
       />
     )
   }

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'

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<AttachmentVariables> => {
+  return {
+    textColor: siteVariables.colors.grey[50],
+    textColorHover: siteVariables.colors.grey[50],
+  }
+}

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'

packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentVariables.ts

@@ -0,0 +1,19 @@
+import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables'
+
+export default (siteVariables: any): Partial<AttachmentVariables> => {
+  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,
+  }
+}

packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts

@@ -2,9 +2,12 @@ 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<AttachmentProps, AttachmentVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    boxSizing: 'border-box',
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
@@ -15,9 +18,16 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
     marginRight: pxToRem(2),
     background: v.backgroundColor,
     color: v.textColor,
+    boxShadow: v.boxShadow,
+    border: v.border,
+    borderRadius: v.borderRadius,
 
     outline: 0,
 
+    '& *': {
+      boxSizing: `border-box`,
+    },
+
     ...(p.isFromKeyboard && {
       ':focus': {
         outline: `.2rem solid ${v.focusOutlineColor}`,
@@ -29,12 +39,18 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
 
       ':hover': {
         background: v.backgroundColorHover,
+        color: v.textColorHover,
+
+        [`& .${Button.className}`]: {
+          color: v.actionColorContrastOverride,
+        },
       },
     }),
   }),
 
   content: (): ICSSInJSStyle => ({
     flex: 1,
+    margin: '-2px 0',
   }),
 
   header: ({ variables: v }): ICSSInJSStyle => ({
@@ -56,8 +72,18 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
     marginRight: v.iconSpace,
   }),
 
-  action: (): ICSSInJSStyle => ({
+  action: ({ variables: v }): ICSSInJSStyle => ({
     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 => ({

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,31 @@ export type AttachmentVariables = {
   focusOutlineColor: string
 }
 
-export default siteVariables => ({
-  padding: pxToRem(8),
-  iconSpace: pxToRem(12),
-
-  backgroundColor: siteVariables.gray09,
-  backgroundColorHover: siteVariables.gray08,
-  textColor: siteVariables.colors.grey[900],
-
-  progressColor: siteVariables.naturalColors.lightGreen[900],
-  progressHeight: 4,
-
-  headerFontSize: siteVariables.fontSizes.medium,
-  headerFontWeight: siteVariables.fontWeightSemibold,
-  headerLineHeight: siteVariables.lineHeightSmall,
-
-  descriptionFontSize: siteVariables.fontSizes.small,
-  descriptionFontWeight: siteVariables.fontWeightRegular,
-  descriptionLineHeight: siteVariables.lineHeightSmall,
-
-  focusOutlineColor: siteVariables.colors.primary[500],
-})
+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],
+  }
+}