diff --git a/packages/js/components/changelog/fix-analytics-daterange-custom-wp61 b/packages/js/components/changelog/fix-analytics-daterange-custom-wp61 new file mode 100644 index 00000000000..f965ebdce29 --- /dev/null +++ b/packages/js/components/changelog/fix-analytics-daterange-custom-wp61 @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Include react-dates styles (no longer in WP 6.1+). diff --git a/packages/js/components/src/calendar/begin-rtl-ignore.css b/packages/js/components/src/calendar/begin-rtl-ignore.css new file mode 100644 index 00000000000..d5b20f59c9f --- /dev/null +++ b/packages/js/components/src/calendar/begin-rtl-ignore.css @@ -0,0 +1 @@ +/*rtl:begin:ignore*/ diff --git a/packages/js/components/src/calendar/end-rtl-ignore.css b/packages/js/components/src/calendar/end-rtl-ignore.css new file mode 100644 index 00000000000..a2e0761bdd6 --- /dev/null +++ b/packages/js/components/src/calendar/end-rtl-ignore.css @@ -0,0 +1 @@ +/*rtl:end:ignore*/ diff --git a/packages/js/components/src/calendar/style.scss b/packages/js/components/src/calendar/style.scss index 666d98abb86..2815ebdd577 100644 --- a/packages/js/components/src/calendar/style.scss +++ b/packages/js/components/src/calendar/style.scss @@ -1,3 +1,14 @@ +/** + * We don't convert react-dates styles to RTL because react-dates uses an isRTL flag instead. + * + * We have to include the RTL-ignore directives via imports because of the ordering of how + * @imports are included in the output (see https://github.com/MohammadYounes/rtlcss/issues/113). + **/ +@import './calendar/begin-rtl-ignore.css'; +@import '../node_modules/react-dates/lib/css/_datepicker.css'; +@import './calendar/end-rtl-ignore.css'; + + .woocommerce-calendar { width: 100%; background-color: $gray-100; diff --git a/packages/js/components/src/filters/style.scss b/packages/js/components/src/filters/style.scss index 1c648799d76..cb98f3579aa 100644 --- a/packages/js/components/src/filters/style.scss +++ b/packages/js/components/src/filters/style.scss @@ -80,6 +80,7 @@ width: 320px; border: 1px solid $gray-400; background-color: $studio-white; + padding: 0; } .woocommerce-calendar__input-error .components-popover__content {