Is there a way to support larger Size properties?

[irwinarruda]

Thanks for the good work with this component.

In my chakra-ui project, I had to create xl, 2xl and 3xl properties for Button and Input. I'm mainly changing height, paddingX and fontSize between those sizes because I just want a bigger elements.

Scanning through chakra-react-select code I realized that there is only support for the default chakra-ui props. Is there any way to support for other sizes? The docs says that xs was too small, but besides that, can the component just extend those properties from the main theme?

[csandman]

The issue with this is that the sizes don't only apply to the main Control component, (the one that's styled like the chakra Input), it also maps sizes of other components such as the Tag, Spinner, Menu group title, and I think one or two more. And they're also not mapped directly in all cases, for example I'm downsizing the spinner by one size based on the input value:

const spinnerSizes = {
  sm: "xs",
  md: "sm",
  lg: "md",
};

Besides that, a lot of the other custom styles that are applied to each of the non-standard components are mapped from the three size options I'm offering, as there's no equivalent for them in the Chakra theme.

If you want to add options for other sizes, the only thing I could recommend is adding custom styling to each of the components that make up the select using the chakraStyles prop in a wrapper around this select. However, this will probably not be a small task if you want to adjust the styling on every sub-component, as there will be a lot of conditional styling.

Here's an example of how you might start this: https://codesandbox.io/s/chakra-react-select-custom-sizes-vosp7?file=/components/custom-select.js

import { Select } from "chakra-react-select";

const CustomSelect = ({ size, ...props }) => {
  const extraSizes = ["xl", "2xl", "3xl"];
  // Return `lg` as a base size so you already have a larger starting point
  // and might not have to change as many styles
  const innerSize = extraSizes.includes(size) ? "lg" : size;

  const chakraStyles = {
    control: (provided) => {
      // Only override the styles when its one of your custom sizes
      if (!extraSizes.includes(size)) {
        return provided;
      }

      return {
        ...provided,
        fontSize: size,
        px: {
          xl: 6,
          "2xl": 7,
          "3xl": 8
        }[size],
        h: {
          xl: "56px",
          "2xl": "64px",
          "3xl": "72px"
        }[size],
        borderRadius: {
          xl: "lg",
          "2xl": "lg",
          "3xl": "xl"
        }[size]
      };
    },
    dropdownIndicator: (provided) => {
      if (!extraSizes.includes(size)) {
        return provided;
      }

      return {
        ...provided,
        px: {
          xl: 6,
          "2xl": 7,
          "3xl": 8
        }[size]
      };
    }
    // Add the rest of the style overrides here...
  };

  return <Select size={innerSize} chakraStyles={chakraStyles} {...props} />;
};

export default CustomSelect;

I'm sorry there's no easier way to accomplish this, but simply allowing the option to pass sizes other than sm, md, or lg would cause a large chunk of the sizes in the various sub components to break, and adding larger size options natively isn't something I plan to do.

Let me know if this makes sense, or you need any more explanation.

[irwinarruda]

I understand what you mean. I was also wondering if there was a way to treat chakra-react-select like a chakra-ui standard component so that we could change it's styles within ChakraProvider, but I guess that's what the chakraStyles prop is for.

Even before I wrote the issue I thought of solving it with chakraStyles, so I came up with a solution close to yours. I did not think that properly sizing the hole component would be that hard though. But it makes sense since it uses a lot of different chakra-ui components as you said.

Either way, thanks for answering the question. Let me know if I should close the issue.

[csandman]

I actually had thought about trying to incorporate the styles in this package into a chakra multi part component theme, but from as far as I can tell there's no way to modify the theme from within a component. I could have exported a theme object and added instructions to extend the theme at the top level but I felt that keeping it as simple as possible by default would be the easiest way for most people to use it.

So for the time being I don't plan on adding that. And yeah, you can close this for now as I don't intend to change anything about the sizing for the time being.