feat(popup): update disabled state (#471)

* feat(popup): update disabled state * update style for primary button in pop-up * disable post button if popup value is empty * Update test for PopupReply
box · May 4, 2020 · 02e1248 · 02e1248
1 parent 29f1977
commit 02e1248
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Popups/PopupReply.scss b/src/components/Popups/PopupReply.scss
@@ -0,0 +1,10 @@
+@import '~box-ui-elements/es/styles/variables';
+
+.ba-Popup-footer {
+    .btn.btn-primary {
+        &.is-disabled {
+            background-color: $bdl-gray-50;
+            border-color: $bdl-gray-50;
+        }
+    }
+}
diff --git a/src/components/Popups/PopupReply.tsx b/src/components/Popups/PopupReply.tsx
@@ -7,6 +7,8 @@ import messages from './messages';
 import PopupBase from './PopupBase';
 import ReplyField from './ReplyField';
 
+import './PopupReply.scss';
+
 export type Props = {
     className?: string;
     isPending: boolean;
@@ -51,6 +53,7 @@ export default function PopupReply({
     value = '',
     ...rest
 }: Props): JSX.Element {
+    const isEmpty = value.length === 0;
     const intl = useIntl();
 
     // Event Handlers
@@ -97,7 +100,7 @@ export default function PopupReply({
                     <Button data-testid="ba-Popup-cancel" isDisabled={isPending} onClick={handleCancel} type="button">
                         <FormattedMessage {...messages.buttonCancel} />
                     </Button>
-                    <PrimaryButton data-testid="ba-Popup-submit" isDisabled={isPending} type="submit">
+                    <PrimaryButton data-testid="ba-Popup-submit" isDisabled={isEmpty || isPending} type="submit">
                         <FormattedMessage {...messages.buttonPost} />
                     </PrimaryButton>
                 </div>

diff --git a/src/components/Popups/__tests__/PopupReply-test.tsx b/src/components/Popups/__tests__/PopupReply-test.tsx
@@ -79,8 +79,13 @@ describe('components/Popups/PopupReply', () => {
             expect(wrapper.exists('[data-testid="ba-Popup-field"]')).toBe(true);
         });
 
+        test.each([undefined, 'Test'])('should disable post button if value is %s', value => {
+            const wrapper = getWrapper({ value });
+            expect(wrapper.find('[data-testid="ba-Popup-submit"]').prop('isDisabled')).toBe(value === undefined);
+        });
+
         test.each([true, false])('should disable/enable buttons and editor when isPending %s', isPending => {
-            const wrapper = getWrapper({ isPending });
+            const wrapper = getWrapper({ isPending, value: 'Test' });
 
             expect(wrapper.find('[data-testid="ba-Popup-cancel"]').prop('isDisabled')).toBe(isPending);
             expect(wrapper.find('[data-testid="ba-Popup-submit"]').prop('isDisabled')).toBe(isPending);