table: Add size to Table to support Large, Medium(default), Small, XSmall. (#283)

Closes #219

crates/story/src/table_story.rs

@@ -2,10 +2,11 @@ use std::time::{self, Duration};
 
 use fake::{Fake, Faker};
 use gpui::{
-    div, AnyElement, IntoElement, ParentElement, Pixels, Render, SharedString, Styled, Timer, View,
+    div, AnyElement, ClickEvent, IntoElement, ParentElement, Pixels, Render, SharedString, Styled,
-    ViewContext, VisualContext as _, WindowContext,
+    Timer, View, ViewContext, VisualContext as _, WindowContext,
 };
 use ui::{
+    button::{Button, ButtonStyled},
     checkbox::Checkbox,
     h_flex,
     indicator::Indicator,
@@ -13,7 +14,7 @@ use ui::{
     label::Label,
     prelude::FluentBuilder as _,
     table::{ColSort, Table, TableDelegate, TableEvent},
-    v_flex, Selectable,
+    v_flex, Selectable, Sizable, Size,
 };
 
 #[derive(Clone, Debug, Default)]
@@ -447,6 +448,7 @@ pub struct TableStory {
     num_stocks_input: View<TextInput>,
     stripe: bool,
     refresh_data: bool,
+    size: Size,
 }
 
 impl super::Story for TableStory {
@@ -529,6 +531,7 @@ impl TableStory {
             num_stocks_input,
             stripe: false,
             refresh_data: false,
+            size: Size::default(),
         }
     }
 
@@ -604,6 +607,20 @@ impl TableStory {
         });
     }
 
+    fn toggle_size(&mut self, _: &ClickEvent, cx: &mut ViewContext<Self>) {
+        self.size = match self.size {
+            Size::XSmall => Size::Small,
+            Size::Small => Size::Medium,
+            Size::Medium => Size::Large,
+            Size::Large => Size::XSmall,
+            _ => Size::default(),
+        };
+
+        self.table.update(cx, |table, cx| {
+            table.set_size(self.size, cx);
+        });
+    }
+
     fn toggle_refresh_data(&mut self, checked: &bool, cx: &mut ViewContext<Self>) {
         self.refresh_data = *checked;
         cx.notify();
@@ -672,6 +689,14 @@ impl Render for TableStory {
                             .selected(self.stripe)
                             .on_click(cx.listener(Self::toggle_stripe)),
                     )
+                    .child(
+                        Button::new("size")
+                            .small()
+                            .compact()
+                            .outline()
+                            .label(format!("size: {:?}", self.size))
+                            .on_click(cx.listener(Self::toggle_size)),
+                    )
                     .child(
                         Checkbox::new("refresh-data")
                             .label("Refresh Data")

crates/ui/src/table.rs

@@ -4,7 +4,7 @@ use crate::{
     h_flex,
     scroll::{ScrollableAxis, ScrollableMask, Scrollbar, ScrollbarState},
     theme::ActiveTheme,
-    v_flex, Icon, IconName, StyledExt,
+    v_flex, Icon, IconName, Sizable, Size, StyledExt,
 };
 use gpui::{
     actions, canvas, div, prelude::FluentBuilder, px, uniform_list, AppContext, Bounds, Div,
@@ -119,6 +119,8 @@ pub struct Table<D: TableDelegate> {
     stripe: bool,
     /// Set to use border style of the table.
     border: bool,
+    /// The cell size of the table.
+    size: Size,
 }
 
 #[allow(unused)]
@@ -248,6 +250,7 @@ where
             head_content_bounds: Bounds::default(),
             stripe: false,
             border: true,
+            size: Size::default(),
         };
 
         this.prepare_col_groups(cx);
@@ -279,6 +282,12 @@ where
         self
     }
 
+    /// Set the size to the table.
+    pub fn set_size(&mut self, size: Size, cx: &mut ViewContext<Self>) {
+        self.size = size;
+        cx.notify();
+    }
+
     fn prepare_col_groups(&mut self, cx: &mut ViewContext<Self>) {
         self.col_groups = (0..self.delegate.cols_count())
             .map(|col_ix| ColGroup {
@@ -392,10 +401,15 @@ where
 
         div()
             .when_some(col_width, |this, width| this.w(width))
+            .flex_shrink_0()
             .overflow_hidden()
             .whitespace_nowrap()
-            .py_1()
+            .map(|this| match self.size {
-            .px_2()
+                Size::XSmall => this.text_sm().py_0().px_1(),
+                Size::Small => this.text_sm().py_0p5().px_1p5(),
+                Size::Large => this.py_1p5().px_3(),
+                _ => this.py_1().px_2(),
+            })
     }
 
     /// Show Column selection style, when the column is selected and the selection state is Column.
@@ -744,6 +758,15 @@ where
     }
 }
 
+impl<D> Sizable for Table<D>
+where
+    D: TableDelegate,
+{
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
 impl<D> FocusableView for Table<D>
 where
     D: TableDelegate,
@@ -909,7 +932,8 @@ where
                                                         })
                                                         .children((0..cols_count).map(|col_ix| {
                                                             table
-                                                                // Make the row scroll sync with the horizontal_scroll_handle to support horizontal scrolling.
+                                                                // Make the row scroll sync with the
+                                                                // horizontal_scroll_handle to support horizontal scrolling.
                                                                 .col_wrap(col_ix, cx)
                                                                 .left(
                                                                     horizontal_scroll_handle
@@ -919,7 +943,6 @@ where
                                                                 .child(
                                                                     table
                                                                         .render_cell(col_ix, cx)
-                                                                        .flex_shrink_0()
                                                                         .child(
                                                                             table
                                                                                 .delegate
@@ -975,10 +998,7 @@ where
                                                                         .x,
                                                                 )
                                                                 .child(
-                                                                    table
+                                                                    table.render_cell(col_ix, cx),
-                                                                        .render_cell(col_ix, cx)
-                                                                        .flex_shrink_0()
-                                                                        .child(div().size_full()),
                                                                 )
                                                         }))
                                                         .child(last_empty_col(cx))