expose classnames for selecting

Author: TomWoodward

src/components/forms/uncontrolled/index.tsx

@@ -8,24 +8,27 @@ export * from './inputs';
  * form element
  */
 type FormProps = React.ComponentPropsWithoutRef<'form'>;
+export const formClassName = 'uncontrolled-form';
 export const Form = ({children, className, style, ...props}: FormProps) => {
   return (
-    <form className={`uncontrolled-form ${className || ''}`} style={style} {...props}>
+    <form className={[formClassName, className].join(' ').trim()} style={style} {...props}>
       {children}
     </form>
   );
 };
 
+export const formSectionClassName = 'uncontrolled-form-section';
 export const FormSection = ({className, ...props}: React.ComponentPropsWithoutRef<'div'>) => (
-  <div className={`uncontrolled-form-section ${className || ''}`} {...props} />
+  <div className={[formSectionClassName, className].join(' ').trim()} {...props} />
 );
 
 type MessagesProps = {
   state: FetchState<any, string>;
   className?: string;
 };
+export const messagesClassName = 'uncontrolled-messages';
 export const Messages = ({state, className}: MessagesProps) => stateHasError(state)
-  ? <div className={`uncontrolled-messages ${className || ''}`}>{state.error}</div>
+  ? <div className={[messagesClassName, className].join(' ').trim()}>{state.error}</div>
   : null;
 
 /*
@@ -36,18 +39,22 @@ type ButtonsProps = {
   onCancel?: () => void;
   className?: string;
 };
-export const Buttons = (props: ButtonsProps) => (
-  <div className={`uncontrolled-buttons ${props.className || ''}`}>
+export const buttonsClassName = 'uncontrolled-buttons';
+export const Buttons = ({className, ...props}: ButtonsProps) => (
+  <div className={[buttonsClassName, className].join(' ').trim()}>
     {'onCancel' in props ? <Cancel onClick={props.onCancel}>Cancel</Cancel> : null}
     <Submit />
   </div>
 );
 
 // submit button
 type SubmitButtonProps = React.ComponentPropsWithoutRef<'input'>;
-export const Submit = ({...props}: SubmitButtonProps) =>
-  <input type="submit" value="Submit" {...props} />;
+export const submitButtonClassName = 'uncontrolled-submit-button';
+export const Submit = ({className, ...props}: SubmitButtonProps) =>
+  <input className={[submitButtonClassName, className].join(' ').trim()} type="submit" value="Submit" {...props} />;
 
 // cancel button
 type CancelButtonProps = React.ComponentPropsWithoutRef<'button'>;
-export const Cancel = ({...props}: CancelButtonProps) => <button type="button" {...props} />;
+export const cancelButtonClassName = 'uncontrolled-cancel-button';
+export const Cancel = ({className, ...props}: CancelButtonProps) =>
+  <button className={[cancelButtonClassName, className].join(' ').trim()} type="button" {...props} />;

src/components/forms/uncontrolled/inputDecorations.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import classNames from 'classnames';
 import './inputDecorations.css';
 
+export const formInputWrapperClassName = 'uncontrolled-form-input-wrapper';
 export const FormInputWrapper = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<'label'> & { as?: string }
 >(({className, as: Element = 'label', ...props}, ref) => (
-  React.createElement(Element, {ref, className: classNames('uncontrolled-form-input-wrapper', className), ...props})
+  React.createElement(Element, {ref, className: [formInputWrapperClassName, className].join(' ').trim(), ...props})
 ));
 FormInputWrapper.displayName = 'FormInputWrapper';
 
+export const formLabelTextClassName = 'uncontrolled-form-label-text';
 export const FormLabelText = ({className, as: Element = 'span', ...props}: React.ComponentPropsWithoutRef<'span'> & { as?: string }) => (
-  React.createElement(Element, {className: classNames('uncontrolled-form-label-text', className), ...props})
+  React.createElement(Element, {className: [formLabelTextClassName, className].join(' ').trim(), ...props})
 );
 
 export type InputProps = {
@@ -25,8 +26,9 @@ export type InputProps = {
 type HelpTextProps = React.ComponentPropsWithoutRef<'p'> & {
   value: string | undefined | React.ReactNode;
 };
+export const helpTextClassName = 'uncontrolled-help-text';
 export const HelpText = ({value, className, as: Element = 'p', ...props}: HelpTextProps & { as?: string }) => value
-  ? React.createElement(Element, {className: classNames('uncontrolled-help-text', className), ...props}, value)
+  ? React.createElement(Element, {className: [helpTextClassName, className].join(' ').trim(), ...props}, value)
   : null;
 
 export const RequiredIndicator = (props: {show: boolean | undefined}) => props.show ? <>*</> : null;