fix(DatePicker): readOnlyTextField styles should win over default TextField's (#28891)

* fix(DatePicker): Add more specificity to user provided readOnlyTextField classname to avoid getting its values overriden.

* change files

* update import

* merge classes instead of adding specificity

* update comment

* update snapshots

* Update packages/react/src/components/DatePicker/DatePicker.base.tsx

Co-authored-by: Makoto Morimoto <[email protected]>

---------

Co-authored-by: Makoto Morimoto <[email protected]>

Author: sopranopillow

change/@fluentui-react-43bf83e2-d32b-45f7-a346-1c6ea8947614.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(DatePicker): readOnlyTextField styles should win over textfield's default styles.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/DatePicker/DatePicker.base.tsx

@@ -11,6 +11,7 @@ import {
 import { Calendar } from '../../Calendar';
 import { FirstWeekOfYear, getDatePartHashValue, compareDatePart, DayOfWeek } from '@fluentui/date-time-utilities';
 import { Callout, DirectionalHint } from '../../Callout';
+import { mergeStyles } from '../../Styling';
 import { TextField } from '../../TextField';
 import { FocusTrapZone } from '../../FocusTrapZone';
 import { useId, useAsync, useControllableValue } from '@fluentui/react-hooks';
@@ -420,11 +421,14 @@ export const DatePickerBase: React.FunctionComponent<IDatePickerProps> = React.f
 
   const renderReadOnlyInput: ITextFieldProps['onRenderInput'] = inputProps => {
     const divProps = getNativeProps(inputProps!, divProperties);
+    // Need to merge styles so the provided styles win over the default ones. This is due to the classnames having the
+    // same specificity.
+    const readOnlyTextFieldClassName = mergeStyles(divProps.className, classNames.readOnlyTextField);
 
     // Talkback on Android treats readonly inputs as disabled, so swipe gestures to open the Calendar
     // don't register. Workaround is rendering a div with role="combobox" (passed in via TextField props).
     return (
-      <div {...divProps} className={css(divProps.className, classNames.readOnlyTextField)} tabIndex={tabIndex || 0}>
+      <div {...divProps} className={readOnlyTextFieldClassName} tabIndex={tabIndex || 0}>
         {formattedDate || (
           // Putting the placeholder in a separate span fixes specificity issues for the text color
           <span className={classNames.readOnlyPlaceholder}>{placeholder}</span>

packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap

@@ -331,15 +331,19 @@ exports[`DatePicker renders DatePicker with value correctly 1`] = `
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #323130;
+                  cursor: pointer;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
+                  height: 32px;
+                  line-height: 30px;
                   margin-bottom: 0px;
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
                   min-width: 0px;
                   outline: 0px;
+                  overflow: hidden;
                   padding-bottom: 0;
                   padding-left: 8px;
                   padding-right: 24px;
@@ -384,13 +388,6 @@ exports[`DatePicker renders DatePicker with value correctly 1`] = `
                 @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&::-ms-input-placeholder {
                   color: GrayText;
                 }
-                {
-                  cursor: pointer;
-                  height: 32px;
-                  line-height: 30px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
             data-is-focusable={true}
             id="DatePicker0-label"
             onBlur={[Function]}
@@ -564,15 +561,19 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #323130;
+                  cursor: pointer;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
+                  height: 32px;
+                  line-height: 30px;
                   margin-bottom: 0px;
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
                   min-width: 0px;
                   outline: 0px;
+                  overflow: hidden;
                   padding-bottom: 0;
                   padding-left: 8px;
                   padding-right: 24px;
@@ -617,13 +618,6 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&::-ms-input-placeholder {
                   color: GrayText;
                 }
-                {
-                  cursor: pointer;
-                  height: 32px;
-                  line-height: 30px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
             data-is-focusable={true}
             id="DatePicker0-label"
             onBlur={[Function]}