Button component not rendering `href` or `download` attributes correctly

[tberry30]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.10.x",
"@shopify/ui-extensions-react": "2024.10.x"

Describe the bug

We are trying to create an Admin Action, to aggregate data (total SKU count, etc) from selected orders and download a CSV.

const blob = new Blob([data], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
// or const url = "data:text/csv;charset=UTF-8,title%2Csku%2Ccount%0Atest%2C123456%2C2";
...

<Button download href={url}>Export</Button>

There are 2 issues with the Button component, both of which work correctly in the latest version of Polaris, but are not working in ui-components

1. The first issue is that the neither a blob URL, or a data URL are being passed through as an href attribute (missing in output below)

<a target="_blank" download data-polaris-unstyled="true" class="Polaris-Button Polaris-Button--pressable Polaris-Button--variantPrimary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter">Export</a>

2. The second issue is that the download prop is not being passed as an attribute if a string is included (Ex. download="data.csv") even though the type is indicated as boolean | string. See below that the download attribute is removed completely if a string is provided. If no string is provided by just passing download then the attribute is included as seen in the example in the first issue above. We want to be able to provide a string in order to name the file.

<a target="_blank" data-polaris-unstyled="true" class="Polaris-Button Polaris-Button--pressable Polaris-Button--variantPrimary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter">Export</a>

Steps to reproduce the behavior:

Create a UI extension with a Button component and add the following attributes...

• href="data:text/csv;charset=UTF-8,title%2Csku%2Ccount%0Atest%2C123456%2C2"}
• download="data.csv"

Expected behavior

We expect that the Button component would create an HTML component with the expected href and download either with a blob URL...

<a href="blob:https://vq693v.csb.app/cf20b8a0-8e67-4eb0-b0a2-a5792c57e8d7" download="data.csv" class="Polaris-Button Polaris-Button--pressable Polaris-Button--variantSecondary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter" data-polaris-unstyled="true">Export</a>

or a data URL.

<a href="data:text/csv;charset=UTF-8,title%2Csku%2Ccount%0Atest%2C123456%2C2" download="data.csv" class="Polaris-Button Polaris-Button--pressable Polaris-Button--variantSecondary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter" data-polaris-unstyled="true">Export</a>

Thanks for any help you can provide in supporting this functionality!

[tamir-boaideas]

The docs state that blob URLs aren't supported yet but I can confirm that the download functionality doesn't work for regular links as well (even to the Shopify CDN)