Merge branch 'main' into CU-86971x3zg_Color-picker-block-Alfa-input-c…

…an-never-be-cleared-there-is-un-deleteable-0_Red-Ochsenbein
Frontify · Jan 15, 2025 · 168d97c · 168d97c
2 parents b8a6ce0 + 8799fa8
commit 168d97c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/.changeset/khaki-trees-approve.md b/.changeset/khaki-trees-approve.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue": patch
+---
+
+fix: explicitly set `pointer-events` to auto in datepicker portal
diff --git a/.changeset/little-experts-cheer.md b/.changeset/little-experts-cheer.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix: make ColorPicker inputs responsive based on container size
diff --git a/packages/components/src/components/ColorPicker/styles/customColorPicker.module.scss b/packages/components/src/components/ColorPicker/styles/customColorPicker.module.scss
@@ -2,21 +2,21 @@
 
 @import '../../../utilities/sizeToken.module.scss';
 @import '../../../utilities/focusStyle.module.scss';
-@import '../../../utilities/mediaQuery.module.scss';
 
 .root {
     display: flex;
     flex-direction: column;
     gap: sizeToken(4);
     max-width: 700px;
+    container-type: inline-size;
 }
 
 .inputs {
     display: grid;
     grid-template-columns: 1fr;
     gap: sizeToken(2);
 
-    @include sm {
+    @container (min-width: 19.5rem) {
         grid-template-columns: 100px 1fr 100px;
     }
 }
@@ -31,7 +31,7 @@
     flex-direction: column;
     gap: sizeToken(2);
 
-    @include sm {
+    @container (min-width: 19.5rem) {
         flex-direction: row;
     }
 }
@@ -50,6 +50,7 @@
 
 //remove arrows from number inputs
 .valueInput {
+
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;

diff --git a/packages/fondue/src/components/DatePicker/DatePicker.tsx b/packages/fondue/src/components/DatePicker/DatePicker.tsx
@@ -112,7 +112,7 @@ export const DatePicker = forwardRef<ReactDatePickerRef, DatePickerProps>(
         return (
             <div data-test-id={dataTestId}>
                 <ReactDatePickerComponent
-                    calendarClassName="tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap"
+                    calendarClassName="tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap tw-pointer-events-auto"
                     selected={value}
                     startDate={startDate}
                     endDate={endDate}