From 1fcbc00e7348c57afe3064c3556b5c1cfe66effe Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 15 Mar 2019 20:05:50 +0100
Subject: [PATCH 1/8] feat(alert): v1

---
 .../components/Alert/Rtl/AlertExample.rtl.tsx |   6 +
 .../examples/components/Alert/Rtl/index.tsx   |  12 ++
 .../Alert/Types/AlertExample.shorthand.tsx    |   6 +
 .../components/Alert/Types/AlertExample.tsx   |   6 +
 .../examples/components/Alert/Types/index.tsx |  15 ++
 .../AlertExampleAttached.shorthand.tsx        |  14 ++
 .../Alert/Variations/AlertExampleAttached.tsx |  14 ++
 .../AlertExampleClosable.shorthand.tsx        |  16 +++
 .../AlertExampleDanger.shorthand.tsx          |   6 +
 .../Alert/Variations/AlertExampleDanger.tsx   |   6 +
 .../Variations/AlertExampleInfo.shorthand.tsx |   6 +
 .../Alert/Variations/AlertExampleInfo.tsx     |   6 +
 .../AlertExampleSuccess.shorthand.tsx         |   6 +
 .../Alert/Variations/AlertExampleSuccess.tsx  |   6 +
 .../AlertExampleWarning.shorthand.tsx         |   6 +
 .../Alert/Variations/AlertExampleWarning.tsx  |   6 +
 .../components/Alert/Variations/index.tsx     |  40 ++++++
 docs/src/examples/components/Alert/index.tsx  |  15 ++
 packages/react/src/components/Alert/Alert.tsx | 134 ++++++++++++++++++
 packages/react/src/index.ts                   |   2 +
 packages/react/src/themes/teams/colors.ts     |  28 ++--
 .../react/src/themes/teams/componentStyles.ts |   2 +
 .../src/themes/teams/componentVariables.ts    |   2 +
 .../teams/components/Alert/alertStyles.ts     |  89 ++++++++++++
 .../teams/components/Alert/alertVariables.ts  |  26 ++++
 .../react/src/themes/teams/siteVariables.ts   |  44 +++---
 packages/react/src/themes/types.ts            |   4 +
 27 files changed, 488 insertions(+), 35 deletions(-)
 create mode 100644 docs/src/examples/components/Alert/Rtl/AlertExample.rtl.tsx
 create mode 100644 docs/src/examples/components/Alert/Rtl/index.tsx
 create mode 100644 docs/src/examples/components/Alert/Types/AlertExample.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Types/AlertExample.tsx
 create mode 100644 docs/src/examples/components/Alert/Types/index.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleAttached.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleAttached.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleDanger.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleInfo.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleSuccess.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleSuccess.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleWarning.shorthand.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/AlertExampleWarning.tsx
 create mode 100644 docs/src/examples/components/Alert/Variations/index.tsx
 create mode 100644 docs/src/examples/components/Alert/index.tsx
 create mode 100644 packages/react/src/components/Alert/Alert.tsx
 create mode 100644 packages/react/src/themes/teams/components/Alert/alertStyles.ts
 create mode 100644 packages/react/src/themes/teams/components/Alert/alertVariables.ts

diff --git a/docs/src/examples/components/Alert/Rtl/AlertExample.rtl.tsx b/docs/src/examples/components/Alert/Rtl/AlertExample.rtl.tsx
new file mode 100644
index 0000000000..d5df3c8a65
--- /dev/null
+++ b/docs/src/examples/components/Alert/Rtl/AlertExample.rtl.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleRtl = () => <Alert content="مرحبا العالم" />
+
+export default AlertExampleRtl
diff --git a/docs/src/examples/components/Alert/Rtl/index.tsx b/docs/src/examples/components/Alert/Rtl/index.tsx
new file mode 100644
index 0000000000..56b1579a6f
--- /dev/null
+++ b/docs/src/examples/components/Alert/Rtl/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/Alert/Rtl/AlertExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl
diff --git a/docs/src/examples/components/Alert/Types/AlertExample.shorthand.tsx b/docs/src/examples/components/Alert/Types/AlertExample.shorthand.tsx
new file mode 100644
index 0000000000..68011a6e89
--- /dev/null
+++ b/docs/src/examples/components/Alert/Types/AlertExample.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExample = () => <Alert content="This is a default alert" />
+
+export default AlertExample
diff --git a/docs/src/examples/components/Alert/Types/AlertExample.tsx b/docs/src/examples/components/Alert/Types/AlertExample.tsx
new file mode 100644
index 0000000000..2fa5c3c5cf
--- /dev/null
+++ b/docs/src/examples/components/Alert/Types/AlertExample.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExample = () => <Alert>This is a default alert</Alert>
+
+export default AlertExample
diff --git a/docs/src/examples/components/Alert/Types/index.tsx b/docs/src/examples/components/Alert/Types/index.tsx
new file mode 100644
index 0000000000..2b26245a59
--- /dev/null
+++ b/docs/src/examples/components/Alert/Types/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Alert."
+      examplePath="components/Alert/Types/AlertExample"
+    />
+  </ExampleSection>
+)
+
+export default Types
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleAttached.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleAttached.shorthand.tsx
new file mode 100644
index 0000000000..b0f644fb2f
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleAttached.shorthand.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Alert, Input } from '@stardust-ui/react'
+
+const AlertExampleShorthand = () => (
+  <>
+    <Alert attached content="This is a top attached alert" />
+    <Input fluid placeholder="Name..." />
+    <br /> <br />
+    <Input fluid placeholder="Surname..." />
+    <Alert attached="bottom" content="This is a bottom attached alert" />
+  </>
+)
+
+export default AlertExampleShorthand
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleAttached.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleAttached.tsx
new file mode 100644
index 0000000000..5e6e521d35
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleAttached.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Alert, Input } from '@stardust-ui/react'
+
+const AlertExampleShorthand = () => (
+  <>
+    <Alert attached>This is a top attached alert</Alert>
+    <Input fluid placeholder="Name..." />
+    <br /> <br />
+    <Input fluid placeholder="Surname..." />
+    <Alert attached="bottom">This is a bottom attached alert</Alert>
+  </>
+)
+
+export default AlertExampleShorthand
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx
new file mode 100644
index 0000000000..3dbfb6765b
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+class AlertExampleClosable extends React.Component<{}, { open: boolean }> {
+  state = { open: true }
+
+  render() {
+    return (
+      this.state.open && (
+        <Alert content="This is a closable alert" onClose={() => this.setState({ open: false })} />
+      )
+    )
+  }
+}
+
+export default AlertExampleClosable
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.tsx
new file mode 100644
index 0000000000..3e221e90b5
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleDanger = () => <Alert danger content="This is a danger alert" />
+
+export default AlertExampleDanger
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleDanger.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleDanger.tsx
new file mode 100644
index 0000000000..ad75bdef22
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleDanger.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleDanger = () => <Alert danger>This is a danger alert</Alert>
+
+export default AlertExampleDanger
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.tsx
new file mode 100644
index 0000000000..1a84904c9d
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleInfo = () => <Alert info content="This is an informational alert" />
+
+export default AlertExampleInfo
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleInfo.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleInfo.tsx
new file mode 100644
index 0000000000..a0a9f1900b
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleInfo.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleInfo = () => <Alert info>This is an informational alert</Alert>
+
+export default AlertExampleInfo
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.shorthand.tsx
new file mode 100644
index 0000000000..f434b3d111
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleSuccess = () => <Alert success content="This is a success alert" />
+
+export default AlertExampleSuccess
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.tsx
new file mode 100644
index 0000000000..a6006b0aa9
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleSuccess = () => <Alert success>This is a success alert</Alert>
+
+export default AlertExampleSuccess
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleWarning.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleWarning.shorthand.tsx
new file mode 100644
index 0000000000..9cce695bc7
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleWarning.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleWarning = () => <Alert warning content="This is a warning alert" />
+
+export default AlertExampleWarning
diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleWarning.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleWarning.tsx
new file mode 100644
index 0000000000..859403edde
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleWarning.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleWarning = () => <Alert warning>This is a warning alert</Alert>
+
+export default AlertExampleWarning
diff --git a/docs/src/examples/components/Alert/Variations/index.tsx b/docs/src/examples/components/Alert/Variations/index.tsx
new file mode 100644
index 0000000000..bf92f66a05
--- /dev/null
+++ b/docs/src/examples/components/Alert/Variations/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Info"
+      description="An alert may be formatted to display information."
+      examplePath="components/Alert/Variations/AlertExampleInfo"
+    />
+    <ComponentExample
+      title="Warning"
+      description="An alert may be formatted to display a warning message."
+      examplePath="components/Alert/Variations/AlertExampleWarning"
+    />
+    <ComponentExample
+      title="Success"
+      description="An alert may be formatted to display a successful message."
+      examplePath="components/Alert/Variations/AlertExampleSuccess"
+    />
+    <ComponentExample
+      title="Danger"
+      description="An alert may be formatted to display a danger message."
+      examplePath="components/Alert/Variations/AlertExampleDanger"
+    />
+    <ComponentExample
+      title="Attached"
+      description="An Alert can be can be formatted to attach itself to other content."
+      examplePath="components/Alert/Variations/AlertExampleAttached"
+    />
+    <ComponentExample
+      title="Closable"
+      description="An Alert that the user can choose to hide."
+      examplePath="components/Alert/Variations/AlertExampleClosable"
+    />
+  </ExampleSection>
+)
+
+export default Variations
diff --git a/docs/src/examples/components/Alert/index.tsx b/docs/src/examples/components/Alert/index.tsx
new file mode 100644
index 0000000000..c184793bbf
--- /dev/null
+++ b/docs/src/examples/components/Alert/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import Rtl from './Rtl'
+import Types from './Types'
+import Variations from './Variations'
+
+const AlertExamples = () => (
+  <>
+    <Types />
+    <Variations />
+    <Rtl />
+  </>
+)
+
+export default AlertExamples
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
new file mode 100644
index 0000000000..42926dae52
--- /dev/null
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -0,0 +1,134 @@
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import {
+  UIComponent,
+  UIComponentProps,
+  ContentComponentProps,
+  commonPropTypes,
+  customPropTypes,
+  childrenExist,
+  rtlTextContainer,
+} from '../../lib'
+import { RenderResultConfig } from 'src/lib/renderComponent'
+import { defaultBehavior } from '../../lib/accessibility'
+import { Accessibility } from '../../lib/accessibility/types'
+import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { Box, Icon } from '../..'
+
+export type AlertSlotClassNames = Record<'content' | 'closeIcon', string>
+
+export interface AlertProps extends UIComponentProps, ContentComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
+  /** Controls Alert's relation to neighboring items. */
+  attached?: boolean | 'top' | 'bottom'
+
+  /** Icon used for dismissing the Alert, 'close' by default. */
+  closeIcon?: ShorthandValue
+
+  /** An alert may be formatted to display a danger message. */
+  danger?: boolean
+
+  /** An alert may be formatted to display information. */
+  info?: boolean
+
+  /**
+   * The callback used when the user chooses to hide the Alert.
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and proposed value.
+   */
+  onClose?: ComponentEventHandler<AlertProps>
+
+  /** An alert may be formatted to display a successful message. */
+  success?: boolean
+
+  /** An alert may be formatted to display a warning message. */
+  warning?: boolean
+}
+
+/**
+ * A Alert displays information that explains nearby content.
+ */
+class Alert extends UIComponent<ReactProps<AlertProps>, {}> {
+  static displayName = 'Alert'
+  static className = 'ui-alert'
+
+  static slotClassNames: AlertSlotClassNames = {
+    content: `${Alert.className}__content`,
+    closeIcon: `${Alert.className}__closeIcon`,
+  }
+
+  static propTypes = {
+    ...commonPropTypes.createCommon(),
+    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
+    closeIcon: customPropTypes.itemShorthand,
+    danger: PropTypes.bool,
+    info: PropTypes.bool,
+    onClose: PropTypes.func,
+    success: PropTypes.bool,
+    warning: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    accessibility: defaultBehavior,
+    closeIcon: 'close',
+  }
+
+  renderComponent(config: RenderResultConfig<AlertProps>) {
+    const { accessibility, classes, ElementType, unhandledProps } = config
+    const { children, content } = this.props
+    return (
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+      >
+        {childrenExist(children) ? children : this.renderContent(config)}
+      </ElementType>
+    )
+  }
+
+  private renderContent = ({ styles, variables }: RenderResultConfig<AlertProps>) => {
+    const { closeIcon, content, onClose } = this.props
+    return (
+      <>
+        {Box.create(content, {
+          defaultProps: {
+            className: Alert.slotClassNames.content,
+            styles: styles.content,
+          },
+        })}
+        {onClose &&
+          Icon.create(closeIcon, {
+            defaultProps: {
+              className: Alert.slotClassNames.closeIcon,
+              styles: styles.icon,
+              variables: variables.icon,
+            },
+            overrideProps: this.handleCloseIconOverrides,
+          })}
+      </>
+    )
+  }
+
+  private handleCloseIconOverrides = (predefinedProps: AlertProps) => ({
+    onClick: (e: React.SyntheticEvent) => {
+      this.handleOnClose(e)
+      _.invoke(predefinedProps, 'onClick', e, this.props)
+    },
+    ...(predefinedProps.onClick && { tabIndex: '0' }),
+  })
+
+  private handleOnClose = (e: React.SyntheticEvent) => {
+    _.invoke(this.props, 'onClose', e, { ...this.props })
+  }
+}
+
+export default Alert
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ec4a1463a7..eaf525dab5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -12,6 +12,8 @@ export * from './themes/types'
 
 export { default as Accordion, AccordionProps } from './components/Accordion/Accordion'
 
+export { default as Alert, AlertProps } from './components/Alert/Alert'
+
 export { default as Attachment, AttachmentProps } from './components/Attachment/Attachment'
 
 export { default as Avatar, AvatarProps } from './components/Avatar/Avatar'
diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts
index 2c39552e00..3b11a49533 100644
--- a/packages/react/src/themes/teams/colors.ts
+++ b/packages/react/src/themes/teams/colors.ts
@@ -39,16 +39,16 @@ export const naturalColors: NaturalColors = {
     900: '#237B4B', // siteVariables.green04
   },
   grey: {
-    50: '#FFFFFF', // siteVariables.white
-    100: '#E6E6E6',
-    200: '#CDCCCC',
-    300: '#B8B8B8',
-    400: '#A2A2A2',
-    500: '#8C8C8C',
-    600: '#747373',
-    700: '#5F5E5E',
-    800: '#404040',
-    900: '#252424', // siteVariables.black
+    50: '#FFFFFF', // $app-white
+    100: '#FAF9F8', // $app-gray14
+    200: '#F3F2F1', // $app-gray10
+    300: '#EDEBE9', // $app-gray09
+    400: '#E1DFDD', // $app-gray08
+    500: '#C8C6C4', // $app-gray06
+    600: '#979593', // $app-gray04
+    700: '#605E5C', // $app-gray03
+    800: '#484644', // $app-gray02
+    900: '#252424', // $app-black
   },
   orange: {
     50: '#FEF9F7',
@@ -75,8 +75,8 @@ export const naturalColors: NaturalColors = {
     900: '#B34A84',
   },
   red: {
-    50: '#F2D1D7',
-    100: '#ECBDC5',
+    50: '#FCF4F6', // $app-red-10
+    100: '#F3D6DB', // $app-red-08
     200: '#E8AFB9',
     300: '#E39EAA',
     400: '#DE8D9B',
@@ -84,7 +84,7 @@ export const naturalColors: NaturalColors = {
     600: '#D56B7E',
     700: '#D05B70',
     800: '#CC4B61',
-    900: '#C4314B', // siteVariables.red
+    900: '#C4314B', // $app-red
   },
   yellow: {
     50: '#FEF5D0',
@@ -96,7 +96,7 @@ export const naturalColors: NaturalColors = {
     600: '#FAE06C',
     700: '#F9DC58',
     800: '#F9D844',
-    900: '#F8D22A', // siteVariables.yellow
+    900: '#F8D22A', // $app-yellow
   },
   darkOrange: {
     50: '#F9ECEA',
diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts
index 639529a9f9..c69164a190 100644
--- a/packages/react/src/themes/teams/componentStyles.ts
+++ b/packages/react/src/themes/teams/componentStyles.ts
@@ -2,6 +2,8 @@ export { default as Accordion } from './components/Accordion/accordionStyles'
 export { default as AccordionContent } from './components/Accordion/accordionContentStyles'
 export { default as AccordionTitle } from './components/Accordion/accordionTitleStyles'
 
+export { default as Alert } from './components/Alert/alertStyles'
+
 export { default as Attachment } from './components/Attachment/attachmentStyles'
 
 export { default as Avatar } from './components/Avatar/avatarStyles'
diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts
index 02e2dc6621..61a93c4583 100644
--- a/packages/react/src/themes/teams/componentVariables.ts
+++ b/packages/react/src/themes/teams/componentVariables.ts
@@ -2,6 +2,8 @@ export { default as AccordionContent } from './components/Accordion/accordionCon
 
 export { default as Attachment } from './components/Attachment/attachmentVariables'
 
+export { default as Alert } from './components/Alert/alertVariables'
+
 export { default as Avatar } from './components/Avatar/avatarVariables'
 
 export { default as Button } from './components/Button/buttonVariables'
diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
new file mode 100644
index 0000000000..d5cb3c0291
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -0,0 +1,89 @@
+import * as React from 'react'
+import {
+  ComponentSlotStylesInput,
+  ICSSInJSStyle,
+  SiteVariablesPrepared,
+  NaturalColors,
+} from '../../../types'
+import { AlertProps } from '../../../../components/Alert/Alert'
+import { AlertVariables } from './alertVariables'
+
+const getIntentColorsFromProps = (
+  p: AlertProps,
+  v: AlertVariables,
+  siteVars: SiteVariablesPrepared,
+): React.CSSProperties => {
+  const { colors } = siteVars
+  const naturalColors: NaturalColors = siteVars.naturalColors
+
+  if (p.danger) {
+    return {
+      color: colors.red[900], // $app-red
+      backgroundColor: colors.red[50], // $app-red-10
+      borderColor: colors.red[100], // $app-red-08
+    }
+  }
+
+  if (p.info) {
+    return {
+      color: colors.grey[900], // $app-black
+      backgroundColor: colors.grey[300], // $app-gray09
+      borderColor: colors.grey[400], // $app-gray08
+    }
+  }
+
+  if (p.success) {
+    return {
+      color: colors.green[900], // $app-green-04
+      backgroundColor: colors.grey[50], // $app-white
+      borderColor: naturalColors.lightGreen[900], // $app-green
+    }
+  }
+
+  if (p.warning) {
+    return {
+      color: colors.grey[700],
+      backgroundColor: colors.grey[50], // $app-white
+      borderColor: colors.yellow[900], // $app-yellow
+    }
+  }
+
+  return {
+    color: v.color,
+    backgroundColor: v.backgroundColor,
+    borderColor: v.borderColor,
+  }
+}
+
+const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
+  root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => {
+    return {
+      display: 'flex',
+      position: 'relative',
+      width: '100%',
+      boxSizing: 'border-box',
+      border: '1px solid',
+      borderRadius: v.borderRadius,
+      padding: v.padding,
+      fontWeight: v.fontWeight,
+
+      ...getIntentColorsFromProps(p, v, siteVariables),
+
+      ...((p.attached === 'top' || p.attached === true) && {
+        borderRadius: `${v.borderRadius} ${v.borderRadius} 0 0`,
+      }),
+
+      ...(p.attached === 'bottom' && { borderRadius: `0 0 ${v.borderRadius} ${v.borderRadius}` }),
+    }
+  },
+
+  content: (): ICSSInJSStyle => ({
+    flexGrow: 1,
+  }),
+
+  icon: (): ICSSInJSStyle => ({
+    /** TODO */
+  }),
+}
+
+export default alertStyles
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
new file mode 100644
index 0000000000..a2da7b1d37
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -0,0 +1,26 @@
+import { FontWeightProperty } from 'csstype'
+
+import { pxToRem } from '../../../../lib'
+import { SiteVariablesPrepared } from 'src/themes/types'
+
+export interface AlertVariables {
+  borderRadius: string
+  backgroundColor: string
+  borderColor: string
+  color: string
+  fontWeight: FontWeightProperty
+  padding: string
+}
+
+export default (siteVars: SiteVariablesPrepared): AlertVariables => {
+  const { colors } = siteVars
+
+  return {
+    borderRadius: pxToRem(3),
+    backgroundColor: colors.grey[50], // $app-white
+    borderColor: colors.grey[500], // $app-gray02
+    color: colors.grey[800], // $app-black
+    fontWeight: siteVars.fontWeightSemibold,
+    padding: pxToRem(5),
+  }
+}
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
index 5225ae026f..0778a89dcd 100644
--- a/packages/react/src/themes/teams/siteVariables.ts
+++ b/packages/react/src/themes/teams/siteVariables.ts
@@ -1,5 +1,5 @@
 import { pxToRem } from '../../lib'
-import { colors, naturalColors } from './colors'
+import { colors } from './colors'
 
 //
 // VARIABLES
@@ -11,21 +11,24 @@ export const htmlFontSize = '10px' // what 1rem represents
 //
 export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
 
-export const gray02 = '#484644' // no mapping color
-export const gray03 = '#605E5C' // no mapping color
-export const gray04 = '#979593' // no mapping color
-export const gray06 = '#C8C6C4' // no mapping color
-export const gray08 = '#E1DFDD' // no mapping color
-export const gray09 = '#EDEBE9' // no mapping color
-export const gray10 = '#F3F2F1' // no mapping color
-export const gray14 = '#FAF9F8' // no mapping color
+export const gray02 = colors.grey[800]
+export const gray03 = colors.grey[700]
+export const gray04 = colors.grey[600]
+export const gray06 = colors.grey[500]
+export const gray08 = colors.grey[400]
+export const gray09 = colors.grey[300]
+export const gray10 = colors.grey[200]
+export const gray14 = colors.grey[100]
+
+export const red = colors.red[900]
+export const red08 = colors.red[100]
+export const red10 = colors.red[50]
 
 export const brand04 = '#464775' // no mapping color
 export const brand08 = '#8B8CC7' // no mapping color
 
 export const magenta = '#B24782' // no mapping color
 export const orchid = '#943670' // no mapping color
-export const red08 = '#F3D6DB' // no mapping color
 
 //
 // SHADOW LEVELS
@@ -51,17 +54,16 @@ export const fontSizes = {
 //
 // STATUS COLORS
 //
-export const successStatusBackgroundColor = naturalColors.lightGreen[900]
-export const successStatusTextColor = colors.grey[50]
-export const infoStatusBackgroundColor = 'blue'
-export const infoStatusTextColor = colors.grey[50]
-export const warningStatusBackgroundColor = colors.yellow[900]
-export const warningStatusTextColor = colors.grey[50]
-export const errorStatusBackgroundColor = colors.red[900]
-export const errorStatusTextColor = colors.grey[50]
-export const unknownStatusBackgroundColor = gray04
-export const unknownStatusTextColor = colors.grey[50]
-
+export const successStatusBackgroundColor = colors.grey[50] // $app-white
+export const successStatusTextColor = colors.green[900] // $app-green-04
+export const infoStatusBackgroundColor = colors.grey[300] // $app-gray09
+export const infoStatusTextColor = colors.grey[900] // $app-black
+export const warningStatusBackgroundColor = colors.grey[50] // $app-white
+export const warningStatusTextColor = colors.grey[700]
+export const errorStatusBackgroundColor = colors.red[50] // $app-red-10
+export const errorStatusTextColor = colors.red[900] // $app-red
+export const unknownStatusBackgroundColor = colors.grey[50] // $app-white
+export const unknownStatusTextColor = gray04
 //
 // FONT WEIGHTS
 //
diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts
index 6983bad295..9a0aed8ef9 100644
--- a/packages/react/src/themes/types.ts
+++ b/packages/react/src/themes/types.ts
@@ -294,6 +294,7 @@ export interface ThemeComponentStylesInput {
   [key: string]: ComponentSlotStylesInput | undefined
 
   Accordion?: ComponentSlotStylesInput
+  Alert?: ComponentSlotStylesInput
   Animation?: ComponentSlotStylesInput
   Attachment?: ComponentSlotStylesInput
   Avatar?: ComponentSlotStylesInput
@@ -337,6 +338,7 @@ export interface ThemeComponentStylesPrepared {
   [key: string]: ComponentSlotStylesPrepared | undefined
 
   Accordion?: ComponentSlotStylesPrepared
+  Alert?: ComponentSlotStylesPrepared
   Animation?: ComponentSlotStylesPrepared
   Attachment?: ComponentSlotStylesPrepared
   Avatar?: ComponentSlotStylesPrepared
@@ -380,6 +382,7 @@ export interface ThemeComponentVariablesInput {
   [key: string]: any
 
   Accordion?: ComponentVariablesInput
+  Alert?: ComponentVariablesInput
   Animation?: ComponentVariablesInput
   Attachment?: ComponentVariablesInput
   Avatar?: ComponentVariablesInput
@@ -421,6 +424,7 @@ export interface ThemeComponentVariablesPrepared {
   [key: string]: any
 
   Accordion?: ComponentVariablesPrepared
+  Alert?: ComponentVariablesPrepared
   Animation?: ComponentVariablesPrepared
   Attachment?: ComponentVariablesPrepared
   Avatar?: ComponentVariablesPrepared

From 1bbf46a34f4a4422263bac780c46c5f6a3b57545 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Mon, 18 Mar 2019 13:31:27 +0100
Subject: [PATCH 2/8] addressed PR comments

---
 .../examples/components/Alert/Types/index.tsx |  1 +
 packages/react/src/components/Alert/Alert.tsx | 46 ++++++++++---------
 .../teams/components/Alert/alertStyles.ts     |  4 +-
 .../teams/components/Alert/alertVariables.ts  |  6 ++-
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/docs/src/examples/components/Alert/Types/index.tsx b/docs/src/examples/components/Alert/Types/index.tsx
index 2b26245a59..5a88ffd819 100644
--- a/docs/src/examples/components/Alert/Types/index.tsx
+++ b/docs/src/examples/components/Alert/Types/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 42926dae52..1cf4fd5507 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -15,9 +15,13 @@ import { RenderResultConfig } from 'src/lib/renderComponent'
 import { defaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
-import { Box, Icon } from '../..'
+import Box from '../Box/Box'
+import Button, { ButtonProps } from '../Button/Button'
 
-export type AlertSlotClassNames = Record<'content' | 'closeIcon', string>
+export interface AlertSlotClassNames {
+  content: string
+  closeButton: string
+}
 
 export interface AlertProps extends UIComponentProps, ContentComponentProps {
   /**
@@ -29,8 +33,8 @@ export interface AlertProps extends UIComponentProps, ContentComponentProps {
   /** Controls Alert's relation to neighboring items. */
   attached?: boolean | 'top' | 'bottom'
 
-  /** Icon used for dismissing the Alert, 'close' by default. */
-  closeIcon?: ShorthandValue
+  /** Button used for dismissing the Alert. */
+  closeButton?: ShorthandValue<ButtonProps>
 
   /** An alert may be formatted to display a danger message. */
   danger?: boolean
@@ -55,19 +59,19 @@ export interface AlertProps extends UIComponentProps, ContentComponentProps {
 /**
  * A Alert displays information that explains nearby content.
  */
-class Alert extends UIComponent<ReactProps<AlertProps>, {}> {
+class Alert extends UIComponent<ReactProps<AlertProps>> {
   static displayName = 'Alert'
   static className = 'ui-alert'
 
   static slotClassNames: AlertSlotClassNames = {
     content: `${Alert.className}__content`,
-    closeIcon: `${Alert.className}__closeIcon`,
+    closeButton: `${Alert.className}__closeButton`,
   }
 
   static propTypes = {
     ...commonPropTypes.createCommon(),
     attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
-    closeIcon: customPropTypes.itemShorthand,
+    closeButton: customPropTypes.itemShorthand,
     danger: PropTypes.bool,
     info: PropTypes.bool,
     onClose: PropTypes.func,
@@ -77,7 +81,7 @@ class Alert extends UIComponent<ReactProps<AlertProps>, {}> {
 
   static defaultProps = {
     accessibility: defaultBehavior,
-    closeIcon: 'close',
+    closeButton: { icon: 'close' },
   }
 
   renderComponent(config: RenderResultConfig<AlertProps>) {
@@ -95,8 +99,8 @@ class Alert extends UIComponent<ReactProps<AlertProps>, {}> {
     )
   }
 
-  private renderContent = ({ styles, variables }: RenderResultConfig<AlertProps>) => {
-    const { closeIcon, content, onClose } = this.props
+  renderContent = ({ styles }: RenderResultConfig<AlertProps>) => {
+    const { closeButton, content, onClose } = this.props
     return (
       <>
         {Box.create(content, {
@@ -106,28 +110,28 @@ class Alert extends UIComponent<ReactProps<AlertProps>, {}> {
           },
         })}
         {onClose &&
-          Icon.create(closeIcon, {
+          Button.create(closeButton, {
             defaultProps: {
-              className: Alert.slotClassNames.closeIcon,
-              styles: styles.icon,
-              variables: variables.icon,
+              iconOnly: true,
+              text: true,
+              className: Alert.slotClassNames.closeButton,
+              styles: styles.closeButton,
             },
-            overrideProps: this.handleCloseIconOverrides,
+            overrideProps: this.handleCloseButtonOverrides,
           })}
       </>
     )
   }
 
-  private handleCloseIconOverrides = (predefinedProps: AlertProps) => ({
-    onClick: (e: React.SyntheticEvent) => {
+  handleCloseButtonOverrides = (predefinedProps: ButtonProps) => ({
+    onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => {
       this.handleOnClose(e)
-      _.invoke(predefinedProps, 'onClick', e, this.props)
+      _.invoke(predefinedProps, 'onClick', e, buttonProps)
     },
-    ...(predefinedProps.onClick && { tabIndex: '0' }),
   })
 
-  private handleOnClose = (e: React.SyntheticEvent) => {
-    _.invoke(this.props, 'onClose', e, { ...this.props })
+  handleOnClose = (e: React.SyntheticEvent) => {
+    _.invoke(this.props, 'onClose', e, this.props)
   }
 }
 
diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index d5cb3c0291..646d701905 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -59,11 +59,13 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
   root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => {
     return {
       display: 'flex',
+      alignItems: 'center',
       position: 'relative',
       width: '100%',
       boxSizing: 'border-box',
-      border: '1px solid',
+      border: v.border,
       borderRadius: v.borderRadius,
+      minHeight: v.minHeight,
       padding: v.padding,
       fontWeight: v.fontWeight,
 
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
index a2da7b1d37..2e58f9f0de 100644
--- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -4,11 +4,13 @@ import { pxToRem } from '../../../../lib'
 import { SiteVariablesPrepared } from 'src/themes/types'
 
 export interface AlertVariables {
+  border: string
   borderRadius: string
   backgroundColor: string
   borderColor: string
   color: string
   fontWeight: FontWeightProperty
+  minHeight: string
   padding: string
 }
 
@@ -16,11 +18,13 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => {
   const { colors } = siteVars
 
   return {
+    border: `${pxToRem(1)} solid`,
     borderRadius: pxToRem(3),
     backgroundColor: colors.grey[50], // $app-white
     borderColor: colors.grey[500], // $app-gray02
     color: colors.grey[800], // $app-black
     fontWeight: siteVars.fontWeightSemibold,
-    padding: pxToRem(5),
+    minHeight: pxToRem(32),
+    padding: `0 0 0 ${pxToRem(8)}`,
   }
 }

From 770c5acbddabba2d997e7d9d5efd4c7ab4a7dce4 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Mon, 18 Mar 2019 14:01:37 +0100
Subject: [PATCH 3/8] reverted major color changes

---
 packages/react/src/themes/teams/colors.ts     | 28 +++++------
 .../teams/components/Alert/alertStyles.ts     | 14 +++---
 .../teams/components/Alert/alertVariables.ts  |  4 +-
 .../react/src/themes/teams/siteVariables.ts   | 47 ++++++++++---------
 4 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts
index 3b11a49533..2c39552e00 100644
--- a/packages/react/src/themes/teams/colors.ts
+++ b/packages/react/src/themes/teams/colors.ts
@@ -39,16 +39,16 @@ export const naturalColors: NaturalColors = {
     900: '#237B4B', // siteVariables.green04
   },
   grey: {
-    50: '#FFFFFF', // $app-white
-    100: '#FAF9F8', // $app-gray14
-    200: '#F3F2F1', // $app-gray10
-    300: '#EDEBE9', // $app-gray09
-    400: '#E1DFDD', // $app-gray08
-    500: '#C8C6C4', // $app-gray06
-    600: '#979593', // $app-gray04
-    700: '#605E5C', // $app-gray03
-    800: '#484644', // $app-gray02
-    900: '#252424', // $app-black
+    50: '#FFFFFF', // siteVariables.white
+    100: '#E6E6E6',
+    200: '#CDCCCC',
+    300: '#B8B8B8',
+    400: '#A2A2A2',
+    500: '#8C8C8C',
+    600: '#747373',
+    700: '#5F5E5E',
+    800: '#404040',
+    900: '#252424', // siteVariables.black
   },
   orange: {
     50: '#FEF9F7',
@@ -75,8 +75,8 @@ export const naturalColors: NaturalColors = {
     900: '#B34A84',
   },
   red: {
-    50: '#FCF4F6', // $app-red-10
-    100: '#F3D6DB', // $app-red-08
+    50: '#F2D1D7',
+    100: '#ECBDC5',
     200: '#E8AFB9',
     300: '#E39EAA',
     400: '#DE8D9B',
@@ -84,7 +84,7 @@ export const naturalColors: NaturalColors = {
     600: '#D56B7E',
     700: '#D05B70',
     800: '#CC4B61',
-    900: '#C4314B', // $app-red
+    900: '#C4314B', // siteVariables.red
   },
   yellow: {
     50: '#FEF5D0',
@@ -96,7 +96,7 @@ export const naturalColors: NaturalColors = {
     600: '#FAE06C',
     700: '#F9DC58',
     800: '#F9D844',
-    900: '#F8D22A', // $app-yellow
+    900: '#F8D22A', // siteVariables.yellow
   },
   darkOrange: {
     50: '#F9ECEA',
diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index 646d701905..471a1ac076 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -18,17 +18,17 @@ const getIntentColorsFromProps = (
 
   if (p.danger) {
     return {
-      color: colors.red[900], // $app-red
-      backgroundColor: colors.red[50], // $app-red-10
-      borderColor: colors.red[100], // $app-red-08
+      color: siteVars.red,
+      backgroundColor: siteVars.red10,
+      borderColor: siteVars.red08,
     }
   }
 
   if (p.info) {
     return {
-      color: colors.grey[900], // $app-black
-      backgroundColor: colors.grey[300], // $app-gray09
-      borderColor: colors.grey[400], // $app-gray08
+      color: colors.grey[900],
+      backgroundColor: siteVars.gray09,
+      borderColor: siteVars.gray08,
     }
   }
 
@@ -42,7 +42,7 @@ const getIntentColorsFromProps = (
 
   if (p.warning) {
     return {
-      color: colors.grey[700],
+      color: siteVars.gray03,
       backgroundColor: colors.grey[50], // $app-white
       borderColor: colors.yellow[900], // $app-yellow
     }
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
index 2e58f9f0de..81f82ed8e6 100644
--- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -21,8 +21,8 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => {
     border: `${pxToRem(1)} solid`,
     borderRadius: pxToRem(3),
     backgroundColor: colors.grey[50], // $app-white
-    borderColor: colors.grey[500], // $app-gray02
-    color: colors.grey[800], // $app-black
+    borderColor: siteVars.gray06,
+    color: siteVars.gray02,
     fontWeight: siteVars.fontWeightSemibold,
     minHeight: pxToRem(32),
     padding: `0 0 0 ${pxToRem(8)}`,
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
index 0778a89dcd..7b364de65e 100644
--- a/packages/react/src/themes/teams/siteVariables.ts
+++ b/packages/react/src/themes/teams/siteVariables.ts
@@ -1,5 +1,5 @@
 import { pxToRem } from '../../lib'
-import { colors } from './colors'
+import { colors, naturalColors } from './colors'
 
 //
 // VARIABLES
@@ -11,18 +11,14 @@ export const htmlFontSize = '10px' // what 1rem represents
 //
 export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
 
-export const gray02 = colors.grey[800]
-export const gray03 = colors.grey[700]
-export const gray04 = colors.grey[600]
-export const gray06 = colors.grey[500]
-export const gray08 = colors.grey[400]
-export const gray09 = colors.grey[300]
-export const gray10 = colors.grey[200]
-export const gray14 = colors.grey[100]
-
-export const red = colors.red[900]
-export const red08 = colors.red[100]
-export const red10 = colors.red[50]
+export const gray02 = '#484644' // no mapping color
+export const gray03 = '#605E5C' // no mapping color
+export const gray04 = '#979593' // no mapping color
+export const gray06 = '#C8C6C4' // no mapping color
+export const gray08 = '#E1DFDD' // no mapping color
+export const gray09 = '#EDEBE9' // no mapping color
+export const gray10 = '#F3F2F1' // no mapping color
+export const gray14 = '#FAF9F8' // no mapping color
 
 export const brand04 = '#464775' // no mapping color
 export const brand08 = '#8B8CC7' // no mapping color
@@ -30,6 +26,10 @@ export const brand08 = '#8B8CC7' // no mapping color
 export const magenta = '#B24782' // no mapping color
 export const orchid = '#943670' // no mapping color
 
+export const red = colors.red[900] // no mapping color $app-red
+export const red08 = '#FCF4F6' // no mapping color $app-red-08
+export const red10 = '#F3D6DB' // no mapping color $app-red-10
+
 //
 // SHADOW LEVELS
 //
@@ -54,16 +54,17 @@ export const fontSizes = {
 //
 // STATUS COLORS
 //
-export const successStatusBackgroundColor = colors.grey[50] // $app-white
-export const successStatusTextColor = colors.green[900] // $app-green-04
-export const infoStatusBackgroundColor = colors.grey[300] // $app-gray09
-export const infoStatusTextColor = colors.grey[900] // $app-black
-export const warningStatusBackgroundColor = colors.grey[50] // $app-white
-export const warningStatusTextColor = colors.grey[700]
-export const errorStatusBackgroundColor = colors.red[50] // $app-red-10
-export const errorStatusTextColor = colors.red[900] // $app-red
-export const unknownStatusBackgroundColor = colors.grey[50] // $app-white
-export const unknownStatusTextColor = gray04
+export const successStatusBackgroundColor = naturalColors.lightGreen[900]
+export const successStatusTextColor = colors.grey[50]
+export const infoStatusBackgroundColor = 'blue'
+export const infoStatusTextColor = colors.grey[50]
+export const warningStatusBackgroundColor = colors.yellow[900]
+export const warningStatusTextColor = colors.grey[50]
+export const errorStatusBackgroundColor = colors.red[900]
+export const errorStatusTextColor = colors.grey[50]
+export const unknownStatusBackgroundColor = gray04
+export const unknownStatusTextColor = colors.grey[50]
+
 //
 // FONT WEIGHTS
 //

From 1965de214e7c9f9ba6532dc39c28122c1a696412 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Mon, 18 Mar 2019 15:06:22 +0100
Subject: [PATCH 4/8] rearranged methods in Alert.tsx

---
 packages/react/src/components/Alert/Alert.tsx | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 1cf4fd5507..172951dc87 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -84,19 +84,15 @@ class Alert extends UIComponent<ReactProps<AlertProps>> {
     closeButton: { icon: 'close' },
   }
 
-  renderComponent(config: RenderResultConfig<AlertProps>) {
-    const { accessibility, classes, ElementType, unhandledProps } = config
-    const { children, content } = this.props
-    return (
-      <ElementType
-        className={classes.root}
-        {...accessibility.attributes.root}
-        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
-        {...unhandledProps}
-      >
-        {childrenExist(children) ? children : this.renderContent(config)}
-      </ElementType>
-    )
+  handleCloseButtonOverrides = (predefinedProps: ButtonProps) => ({
+    onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => {
+      this.handleOnClose(e)
+      _.invoke(predefinedProps, 'onClick', e, buttonProps)
+    },
+  })
+
+  handleOnClose = (e: React.SyntheticEvent) => {
+    _.invoke(this.props, 'onClose', e, this.props)
   }
 
   renderContent = ({ styles }: RenderResultConfig<AlertProps>) => {
@@ -123,15 +119,19 @@ class Alert extends UIComponent<ReactProps<AlertProps>> {
     )
   }
 
-  handleCloseButtonOverrides = (predefinedProps: ButtonProps) => ({
-    onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => {
-      this.handleOnClose(e)
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
-    },
-  })
-
-  handleOnClose = (e: React.SyntheticEvent) => {
-    _.invoke(this.props, 'onClose', e, this.props)
+  renderComponent(config: RenderResultConfig<AlertProps>) {
+    const { accessibility, classes, ElementType, unhandledProps } = config
+    const { children, content } = this.props
+    return (
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+      >
+        {childrenExist(children) ? children : this.renderContent(config)}
+      </ElementType>
+    )
   }
 }
 

From 38c2e00f37b37e7740effb814acdc348ba1b0f15 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Mon, 18 Mar 2019 15:59:26 +0100
Subject: [PATCH 5/8] added closeButton color styles

---
 .../react/src/themes/teams/components/Alert/alertStyles.ts    | 4 ++--
 .../react/src/themes/teams/components/Alert/alertVariables.ts | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index 471a1ac076..05a87400dd 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -83,8 +83,8 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
     flexGrow: 1,
   }),
 
-  icon: (): ICSSInJSStyle => ({
-    /** TODO */
+  closeButton: ({ variables: v }): ICSSInJSStyle => ({
+    color: v.closeButtonColor || 'currentColor',
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
index 81f82ed8e6..b5ed953a76 100644
--- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -12,6 +12,7 @@ export interface AlertVariables {
   fontWeight: FontWeightProperty
   minHeight: string
   padding: string
+  closeButtonColor: string
 }
 
 export default (siteVars: SiteVariablesPrepared): AlertVariables => {
@@ -26,5 +27,6 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => {
     fontWeight: siteVars.fontWeightSemibold,
     minHeight: pxToRem(32),
     padding: `0 0 0 ${pxToRem(8)}`,
+    closeButtonColor: undefined,
   }
 }

From f482118e2156d8b9189ddfc7a2e506fa4b223228 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Mon, 18 Mar 2019 16:42:20 +0100
Subject: [PATCH 6/8] fixed colors in siteVariables and added changelog

---
 CHANGELOG.md                                     | 3 +++
 packages/react/src/themes/teams/siteVariables.ts | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2101ee1f2f..1423d4efa7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Add aria posinset and setsize, hide menu indicator from narration @jurokapsiar ([#1066](https://github.com/stardust-ui/react/pull/1066))
 
+### Features
+- Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063))
+
 <!--------------------------------[ v0.23.1 ]------------------------------- -->
 ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.23.0...v0.23.1)
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
index 7b364de65e..36f46dec74 100644
--- a/packages/react/src/themes/teams/siteVariables.ts
+++ b/packages/react/src/themes/teams/siteVariables.ts
@@ -27,8 +27,8 @@ export const magenta = '#B24782' // no mapping color
 export const orchid = '#943670' // no mapping color
 
 export const red = colors.red[900] // no mapping color $app-red
-export const red08 = '#FCF4F6' // no mapping color $app-red-08
-export const red10 = '#F3D6DB' // no mapping color $app-red-10
+export const red08 = '#F3D6DB' // no mapping color $app-red-08
+export const red10 = '#FCF4F6' // no mapping color $app-red-10
 
 //
 // SHADOW LEVELS

From c1f9c9c75c665c95f03478494caa325257d0998d Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Mon, 18 Mar 2019 18:37:24 +0100
Subject: [PATCH 7/8] - removed onClose prop; - renamed closeButton to action;
 - adapted examples; - added unit tests

---
 ...d.tsx => AlertExampleAction.shorthand.tsx} |  5 +-
 .../components/Alert/Variations/index.tsx     |  6 +-
 packages/react/src/components/Alert/Alert.tsx | 67 +++++++------------
 .../react/src/components/Button/Button.tsx    |  2 +-
 .../teams/components/Alert/alertStyles.ts     | 40 ++++++-----
 .../teams/components/Alert/alertVariables.ts  |  6 +-
 .../specs/components/Alert/Alert-test.tsx     | 14 ++++
 .../specs/components/Label/Label-test.tsx     |  3 +-
 8 files changed, 69 insertions(+), 74 deletions(-)
 rename docs/src/examples/components/Alert/Variations/{AlertExampleClosable.shorthand.tsx => AlertExampleAction.shorthand.tsx} (64%)
 create mode 100644 packages/react/test/specs/components/Alert/Alert-test.tsx

diff --git a/docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx b/docs/src/examples/components/Alert/Variations/AlertExampleAction.shorthand.tsx
similarity index 64%
rename from docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx
rename to docs/src/examples/components/Alert/Variations/AlertExampleAction.shorthand.tsx
index 3dbfb6765b..36c358d092 100644
--- a/docs/src/examples/components/Alert/Variations/AlertExampleClosable.shorthand.tsx
+++ b/docs/src/examples/components/Alert/Variations/AlertExampleAction.shorthand.tsx
@@ -7,7 +7,10 @@ class AlertExampleClosable extends React.Component<{}, { open: boolean }> {
   render() {
     return (
       this.state.open && (
-        <Alert content="This is a closable alert" onClose={() => this.setState({ open: false })} />
+        <Alert
+          content="This is a closable alert"
+          action={{ icon: 'close', onClick: () => this.setState({ open: false }) }}
+        />
       )
     )
   }
diff --git a/docs/src/examples/components/Alert/Variations/index.tsx b/docs/src/examples/components/Alert/Variations/index.tsx
index bf92f66a05..14cd1fe4a1 100644
--- a/docs/src/examples/components/Alert/Variations/index.tsx
+++ b/docs/src/examples/components/Alert/Variations/index.tsx
@@ -30,9 +30,9 @@ const Variations = () => (
       examplePath="components/Alert/Variations/AlertExampleAttached"
     />
     <ComponentExample
-      title="Closable"
-      description="An Alert that the user can choose to hide."
-      examplePath="components/Alert/Variations/AlertExampleClosable"
+      title="Action"
+      description="An Alert can provide the user with an action. Click on the icon to see the effect."
+      examplePath="components/Alert/Variations/AlertExampleAction"
     />
   </ExampleSection>
 )
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 172951dc87..745d3c4133 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -14,41 +14,34 @@ import {
 import { RenderResultConfig } from 'src/lib/renderComponent'
 import { defaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
+import { ReactProps, ShorthandValue } from '../../types'
 import Box from '../Box/Box'
 import Button, { ButtonProps } from '../Button/Button'
 
 export interface AlertSlotClassNames {
   content: string
-  closeButton: string
+  action: string
 }
 
-export interface AlertProps extends UIComponentProps, ContentComponentProps {
+export interface AlertProps extends UIComponentProps, ContentComponentProps<ShorthandValue> {
   /**
    * Accessibility behavior if overridden by the user.
    * @default defaultBehavior
    */
   accessibility?: Accessibility
 
+  /** Button shorthand for the action slot. */
+  action?: ShorthandValue<ButtonProps>
+
   /** Controls Alert's relation to neighboring items. */
   attached?: boolean | 'top' | 'bottom'
 
-  /** Button used for dismissing the Alert. */
-  closeButton?: ShorthandValue<ButtonProps>
-
   /** An alert may be formatted to display a danger message. */
   danger?: boolean
 
   /** An alert may be formatted to display information. */
   info?: boolean
 
-  /**
-   * The callback used when the user chooses to hide the Alert.
-   * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and proposed value.
-   */
-  onClose?: ComponentEventHandler<AlertProps>
-
   /** An alert may be formatted to display a successful message. */
   success?: boolean
 
@@ -58,6 +51,9 @@ export interface AlertProps extends UIComponentProps, ContentComponentProps {
 
 /**
  * A Alert displays information that explains nearby content.
+ * @accessibility
+ * Other considerations:
+ *  - if Alert contains action slot, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
  */
 class Alert extends UIComponent<ReactProps<AlertProps>> {
   static displayName = 'Alert'
@@ -65,38 +61,24 @@ class Alert extends UIComponent<ReactProps<AlertProps>> {
 
   static slotClassNames: AlertSlotClassNames = {
     content: `${Alert.className}__content`,
-    closeButton: `${Alert.className}__closeButton`,
+    action: `${Alert.className}__action`,
   }
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ content: 'shorthand' }),
+    action: customPropTypes.itemShorthand,
     attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
-    closeButton: customPropTypes.itemShorthand,
     danger: PropTypes.bool,
     info: PropTypes.bool,
-    onClose: PropTypes.func,
     success: PropTypes.bool,
     warning: PropTypes.bool,
   }
 
-  static defaultProps = {
-    accessibility: defaultBehavior,
-    closeButton: { icon: 'close' },
-  }
-
-  handleCloseButtonOverrides = (predefinedProps: ButtonProps) => ({
-    onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => {
-      this.handleOnClose(e)
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
-    },
-  })
-
-  handleOnClose = (e: React.SyntheticEvent) => {
-    _.invoke(this.props, 'onClose', e, this.props)
-  }
+  static defaultProps = { accessibility: defaultBehavior }
 
   renderContent = ({ styles }: RenderResultConfig<AlertProps>) => {
-    const { closeButton, content, onClose } = this.props
+    const { action, content } = this.props
+
     return (
       <>
         {Box.create(content, {
@@ -105,16 +87,14 @@ class Alert extends UIComponent<ReactProps<AlertProps>> {
             styles: styles.content,
           },
         })}
-        {onClose &&
-          Button.create(closeButton, {
-            defaultProps: {
-              iconOnly: true,
-              text: true,
-              className: Alert.slotClassNames.closeButton,
-              styles: styles.closeButton,
-            },
-            overrideProps: this.handleCloseButtonOverrides,
-          })}
+        {Button.create(action, {
+          defaultProps: {
+            iconOnly: true,
+            text: true,
+            className: Alert.slotClassNames.action,
+            styles: styles.action,
+          },
+        })}
       </>
     )
   }
@@ -122,6 +102,7 @@ class Alert extends UIComponent<ReactProps<AlertProps>> {
   renderComponent(config: RenderResultConfig<AlertProps>) {
     const { accessibility, classes, ElementType, unhandledProps } = config
     const { children, content } = this.props
+
     return (
       <ElementType
         className={classes.root}
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 767ca05c4f..b76cb848eb 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -82,7 +82,7 @@ export interface ButtonState {
  * @accessibility
  * Other considerations:
  *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
- *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label', or 'aria-labelledby' attributes
+ *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
  */
 class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
   static create: Function
diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index 05a87400dd..626affeeb9 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -56,35 +56,33 @@ const getIntentColorsFromProps = (
 }
 
 const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
-  root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => {
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      position: 'relative',
-      width: '100%',
-      boxSizing: 'border-box',
-      border: v.border,
-      borderRadius: v.borderRadius,
-      minHeight: v.minHeight,
-      padding: v.padding,
-      fontWeight: v.fontWeight,
+  root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    width: '100%',
+    boxSizing: 'border-box',
+    border: v.border,
+    borderRadius: v.borderRadius,
+    minHeight: v.minHeight,
+    padding: v.padding,
+    fontWeight: v.fontWeight,
 
-      ...getIntentColorsFromProps(p, v, siteVariables),
+    ...getIntentColorsFromProps(p, v, siteVariables),
 
-      ...((p.attached === 'top' || p.attached === true) && {
-        borderRadius: `${v.borderRadius} ${v.borderRadius} 0 0`,
-      }),
+    ...((p.attached === 'top' || p.attached === true) && {
+      borderRadius: `${v.borderRadius} ${v.borderRadius} 0 0`,
+    }),
 
-      ...(p.attached === 'bottom' && { borderRadius: `0 0 ${v.borderRadius} ${v.borderRadius}` }),
-    }
-  },
+    ...(p.attached === 'bottom' && { borderRadius: `0 0 ${v.borderRadius} ${v.borderRadius}` }),
+  }),
 
   content: (): ICSSInJSStyle => ({
     flexGrow: 1,
   }),
 
-  closeButton: ({ variables: v }): ICSSInJSStyle => ({
-    color: v.closeButtonColor || 'currentColor',
+  action: ({ variables: v }): ICSSInJSStyle => ({
+    color: v.actionColor || 'currentColor',
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
index b5ed953a76..05d582cdae 100644
--- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -12,7 +12,7 @@ export interface AlertVariables {
   fontWeight: FontWeightProperty
   minHeight: string
   padding: string
-  closeButtonColor: string
+  actionColor: string
 }
 
 export default (siteVars: SiteVariablesPrepared): AlertVariables => {
@@ -25,8 +25,8 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => {
     borderColor: siteVars.gray06,
     color: siteVars.gray02,
     fontWeight: siteVars.fontWeightSemibold,
-    minHeight: pxToRem(32),
+    minHeight: pxToRem(34),
     padding: `0 0 0 ${pxToRem(8)}`,
-    closeButtonColor: undefined,
+    actionColor: undefined,
   }
 }
diff --git a/packages/react/test/specs/components/Alert/Alert-test.tsx b/packages/react/test/specs/components/Alert/Alert-test.tsx
new file mode 100644
index 0000000000..91956a688f
--- /dev/null
+++ b/packages/react/test/specs/components/Alert/Alert-test.tsx
@@ -0,0 +1,14 @@
+import { isConformant, implementsShorthandProp } from 'test/specs/commonTests'
+
+import Alert from 'src/components/Alert/Alert'
+import Box from 'src/components/Box/Box'
+import Button from 'src/components/Button/Button'
+
+const alertImplementsShorthandProp = implementsShorthandProp(Alert)
+
+describe('Alert', () => {
+  isConformant(Alert)
+
+  alertImplementsShorthandProp('action', Button, { mapsValueToProp: 'content' })
+  alertImplementsShorthandProp('content', Box, { mapsValueToProp: 'children' })
+})
diff --git a/packages/react/test/specs/components/Label/Label-test.tsx b/packages/react/test/specs/components/Label/Label-test.tsx
index 77e0ea915a..a6ec7f2ba7 100644
--- a/packages/react/test/specs/components/Label/Label-test.tsx
+++ b/packages/react/test/specs/components/Label/Label-test.tsx
@@ -1,9 +1,8 @@
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant, implementsShorthandProp } from 'test/specs/commonTests'
 
 import Label from 'src/components/Label/Label'
 import Icon from 'src/components/Icon/Icon'
 import Image from 'src/components/Image/Image'
-import { implementsShorthandProp } from '../../commonTests'
 
 const labelImplementsShorthandProp = implementsShorthandProp(Label)
 

From 7de8cbb32d584f7177a5c0c5df8260a864f77496 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Tue, 19 Mar 2019 15:13:33 +0100
Subject: [PATCH 8/8] aligned with latest design

---
 .../themes/teams/components/Alert/alertStyles.ts  |  5 ++++-
 .../teams/components/Alert/alertVariables.ts      | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index 626affeeb9..49935fb345 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -81,8 +81,11 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
     flexGrow: 1,
   }),
 
-  action: ({ variables: v }): ICSSInJSStyle => ({
+  action: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
+    height: v.actionSize,
+    minWidth: v.actionSize,
     color: v.actionColor || 'currentColor',
+    ...(p.info && { color: siteVariables.gray02 }),
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
index 05d582cdae..ee1c5ed1c9 100644
--- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -12,21 +12,26 @@ export interface AlertVariables {
   fontWeight: FontWeightProperty
   minHeight: string
   padding: string
+
+  actionSize: string
   actionColor: string
 }
 
 export default (siteVars: SiteVariablesPrepared): AlertVariables => {
-  const { colors } = siteVars
+  const alertHeight = 28
+  const borderSize = 1
 
   return {
-    border: `${pxToRem(1)} solid`,
+    border: `${pxToRem(borderSize)} solid`,
     borderRadius: pxToRem(3),
-    backgroundColor: colors.grey[50], // $app-white
+    backgroundColor: siteVars.colors.grey[50], // $app-white
     borderColor: siteVars.gray06,
     color: siteVars.gray02,
     fontWeight: siteVars.fontWeightSemibold,
-    minHeight: pxToRem(34),
-    padding: `0 0 0 ${pxToRem(8)}`,
+    minHeight: pxToRem(alertHeight),
+    padding: `0 0 0 ${pxToRem(16)}`,
+
+    actionSize: pxToRem(alertHeight - 2 * borderSize),
     actionColor: undefined,
   }
 }