<ui-title-bar> does not allow destructive buttons - Githubissues

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge

82 stars 9 forks source link

<ui-title-bar> does not allow destructive buttons #276

Closed Stef733 closed 5 months ago

Stef733 commented 5 months ago

Describe the bug

The API

To Reproduce

Attempt to add tone="critical" to a <ui-title-bar>

Steps to reproduce the behaviour:

Create a <ui-title-bar> with the following configuration

<ui-title-bar title="Destroy">
<button
variant="primary"
tone="critical"
onclick="any"
>
Delete
</button>
</ui-title-bar>

See that no destructive styles exist

Expected behaviour

The modal should allow destructive buttons for delete actions.

Note: This is especially relevant in the <ui-modal /> component

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

@shopify/shopify-app-remix @ 2.3.0
@shopify/polaris @ 12.1.1

Platform

OS: MacOS
OS Version: Sonoma 14.2.1
App: Chrome

charlesdobson commented 5 months ago

Hi @Stef733, thanks for the request!

We've added support for this now. I haven't updated the docs yet but you can add tone="critical" to the ui-title-bar element inside a ui-modal to get destructive buttons. Docs to follow shortly!

We're not adding support for it in the normal app title bar at this time.