color_picker: Add icon use icon as color picker button. (#711)

crates/story/src/form_story.rs

@@ -5,6 +5,7 @@ use gpui::{
 use gpui_component::{
     button::{Button, ButtonGroup},
     checkbox::Checkbox,
+    color_picker::ColorPicker,
     date_picker::DatePicker,
     divider::Divider,
     form::{form_field, v_form},
@@ -20,6 +21,7 @@ pub struct FormStory {
     name_input: Entity<TextInput>,
     email_input: Entity<TextInput>,
     bio_input: Entity<TextInput>,
+    color_picker: Entity<ColorPicker>,
     subscribe_email: bool,
     date_picker: Entity<DatePicker>,
     layout: Axis,
@@ -51,6 +53,11 @@ impl FormStory {
             input.set_text("Jason Lee", window, cx);
             input
         });
+        let color_picker = cx.new(|cx| {
+            ColorPicker::new("color-picker-1", window, cx)
+                .small()
+                .label("Theme color")
+        });
 
         let email_input = cx.new(|cx| TextInput::new(window, cx).placeholder("Enter text here..."));
         let bio_input = cx.new(|cx| {
@@ -68,6 +75,7 @@ impl FormStory {
             email_input,
             bio_input,
             date_picker,
+            color_picker,
             subscribe_email: false,
             layout: Axis::Vertical,
             size: Size::default(),
@@ -197,6 +205,7 @@ impl Render for FormStory {
                                 })),
                         ),
                     )
+                    .child(form_field().child(self.color_picker.clone()))
                     .child(
                         form_field().child(
                             Checkbox::new("use-vertical-layout")

crates/story/src/title_bar.rs

@@ -45,9 +45,9 @@ impl AppTitleBar {
 
         let theme_color_picker = cx.new(|cx| {
             let mut picker = ColorPicker::new("theme-color-picker", window, cx)
-                .xsmall()
+                .small()
                 .anchor(Corner::TopRight)
-                .label("Theme Color");
+                .icon(IconName::Palette);
             picker.set_value(cx.theme().primary, window, cx);
             picker
         });
@@ -122,8 +122,8 @@ impl Render for AppTitleBar {
                     .px_2()
                     .gap_2()
                     .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
-                    .child(self.theme_color_picker.clone())
                     .child((self.child.clone())(window, cx))
+                    .child(self.theme_color_picker.clone())
                     .child(
                         Button::new("theme-mode")
                             .map(|this| {

crates/ui/src/color_picker.rs

@@ -6,12 +6,13 @@ use gpui::{
 };
 
 use crate::{
+    button::{Button, ButtonVariants},
     divider::Divider,
     h_flex,
     input::{InputEvent, TextInput},
     popover::Escape,
     tooltip::Tooltip,
-    v_flex, ActiveTheme as _, Colorize as _, Sizable, Size, StyleSized,
+    v_flex, ActiveTheme as _, Colorize as _, Icon, Selectable as _, Sizable, Size, StyleSized,
 };
 
 const KEY_CONTEXT: &'static str = "ColorPicker";
@@ -60,6 +61,7 @@ pub struct ColorPicker {
     featured_colors: Vec<Hsla>,
     hovered_color: Option<Hsla>,
     label: Option<SharedString>,
+    icon: Option<Icon>,
     size: Size,
     anchor: Corner,
     color_input: Entity<TextInput>,
@@ -114,6 +116,7 @@ impl ColorPicker {
             hovered_color: None,
             size: Size::Medium,
             label: None,
+            icon: None,
             anchor: Corner::TopLeft,
             color_input,
             open: false,
@@ -142,6 +145,15 @@ impl ColorPicker {
         self
     }
 
+    /// Set the icon to the color picker button.
+    ///
+    /// If this is set the color picker button will display the icon.
+    /// Else it will display the square color of the current value.
+    pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
+        self.icon = Some(icon.into());
+        self
+    }
+
     /// Set the label to be displayed above the color picker.
     ///
     /// Default is `None`.
@@ -314,24 +326,38 @@ impl Render for ColorPicker {
                     .items_center()
                     .input_text_size(self.size)
                     .line_height(relative(1.))
-                    .child(
+                    .when_some(self.icon.clone(), |this, icon| {
-                        div()
+                        this.child(
-                            .id("color-picker-square")
+                            Button::new("btn")
-                            .bg(cx.theme().background)
+                                .ghost()
-                            .border_1()
+                                .selected(self.open)
-                            .border_color(cx.theme().input)
+                                .with_size(self.size)
-                            .rounded(cx.theme().radius)
+                                .icon(icon.clone()),
-                            .bg(cx.theme().background)
+                        )
-                            .shadow_sm()
+                    })
-                            .overflow_hidden()
+                    .when_none(&self.icon, |this| {
-                            .size_with(self.size)
+                        this.child(
-                            .when_some(self.value, |this, value| {
+                            div()
-                                this.bg(value).border_color(value.darken(0.3))
+                                .id("color-picker-square")
-                            })
+                                .bg(cx.theme().background)
-                            .tooltip(move |window, cx| {
+                                .border_1()
-                                Tooltip::new(display_title.clone(), window, cx)
+                                .border_color(cx.theme().input)
-                            }),
+                                .rounded(cx.theme().radius)
-                    )
+                                .shadow_sm()
+                                .overflow_hidden()
+                                .size_with(self.size)
+                                .when_some(self.value, |this, value| {
+                                    this.bg(value)
+                                        .border_color(value.darken(0.3))
+                                        .when(self.open, |this| this.border_2())
+                                })
+                                .when(!display_title.is_empty(), |this| {
+                                    this.tooltip(move |window, cx| {
+                                        Tooltip::new(display_title.clone(), window, cx)
+                                    })
+                                }),
+                        )
+                    })
                     .when_some(self.label.clone(), |this, label| this.child(label))
                     .on_click(cx.listener(Self::toggle_picker))
                     .on_mouse_up_out(