fix(notifications): show correct Notification and Alert styling (#379)

Author: Austin Green

packages/notifications/src/Alert.js

@@ -9,9 +9,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import CalloutStyles from '@zendeskgarden/css-callouts';
-import { retrieveTheme } from '@zendeskgarden/react-theming';
+import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming';
 
-import Well from './Well';
 const COMPONENT_ID = 'notifications.alert';
 
 const VALIDATION = {
@@ -24,11 +23,16 @@ const VALIDATION = {
 /**
  * Supports all `<div>` props
  */
-const Alert = styled(Well).attrs(props => ({
+const Alert = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  recessed: props.type === VALIDATION.INFO,
-  className: classNames(props.className, {
+  className: classNames(CalloutStyles['c-callout'], {
+    // RTL
+    [CalloutStyles['is-rtl']]: isRtl(props),
+
+    // Styles
+    [CalloutStyles['c-callout--recessed']]: props.type === VALIDATION.INFO,
+
     // Validation types
     [CalloutStyles['c-callout--success']]: props.type === VALIDATION.SUCCESS,
     [CalloutStyles['c-callout--warning']]: props.type === VALIDATION.WARNING,

packages/notifications/src/Alert.spec.js

@@ -6,11 +6,17 @@
  */
 
 import React from 'react';
-import { render } from 'garden-test-utils';
+import { render, renderRtl } from 'garden-test-utils';
 import Alert from './Alert';
 
 describe('Alert', () => {
   describe('validation', () => {
+    it('should render with RTL styling if applied', () => {
+      const { container } = renderRtl(<Alert type="success" />);
+
+      expect(container.firstChild).toHaveClass('is-rtl');
+    });
+
     it('should render success styling correctly', () => {
       const { container } = render(<Alert type="success" />);
 

packages/notifications/src/Notification.js

@@ -9,9 +9,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import CalloutStyles from '@zendeskgarden/css-callouts';
-import { retrieveTheme } from '@zendeskgarden/react-theming';
+import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming';
 
-import Well from './Well';
 const COMPONENT_ID = 'notifications.notification';
 
 const VALIDATION = {
@@ -24,11 +23,13 @@ const VALIDATION = {
 /**
  * Supports all `<div>` props
  */
-const Notification = styled(Well).attrs(props => ({
+const Notification = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  floating: true,
-  className: classNames(props.className, {
+  className: classNames(CalloutStyles['c-callout'], CalloutStyles['c-callout--dialog'], {
+    // RTL
+    [CalloutStyles['is-rtl']]: isRtl(props),
+
     // Validation types
     [CalloutStyles['c-callout--success']]: props.type === VALIDATION.SUCCESS,
     [CalloutStyles['c-callout--warning']]: props.type === VALIDATION.WARNING,

packages/notifications/src/Notification.spec.js

@@ -6,11 +6,17 @@
  */
 
 import React from 'react';
-import { render } from 'garden-test-utils';
+import { render, renderRtl } from 'garden-test-utils';
 import Notification from './Notification';
 
 describe('Notification', () => {
   describe('validation', () => {
+    it('should render with RTL styling if applied', () => {
+      const { container } = renderRtl(<Notification />);
+
+      expect(container.firstChild).toHaveClass('is-rtl');
+    });
+
     it('should render success styling correctly', () => {
       const { container } = render(<Notification type="success" />);