Modal in calcite-components-react

[awatson32]

Am I missing something? Does the React Modal component not have a contents or title prop? I can't even get anything to show in the footer. If this is documented somewhere, can someone please point me in the right direction? Is there any more documentation outside of the small example included in the calcite-components-examples repo?

https://codesandbox.io/s/competent-babbage-n8q3ol?file=/src/App.js

[KittyHurley · Accepted solution]

@awatson32 For placement of content in the modal, such as a header or contents, you can leverage the modal's slots.

For instance:

<CalciteModal open={isOpen} onCalciteModalClose={() => setIsOpen(undefined)}>
  <h3 slot="header">A modal header</h3>
  <p slot="content">Some modal contents</p>
  <CalciteButton slot="back" kind="neutral" width="full">
    Back
  </CalciteButton>
  <CalciteButton id="save-button" slot="primary" width="full">
    Save and close
  </CalciteButton>
</CalciteModal>

There is also a core concepts page, which provides some background and context on web components, including slots, shadow DOM, CSS variables, and more.