[EuiDatePicker] eui's global css file clobbers react-datepicker's css

[lightwave]

With EUI in my project, it clobbers react-datepicker's css classes. It seems that EUI has a copy of react-datepicker embedded and EuiDatePicker is wrapping it. However, it overwrites/clobbers the CSS classes globally. As a result, we can't use react-datepicker outside of eui.

Is there anyway to exclude eui's react-datepicker override?

[cee-chen]

@thompsongl can likely answer this one - he's leading our move to make as much of React Datepicker native to EUI as possible (#3901), so this is something we could may be able address in the future (although I'm not 100% on this)

[thompsongl]

Yes, we should be able to address this in the future. I'd have to investigate the DOM further, but we can either scope our styles to a higher selector or modify the class names in our "packaged" react-datepicker.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cee-chen]

@thompsongl did we ever address this when we moved react-datepicker to within EUI?

[thompsongl]

No we didn't. Not sure which direction we want to go, especially with the move to CSS-in-JS. We could have other options now.

[cchaos]

Just to ensure we're not thinking this way, but I would definitely not take the time to try to convert our packaged react-datepicker to Emotion. We really need to re-build using our own components, but we could certainly rely on their logic.

[thompsongl]

To clarify my "We could have other options now." point:

Maybe we copy-paste the existing CSS (with selectors) into an Emotion css block so that all the styles are scoped to the EuiDatePicker component. Definitely needs some investigation/triage.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[theamanbhargava]

Hi, are there are any updates on this issue? Thanks for your time, much appreciated!

[cee-chen]

Hey @theamanbhargava! Unfortunately we're down to a pretty small team with a huge backlog, so there's not been any movement on this on our end.

If someone were interested in open-source contributing to this issue, we'd absolutely appreciate it. An interim solution could be opening all our various react_date_picker SCSS files and modifying their selectors to only target .euiDatePicker (or whatever selector is correct for the popover vs the input container(s)).

Here's a list of all react-datepicker style files in our codebase:

eui/.stylelintrc.js

Lines 115 to 117 in 0d31625

	'src/global_styling/react_date_picker/**/*.scss',
	'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss',
	'src/components/date_picker/react-datepicker/**/*.scss',

[theamanbhargava]

@constancecchen Thank you very much for your extremely quick response. I will take a look at this over the weekend 👍

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.

[cee-chen]

Now that EuiDatePicker is on Emotion, EUI's custom styling of react-datepicker will no longer clobber any other files/global CSS. See #7937