Skip to content

Commit

Permalink
💄 Fix styling of clearable react-select
Browse files Browse the repository at this point in the history
The padding top/bottom of the clear indicator was too large, making
the select take up too much vertical space.
  • Loading branch information
sergei-maertens committed Jan 15, 2025
1 parent 6ff9c0e commit 350799f
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 17 deletions.
4 changes: 4 additions & 0 deletions src/openforms/js/components/admin/forms/ReactSelect.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ const styles = {
...initialStyles.dropdownIndicator(...args),
padding: '4px 2px',
}),
clearIndicator: (...args) => ({
...initialStyles.clearIndicator(...args),
padding: '4px 2px',
}),
};

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -17,6 +31,7 @@ const render = ({name, includeStaticVariables, filter, menuIsOpen = false, isMul
filter={filter}
menuIsOpen={menuIsOpen}
isMulti={isMulti}
isClearable={isClearable}
/>
);
};
Expand Down Expand Up @@ -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,
},
};

0 comments on commit 350799f

Please sign in to comment.