fix: deprecate the appendTo prop in date picker (#2062)

* fix: deprecate the appendTo prop in date picker

* fix: Add deprecation warning

* fix: typos in warning

src/components/DatePicker/DatePicker.js

@@ -12,9 +12,10 @@ import flatpickr from 'flatpickr';
 import l10n from 'flatpickr/dist/l10n/index';
 import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
 import { settings } from 'carbon-components';
+import warning from 'warning';
 import DatePickerInput from '../DatePickerInput';
 import Icon from '../Icon';
-import { componentsX } from '../../internal/FeatureFlags';
+import { componentsX, breakingChangesX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -251,10 +252,18 @@ export default class DatePicker extends Component {
       const onHook = (electedDates, dateStr, instance) => {
         this.updateClassNames(instance);
       };
-      const appendToNode =
-        typeof appendTo === 'string'
-          ? document.querySelector(appendTo)
-          : appendTo;
+
+      let appendToNode;
+      if (typeof appendTo === 'string' && !breakingChangesX) {
+        warning(
+          false,
+          `The DatePicker appendTo prop will be deprecated in Carbon X. 
+          - If you were using appendTo for styling, consider using a className.
+          - If you were using appendTo for attaching to a specific DOM node, consider a React portal.`
+        );
+        appendToNode = document.querySelector(appendTo);
+      }
+
       // inputField ref might not be set in enzyme tests
       if (this.inputField) {
         this.cal = new flatpickr(this.inputField, {