Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Wrapping things up

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment