fix(attachment): themeing and redline (#1033)

* updates to Attachment Styles

* more refinement to attachment

* making action icon color match text color

* updating Changelog entry for PR

* fix file capitalization issue

* fix accident  put changelog entry in wrong place

* updating attachment styles

* updating icon in the attachment examples and making it show filled state on hover

* updating color for attachment dark theme border and backgroundColor

* updating changelog

Author: bcalvery

CHANGELOG.md

@@ -29,6 +29,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))
 - Capture effect of `Esc` key down event within component for `Popup` and `Dropdown` @kuzhelov ([#1183](https://github.com/stardust-ui/react/pull/1183))
 

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

@@ -9,11 +9,23 @@ class AttachmentActionExampleShorthand extends React.Component {
       <div>
         <Attachment
           header="Picture.jpg"
-          action={{ icon: 'x', onClick: this.handleClick('Remove') }}
+          action={{
+            icon: {
+              name: 'close',
+              outline: true,
+            },
+            onClick: this.handleClick('Remove'),
+          }}
         />
         <Attachment
           header="Document.docx"
-          action={{ icon: 'ellipsis horizontal', onClick: this.handleClick('Show more') }}
+          action={{
+            icon: {
+              name: 'more',
+              outline: true,
+            },
+            onClick: this.handleClick('Show more'),
+          }}
         />
       </div>
     )

docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx

@@ -4,7 +4,13 @@ import { Attachment } from '@stardust-ui/react'
 const AttachmentProgressExampleShorthand = () => (
   <Attachment
     header="Photo.jpg"
-    action={{ icon: 'x', onClick: () => alert("'X' is clicked!") }}
+    action={{
+      icon: {
+        name: 'close',
+        outline: true,
+      },
+      onClick: () => alert("'X' is clicked!"),
+    }}
     progress={33}
   />
 )

docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx

@@ -2,18 +2,27 @@ 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: {
+            name: 'more',
+            outline: true,
+          },
+          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,10 @@
+import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables'
+
+export default (siteVariables: any): Partial<AttachmentVariables> => ({
+  textColor: siteVariables.colors.grey[50],
+  textColorHover: siteVariables.colors.grey[50],
+
+  backgroundColor: siteVariables.gray600,
+  borderColor: siteVariables.gray850,
+  boxShadow: siteVariables.shadowLevel1,
+})

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]
@@ -30,6 +32,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
 //

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'

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/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<AttachmentProps, AttachmentVariables> = {
+  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

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

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

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

@@ -2,25 +2,38 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 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<AttachmentProps, AttachmentVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
-    width: pxToRem(300),
+    width: '100%',
+    maxWidth: pxToRem(440),
     minHeight: pxToRem(48),
     padding: v.padding,
     marginBottom: pxToRem(2),
     marginRight: pxToRem(2),
     background: v.backgroundColor,
     color: v.textColor,
+    boxShadow: v.boxShadow,
+    border: `${pxToRem(1)} solid ${v.borderColor}`,
+    borderRadius: v.borderRadius,
 
     outline: 0,
 
+    // todo: remove when #1057 to make box-sizing global is checked in
+    boxSizing: 'border-box',
+    '& *': {
+      boxSizing: `border-box`,
+    },
+
     ...(p.isFromKeyboard && {
       ':focus': {
-        outline: `.2rem solid ${v.focusOutlineColor}`,
+        borderColor: v.focusInnerBorderColor,
+        boxShadow: `0 0 0 ${pxToRem(1)} ${v.focusOuterBorderColor}`,
       },
     }),
 
@@ -29,6 +42,7 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
 
       ':hover': {
         background: v.backgroundColorHover,
+        color: v.textColorHover,
       },
     }),
   }),
@@ -56,8 +70,22 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
     marginRight: v.iconSpace,
   }),
 
-  action: (): ICSSInJSStyle => ({
+  action: ({ variables: v }): ICSSInJSStyle => ({
     flex: '0 0 auto',
+
+    [`& .${Icon.className}`]: {
+      color: v.textColor, // this breaks the color change on hover
+    },
+
+    ':hover': {
+      [`& .${teamsIconClassNames.filled}`]: {
+        display: 'block',
+      },
+
+      [`& .${teamsIconClassNames.outline}`]: {
+        display: 'none',
+      },
+    },
   }),
 
   progress: ({ props: p, variables: v }): ICSSInJSStyle => ({

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

@@ -1,12 +1,16 @@
 import { pxToRem } from '../../../../lib'
 
 export type AttachmentVariables = {
-  padding: number
-  iconSpace: number
+  padding: string
+  iconSpace: string
 
+  borderColor: string
+  borderRadius: string
   backgroundColor: string
   backgroundColorHover: string
   textColor: string
+  textColorHover: string
+  boxShadow: string
 
   progressColor: string
   progressHeight: number
@@ -19,27 +23,32 @@ export type AttachmentVariables = {
   descriptionFontWeight: number
   descriptionLineHeight: number
 
-  focusOutlineColor: string
+  focusInnerBorderColor: string
+  focusOuterBorderColor: string
 }
 
-export default siteVariables => ({
-  padding: pxToRem(8),
+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),
-
-  backgroundColor: siteVariables.gray09,
+  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.lineHeightSmall,
+  headerLineHeight: siteVariables.lineHeightMedium,
 
   descriptionFontSize: siteVariables.fontSizes.small,
   descriptionFontWeight: siteVariables.fontWeightRegular,
   descriptionLineHeight: siteVariables.lineHeightSmall,
 
-  focusOutlineColor: siteVariables.colors.primary[500],
+  focusInnerBorderColor: siteVariables.colors.white,
+  focusOuterBorderColor: siteVariables.colors.black,
 })