Wrapping things up

gistfile1.md

So, about this short conversation about containing thing, some examples where I think this is not such an obvious move as it sounds.

import React from 'react';

export class Icon extends React.Component {
  /* ... */
  getDefaultProps() {
    return {
      additionalClass : "Icon--defaultSize",
      altText : "",
      square : false,
      tooltip : false,
      style : {},
    };
  },
  /* ... */
  render() {
    return (
      <span
        className={"Icon Icon--" + this.props.icon + " " + this.props.additionalClass}
        aria-label={this.props.altText}
        style={this.props.style}
        title={(this.props.tooltip) ? this.props.altText : ""}
      >
        <span
          className="Icon-subcontainer"
          style={{paddingBottom : this.setPaddingBottom()}}
        >
          {this.getSVGComponent}
        </span>
      </span>
    );
  }
};

.Icon{
  display: inline-block;
  vertical-align: middle;
  color: inherit;
}
.Icon--defaultSize{
  width: 1rem;
}

Currently, the additionalClass is used to style things up (proper width, colour, etc). I guess I could add a fourth span layer with the additional class props, as in

/* Icon.jsx */
/* ... */
render() {
  return (
    <span className={this.props.additionalClass}>
      <span
        className={"Icon Icon--" + this.props.icon}
        {/* ... */}
      />
        {/* ... */}
      </span>
    </span>
  );
}

/* some file foo.js */
/* ... */
<Icon additionalClass="Foo-icon" icon="arrow" />
/* ... */

.Icon{
  /*...*/
  width:100%
  /*...*/
}
.Foo-icon{
  width: 1.5em;
  color: #000
}

I keep thinking there may be cases where wrapping things would complicate things, but then it could be just a matter of context props, and so, just a matter of "internal additional classes". Or no, it wouldn't be just a matter of context props. I'll see as it happens.

Anyhoo: this is food for thoughts for proper independant components indeed. Isolation good, possibilities of interference bad.