diff --git a/CHANGELOG.md b/CHANGELOG.md index a528b551c6..8cd6c1c3db 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx index f27f9ecc2b..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 43f78db42a..a5d4b85d93 100644 --- a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx +++ b/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 ( ) } diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index 4df04e0615..97256f6d90 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..6a984dba37 --- /dev/null +++ b/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 => ({ + textColor: siteVariables.colors.grey[50], + textColorHover: siteVariables.colors.grey[50], + + 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 6064d903db..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] @@ -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 // 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/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts index cf1ad5cdf6..e77eeb2f46 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/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 new file mode 100644 index 0000000000..3fc6a96dfc --- /dev/null +++ b/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 => ({ + 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 37c4b363da..8ea6324bae 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/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 = { 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 ({ + 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 => ({ diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index 5da4610179..ca127aea2e 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/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, })