Widget.re

module ClassNameList = {
  type param = option(string);
  let join = (cur: string, x: param) : string =>
    switch x {
    | None => cur
    | Some(s) => cur ++ " " ++ s
    };
  let make = (classList: list(param)) : string =>
    classList |> List.fold_left(join, "");
};

module Basic = {
  type param = option(string);
  module LoadingIndicator = {
    let component = ReasonReact.statelessComponent("WidgetLoadingIndicator");
    let make = _children => {
      ...component,
      render: _self =>
        <div
          className="widget-content"
          style=(ReactDOMRe.Style.make(~height="30px", ()))>
          <div className="influential-loading-widget" />
        </div>
    };
  };
  module WidgetContent = {
    let component = ReasonReact.statelessComponent("WidgetContent");
    let make = (~padding=?, ~overflow=?, children) => {
      ...component,
      render: _self =>
        ReasonReact.createDomElement(
          "div",
          ~props={
            "className": ClassNameList.make([Some("widget-content"), padding]),
            "style": ReactDOMRe.Style.make(~overflow?, ())
          },
          children
        )
    };
  };
  let component = ReasonReact.statelessComponent("BasicWidgetContainer");
  let make =
      (
        ~className=?,
        ~float=false,
        ~heading=?,
        ~loading=true,
        ~overflow=?,
        ~padding=?,
        ~readOnly=false,
        ~width=?,
        children
      ) => {
    ...component,
    render: _self => {
      let widgetHeader = Js.Option.getWithDefault("Widget", heading);
      let classList =
        ClassNameList.make([
          Some("widget"),
          loading ? Some("loading") : None,
          readOnly ? Some("read-only") : None,
          float ? None : Some("no-float"),
          className,
          width
        ]);
      <div className=classList>
        <div className="widget-header">
          <h3> (ReasonReact.stringToElement(widgetHeader)) </h3>
        </div>
        (
          loading ?
            <LoadingIndicator /> :
            <WidgetContent overflow> ...children </WidgetContent>
        )
      </div>;
    }
  };
};

After reading the docs on prop forwarding I was able to get this to compile by changing line 73 to the following:

<WidgetContent ?padding ?overflow> ...children </WidgetContent>

Hopefully someone can explain why this works, because right now I'm even more lost.