`loading` and `disabled` state for `ui-modal` actions

[nullndr]

The <ui-modal> for the Forms application has a correct state of disabled for the primary action:

I can't understand how to achieve it, I tried with tone="disabled" in my <ui-modal> but the whole line under the modal content went missing, and the docs do not have any example for this.

How can I do it?

[charlesdobson]

Hi @nullndr,

We were missing support for this in the new App Bridge. We've just added it in with the disabled and loading properties on buttons.

You can achieve it like this:

<ui-modal>
  <div>my content</div>
  <ui-title-bar title="Create form">
    <button variant="primary" disabled>Create</button>
    <button>Cancel</button>
  </ui-title-bar>
</ui-modal>

Haven't updated the docs yet but will do so soon. Let me know if you have any troubles!

[nullndr]

Excellent, now only #264 and #275 are missing and we can have a fully replacement for the already working <Modal> component 🎉

[Faizu9264]

Since the recent app update, I've encountered an issue with the DropZone component when it's placed inside the ui-modal. Previously, the DropZone worked seamlessly for file uploads, but after the update, it seems to be malfunctioning. I expected the DropZone component to allow me to select a file for upload when clicked inside the modal, just like it did before the update. The file should be successfully uploaded upon selection.

Instead, clicking on the DropZone inside the modal doesn't trigger the file upload dialog as expected. The DropZone appears unresponsive, preventing me from selecting any files for upload.

<ui-modal id="font-modal">
  <div style={{ padding: "10px" }}>
    <p className="mb-8">
      {t("Fonts.supported_text", {
        formats: ALLOWED_EXTENSIONS.join(", "),
      })}
    </p>
    <div>
      <DropZone
        label={t("Fonts.select_a_font")}
        onDrop={handleDropZoneDrop}
        allowMultiple={false}
      >
        <div style={{ padding: "5px" }}>
          {!file ? (
            <DropZone.FileUpload />
          ) : (
            <Thumbnail
              size="small"
              alt={file.name}
              source={FileFilledIcon}
            />
          )}
        </div>
      </DropZone>
    </div>
    <div className="my-6">
      {inlineError && <InlineError message={inlineError} fieldID="" />}
    </div>
    <div className="my-6">
      <TextField
        label={t("Fonts.font_name")}
        value={fontName}
        onChange={setFontName}
        autoComplete="off"
      />
    </div>
  </div>
  <ui-title-bar title={t("Fonts.upload_custom_font")}>
    <button
      variant="primary"
      onClick={handleUpload}
      disabled={!fontName || !file || uploading}
    >
      {t("Fonts.upload_font")}
    </button>
    <button onClick={handleToggle}>{t("Fonts.close")}</button>
  </ui-title-bar>
</ui-modal>

[henrytao-me]

@Faizu9264 I suspect DropZone is a React component. If so, you should use Modal from @shopify/app-bridge-react@4.x instead of ui-modal

[bithaolee]

@charlesdobson The disable property is available, but the loading property doesn't take effect, even if I set loading={true}, my bridge version number is: "@shopify/app-bridge-react":"^4.1.3"

[maxfrigge]

With version "@shopify/app-bridge-react": "4.1.3" the below code works.

<button
  variant="primary"
  disabled={disabled}
  loading={loading ? "" : undefined}
>
  Save
</button>

When used as boolean, which would be more intuitive, you get the below error in the browser.

Warning: Received true for a non-boolean attribute loading. If you want to write it to the DOM, pass a string instead: loading="true" or loading={value.toString()}.

Hope this helps!