(
  <div
    id={`font-picker${this.fontManager.selectorSuffix}`}
    className={expanded ? "expanded" : ""}
  >
    <button
      type="button"
      className="dropdown-button"
      onClick={this.toggleExpanded}
      onKeyPress={this.toggleExpanded}
    >
      <p className="dropdown-font-family">{activeFontFamily}</p>
      <p className={`dropdown-icon ${loadingStatus}`} />
    </button>
    {loadingStatus === "finished" && this.generateFontList(fonts)}
  </div>
);

<div className="font-picker">
  <FontPicker />
</div>

// the classnames that are exposed
.font-picker {
  div.expanded
  .dropdown-button
  p.dropdown-font-family
}