Add new design guidelines for title casing etc (#5501)

### What ### Checklist * [x] I have read and agree to [Contributor Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and the [Code of Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md) * [x] I've included a screenshot or gif (if applicable) * [x] I have tested the web demo (if applicable): * Using newly built examples: [app.rerun.io](https://app.rerun.io/pr/5501/index.html) * Using examples from latest `main` build: [app.rerun.io](https://app.rerun.io/pr/5501/index.html?manifest_url=https://app.rerun.io/version/main/examples_manifest.json) * Using full set of examples from `nightly` build: [app.rerun.io](https://app.rerun.io/pr/5501/index.html?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json) * [x] The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG * [x] If applicable, add a new check to the [release checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)! - [PR Build Summary](https://build.rerun.io/pr/5501) - [Docs preview](https://rerun.io/preview/920c7ce37479eb3a0c12a9f155e8a0a388c508af/docs)  - [Examples preview](https://rerun.io/preview/920c7ce37479eb3a0c12a9f155e8a0a388c508af/examples)  - [Recent benchmark results](https://build.rerun.io/graphs/crates.html) - [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)
rerun-io · Mar 14, 2024 · 21e06fc · 21e06fc
1 parent 1a2b9e3
commit 21e06fc
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 29 deletions.
diff --git a/DESIGN.md b/DESIGN.md
@@ -0,0 +1,32 @@
+# Design guidelines
+Guidelines for UI design, covering GUI, CLI, documentation, log messages, etc
+
+## Text
+#### Sentences
+Short, single-sentence text do NOT end in a period.
+
+Multi-sentence text ALWAYS ends in a period.
+
+#### Casing
+We prefer normal casing, and avoid Title Casing.
+
+We only use Title Casing for company and product names (Rerun, Rerun Viewer, Discord, …), but NOT for concepts like “container”, “space view”, etc.
+
+#### Examples
+Good: `log("File saved")`
+
+Bad: `log("file saved.")`
+
+### Buttons
+
+When a button action requires more input after pressing, suffix it with `…`.
+
+Good: `Save recording…` (leads to a save-dialog)
+
+## GUI labels
+
+We do not use a colon suffix for labels in front of a value.
+
+Good: `Color 🔴`
+
+Bad: `Color: 🔴`
diff --git a/crates/re_data_ui/src/component.rs b/crates/re_data_ui/src/component.rs
@@ -106,7 +106,7 @@ impl DataUi for EntityComponentWithInstances {
                 .header(re_ui::ReUi::table_header_height(), |mut header| {
                     re_ui::ReUi::setup_table_header(&mut header);
                     header.col(|ui| {
-                        ui.label("Instance Key");
+                        ui.label("Instance key");
                     });
                     header.col(|ui| {
                         ui.label(self.component_name().short_name());

diff --git a/crates/re_ui/src/command.rs b/crates/re_ui/src/command.rs
@@ -97,7 +97,7 @@ impl UICommand {
             Self::SaveRecording => ("Save recording…", "Save all data to a Rerun data file (.rrd)"),
 
             Self::SaveRecordingSelection => (
-                "Save recording (current time selection only)…",
+                "Save current time selection…",
                 "Save data for the current loop selection to a Rerun data file (.rrd)",
             ),
 
@@ -128,22 +128,22 @@ impl UICommand {
             ),
 
             Self::ToggleMemoryPanel => (
-                "Toggle Memory Panel",
+                "Toggle memory panel",
                 "View and track current RAM usage inside Rerun Viewer",
             ),
-            Self::ToggleBlueprintPanel => ("Toggle Blueprint Panel", "Toggle the left panel"),
-            Self::ToggleSelectionPanel => ("Toggle Selection Panel", "Toggle the right panel"),
-            Self::ToggleTimePanel => ("Toggle Time Panel", "Toggle the bottom panel"),
+            Self::ToggleBlueprintPanel => ("Toggle blueprint panel", "Toggle the left panel"),
+            Self::ToggleSelectionPanel => ("Toggle selection panel", "Toggle the right panel"),
+            Self::ToggleTimePanel => ("Toggle time panel", "Toggle the bottom panel"),
 
             #[cfg(debug_assertions)]
             Self::ToggleBlueprintInspectionPanel => (
-                "Toggle Blueprint Inspection Panel",
+                "Toggle blueprint inspection panel",
                 "Inspect the timeline of the internal blueprint data.",
             ),
 
             #[cfg(debug_assertions)]
             Self::ToggleEguiDebugPanel => (
-                "Toggle Egui Options/Debug Panel",
+                "Toggle egui debug panel",
                 "View and change global egui style settings",
             ),
 
@@ -154,18 +154,18 @@ impl UICommand {
                 "Toggle between windowed and fullscreen viewer",
             ),
             #[cfg(not(target_arch = "wasm32"))]
-            Self::ZoomIn => ("Zoom In", "Increases the UI zoom level"),
+            Self::ZoomIn => ("Zoom in", "Increases the UI zoom level"),
             #[cfg(not(target_arch = "wasm32"))]
-            Self::ZoomOut => ("Zoom Out", "Decreases the UI zoom level"),
+            Self::ZoomOut => ("Zoom out", "Decreases the UI zoom level"),
             #[cfg(not(target_arch = "wasm32"))]
             Self::ZoomReset => (
-                "Reset Zoom",
+                "Reset zoom",
                 "Resets the UI zoom level to the operating system's default value",
             ),
 
             Self::SelectionPrevious => ("Previous selection", "Go to previous selection"),
             Self::SelectionNext => ("Next selection", "Go to next selection"),
-            Self::ToggleCommandPalette => ("Command Palette…", "Toggle the Command Palette"),
+            Self::ToggleCommandPalette => ("Command palette…", "Toggle the Command Palette"),
 
             Self::PlaybackTogglePlayPause => {
                 ("Toggle play/pause", "Either play or pause the time")

diff --git a/crates/re_viewer/src/ui/rerun_menu.rs b/crates/re_viewer/src/ui/rerun_menu.rs
@@ -26,7 +26,7 @@ impl App {
             .max_height(desired_icon_height);
 
         ui.menu_image_button(image, |ui| {
-            ui.set_min_width(220.0);
+            ui.set_min_width(240.0);
 
             ui.menu_button("About", |ui| self.about_rerun_ui(frame, ui));
 

diff --git a/crates/re_viewer/src/ui/visible_history.rs b/crates/re_viewer/src/ui/visible_history.rs
@@ -24,7 +24,7 @@ static VISIBLE_HISTORY_SUPPORTED_SPACE_VIEWS: once_cell::sync::Lazy<
     .into()
 });
 
-/// Entities containing one of these components support the Visible History feature.
+/// Entities containing one of these components support the visible history feature.
 static VISIBLE_HISTORY_SUPPORTED_COMPONENT_NAMES: once_cell::sync::Lazy<Vec<ComponentName>> =
     once_cell::sync::Lazy::new(|| {
         [
@@ -92,24 +92,24 @@ pub fn visible_history_ui(
 
     let mut interacting_with_controls = false;
 
-    let collapsing_response = re_ui.collapsing_header(ui, "Visible Time Range", false, |ui| {
+    let collapsing_response = re_ui.collapsing_header(ui, "Visible time range", false, |ui| {
         ui.horizontal(|ui| {
             re_ui
                 .radio_value(ui, &mut visible_history_prop.enabled, false, "Default")
                 .on_hover_text(if is_space_view {
-                    "Default Visible Time Range settings for this kind of Space View"
+                    "Default visible time range settings for this kind of Space View"
                 } else {
-                    "Visible Time Range settings inherited from parent Group(s) or enclosing \
+                    "Visible time range settings inherited from parent Group(s) or enclosing \
                         Space View"
                 });
             re_ui
                 .radio_value(ui, &mut visible_history_prop.enabled, true, "Override")
                 .on_hover_text(if is_space_view {
-                    "Set Visible Time Range settings for the contents of this Space View"
+                    "Set visible time range settings for the contents of this Space View"
                 } else if entity_path.is_some() {
-                    "Set Visible Time Range settings for this entity"
+                    "Set visible time range settings for this entity"
                 } else {
-                    "Set Visible Time Range settings for he contents of this Group"
+                    "Set visible time range settings for he contents of this Group"
                 });
         });
 
@@ -263,12 +263,12 @@ pub fn visible_history_ui(
         }
     }
 
-    let markdown = format!("# Visible Time Range\n
+    let markdown = format!("# Visible time range\n
 This feature controls the time range used to display data in the Space View.
 
 The settings are inherited from parent Group(s) or enclosing Space View if not overridden.
 
-Visible Time Range properties are stored separately for each _type_ of timelines. They may differ depending on \
+Visible time range properties are stored separately for each _type_ of timelines. They may differ depending on \
 whether the current timeline is temporal or a sequence. The current settings apply to all _{}_ timelines.
 
 Notes that the data current as of the time range starting time is included.",

diff --git a/crates/re_viewer/src/ui/welcome_screen/welcome_section.rs b/crates/re_viewer/src/ui/welcome_screen/welcome_section.rs
@@ -138,7 +138,7 @@ fn onboarding_content_ui(ui: &mut Ui, command_sender: &CommandSender, accepts_co
                 Visualize synchronized data from multiple processes, locally or over a network.",
             image: &re_ui::icons::WELCOME_SCREEN_LIVE_DATA,
             add_buttons: Box::new(move |ui, command_sender| {
-                if large_text_button(ui, "Quick Start").clicked() {
+                if large_text_button(ui, "Quick start").clicked() {
                     let entries = if accepts_connections {
                         QUICK_START_ENTRIES_CONNECT
                     } else {
@@ -169,7 +169,7 @@ fn onboarding_content_ui(ui: &mut Ui, command_sender: &CommandSender, accepts_co
                 interactively in the viewer or (coming soon) directly from code in the SDK.",
             image: &re_ui::icons::WELCOME_SCREEN_CONFIGURE,
             add_buttons: Box::new(|ui, _| {
-                url_large_text_button(ui, "Learn about Views", SPACE_VIEWS_HELP);
+                url_large_text_button(ui, "Learn about views", SPACE_VIEWS_HELP);
             }),
         },
     ];
@@ -306,7 +306,7 @@ fn open_quick_start(
     }
 
     let store_info = StoreInfo {
-        application_id: "Quick Start".into(),
+        application_id: "Quick start".into(),
         store_id: StoreId::random(StoreKind::Recording),
         is_official_example: true,
         started: Time::now(),

diff --git a/crates/re_viewport/src/context_menu/mod.rs b/crates/re_viewport/src/context_menu/mod.rs
@@ -116,7 +116,7 @@ fn action_list(
             vec![Box::new(CloneSpaceViewAction)],
             vec![
                 Box::new(SubMenu {
-                    label: "Add Container".to_owned(),
+                    label: "Add container".to_owned(),
                     actions: vec![
                         Box::new(AddContainerAction(egui_tiles::ContainerKind::Tabs)),
                         Box::new(AddContainerAction(egui_tiles::ContainerKind::Horizontal)),
@@ -138,7 +138,7 @@ fn action_list(
                 }),
             ],
             vec![Box::new(SubMenu {
-                label: "Move to new Container".to_owned(),
+                label: "Move to new container".to_owned(),
                 actions: vec![
                     Box::new(MoveContentsToNewContainerAction(
                         egui_tiles::ContainerKind::Tabs,

diff --git a/tests/python/release_checklist/check_plot_overrides.py b/tests/python/release_checklist/check_plot_overrides.py
@@ -11,13 +11,13 @@
 
 This checks whether one can override all properties in a plot.
 
-### Component Overrides
+### Component overrides
 
 * Select `plots/cos`.
 * Override all of its properties with arbitrary values.
 * Remove all these overrides.
 
-### Visible Time Range Overrides
+### Visible time range overrides
 * Select the `plots` space view and confirm it shows:
   * "Default" selected
   * Showing data between frames -∞ and +∞ (included).