Command Bar styling - Githubissues

bhainesva commented 6 months ago

Description

When I added configuration to my theme for the SuiCommandBar component I expected those styles to be applied to the component as they are for most components. Instead the configuration was ignored.

It looks like the Command Bar provides a value for the styleConfig within the component, which overrides any user provided styles: https://github.com/saas-js/saas-ui/blob/8e7e5ea95e3d2093a981525628550fa6652f45f9/packages/saas-ui-command-bar/src/command-bar.tsx#L77-L81 It's possible to work around this by explicitly passing styleConfig={null} when using the component, but that seem like unexpected behavior, especially since null is not technically a valid value for the prop according to the types.

Edit: It seems like the Date Picker has the same behavior.

Link to Reproduction

https://codesandbox.io/p/sandbox/saas-command-bar-theming-6hx4rf?file=%2Fsrc%2Findex.tsx%3A17%2C1

Steps to reproduce

The reproduction demonstrates how styles added to the theme via extendConfig for the SuiCommandBar are only applied to the component if you also use a styleConfig={null} prop on the component.

Saas UI Version

2.8.1, @saas-ui/command-bar 0.4.3

Chakra UI Version

2.8.2

Browser

Firefox 124.0.2 (64-bit)

Operating System

[X] macOS
[ ] Windows
[ ] Linux

Additional Information

Maybe this is expected because of the component's beta status? Let me know if I should be doing something different here.

linear[bot] commented 6 months ago

SUI-472 Command Bar styling

Pagebakers commented 6 months ago

You're right it behaves like this because it's still in beta, the theme shipped together with the component. Maybe we can find a better solution where the global theme styles get merged in, or replace the default.