atomsとmoleculesの分類法
これに関しては分類方法が確立されています
機能を軸に考えれば理解できます。
「ButtonってIconも文字も入ってくるけど、これってAtomsでいいの！？もしかしてMolecules！？」
Buttonを構成する要素
Buttonには、Atomsとして定義するであろうIconが中に入り込んでくるのです。
さらに「文字」もAtomsにあたるので、Buttonは2つのAtomsをラップするものということになります。
Moleculesに対する理解
「MoleculesはAtomで構成されるもの」
ここから導き出される結論と悩み
ButtonはやっぱりMoleculesに含まれるのでは？と悩んでしまうわけです！
悩みを解決する鍵となる考え
Atoms層は、「それ以上UIとしての機能性を破壊しない最小要素」となるように分割します 鍵となる考えをつかってButtonを再考する
Buttonという機能をこれ以上に分解した時に、それぞれ分解されたものは機能として成立するかどうか
ここでボタンの機能とは、「ボタンの文面を読んだユーザが押した期待動作をすること」
Buttonをtextとiconに分解すると機能が失われる。よってButtonはAtom
AccordionやPopupも同様に捉える
Accordionは、ボタンを押した指定したコンテンツが下に伸びるアニメーションと共に表示されるもの
Popupは、ボタンを押したら黒や白のオーバーレイの上に中央寄せでコンテンツが表示されるもの
これ以上分解すると機能が失われるので、これらもやはりAtom