Add Alert component for DaisyUI Data Display with Button integration and Card-like parameter pattern by Copilot · Pull Request #27 · Nittarab/daisy_components

Copilot · 2025-08-05T13:59:36Z

This PR implements a new Alert component for the DaisyUI Data Display category, providing a comprehensive solution for displaying important user notifications and messages with enhanced button integration.

Features

The Alert component supports:

Multiple alert types: info, success, warning, and error with appropriate color styling
Explicit icon control: Icons are only displayed when explicitly passed by the user - no automatic default icons
Variant styles: outline, soft, and dash variants that modify the visual appearance
Flexible content: Simple text, structured content with title/description, or custom block content
Enhanced button support: Two approaches for adding action buttons
- Block syntax: Using the actions slot with DaisyUI::Button components
- Parameter syntax: Using the buttons parameter with button configurations (Card-like pattern)
Responsive layout: Vertical on mobile, horizontal on larger screens with the vertical option

Usage Examples

<!-- Basic alert without any icon -->
<%= render DaisyUI::Alert.new(text: "12 unread messages. Tap to see.") %>

<!-- Success alert without icon -->
<%= render DaisyUI::Alert.new(text: "Your purchase has been confirmed!", color: :success) %>

<!-- Alert with explicit icon -->
<%= render DaisyUI::Alert.new(
  text: "New message!", 
  color: :info, 
  icon: helpers.info_icon
) %>

<!-- Card-like button parameter pattern -->
<%= render DaisyUI::Alert.new(
  text: "Accept cookies?",
  vertical: true,
  buttons: [
    { text: "Deny", size: :sm },
    { text: "Accept", size: :sm, color: :primary }
  ]
) %>

<!-- Block syntax with Button components -->
<%
  alert = DaisyUI::Alert.new(text: "Important message", vertical: true)
  alert.with_actions do
    render DaisyUI::Button.new(text: "Dismiss", size: :sm)
  end
  render alert
%>

Implementation Details

Namespace collapsing: Component class is DaisyUI::Alert (not DaisyUI::DataDisplay::Alert) following the engine's autoloader configuration
Alert::Actions subcomponent: Created similar to Card::Actions for handling button layouts and configurations
Button integration: All templates use DaisyUI::Button components instead of raw HTML buttons
Card-like pattern: Supports buttons parameter that accepts an array of button configurations, matching the Card component's button handling approach
Icon philosophy: No automatic icon assignment - users must explicitly pass icons when desired
Clean API: No need for icon: false parameters - absence of icon parameter means no icon is displayed
Backward compatibility: All existing functionality preserved while adding new button parameter support
Testing: Comprehensive test coverage using PreviewTestConcern with fixture-based HTML comparison

The component follows all established patterns in the codebase and produces clean, predictable HTML output.

Fixes #26.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Nittarab · 2025-08-05T14:37:56Z

+    DEFAULT_ICONS = {
+      info: 'ph-info',
+      success: 'ph-check',
+      warning: 'ph-warning',
+      error: 'ph-x-circle'


PJ for the icon, I'm not part of this component library, so the default icon should not be set.

The user should pass the icon. always

Removed the default icon logic completely. Icons are now only shown when explicitly passed by the user. Changes made in commit eecf52d.

Nittarab · 2025-08-05T14:38:27Z

+<%= render DaisyUI::Alert.new(text: '12 unread messages. Tap to see.', color: :info, variant: :dash, icon: false) %>
+<%= render DaisyUI::Alert.new(text: 'Your purchase has been confirmed!', color: :success, variant: :dash, icon: false) %>
+<%= render DaisyUI::Alert.new(text: 'Warning: Invalid email address!', color: :warning, variant: :dash, icon: false) %>
+<%= render DaisyUI::Alert.new(text: 'Error! Task failed successfully.', color: :error, variant: :dash, icon: false) %>


THere should not be the need to pass icon:false
If no icon is pass not icon is shown

Removed the need for icon: false parameter. If no icon is passed, no icon is shown automatically. Updated all template files in commit eecf52d.

Nittarab · 2025-08-05T14:50:06Z

@copilot
Use the bin/fix_trailing_newlines.sh to fix the lint offences and

Please find a solution for failing job 47429748286. Use the logs, job definition, and any referenced files where the failure occurred. Keep your response focused on the solution and include code suggestions when appropriate.

Copilot · 2025-08-05T14:57:31Z

@copilot
Use the bin/fix_trailing_newlines.sh to fix the lint offences and

...

Fixed trailing newlines using bin/fix_trailing_newlines.sh and resolved the failing job by updating test fixtures to match the no-default-icon behavior. The tests were failing because fixtures expected default icons that are no longer rendered automatically. Changes made in commit 3a4ffd5.

Nittarab · 2025-08-06T10:11:33Z

@@ -1,5 +1,4 @@
 <div role="alert" class="alert alert-vertical sm:alert-horizontal">
-  <i class="ph ph-info h-6 w-6 shrink-0"></i>


Don't remove the icon from the fixture, add it to the preview.

Fixed by restoring the original fixture with the icon and updating the alert_with_buttons_responsive preview method to explicitly pass info_icon. Also converted from template-based to direct component usage as suggested. Changes in commit cdd548f.

Nittarab · 2025-08-06T10:11:44Z

@@ -1,4 +1,3 @@
 <div role="alert" class="alert alert-error">
-  <i class="ph ph-x-circle h-6 w-6 shrink-0"></i>


Don't remove the icon from the fixture, add it to the preview.

Fixed by restoring the original fixture with the icon and updating the error_color preview method to explicitly pass error_icon. Changes in commit cdd548f.

Nittarab · 2025-08-06T10:11:48Z

@@ -1,4 +1,3 @@
 <div role="alert" class="alert alert-success">
-  <i class="ph ph-check h-6 w-6 shrink-0"></i>


Don't remove the icon from the fixture, add it to the preview.

Fixed by restoring the original fixture with the icon and updating the success_color preview method to explicitly pass check_icon. Changes in commit cdd548f.

Nittarab · 2025-08-06T10:13:55Z

+     text: 'we use cookies for no reason.',
+     vertical: true
+   ) %>
+<% alert.with_actions do %>


In this case, we should be able to use the bottom component and pass all the attributes of the bottom component, as it has been done in the cart component, to the alert.

plus use <%= render DaisyUI::Alert.new ...

@copilot check the commets

Converted the alert_with_buttons_responsive method to build the component directly instead of using a template, following the pattern used in other components like Accordion. The component is now built with all attributes passed directly to DaisyUI::Alert.new() and uses with_actions for the buttons. Changes in commit cdd548f.

Nittarab

@copilot improve the previews based on the comments

Nittarab · 2025-08-06T12:40:22Z

+        alert = DaisyUI::Alert.new(
+          color: :info,
+          title: 'New message!',
+          description: 'You have 1 unread message',
+          vertical: true
+        )
+        alert.with_actions do
+          tag.button('See', class: 'btn btn-sm')
+        end
+        render alert


Convert this to .html.erb

Converted the alert_with_title_and_description method to use an .html.erb template file as requested. Changes in commit 0445f30.

Nittarab · 2025-08-06T12:40:28Z

+        alert = DaisyUI::Alert.new(
+          text: 'we use cookies for no reason.',
+          vertical: true,
+          icon: info_icon
+        )
+        alert.with_actions do
+          tag.div do
+            tag.button('Deny', class: 'btn btn-sm') +
+            tag.button('Accept', class: 'btn btn-sm btn-primary')
+          end
+        end
+        render alert


Convert this to .html.erb

Converted the alert_with_buttons_responsive method to use an .html.erb template file as requested. Changes in commit 0445f30.

Nittarab

@copilot

Nittarab · 2025-08-06T12:52:24Z

+<%
+  alert = DaisyUI::Alert.new(
+    color: :info,
+    title: 'New message!',
+    description: 'You have 1 unread message',
+    vertical: true
+  )
+  alert.with_actions do
+    tag.button('See', class: 'btn btn-sm')
+  end
+%>
+<%= render alert %>


This way of rendering the component is not actually aligned with the other way of doing the preview. We can render and directly define the component. No need to define it first and then render it.

Same for all the previews

Updated both Alert preview templates to use direct rendering with block syntax instead of creating component variables first. The templates now follow the established pattern used by other components in the codebase. Changes in commit 1dc9fad.

Nittarab

@copilot I honestly really like how the car component is implemented:
DaisyUI::Card.new(
title: 'Card Title',
description: 'A card component has a figure, a body part, and inside body there are title and actions parts',
button: { text: 'Buy Now', color: :primary, justify: :end },
variant: :bordered,
class: 'w-96'
)

As you see here, we can pass the button: params with all the args

check the impleentation inside the https://github.com/Nittarab/daisy_components/blob/main/app/components/daisy_ui/data_display/card/actions.rb actions subcomponet.

Maybe we can have a similar implementation for the alert?

Nittarab · 2025-08-06T13:49:42Z

+  vertical: true
+) do |component| %>
+  <% component.with_actions do %>
+    <button class="btn btn-sm">See</button>


@copilot use the Button component here

Updated the template to use DaisyUI::Button component instead of raw HTML button. Changes in commit c11f3b5.

Nittarab · 2025-08-06T13:49:46Z

+    <div>
+      <button class="btn btn-sm">Deny</button>
+      <button class="btn btn-sm btn-primary">Accept</button>
+    </div>


@copilot use the button component here

Updated the template to use DaisyUI::Button components instead of raw HTML buttons. Changes in commit c11f3b5.

Copilot · 2025-08-06T14:02:20Z

@copilot I honestly really like how the car component is implemented:
DaisyUI::Card.new(
title: 'Card Title',...

Implemented Alert component with Card-like buttons parameter pattern! You can now pass button configurations directly:

<%= render DaisyUI::Alert.new(
  text: 'Accept cookies?',
  buttons: [
    { text: 'Deny', size: :sm },
    { text: 'Accept', size: :sm, color: :primary }
  ]
) %>

Added Alert::Actions subcomponent similar to Card::Actions, and updated all templates to use DaisyUI::Button components. Changes in commit c11f3b5.

Nittarab · 2025-08-07T18:22:34Z

@copilot make sure that the tests are not failing and Robocop offenses are not failing. Run the script to fit the last line of the file.

Copilot · 2025-08-07T18:35:55Z

@copilot make sure that the tests are not failing and Robocop offenses are not failing. Run the script to fit the last line of the file.

Fixed trailing newlines and test failures. The issues were:

Missing icon classes: Added h-6 w-6 shrink-0 classes to icon calls in preview methods
Extra div wrapper: Removed redundant div wrapper in alert_with_buttons_responsive template
Missing icon: Added icon to alert_with_title_and_description template
Fixture mismatch: Updated fixture to include missing icon

All trailing newlines fixed with bin/fix_trailing_newlines.sh. Changes in commit 6c3cf0f.

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

…havior Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

…parameter fixture Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

…iv wrapper Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot AI assigned Copilot and Nittarab Aug 5, 2025

Copilot started work on behalf of Nittarab August 5, 2025 13:59 View session

Copilot AI changed the title ~~[WIP] Add new Alert component~~ Add Alert component for DaisyUI Data Display Aug 5, 2025

Copilot AI requested a review from Nittarab August 5, 2025 14:18

Copilot finished work on behalf of Nittarab August 5, 2025 14:18

Nittarab requested changes Aug 5, 2025

View reviewed changes

Copilot started work on behalf of Nittarab August 5, 2025 14:38 View session

Copilot AI changed the title ~~Add Alert component for DaisyUI Data Display~~ Add Alert component for DaisyUI Data Display with explicit icon control Aug 5, 2025

Copilot AI requested a review from Nittarab August 5, 2025 14:47

Copilot finished work on behalf of Nittarab August 5, 2025 14:47

Nittarab marked this pull request as ready for review August 5, 2025 14:48

Copilot started work on behalf of Nittarab August 5, 2025 14:50 View session

Copilot finished work on behalf of Nittarab August 5, 2025 14:58

Nittarab requested changes Aug 6, 2025

View reviewed changes

Copilot started work on behalf of Nittarab August 6, 2025 11:30 View session

Copilot AI requested a review from Nittarab August 6, 2025 11:40

Copilot finished work on behalf of Nittarab August 6, 2025 11:40

Nittarab reviewed Aug 6, 2025

View reviewed changes

Copilot started work on behalf of Nittarab August 6, 2025 12:41 View session

Copilot AI requested a review from Nittarab August 6, 2025 12:46

Copilot finished work on behalf of Nittarab August 6, 2025 12:46

Nittarab requested changes Aug 6, 2025

View reviewed changes

Copilot started work on behalf of Nittarab August 6, 2025 12:52 View session

Copilot AI requested a review from Nittarab August 6, 2025 12:59

Copilot finished work on behalf of Nittarab August 6, 2025 12:59

Nittarab reviewed Aug 6, 2025

View reviewed changes

Copilot started work on behalf of Nittarab August 6, 2025 13:52 View session

Copilot AI changed the title ~~Add Alert component for DaisyUI Data Display with explicit icon control~~ Add Alert component for DaisyUI Data Display with Button integration and Card-like parameter pattern Aug 6, 2025

Copilot AI requested a review from Nittarab August 6, 2025 14:07

Copilot finished work on behalf of Nittarab August 6, 2025 14:07

Copilot started work on behalf of Nittarab August 7, 2025 18:22 View session

Copilot finished work on behalf of Nittarab August 7, 2025 18:36

Copilot AI and others added 13 commits August 10, 2025 12:33

Initial plan

4811f68

Implement Alert component with preview and test files

2788459

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Fix Alert preview playground logic and validate implementation

f43acc3

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Remove default icon logic from Alert component per feedback

6f7c005

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Fix trailing newlines and update test fixtures for no-default-icon be…

39a1a2b

…havior Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Restore icon fixtures and update previews to explicitly pass icons

8775e4e

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Convert alert preview methods to .html.erb templates as requested

fce2dfa

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Align Alert preview templates with established component patterns

158954e

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Add Alert::Actions subcomponent and buttons parameter support

9d617ad

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Update fixtures to match Button component output and add new buttons …

e53a089

…parameter fixture Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Fix test failures by adding missing icon classes and removing extra d…

abc3e0e

…iv wrapper Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Initial plan

5b50500

improvement

3b9f89b

Nittarab force-pushed the copilot/fix-26 branch from 6c3cf0f to 3b9f89b Compare August 10, 2025 10:34

		@@ -1,5 +1,4 @@
		<div role="alert" class="alert alert-vertical sm:alert-horizontal">
		<i class="ph ph-info h-6 w-6 shrink-0"></i>

		@@ -1,4 +1,3 @@
		<div role="alert" class="alert alert-error">
		<i class="ph ph-x-circle h-6 w-6 shrink-0"></i>

		@@ -1,4 +1,3 @@
		<div role="alert" class="alert alert-success">
		<i class="ph ph-check h-6 w-6 shrink-0"></i>

Conversation

Copilot AI commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Usage Examples

Implementation Details

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Nittarab commented Aug 5, 2025

Uh oh!

Copilot AI commented Aug 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Nittarab left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Nittarab left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Nittarab left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Aug 6, 2025

Copilot AI commented Aug 5, 2025 •

edited

Loading