From 350799f25220ffa668ce46889904f94fe8e17f5d Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 15 Jan 2025 15:39:27 +0100
Subject: [PATCH] :lipstick: Fix styling of clearable react-select

The padding top/bottom of the clear indicator was too large, making
the select take up too much vertical space.
---
 .../js/components/admin/forms/ReactSelect.js  |  4 ++
 .../admin/forms/VariableSelection.stories.js  | 41 +++++++++++--------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js
index a81de7ca46..0e330a2647 100644
--- a/src/openforms/js/components/admin/forms/ReactSelect.js
+++ b/src/openforms/js/components/admin/forms/ReactSelect.js
@@ -28,6 +28,10 @@ const styles = {
     ...initialStyles.dropdownIndicator(...args),
     padding: '4px 2px',
   }),
+  clearIndicator: (...args) => ({
+    ...initialStyles.clearIndicator(...args),
+    padding: '4px 2px',
+  }),
 };
 
 /**
diff --git a/src/openforms/js/components/admin/forms/VariableSelection.stories.js b/src/openforms/js/components/admin/forms/VariableSelection.stories.js
index e427b7eaae..4eed4b7b51 100644
--- a/src/openforms/js/components/admin/forms/VariableSelection.stories.js
+++ b/src/openforms/js/components/admin/forms/VariableSelection.stories.js
@@ -6,7 +6,21 @@ import {VARIABLE_SOURCES} from '../form_design/variables/constants';
 import {ReactSelectContext} from './ReactSelect';
 import VariableSelection from './VariableSelection';
 
-const render = ({name, includeStaticVariables, filter, menuIsOpen = false, isMulti = false}) => {
+// workaround for https://github.com/JedWatson/react-select/issues/3708
+const resetParentSelector = Story => (
+  <ReactSelectContext.Provider value={{parentSelector: () => undefined}}>
+    <Story />
+  </ReactSelectContext.Provider>
+);
+
+const render = ({
+  name,
+  includeStaticVariables,
+  filter,
+  menuIsOpen = false,
+  isMulti = false,
+  isClearable = false,
+}) => {
   const [{value}, updateArgs] = useArgs();
   return (
     <VariableSelection
@@ -17,6 +31,7 @@ const render = ({name, includeStaticVariables, filter, menuIsOpen = false, isMul
       filter={filter}
       menuIsOpen={menuIsOpen}
       isMulti={isMulti}
+      isClearable={isClearable}
     />
   );
 };
@@ -119,31 +134,23 @@ export default {
 export const Default = {};
 
 export const menuOpen = {
-  decorators: [
-    // workaround for https://github.com/JedWatson/react-select/issues/3708
-    Story => (
-      <ReactSelectContext.Provider value={{parentSelector: () => undefined}}>
-        <Story />
-      </ReactSelectContext.Provider>
-    ),
-  ],
+  decorators: [resetParentSelector],
   args: {
     menuIsOpen: true,
   },
 };
 
 export const multiSelection = {
-  decorators: [
-    // workaround for https://github.com/JedWatson/react-select/issues/3708
-    Story => (
-      <ReactSelectContext.Provider value={{parentSelector: () => undefined}}>
-        <Story />
-      </ReactSelectContext.Provider>
-    ),
-  ],
+  decorators: [resetParentSelector],
   args: {
     value: ['key2', 'key5'],
     menuIsOpen: true,
     isMulti: true,
   },
 };
+
+export const Clearable = {
+  args: {
+    isClearable: true,
+  },
+};