add custom styles functionality, and padding to Pagination select (#5322

)

* add custom styles functionality, and padding to Pagination select

* changesets

* use merge styles instead

* add more paddding to the right of value

Co-authored-by: Mitchell Hamilton <[email protected]>

.changeset/strong-experts-peel.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': patch
+---
+
+Added padding to the select input in the Pagination component in @keystone-next/admin-ui.

.changeset/witty-parents-juggle.md

@@ -0,0 +1,5 @@
+---
+'@keystone-ui/fields': minor
+---
+
+Added styles prop to @keystone-ui/fields select components to enable style customisations to propagate to the underlying reaect-select implementation.

design-system/packages/fields/src/Select.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx, useTheme } from '@keystone-ui/core';
-import ReactSelect, { Props, OptionsType } from 'react-select';
+import ReactSelect, { Props, OptionsType, mergeStyles } from 'react-select';
 import { useInputTokens } from './hooks/inputs';
 import { WidthType } from './types';
 
@@ -118,20 +118,22 @@ export function Select({
   value,
   width: widthKey = 'large',
   portalMenu,
+  styles,
   ...props
 }: BaseSelectProps & {
   value: Option | null;
   portalMenu?: true;
   onChange(value: Option | null): void;
 }) {
   const tokens = useInputTokens({ width: widthKey });
-  const styles = useStyles({ tokens });
+  const defaultStyles = useStyles({ tokens });
+  const composedStyles = styles ? mergeStyles(defaultStyles, styles) : defaultStyles;
 
   return (
     <ReactSelect
       value={value}
       // css={{ width: tokens.width }}
-      styles={styles}
+      styles={composedStyles}
       onChange={value => {
         if (!value) {
           onChange(null);
@@ -151,19 +153,21 @@ export function MultiSelect({
   value,
   width: widthKey = 'large',
   portalMenu,
+  styles,
   ...props
 }: BaseSelectProps & {
   value: OptionsType<Option>;
   portalMenu?: true;
   onChange(value: OptionsType<Option>): void;
 }) {
   const tokens = useInputTokens({ width: widthKey });
-  const styles = useStyles({ tokens, multi: true });
+  const defaultStyles = useStyles({ tokens, multi: true });
+  const composedStyles = styles ? mergeStyles(defaultStyles, styles) : defaultStyles;
 
   return (
     <ReactSelect
       // css={{ width: tokens.width }}
-      styles={styles}
+      styles={composedStyles}
       value={value}
       onChange={value => {
         if (!value) {

packages-next/admin-ui/src/components/Pagination.tsx

@@ -90,6 +90,13 @@ export function Pagination({ currentPage, total, pageSize, list }: PaginationPro
           width="medium"
           value={{ label: String(currentPage), value: String(currentPage) }}
           options={pages}
+          styles={{
+            valueContainer: provided => ({
+              ...provided,
+              paddingLeft: '12px',
+              paddingRight: '16px',
+            }),
+          }}
           menuPortalTarget={document.body}
           onChange={onChange}
         />