Notification Variant Property Is Ignored When Using Programmatic Interface

by ADMIN 75 views

Introduction

In this article, we will explore an issue with the Oruga library, specifically with the notification component when used programmatically. The problem arises when attempting to set the variant property of a notification using the programmatic interface. Despite setting the variant property, the notification is rendered with a default style, ignoring the specified variant.

Overview of the Problem

Oruga Version

The Oruga library version used in this example is 0.10.4.

Vuejs Version

The Vuejs version used in this example is 3.5.13.

OS/Browser

The operating system and browser used in this example are Mac OS 15.3.2 and Chrome 135.0.7049.95, respectively.

Description

When calling a notification programmatically, as outlined in the Oruga documentation, the variant property is ignored. This means that regardless of the value specified for the variant property, the notification is always rendered with a default style.

Steps to Reproduce

To reproduce this issue, follow these steps:

Step 1: Create a Function to Programmatically Launch a Notification

Create a function to programmatically launch a notification, such as the following:

function showNotification(variant) {
    oruga.notification.open({
        message: "danger notification",
        variant: "danger",
    });
}

Step 2: Call the Function

Call the function to launch the notification.

Expected Behavior

The expected behavior is that the notification is rendered using the provided variant.

Actual Behavior

The actual behavior is that the notification always shows with a default style, regardless of the value specified for the variant property. Inspecting the notification reveals that the notification has no class attached, i.e., "is-danger":

<article role="alert" aria-atomic="true" data-oruga="notification" class="notification is-bottom"><!----><div class="media"><!----><div class="media-content"><span>danger notification</span></div></div></article>

Additional Information

  • I've tried all known variants: primary, info, success, warning, danger, light, dark, etc.
  • The notification component <o-notification> correctly uses the variant property.
  • Adding class: "is-danger" DOES render the component correctly by manually adding the class to the article the way variant is supposed to.

Conclusion

In conclusion, the notification variant property is ignored when using the programmatic interface in Oruga. This issue is reproducible with the latest stable version of Oruga and Vuejs. To resolve this issue, further investigation and debugging are required to determine the root cause and implement a fix.

Recommendations

Based on the information provided, the following recommendations can be made:

  • Check the Oruga documentation for any updates or changes related to the notification component and programmatic interface.
  • Review the Oruga codebase to identify any potential issues or bugs related to the notification component and programmatic interface.
  • Consider creating a pull request to address this issue and provide a fix for the Oruga community.

Future Work

Future work on this issue may involve:

  • Collaborating with the Oruga community to identify and resolve the root cause of this issue.
  • Implementing a fix for the notification component and programmatic interface.
  • Providing a patch or update for the Oruga library to address this issue.

Introduction

In our previous article, we explored an issue with the Oruga library, specifically with the notification component when used programmatically. The problem arises when attempting to set the variant property of a notification using the programmatic interface. Despite setting the variant property, the notification is rendered with a default style, ignoring the specified variant.

In this article, we will provide a Q&A section to address common questions and concerns related to this issue.

Q&A

Q: What is the expected behavior when using the programmatic interface to launch a notification?

A: The expected behavior is that the notification is rendered using the provided variant.

Q: What is the actual behavior when using the programmatic interface to launch a notification?

A: The actual behavior is that the notification always shows with a default style, regardless of the value specified for the variant property.

Q: Have you tried all known variants?

A: Yes, I've tried all known variants: primary, info, success, warning, danger, light, dark, etc.

Q: Does the notification component <o-notification> correctly use the variant property?

A: Yes, the notification component <o-notification> correctly uses the variant property.

Q: How can I manually add the class to the article the way variant is supposed to?

A: You can manually add the class to the article by adding class: "is-danger" to the notification component.

Q: Is this issue reproducible with the latest stable version of Oruga and Vuejs?

A: Yes, this issue is reproducible with the latest stable version of Oruga and Vuejs.

Q: What are the steps to reproduce this issue?

A: To reproduce this issue, follow these steps:

  1. Create a function to programmatically launch a notification, such as the following:

function showNotification(variant) oruga.notification.open({ message "danger notification", variant: "danger", ); }

2.  Call the function to launch the notification.

### Q: What are the expected and actual behaviors when using the programmatic interface to launch a notification?

A: The expected behavior is that the notification is rendered using the provided variant. The actual behavior is that the notification always shows with a default style, regardless of the value specified for the variant property.

### Q: What are the possible causes of this issue?

A: The possible causes of this issue are:

*   A bug in the Oruga library related to the notification component and programmatic interface.
*   A misconfiguration or incorrect usage of the Oruga library.
*   A conflict with other libraries or components used in the application.

### Q: How can I resolve this issue?

A: To resolve this issue, you can try the following:

*   Check the Oruga documentation for any updates or changes related to the notification component and programmatic interface.
*   Review the Oruga codebase to identify any potential issues or bugs related to the notification component and programmatic interface.
*   Consider creating a pull request to address this issue and provide a fix for the Oruga community.

**Conclusion**
----------

In conclusion, the notification variant property is ignored when using thematic interface in Oruga. This issue is reproducible with the latest stable version of Oruga and Vuejs. To resolve this issue, further investigation and debugging are required to determine the root cause and implement a fix.

We hope this Q&A article has provided valuable information and insights related to this issue. If you have any further questions or concerns, please don't hesitate to reach out.