Sidemodal

[jhanley87]

Apologies if I am missing something totally obvious but can we control the width of a Sidemodal easily?

[SiTaggart]

Hi @jhanley87

You aren't missing anything, we have only 1 size out the box for side modals right now. The idea being is that we want uniform side modals in our products, but allow customization of components via the Customization Provider.

What you have done though, is alerted me to a bug in Side Modal where, even with the Customization Provider you can't customize the width. I'll put up a PR shortly to address that and follow up with an exammple on how to use it once it's merged.

Thanks

[SiTaggart]

PR is here #2807

[jhanley87]

Thanks @SiTaggart, makes sense to keep them uniform. I am using them in a Flex Agent UI where the tools are not things that agents need all of the time, some of the UI's I thought out originally were wider than the standard sidemodal, I just rethought my UI.

[SiTaggart]

This looks awesome! Give it a couple of days and you'll be able to achieve this once that PR is merged and released!! 🎉

[SiTaggart]

Hi @jhanley87

This addition is now released. I have created a Codesandbox demonstrating how you can adjust the side modal width using the customization provider.

https://codesandbox.io/s/custom-side-modals-6miwun?file=/src/index.tsx

You can either change the width of all side modals in your app by targeting the element name provided by Paste.

<CustomizationProvider
  baseTheme="default"
  elements={{
    SIDE_MODAL_CONTAINER: {
      width: "50%"
    }
  }}
>
...
</CustomizationProvider>

Or create one off side modal by providing your own custom element name for the SideModal

<SideModalContainer>
  <SideModalButton variant="primary">
    Open Custom Side Modal
  </SideModalButton>
  <SideModal
    aria-label="Basic Side Modal"
    element="custom-width-side-modal"
  >
    <SideModalHeader>
      <SideModalHeading>Heading</SideModalHeading>
    </SideModalHeader>
    <SideModalBody>
      <Paragraph>
        A Modal is a dialog that appears over the main content and moves the
        system into a special mode requiring user interaction.
      </Paragraph>
      <Paragraph>
        You can compose a Modal content area to support your use case, but
        elements such as Paragraph and Form Input are commonly used. See
        examples for common Modal patterns and dos/don'ts.
      </Paragraph>
    </SideModalBody>
  </SideModal>
</SideModalContainer>

Which can then be targets as a custom element name on the customization provider

<CustomizationProvider
  baseTheme="default"
  elements={{
    "custom-width-side-modal_CONTAINER": {
      width: "200px"
    }
  }}
>
...
</CustomizationProvider>

If you inspect any Paste component in the browser you will see a data-paste-element attribute assigned to each DOM node. The value of each of these can be used to add custom styles to that node via the customization provider.