Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme styles overridden by size prop #194

Closed
6 tasks
joshuabaker opened this issue Sep 28, 2022 · 8 comments
Closed
6 tasks

Theme styles overridden by size prop #194

joshuabaker opened this issue Sep 28, 2022 · 8 comments
Assignees
Labels
Bug Something isn't working

Comments

@joshuabaker
Copy link

Description

The below line will always override the border radius defined in theme.components.Menu.$size.list.

borderRadius: borderRadii[size || "md"],

chakra-react-select Version

4.2.2

Link to Reproduction

No response

TypeScript?

  • Yes I use TypeScript

Steps to reproduce

  1. Go to '...'
  2. Click on '...'
  3. Scroll down to '...'
  4. See error

Operating System

  • macOS
  • Windows
  • Linux
  • iOS/iPadOS
  • Android

Additional Information

No response

@joshuabaker joshuabaker added the Bug Something isn't working label Sep 28, 2022
@joshuabaker joshuabaker changed the title Border radius overrides theme styles Theme styles overridden by size prop Sep 28, 2022
@joshuabaker
Copy link
Author

joshuabaker commented Sep 28, 2022

height and minHeight are also overridden, meaning these needs to be manually removed via chakraStyles to honour the theme.

height: "auto",
minHeight: heights[size || "md"],

@csandman
Copy link
Owner

Yeah this is currently the intended behavior, but I should probably specify better in the docs how that works.

Because the Menu components don't have any size variants, the only way to make the menu components respond to the size prop is by modifying those style props manually.

The order of preference for applying styles from least preferred to most preferred is

  1. Theme styles for each component
  2. Package-specific overrides for props such as size
  3. chakraStyles

Some styles other than ones based on size also need to be overridden by the package, like the height vs. minHeight on the Control, because of the fundamental differences in the way chakra-react-select has to be rendered relative to a normal Input component. For example, in the case you mention the minHeight must be used instead of height because when isMulti is passed, the control needs to grow if more than one row of options is selected.

image

vs.

image

However, in this case I realize I could use inputStyles.field.h for the minHeight instead of custom values so I will change that, but there aren't many cases like that.


So I'm curious, is there something specific you were trying to do? Were the docs just confusing about this point? Or alternatively, is there a different way you think these cases could be handled?

@joshuabaker
Copy link
Author

Thanks for the thorough explanation. I appreciate that, and now understand better why you’ve done it this way.

My expectation was to be able to control this via theme.components.Input so this would be consistent for all input components.

I would agree that you might pull Input.field.h / Input.field.height / Input.field.minHeight.

For borderRadius that I originally encountered, is there a functional use case for that override?

@csandman
Copy link
Owner

Yes, so the borderRadius on the MenuList is there to match the styles for the input. If you look at the original Chakra Input sizes, medium and large both have the same border radius but small has a smaller one:

image

I wanted this to be reflected on the menu so the styles matched between the Input and MenuList

image

Does that make sense?

My expectation was to be able to control this via theme.components.Input so this would be consistent for all input components.

I can take another look through, and see if I can make some more inferences about styles based on the components they're supposed to be matching. For example, I could probably pull that border radius from the Input component's theme instead of manually defining it to make the styles match automatically.

I would agree that you might pull Input.field.h / Input.field.height / Input.field.minHeight.

I actually gave that a shot in #195 and I'll merge it soon, you can see the change here.

@csandman
Copy link
Owner

Actually, about the border radius, I just realized I did that wrong... the border radius for size="lg" should be the same as size="md" but its actually slightly more rounded because it's using borderRadius="lg". It was kind of hard for me to see so I missed it but thanks for bringing it to my attention!

@joshuabaker
Copy link
Author

Regarding borderRadius, that’s assuming users want the default radii options. Our use case is to set borderRadius: null in the component theme file with the intent to remove it. By restoring it you inadvertently revert it back to the Chakra default, which isn’t desirable. Does that makes sense?

@csandman
Copy link
Owner

Are you talking about setting borderRadius: null for the MenuList component?

But yeah, I see what you're saying. However, the use case seems to fall into a relatively niche category of styling choices and I don't think there's any way around what I'm doing for a lot of these styles. A lot of my manual styles need to exist in order for the variants/sizes to properly style each component that makes up chakra-react-select.

I think your best bet would just be to override the styles that are not working properly with the chakraStyles prop. Overall there aren't too too many places where I override theme styles so the chakraStyles prop shouldn't need to be massive.

@csandman
Copy link
Owner

csandman commented Oct 6, 2022

So I just published v4.2.5 which includes changes for a couple of the points you listed. I still cannot remove all of the style customization for the reasons I mention above, but these few should help at least. Here's an example of some of the changes in action: https://codesandbox.io/s/chakra-react-select-theme-overrides-5p7gwy?file=/app.tsx

There aren't a ton of style overrides left over, and at the end of the day you should be able to change any of the remaining styles I've overridden with chakraStyles.

I'm going to close this issue for now as there's nothing else I plan to do to change this, but feel free to continue to comment on it if there's anything more you want to discuss.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants