Override Chakra UI component props

[kculmback-eig]

Would there be any interest in a PR that would allow users to override props for the Chakra Control Elements? This would allow greater control of styling without having to write some custom CSS.

Would look something like this in usage:

import QueryBuilder from 'react-querybuilder';
import { chakraControlElements as baseChakraControlElements } from '@react-querybuilder/chakra';
import { defaultQuery, fields } from './constants';

const chakraControlElements = {
  ...baseChakraControlElements,
  removeGroupAction: (props) => <ChakraActionElement {...props} buttonProps={{ colorScheme: 'red' }} />,
  removeRuleAction: (props) => <ChakraActionElement {...props} buttonProps={{ colorScheme: 'red' }} />,
}

export function App() {
  return (
    <QueryBuilder
      fields={fields}
      defaultQuery={defaultQuery}
      controlElements={chakraControlElements}
    />
  );
}

And the component:

import { Button, ButtonProps } from '@chakra-ui/react';
import type { ActionProps } from 'react-querybuilder';

export const ChakraActionElement = ({
  className,
  handleOnClick,
  label,
  title,
  disabled,
  disabledTranslation,
  buttonProps = {}
}: ActionProps & { buttonProps?: ButtonProps }) => (
  <Button
    className={className}
    title={disabledTranslation && disabled ? disabledTranslation.title : title}
    colorScheme="gray"
    variant="solid"
    onClick={e => handleOnClick(e)}
    size="xs"
    isDisabled={disabled && !disabledTranslation}
    {...buttonProps}>
    {disabledTranslation && disabled ? disabledTranslation.label : label}
  </Button>
);

ChakraActionElement.displayName = 'ChakraActionElement';

Alternatively in the component you could do something like this:

export const QueryBuilderActionElement = ({
  className,
  handleOnClick,
  label,
  title,
  disabled,
  disabledTranslation,
  level,
  path,
  context,
  testID,
  validation,
  ...buttonProps
}: ActionProps & ButtonProps) => { /* ... */ }

The main benefit would be allowing the user to do <ChakraActionElement {...props} colorScheme="red" />, but the drawback is that you would need to destructure all the ActionProps to avoid automatically passing them to the Chakra component. Chakra will automatically pass any additional prop to the DOM element resulting in warnings like this Warning: React does not recognize the "testID" prop on a DOM element..

[jakeboone02]

Yeah, I've considered adding something like that. If we did add a way to pass other props, I'd like it to be as generic as possible (with a name like extraProps maybe?) so that the main package as well as all the compatibility packages could take advantage of it.

[kculmback-eig]

Something like this could work:

export interface CommonSubComponentProps<ExtraProps extends object = object> {
  /** ... */
  /**
   * Extra props to pass to compatibility package component
   */
  extraProps?: ExtraProps;
}

export interface ActionProps<ExtraProps extends object = object> extends CommonSubComponentProps<ExtraProps> {
  label?: string;
  handleOnClick(e: ReactMouseEvent): void;
  disabledTranslation?: TranslationWithLabel;
}

import { Button, ButtonProps } from '@chakra-ui/react';
import type { ActionProps } from 'react-querybuilder';

export const ChakraActionElement = ({
  className,
  handleOnClick,
  label,
  title,
  disabled,
  disabledTranslation,
  extraProps = {}
}: ActionProps<ButtonProps>) => (
  <Button
    colorScheme="gray"
    variant="solid"
    size="xs"
    {...extraProps}
    className={className}
    title={disabledTranslation && disabled ? disabledTranslation.title : title}
    onClick={e => handleOnClick(e)}
    isDisabled={disabled && !disabledTranslation}>
    {disabledTranslation && disabled ? disabledTranslation.label : label}
  </Button>
);

[jakeboone02]

Yeah that's more like it. Want to start a PR with the basic modifications and we can collaborate on the final changes?

[kculmback-eig]

Sounds good @jakeboone02 . Probably won't be until early next week that I'm able to get the start of the PR in

[jakeboone02]

No problem. I'm travelling next week so I'm not sure how much I'll be able to do anyway.

[jakeboone02]

@kculmback-eig I went ahead and implemented this without the indirection of a new prop. Any props that can be passed to the style library's component will be accepted by the RQB compatibility component (and will override the defaults).

So, for example, the @react-querybuilder/chakra component ChakraActionElement will now accept any props that Button from @chakra-ui/react will accept, and will pass them directly to its <Button /> when rendering. (The type of the props parameter is basically ActionWithRulesProps & ButtonProps.)

See #304 for an example implementation.