Autofill: Inherit font-family to prevent defaulting to Arial (microso…

…ft#17507) * Autofill: Inherit font-family to prevent defaulting to Arial. * Change files * Updating snapshots.
joshualamusga1 · Mar 25, 2021 · 6249ddf · 6249ddf
1 parent ee96118
commit 6249ddf
Show file tree

Hide file tree

Showing 30 changed files with 216 additions and 0 deletions.
diff --git a/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json b/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
+  "packageName": "@fluentui/react-examples",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json b/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updating snapshots.",
+  "packageName": "@fluentui/react-experiments",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json b/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
+  "packageName": "@fluentui/react",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot
@@ -132,6 +132,11 @@ exports[`Component Examples renders Announced.SearchResults.Example.tsx correctl
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot
@@ -238,6 +238,11 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C"
       />
@@ -797,6 +802,11 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C"
       />

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
@@ -258,6 +258,11 @@ exports[`Component Examples renders ComboBox.Controlled.Example.tsx correctly 1`
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C"
       />

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
@@ -279,6 +279,11 @@ exports[`Component Examples renders ComboBox.ControlledMulti.Example.tsx correct
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C, Option D"
       />

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
@@ -258,6 +258,11 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Calibri"
       />
@@ -659,6 +664,11 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Calibri"
       />

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
@@ -194,6 +194,11 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option B"
       />
@@ -605,6 +610,11 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value=""
       />

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
@@ -258,6 +258,11 @@ exports[`Component Examples renders ComboBox.Toggles.Example.tsx correctly 1`] =
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value=""
       />

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
@@ -237,6 +237,11 @@ exports[`Component Examples renders ComboBox.Virtualized.Example.tsx correctly 1
       onTouchStart={[Function]}
       role="combobox"
       spellCheck={false}
+      style={
+        Object {
+          "fontFamily": "inherit",
+        }
+      }
       type="text"
       value="Option 547"
     />

diff --git a/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot
@@ -73,6 +73,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Basic.Example.tsx corre
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -291,6 +296,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Basic.Example.tsx corre
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/...s/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Controlled.Example.tsx.shot b/...s/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Controlled.Example.tsx.shot
@@ -73,6 +73,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Controlled.Example.tsx
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -291,6 +296,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Controlled.Example.tsx
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Controlled.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl
               onKeyDown={[Function]}
               role="textbox"
               spellCheck={false}
+              style={
+                Object {
+                  "fontFamily": "inherit",
+                }
+              }
               value=""
             />
           </div>

diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.LimitedSearch.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.LimitedSearch.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.List.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.List.Example.tsx.shot
@@ -72,6 +72,11 @@ exports[`Component Examples renders PeoplePicker.List.Example.tsx correctly 1`]
           onInput={[Function]}
           onKeyDown={[Function]}
           role="textbox"
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>

diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Normal.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Normal.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.Normal.Example.tsx correctly 1`
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/...ges/react-examples/src/react/__snapshots__/PeoplePicker.PreselectedItems.Example.tsx.shot b/...ges/react-examples/src/react/__snapshots__/PeoplePicker.PreselectedItems.Example.tsx.shot
@@ -1447,6 +1447,11 @@ exports[`Component Examples renders PeoplePicker.PreselectedItems.Example.tsx co
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/...ges/react-examples/src/react/__snapshots__/PeoplePicker.ProcessSelection.Example.tsx.shot b/...ges/react-examples/src/react/__snapshots__/PeoplePicker.ProcessSelection.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.ProcessSelection.Example.tsx co
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot
@@ -235,6 +235,11 @@ exports[`Component Examples renders TagPicker.Basic.Example.tsx correctly 1`] =
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -337,6 +342,11 @@ exports[`Component Examples renders TagPicker.Basic.Example.tsx correctly 1`] =
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>

diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -1561,6 +1561,11 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="1"
       />

diff --git a/...ponents/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap b/...ponents/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap
@@ -112,6 +112,11 @@ exports[`UnifiedPeoplePicker renders correctly with no items 1`] = `
             onInput={[Function]}
             onKeyDown={[Function]}
             onPaste={[Function]}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -879,6 +884,11 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items
               onInput={[Function]}
               onKeyDown={[Function]}
               onPaste={[Function]}
+              style={
+                Object {
+                  "fontFamily": "inherit",
+                }
+              }
               value=""
             />
           </div>

diff --git a/.../react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap b/.../react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap
@@ -112,6 +112,11 @@ exports[`UnifiedPicker renders correctly with no items 1`] = `
             onInput={[Function]}
             onKeyDown={[Function]}
             onPaste={[Function]}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -263,6 +268,11 @@ exports[`UnifiedPicker renders correctly with selected and suggested items 1`] =
               onInput={[Function]}
               onKeyDown={[Function]}
               onPaste={[Function]}
+              style={
+                Object {
+                  "fontFamily": "inherit",
+                }
+              }
               value=""
             />
           </div>

diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx
@@ -126,12 +126,14 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
 
   public render(): JSX.Element {
     const nativeProps = getNativeProps<React.InputHTMLAttributes<HTMLInputElement>>(this.props, inputProperties);
+    const style = { ...this.props.style, fontFamily: 'inherit' };
     return (
       <input
         autoCapitalize="off"
         autoComplete="off"
         aria-autocomplete={'both'}
         {...nativeProps}
+        style={style}
         ref={this._inputElement}
         value={this._getDisplayValue()}
         onCompositionStart={this._onCompositionStart}