Update DatePicker disableAutoFocus functionality (#10913)

* When disableAutoFocus is true don't expand picker on TextField click/tap. * Adjust styles to increase size of icon hit area. * Add style change to new DateTime package. * Change files * Update snap shots. * Fix typo.Update snap shots. * Update new date picker snap shot. * Combine else / if. * Adjust styles according to comments. * Adjust conditionals.
microsoft · Oct 23, 2019 · fcbe8ac · fcbe8ac
1 parent b7c8084
commit fcbe8ac
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 48 deletions.
diff --git a/...date-time-2019-10-18-14-55-55-phtucker-updateDatePickerDisableAutoFocusFunctionality.json b/...date-time-2019-10-18-14-55-55-phtucker-updateDatePickerDisableAutoFocusFunctionality.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "packageName": "@uifabric/date-time",
+  "email": "phtucker@microsoft.com",
+  "commit": "5a715f5fd66c852bd0d26dff62ee8924c5924d1b",
+  "date": "2019-10-18T18:55:02.978Z",
+  "file": "E:\\GitHub\\OfficeDev-office-ui-fabric-react\\change\\@uifabric-date-time-2019-10-18-14-55-55-phtucker-updateDatePickerDisableAutoFocusFunctionality.json"
+}
diff --git a/...ric-react-2019-10-18-14-55-55-phtucker-updateDatePickerDisableAutoFocusFunctionality.json b/...ric-react-2019-10-18-14-55-55-phtucker-updateDatePickerDisableAutoFocusFunctionality.json
@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "comment": "Do not expand date picker on TextField click when disableAutoFocus is true and allowTextInput is true.",
+  "packageName": "office-ui-fabric-react",
+  "email": "phtucker@microsoft.com",
+  "commit": "5a715f5fd66c852bd0d26dff62ee8924c5924d1b",
+  "date": "2019-10-18T18:55:55.318Z",
+  "file": "E:\\GitHub\\OfficeDev-office-ui-fabric-react\\change\\office-ui-fabric-react-2019-10-18-14-55-55-phtucker-updateDatePickerDisableAutoFocusFunctionality.json"
+}
diff --git a/packages/date-time/src/components/DatePicker/DatePicker.base.tsx b/packages/date-time/src/components/DatePicker/DatePicker.base.tsx
@@ -370,20 +370,22 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
   };
 
   private _onTextFieldClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    if (!this.state.isDatePickerShown && !this.props.disabled) {
+    if (!this.props.disableAutoFocus && !this.state.isDatePickerShown && !this.props.disabled) {
       this._showDatePickerPopup();
-    } else {
-      if (this.props.allowTextInput) {
-        this.setState({
-          isDatePickerShown: false
-        });
-      }
+      return;
+    }
+    if (this.props.allowTextInput) {
+      this._dismissDatePickerPopup();
     }
   };
 
   private _onIconClick = (ev: React.MouseEvent<HTMLElement>): void => {
     ev.stopPropagation();
-    this._onTextFieldClick(ev);
+    if (!this.state.isDatePickerShown && !this.props.disabled) {
+      this._showDatePickerPopup();
+    } else if (this.props.allowTextInput) {
+      this._dismissDatePickerPopup();
+    }
   };
 
   private _showDatePickerPopup(): void {

diff --git a/packages/date-time/src/components/DatePicker/DatePicker.styles.ts b/packages/date-time/src/components/DatePicker/DatePicker.styles.ts
@@ -14,13 +14,14 @@ export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
   const { palette, semanticColors } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const DatePickerEvent: IStyle = {
+  const DatePickerIcon: IStyle = {
     color: palette.neutralSecondary,
     fontSize: FontSizes.icon,
     lineHeight: '18px',
     pointerEvents: 'none',
     position: 'absolute',
-    right: '9px'
+    right: '4px',
+    padding: '5px'
   };
 
   return {
@@ -51,9 +52,9 @@ export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
     ],
     callout: [classNames.callout],
     icon: [
-      DatePickerEvent,
-      !label && [classNames.withoutLabel, { top: '7px' }],
-      label && [classNames.withLabel, { bottom: '5px' }],
+      DatePickerIcon,
+      !label && [classNames.withoutLabel, { paddingTop: '7px' }],
+      label && [classNames.withLabel, { paddingBottom: '5px' }],
       !disabled && [
         classNames.disabled,
         {

diff --git a/packages/date-time/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/date-time/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -183,10 +183,13 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
                   display: inline-block;
                   font-size: 16px;
                   line-height: 18px;
+                  padding-bottom: 5px;
+                  padding-left: 5px;
+                  padding-right: 5px;
+                  padding-top: 7px;
                   pointer-events: initial;
                   position: absolute;
-                  right: 9px;
-                  top: 7px;
+                  right: 4px;
                 }
             data-icon-name="Calendar"
             onClick={[Function]}

diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx
@@ -373,20 +373,22 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
   };
 
   private _onTextFieldClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    if (!this.state.isDatePickerShown && !this.props.disabled) {
+    if (!this.props.disableAutoFocus && !this.state.isDatePickerShown && !this.props.disabled) {
       this._showDatePickerPopup();
-    } else {
-      if (this.props.allowTextInput) {
-        this.setState({
-          isDatePickerShown: false
-        });
-      }
+      return;
+    }
+    if (this.props.allowTextInput) {
+      this._dismissDatePickerPopup();
     }
   };
 
   private _onIconClick = (ev: React.MouseEvent<HTMLElement>): void => {
     ev.stopPropagation();
-    this._onTextFieldClick(ev);
+    if (!this.state.isDatePickerShown && !this.props.disabled) {
+      this._showDatePickerPopup();
+    } else if (this.props.allowTextInput) {
+      this._dismissDatePickerPopup();
+    }
   };
 
   private _showDatePickerPopup(): void {

diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts
@@ -14,13 +14,14 @@ export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
   const { palette, semanticColors, effects, fonts } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const DatePickerEvent: IStyle = {
+  const DatePickerIcon: IStyle = {
     color: palette.neutralSecondary,
     fontSize: fonts.mediumPlus.fontSize,
     lineHeight: '18px',
     pointerEvents: 'none',
     position: 'absolute',
-    right: '9px'
+    right: '4px',
+    padding: '5px'
   };
 
   return {
@@ -51,9 +52,9 @@ export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
     ],
     callout: [classNames.callout, { boxShadow: effects.elevation8 }],
     icon: [
-      DatePickerEvent,
-      !label && [classNames.withoutLabel, { top: '7px' }],
-      label && [classNames.withLabel, { bottom: '5px' }],
+      DatePickerIcon,
+      !label && [classNames.withoutLabel, { paddingTop: '7px' }],
+      label && [classNames.withLabel, { paddingBottom: '5px' }],
       !disabled && [
         classNames.disabled,
         {

diff --git a/...s/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/...s/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -188,11 +188,14 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
                   font-style: normal;
                   font-weight: normal;
                   line-height: 18px;
+                  padding-bottom: 5px;
+                  padding-left: 5px;
+                  padding-right: 5px;
+                  padding-top: 7px;
                   pointer-events: initial;
                   position: absolute;
-                  right: 9px;
+                  right: 4px;
                   speak: none;
-                  top: 7px;
                 }
             data-icon-name="Calendar"
             onClick={[Function]}

diff --git a/...ges/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot b/...ges/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot
@@ -193,11 +193,14 @@ exports[`Component Examples renders DatePicker.Basic.Example.tsx correctly 1`] =
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 7px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
-                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}

diff --git a/...s/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Bounded.Example.tsx.shot b/...s/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Bounded.Example.tsx.shot
@@ -198,11 +198,14 @@ Fri, 06 Jan 2017 04:41:20 GMT-Fri, 06 Jan 2017 04:41:20 GMT
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 7px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
-                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}

diff --git a/.../office-ui-fabric-react/src/components/__snapshots__/DatePicker.Disabled.Example.tsx.shot b/.../office-ui-fabric-react/src/components/__snapshots__/DatePicker.Disabled.Example.tsx.shot
@@ -194,11 +194,14 @@ exports[`Component Examples renders DatePicker.Disabled.Example.tsx correctly 1`
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 7px;
                     pointer-events: none;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
-                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}
@@ -425,7 +428,6 @@ exports[`Component Examples renders DatePicker.Disabled.Example.tsx correctly 1`
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    bottom: 5px;
                     color: #a19f9d;
                     cursor: default;
                     display: inline-block;
@@ -434,9 +436,13 @@ exports[`Component Examples renders DatePicker.Disabled.Example.tsx correctly 1`
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 5px;
                     pointer-events: none;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
                   }
               data-icon-name="Calendar"

diff --git a/...es/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Format.Example.tsx.shot b/...es/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Format.Example.tsx.shot
@@ -217,7 +217,6 @@ exports[`Component Examples renders DatePicker.Format.Example.tsx correctly 1`]
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    bottom: 5px;
                     color: #605e5c;
                     cursor: pointer;
                     display: inline-block;
@@ -226,9 +225,13 @@ exports[`Component Examples renders DatePicker.Format.Example.tsx correctly 1`]
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 5px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
                   }
               data-icon-name="Calendar"

diff --git a/...ges/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Input.Example.tsx.shot b/...ges/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Input.Example.tsx.shot
@@ -217,7 +217,6 @@ exports[`Component Examples renders DatePicker.Input.Example.tsx correctly 1`] =
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    bottom: 5px;
                     color: #605e5c;
                     cursor: pointer;
                     display: inline-block;
@@ -226,9 +225,13 @@ exports[`Component Examples renders DatePicker.Input.Example.tsx correctly 1`] =
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 5px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
                   }
               data-icon-name="Calendar"

diff --git a/.../office-ui-fabric-react/src/components/__snapshots__/DatePicker.Required.Example.tsx.shot b/.../office-ui-fabric-react/src/components/__snapshots__/DatePicker.Required.Example.tsx.shot
@@ -224,7 +224,6 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    bottom: 5px;
                     color: #605e5c;
                     cursor: pointer;
                     display: inline-block;
@@ -233,9 +232,13 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 5px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
                   }
               data-icon-name="Calendar"
@@ -448,11 +451,14 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 7px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
-                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}

diff --git a/...fice-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot b/...fice-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot
@@ -193,11 +193,14 @@ exports[`Component Examples renders DatePicker.WeekNumbers.Example.tsx correctly
                     font-style: normal;
                     font-weight: normal;
                     line-height: 18px;
+                    padding-bottom: 5px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    padding-top: 7px;
                     pointer-events: initial;
                     position: absolute;
-                    right: 9px;
+                    right: 4px;
                     speak: none;
-                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}