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.