alert: Add to support styled. (#736)

README.md

@@ -7,38 +7,38 @@ UI components for building fantastic desktop application by using [GPUI](https:/
 
 ## Features
 
+- Accordion
+- Alert
+- Badge
+- Breadcrumb
+- Button, Link
+- Checkbox, Radio, Switch
+- ColorPicker
+- DatePicker, DateRangePicker, Calendar
+- Dock, Tiles
+- Drawer
+- Dropdown
+- Icon
+- Label
+- List
+- Menu
+- Modal
+- Notification
+- Popover
+- Progress & Indicator
+- Resizable
+- Sidebar
+- Skeleton
+- Slider
+- Table
+- Tabs
+- TextInput, TextArea, OtpInput
+- TextView (Markdown, Simple HTML) to native rendering, syntax highlighting.
 - Theming
 - TitleBar
-- Dock, Tiles
-- TextInput, TextArea, OtpInput
-- Button, Link
-- Label
-- Icon
-- Checkbox, Radio, Switch
-- Dropdown
-- Tabs
-- Notification
-- Tooltip
-- Popover
-- Resizable
-- Progress & Indicator
-- Slider
-- Skeleton
-- DatePicker, DateRangePicker, Calendar
-- ColorPicker
-- List
-- Table
-- Menu
-- Drawer
-- Modal
-- WebView
-- Accordion
-- Sidebar
-- Breadcrumb
-- Badge
-- TextView (Markdown, Simple HTML) to native rendering, syntax highlighting.
 - Toggle, ToggleGroup
-- Alert
+- Tooltip
+- WebView
 
 ## Showcase
 

crates/ui/src/alert.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    div, prelude::FluentBuilder as _, px, relative, App, Hsla, IntoElement, ParentElement as _,
+    div, prelude::FluentBuilder as _, px, relative, App, Div, Hsla, IntoElement,
-    RenderOnce, SharedString, Styled, Window,
+    ParentElement as _, RenderOnce, SharedString, Styled, Window,
 };
 
 use crate::{h_flex, text::Text, ActiveTheme as _, Icon, IconName, Sizable, Size, StyledExt};
@@ -37,6 +37,7 @@ impl AlertVariant {
 /// Alert used to display a message to the user.
 #[derive(IntoElement)]
 pub struct Alert {
+    base: Div,
     variant: AlertVariant,
     icon: Option<Icon>,
     title: Option<SharedString>,
@@ -48,6 +49,7 @@ impl Alert {
     /// Create a new alert with the given message.
     fn new(message: impl Into<Text>) -> Self {
         Self {
+            base: div(),
             variant: AlertVariant::default(),
             icon: None,
             title: None,
@@ -110,6 +112,12 @@ impl Sizable for Alert {
     }
 }
 
+impl Styled for Alert {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
 impl RenderOnce for Alert {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
         let (radius, padding_x, padding_y, gap, line_height, icon_mt) = match self.size {
@@ -135,44 +143,46 @@ impl RenderOnce for Alert {
 
         let color = self.variant.color(cx);
 
-        h_flex()
+        self.base.child(
-            .rounded(radius)
+            h_flex()
-            .border_1()
+                .rounded(radius)
-            .border_color(color)
+                .border_1()
-            .bg(color.opacity(0.05))
+                .border_color(color)
-            .text_color(self.variant.fg(cx))
+                .bg(color.opacity(0.05))
-            .px(padding_x)
+                .text_color(self.variant.fg(cx))
-            .py(padding_y)
+                .px(padding_x)
-            .gap(gap)
+                .py(padding_y)
-            .overflow_hidden()
+                .gap(gap)
-            .items_start()
+                .overflow_hidden()
-            .map(|this| match self.size {
+                .items_start()
-                Size::Large => this.text_base(),
+                .map(|this| match self.size {
-                _ => this.text_sm(),
+                    Size::Large => this.text_base(),
-            })
+                    _ => this.text_sm(),
-            .line_height(relative(line_height))
+                })
-            .child(
+                .line_height(relative(line_height))
-                div().mt(icon_mt).child(
+                .child(
-                    self.icon
+                    div().mt(icon_mt).child(
-                        .unwrap_or(IconName::Info.into())
+                        self.icon
-                        .with_size(self.size)
+                            .unwrap_or(IconName::Info.into())
-                        .flex_shrink_0(),
+                            .with_size(self.size)
+                            .flex_shrink_0(),
+                    ),
+                )
+                .child(
+                    div()
+                        .overflow_hidden()
+                        .when_some(self.title, |this, title| {
+                            this.child(
+                                div()
+                                    .w_full()
+                                    .truncate()
+                                    .mb_1()
+                                    .font_semibold()
+                                    .child(title),
+                            )
+                        })
+                        .child(div().overflow_hidden().child(self.message)),
                 ),
-            )
+        )
-            .child(
-                div()
-                    .overflow_hidden()
-                    .when_some(self.title, |this, title| {
-                        this.child(
-                            div()
-                                .w_full()
-                                .truncate()
-                                .mb_1()
-                                .font_semibold()
-                                .child(title),
-                        )
-                    })
-                    .child(div().overflow_hidden().child(self.message)),
-            )
     }
 }