Use extra small label for tab descriptions (#3797)

Marshall Bowers created 2 years ago

This PR adjusts the size of the tab descriptions to use the extra small
label size.

This makes it easier to distinguish between the filename and the
description:

<img width="320" alt="Screenshot 2023-12-22 at 6 49 11 PM"
src="https://github.com/zed-industries/zed/assets/1486634/451d4cd0-666c-43c2-b5df-6d9cf91dacda">

It's also more in line with how things look in Zed1.

Release Notes:

- N/A

Change summary

crates/editor2/src/items.rs                       |  6 +++
crates/ui2/src/components/button/button.rs        |  2 
crates/ui2/src/components/button/toggle_button.rs |  2 
crates/ui2/src/components/label/label_like.rs     |  8 +++--
crates/ui2/src/styled_ext.rs                      | 25 ++++++++++------
crates/ui2/src/styles/typography.rs               | 16 ++++++++--
6 files changed, 39 insertions(+), 20 deletions(-)

Detailed changes

crates/editor2/src/items.rs

@@ -603,7 +603,11 @@ impl Item for Editor {
                 Color::Muted
             }))
             .when_some(description, |this, description| {
-                this.child(Label::new(description).color(Color::Muted))
+                this.child(
+                    Label::new(description)
+                        .size(LabelSize::XSmall)
+                        .color(Color::Muted),
+                )
             })
             .into_any_element()
     }

crates/ui2/src/components/button/button.rs

@@ -172,7 +172,7 @@ impl RenderOnce for Button {
                     Label::new(label)
                         .color(label_color)
                         .size(self.label_size.unwrap_or_default())
-                        .line_height_style(LineHeightStyle::UILabel),
+                        .line_height_style(LineHeightStyle::UiLabel),
                 )
                 .when(!self.icon_position.is_some(), |this| {
                     this.children(self.icon.map(|icon| {

crates/ui2/src/components/button/toggle_button.rs

@@ -122,7 +122,7 @@ impl RenderOnce for ToggleButton {
             .child(
                 Label::new(self.label)
                     .color(label_color)
-                    .line_height_style(LineHeightStyle::UILabel),
+                    .line_height_style(LineHeightStyle::UiLabel),
             )
     }
 }

crates/ui2/src/components/label/label_like.rs

@@ -8,14 +8,15 @@ pub enum LabelSize {
     #[default]
     Default,
     Small,
+    XSmall,
 }
 
 #[derive(Default, PartialEq, Copy, Clone)]
 pub enum LineHeightStyle {
     #[default]
     TextLabel,
-    /// Sets the line height to 1
-    UILabel,
+    /// Sets the line height to 1.
+    UiLabel,
 }
 
 pub trait LabelCommon {
@@ -92,8 +93,9 @@ impl RenderOnce for LabelLike {
             .map(|this| match self.size {
                 LabelSize::Default => this.text_ui(),
                 LabelSize::Small => this.text_ui_sm(),
+                LabelSize::XSmall => this.text_ui_xs(),
             })
-            .when(self.line_height_style == LineHeightStyle::UILabel, |this| {
+            .when(self.line_height_style == LineHeightStyle::UiLabel, |this| {
                 this.line_height(relative(1.))
             })
             .text_color(self.color.color(cx))

crates/ui2/src/styled_ext.rs

@@ -3,7 +3,7 @@ use settings::Settings;
 use theme::ThemeSettings;
 
 use crate::prelude::*;
-use crate::{ElevationIndex, UITextSize};
+use crate::{ElevationIndex, UiTextSize};
 
 fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -> E {
     this.bg(cx.theme().colors().elevated_surface_background)
@@ -44,10 +44,8 @@ pub trait StyledExt: Styled + Sized {
         self.flex().flex_col()
     }
 
-    fn text_ui_size(self, size: UITextSize) -> Self {
-        let size = size.rems();
-
-        self.text_size(size)
+    fn text_ui_size(self, size: UiTextSize) -> Self {
+        self.text_size(size.rems())
     }
 
     /// The default size for UI text.
@@ -58,9 +56,7 @@ pub trait StyledExt: Styled + Sized {
     ///
     /// Use [`text_ui_sm`] for regular-sized text.
     fn text_ui(self) -> Self {
-        let size = UITextSize::default().rems();
-
-        self.text_size(size)
+        self.text_size(UiTextSize::default().rems())
     }
 
     /// The small size for UI text.
@@ -71,9 +67,18 @@ pub trait StyledExt: Styled + Sized {
     ///
     /// Use [`text_ui`] for regular-sized text.
     fn text_ui_sm(self) -> Self {
-        let size = UITextSize::Small.rems();
+        self.text_size(UiTextSize::Small.rems())
+    }
 
-        self.text_size(size)
+    /// The extra small size for UI text.
+    ///
+    /// `0.625rem` or `10px` at the default scale of `1rem` = `16px`.
+    ///
+    /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
+    ///
+    /// Use [`text_ui`] for regular-sized text.
+    fn text_ui_xs(self) -> Self {
+        self.text_size(UiTextSize::XSmall.rems())
     }
 
     /// The font size for buffer text.

crates/ui2/src/styles/typography.rs

@@ -1,7 +1,7 @@
 use gpui::{rems, Rems};
 
 #[derive(Debug, Default, Clone)]
-pub enum UITextSize {
+pub enum UiTextSize {
     /// The default size for UI text.
     ///
     /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
@@ -15,13 +15,21 @@ pub enum UITextSize {
     ///
     /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
     Small,
+
+    /// The extra small size for UI text.
+    ///
+    /// `0.625rem` or `10px` at the default scale of `1rem` = `16px`.
+    ///
+    /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
+    XSmall,
 }
 
-impl UITextSize {
+impl UiTextSize {
     pub fn rems(self) -> Rems {
         match self {
-            Self::Default => rems(0.875),
-            Self::Small => rems(0.75),
+            Self::Default => rems(14. / 16.),
+            Self::Small => rems(12. / 16.),
+            Self::XSmall => rems(10. / 16.),
         }
     }
 }