From 80bb5d69bfd943a48c15824a467da1deaedeb130 Mon Sep 17 00:00:00 2001
From: Sam Kvale <sam.kvale@sap.com>
Date: Mon, 12 Oct 2020 08:04:10 -0500
Subject: [PATCH] feat: Hide the DatePicker button when readOnly is true
 (#1234)

* feat(datepicker): Hide the datepicker button when readOnly is true

* tests(datepicker): Remove two useless comments
---
 src/DatePicker/DatePicker.js                  | 26 +++++++++----------
 src/DatePicker/DatePicker.test.js             | 23 ++++++++++++++++
 .../__stories__/DatePicker.stories.js         |  2 +-
 .../DatePicker.stories.storyshot              | 21 ++-------------
 4 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index 720c560a9..7627612a8 100644
--- a/src/DatePicker/DatePicker.js
+++ b/src/DatePicker/DatePicker.js
@@ -411,8 +411,6 @@ class DatePicker extends Component {
             footerButtonProps?.className
         );
 
-        const disableButton = disabled || readOnly;
-
         const inputGroup = (
             <InputGroup
                 {...inputGroupProps}
@@ -432,16 +430,18 @@ class DatePicker extends Component {
                     placeholder={this.getPlaceHolder(dateFormat)}
                     readOnly={readOnly}
                     value={this.state.formattedDate} />
-                <InputGroup.Addon
-                    {...addonProps}
-                    isButton>
-                    <Button {...buttonProps}
-                        aria-label={buttonLabel}
-                        disabled={disableButton}
-                        glyph='appointment-2'
-                        onClick={this.handleClickButton}
-                        option='transparent' />
-                </InputGroup.Addon>
+                {!readOnly && (
+                    <InputGroup.Addon
+                        {...addonProps}
+                        isButton>
+                        <Button {...buttonProps}
+                            aria-label={buttonLabel}
+                            disabled={disabled}
+                            glyph='appointment-2'
+                            onClick={this.handleClickButton}
+                            option='transparent' />
+                    </InputGroup.Addon>
+                )}
             </InputGroup>
         );
 
@@ -519,7 +519,7 @@ class DatePicker extends Component {
                     control={inputGroup}
                     disableKeyPressHandler
                     disableTriggerOnClick
-                    disabled={disableButton}
+                    disabled={disabled || readOnly}
                     modalManager={modalManager}
                     noArrow
                     onClickOutside={this.handleOutsideClickAndEscape}
diff --git a/src/DatePicker/DatePicker.test.js b/src/DatePicker/DatePicker.test.js
index f09316b7b..3e8a8a296 100644
--- a/src/DatePicker/DatePicker.test.js
+++ b/src/DatePicker/DatePicker.test.js
@@ -650,6 +650,29 @@ describe('<DatePicker />', () => {
             expect(wrapper.find('.fd-list__message').length).toBe(1);
         });
     });
+    describe('readOnly', () => {
+        test('should not render an inputGroup.Addon button if it is readOnly', () => {
+            wrapper = mount(<DatePicker readOnly />);
+            expect(wrapper.find('button').length).toBe(0);
+        });
+
+        test('should disabled the popover when readOnly is true', () => {
+            wrapper = mount(<DatePicker readOnly />);
+            expect(wrapper.find('Popover').props().disabled).toBe(true);
+
+            expect(wrapper.find('button').length).toBe(0);
+        });
+
+        test('should render an inputGroup.Addon button if it is not readOnly', () => {
+            wrapper = mount(<DatePicker />);
+            expect(wrapper.find('button').length).toBe(1);
+        });
+
+        test('should keep the popover when readOnly is true', () => {
+            wrapper = mount(<DatePicker />);
+            expect(wrapper.find('Popover').props().disabled).not.toBeDefined();
+        });
+    });
 });
 function simulateBlur() {
     let event = new MouseEvent('mousedown', { target: document.querySelector('body') });
diff --git a/src/DatePicker/__stories__/DatePicker.stories.js b/src/DatePicker/__stories__/DatePicker.stories.js
index c4306ee8e..c2316f3ed 100644
--- a/src/DatePicker/__stories__/DatePicker.stories.js
+++ b/src/DatePicker/__stories__/DatePicker.stories.js
@@ -82,7 +82,7 @@ export const disabled = () => (
 disabled.storyName = 'Disabled';
 
 export const readOnly = () => (
-    <DatePicker readOnly />
+    <DatePicker defaultValue='12/12/2012' readOnly />
 );
 
 
diff --git a/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot b/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot
index ad983b0d7..7443c59a4 100644
--- a/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot
+++ b/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot
@@ -1317,7 +1317,7 @@ exports[`Storyshots Component API/DatePicker ReadOnly 1`] = `
   dir="ltr"
 >
   <div
-    defaultValue=""
+    defaultValue="12/12/2012"
     onChange={[Function]}
   >
     <div
@@ -1345,25 +1345,8 @@ exports[`Storyshots Component API/DatePicker ReadOnly 1`] = `
               placeholder="MM/DD/YYYY"
               readOnly={true}
               type="text"
-              value=""
+              value="12/12/2012"
             />
-            <span
-              className="fd-input-group__addon fd-input-group__addon--button"
-            >
-              <button
-                aria-label="Choose date"
-                className="fd-button fd-button--transparent is-disabled fd-input-group__button"
-                disabled={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <i
-                  aria-hidden={true}
-                  className="sap-icon--appointment-2"
-                  role="img"
-                />
-              </button>
-            </span>
           </div>
         </div>
       </div>