fix(styles): Remove components that import conflicting global styles (#512)

Author: jstoffan

src/components/ReplyField/ReplyField.scss

@@ -1,7 +1,8 @@
 @import '~box-ui-elements/es/styles/variables';
-@import '~draft-js/dist/Draft.css';
 
 .ba-ReplyField {
+    @import '~draft-js/dist/Draft';
+
     .public-DraftEditorPlaceholder-hasFocus,
     .public-DraftEditorPlaceholder-root {
         margin: 0;

src/components/ReplyForm/ReplyButton.tsx

@@ -0,0 +1,26 @@
+import React, { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export type Props = {
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    isPrimary?: boolean;
+    type: 'button' | 'submit' | 'reset' | undefined;
+} & HTMLAttributes<HTMLButtonElement>;
+
+export default function ReplyButton({ children, isDisabled, isPrimary, ...rest }: Props): JSX.Element {
+    return (
+        <button
+            aria-disabled={isDisabled ? true : undefined}
+            className={classNames('btn', {
+                'btn-primary': isPrimary,
+                'is-disabled': isDisabled,
+            })}
+            disabled={isDisabled ? true : undefined}
+            type="button"
+            {...rest}
+        >
+            {children}
+        </button>
+    );
+}

src/components/ReplyForm/ReplyForm.scss

@@ -0,0 +1,3 @@
+.ba-ReplyForm {
+    margin: 0;
+}

src/components/ReplyForm/ReplyForm.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { getFormattedCommentText } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
-import Button from 'box-ui-elements/es/components/button';
-import PrimaryButton from 'box-ui-elements/es/components/primary-button';
 import { KEYS } from 'box-ui-elements/es/constants';
 import { EditorState } from 'draft-js';
 import { Form, FormikProps } from 'formik';
 import { FormattedMessage, useIntl } from 'react-intl';
 import messages from '../Popups/messages';
+import ReplyButton from './ReplyButton';
 import ReplyField from '../ReplyField';
 import { FormValues, PropsFromState as ContainerProps } from './ReplyFormContainer';
+import './ReplyForm.scss';
 
 export type ReplyFormProps = {
     isPending: boolean;
@@ -27,6 +27,9 @@ const ReplyForm = ({ errors, isPending, onCancel, onChange, setFieldValue, value
     const hasErrors = Object.keys(errors).length > 0;
     const { editorState } = values;
 
+    const handleCancel = (): void => {
+        onCancel(getFormattedCommentText(editorState).text);
+    };
     // Instead of deferring to the Formik handleChange helper, we need to use the setFieldValue helper
     // method in order for DraftJS to work correctly by setting back the whole editorState
     const handleChange = (nextEditorState: EditorState): void => {
@@ -57,12 +60,12 @@ const ReplyForm = ({ errors, isPending, onCancel, onChange, setFieldValue, value
                 />
             </div>
             <div className="ba-Popup-footer">
-                <Button data-testid="ba-Popup-cancel" isDisabled={isPending} onClick={onCancel} type="button">
+                <ReplyButton data-testid="ba-Popup-cancel" isDisabled={isPending} onClick={handleCancel} type="button">
                     <FormattedMessage {...messages.buttonCancel} />
-                </Button>
-                <PrimaryButton data-testid="ba-Popup-submit" isDisabled={hasErrors || isPending} type="submit">
+                </ReplyButton>
+                <ReplyButton data-testid="ba-Popup-submit" isDisabled={hasErrors || isPending} isPrimary type="submit">
                     <FormattedMessage {...messages.buttonPost} />
-                </PrimaryButton>
+                </ReplyButton>
             </div>
         </Form>
     );

src/components/ReplyForm/ReplyFormContainer.tsx

@@ -68,6 +68,7 @@ const ReplyFormContainer = connect(mapStateToProps)(
         handleSubmit,
         mapPropsToValues,
         validate,
+        validateOnMount: true,
     })(ReplyForm),
 );
 

src/components/ReplyForm/__tests__/ReplyForm-test.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import Button from 'box-ui-elements/es/components/button';
-import PrimaryButton from 'box-ui-elements/es/components/primary-button';
 import { EditorState } from 'draft-js';
 import { Form } from 'formik';
 import { KEYS } from 'box-ui-elements/es/constants';
 import { shallow, ShallowWrapper } from 'enzyme';
+import ReplyButton from '../ReplyButton';
 import ReplyForm, { Props } from '../ReplyForm';
 import ReplyField from '../../ReplyField';
 import { mockEvent } from '../../../common/__mocks__/events';
@@ -32,28 +31,31 @@ describe('components/ReplyForm/ReplyForm', () => {
     const getWrapper = (props = {}): ShallowWrapper<Props, undefined> =>
         shallow(<ReplyForm {...defaults} {...props} />);
 
-    test('should render Form with ReplyField and Buttons in the footer', () => {
+    test('should render Form with ReplyField and buttons in the footer', () => {
         const wrapper = getWrapper();
 
         expect(wrapper.exists(Form)).toBe(true);
         expect(wrapper.exists(ReplyField)).toBe(true);
-        expect(wrapper.exists(Button)).toBe(true);
-        expect(wrapper.exists(PrimaryButton)).toBe(true);
+        expect(wrapper.find(ReplyButton).length).toBe(2);
     });
 
-    test('should have buttons be disabled if isPending is true', () => {
+    test('should disable the buttons and form if isPending is true', () => {
         const wrapper = getWrapper({ isPending: true });
+        const cancel = wrapper.find(ReplyButton).at(0);
+        const submit = wrapper.find(ReplyButton).at(1);
 
         expect(wrapper.find(ReplyField).prop('isDisabled')).toBe(true);
-        expect(wrapper.find(Button).prop('isDisabled')).toBe(true);
-        expect(wrapper.find(PrimaryButton).prop('isDisabled')).toBe(true);
+        expect(cancel.prop('isDisabled')).toBe(true);
+        expect(submit.prop('isDisabled')).toBe(true);
     });
 
-    test('should disable PrimaryButton if has errors', () => {
+    test('should disable the submit button if the form has errors', () => {
         const wrapper = getWrapper({ errors: { foo: 'bar' } });
+        const cancel = wrapper.find(ReplyButton).at(0);
+        const submit = wrapper.find(ReplyButton).at(1);
 
-        expect(wrapper.find(Button).prop('isDisabled')).toBe(false);
-        expect(wrapper.find(PrimaryButton).prop('isDisabled')).toBe(true);
+        expect(cancel.prop('isDisabled')).toBe(false);
+        expect(submit.prop('isDisabled')).toBe(true);
     });
 
     test('should call the handleChange callback when change event occurs on ReplyField', () => {