Added horizontal padding to Select field filter dropdown (#2832)

keystonejs · May 5, 2020 · d7eb260 · d7eb260
1 parent 5e20df8
commit d7eb260
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/witty-dodos-film.md b/.changeset/witty-dodos-film.md
@@ -0,0 +1,6 @@
+---
+'@arch-ui/options': patch
+'@keystonejs/fields': patch
+---
+
+Added horizontal padding to Select field filter dropdown.
diff --git a/packages/arch/packages/options/src/index.js b/packages/arch/packages/options/src/index.js
@@ -46,10 +46,11 @@ export const CheckMark = ({ isDisabled, isFocused, isSelected }) => {
   );
 };
 
-export const OptionPrimitive = ({ children, isDisabled, innerProps, innerRef }) => {
+export const OptionPrimitive = ({ children, isDisabled, innerProps, innerRef, className }) => {
   return (
     <div
       ref={innerRef}
+      className={className}
       css={{
         alignItems: 'center',
         color: isDisabled ? colors.N40 : null,

diff --git a/packages/fields/src/types/Select/views/Filter.js b/packages/fields/src/types/Select/views/Filter.js
@@ -33,7 +33,6 @@ const SelectFilterView = ({ innerRef, field, value, onChange }) => {
 
   const radioValue = value.inverted ? 'does_not_match' : 'does_match';
   const selectProps = {
-    components: { Option: CheckMarkOption },
     innerRef: innerRef,
     onChange: handleSelectChange,
     options: field.options,
@@ -51,10 +50,18 @@ const SelectFilterView = ({ innerRef, field, value, onChange }) => {
       <SelectWrapper>
         {field.options.length > 8 ? (
           <EventCatcher>
-            <Select menuPortalTarget={document.body} {...selectProps} />
+            <Select
+              menuPortalTarget={document.body}
+              {...selectProps}
+              components={{ Option: CheckMarkOptionSelect }}
+            />
           </EventCatcher>
         ) : (
-          <Options displaySearch={false} {...selectProps} />
+          <Options
+            displaySearch={false}
+            {...selectProps}
+            components={{ Option: CheckMarkOption }}
+          />
         )}
       </SelectWrapper>
     </Fragment>
@@ -68,4 +75,12 @@ const CheckMarkOption = ({ children, ...props }) => (
   </OptionPrimitive>
 );
 
+// TODO: figure out a better way to give options padding in the the dropdown
+const CheckMarkOptionSelect = props => (
+  <CheckMarkOption
+    {...props}
+    css={{ paddingLeft: `${gridSize}px`, paddingRight: `${gridSize}px` }}
+  />
+);
+
 export default SelectFilterView;