diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js index 97dfe7391e..b420abfcb8 100644 --- a/src/components/DatePicker/DatePicker.js +++ b/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, {