Command Bar styling

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:

saas-ui/packages/saas-ui-command-bar/src/command-bar.tsx

Lines 77 to 81 in 8e7e5ea

    
           export const CommandBar: React.FC<CommandBarProps> = (props) => { 
        
             const styles = useMultiStyleConfig('SuiCommandBar', { 
        
               styleConfig: commandBarTheme, 
        
               ...props, 
        
             })

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

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.

SUI-472 Command Bar styling

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.

Hey @Pagebakers, would it be possible to make the same change to the DatePicker component? Sorry if that got lost in the original issue description, I can also make a new issue if you'd prefer.

For sure, could you open a new issue so I don't loose track of it?

	export const CommandBar: React.FC<CommandBarProps> = (props) => {
	const styles = useMultiStyleConfig('SuiCommandBar', {
	styleConfig: commandBarTheme,
	...props,
	})