Introduce and start using "classnames" for class construction in components

[bredy]

Is your feature request related to a problem? Please describe.

Currently in library there is lots of lines of code concatenating class names. Code is often unnecessarily long and unclear. Is could be later difficult to refactor or add some new classes.

Describe the solution you'd like

I'd like to start using classnames library. It's simple and small library focused to solve this kind of issues. This library is not tied to any specific framework or library and can be used in a wide range of contexts. It is compatible with React. Also is optimised for performance and has a small footprint.

Describe alternatives you've considered

We can alternatively start using clsx or create our own utility with the same (or simplier) interface. There are some pros/cons related to clsx - we could discuss it further if there will be interest to continue with any of these libraries.

Additional context

I've randomly chosen two components and modified their code to provide examples how the code changes with classnames.

AListItem Example

• before:

  let className = "a-list-item";
  
  if (twoLine) {
    className += " a-list-item--two-line";
  }
  
  if (selected) {
    className += " a-list-item--selected";
  }
  
  if (disabled) {
    className += " a-list-item--disabled";
  }
  
  if (propsClassName) {
    className += ` ${propsClassName}`;
  }
  
  const props = {
    ...rest,
    className,

• after:

  const listItemClass = {
    "a-list-item--two-line": twoLine,
    "a-list-item--selected": selected,
    "a-list-item--disabled": disabled
  };
  
  const props = {
    ...rest,
    className: classNames("a-list-item", listItemClass),

ALoader Example

• before:

  switch (size) {
    case "small": {
      className += ` ${baseClass}--size-small`;
      break;
    }
  
    case "large": {
      className += ` ${baseClass}--size-large`;
      break;
    }
  
    default: {
      className += ` ${baseClass}--size-medium`;
    }
  }
  
  switch (placement) {
    case "top":
      className += ` ${baseClass}--placement-top`;
      break;
    case "right":
      className += ` ${baseClass}--placement-right`;
      break;
    case "bottom":
      className += ` ${baseClass}--placement-bottom`;
      break;
    case "left":
      className += ` ${baseClass}--placement-left`;
      break;
  }
  
  className += ` ${baseClass}--loader-${indicatorType}`;
  
  if (propsClassName) {
    className += ` ${propsClassName}`;
  }
  
  return (
    <div ref={ref} className={className} {...rest}>

• after:

  const aLoaderClass = {
    // size
    [`${baseClass}--size-small`]: size === "small",
    [`${baseClass}--size-large`]: size === "large",
    [`${baseClass}--size-medium`]: size === "medium" || !size,
    // placement
    [`${baseClass}--placement-top`]: placement === "top",
    [`${baseClass}--placement-right`]: placement === "right",
    [`${baseClass}--placement-bottom`]: placement === "bottom",
    [`${baseClass}--placement-left`]: placement === "left",
  };
  
  return (
    <div ref={ref} className={classNames(aLoaderClass, propsClassName)} {...rest}>

Use code examples are available in jp-classnames branch.

[rwharrisjr]

By design magna-react doesn't have any dependencies. I'd like to keep it this way for simplicity sake.

The "after" with classNames usage is nice though, so I'd lean toward implementing our own utility for the features we want. @androche