More previews (#20329)

Release Notes:

- N/A

crates/ui/src/components/facepile.rs

@@ -1,5 +1,4 @@
-#![allow(missing_docs)]
-use crate::prelude::*;
+use crate::{prelude::*, Avatar};
 use gpui::{AnyElement, StyleRefinement};
 use smallvec::SmallVec;
 
@@ -15,10 +14,12 @@ pub struct Facepile {
 }
 
 impl Facepile {
+    /// Creates a new empty facepile.
     pub fn empty() -> Self {
         Self::new(SmallVec::new())
     }
 
+    /// Creates a new facepile with the given faces.
     pub fn new(faces: SmallVec<[AnyElement; 2]>) -> Self {
         Self { base: div(), faces }
     }
@@ -58,3 +59,61 @@ impl RenderOnce for Facepile {
             )
     }
 }
+
+impl ComponentPreview for Facepile {
+    fn description() -> impl Into<Option<&'static str>> {
+        "A facepile is a collection of faces stacked horizontally–\
+        always with the leftmost face on top and descending in z-index.\
+        \n\nFacepiles are used to display a group of people or things,\
+        such as a list of participants in a collaboration session."
+    }
+    fn examples() -> Vec<ComponentExampleGroup<Self>> {
+        let few_faces: [&'static str; 3] = [
+            "https://avatars.githubusercontent.com/u/1714999?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/67129314?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/482957?s=60&v=4",
+        ];
+
+        let many_faces: [&'static str; 6] = [
+            "https://avatars.githubusercontent.com/u/326587?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/2280405?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/1789?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/67129314?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/482957?s=60&v=4",
+            "https://avatars.githubusercontent.com/u/1714999?s=60&v=4",
+        ];
+
+        vec![example_group(
+            "Examples",
+            vec![
+                single_example(
+                    "Few Faces",
+                    Facepile::new(
+                        few_faces
+                            .iter()
+                            .map(|&url| Avatar::new(url).into_any_element())
+                            .collect(),
+                    ),
+                ),
+                single_example(
+                    "Many Faces",
+                    Facepile::new(
+                        many_faces
+                            .iter()
+                            .map(|&url| Avatar::new(url).into_any_element())
+                            .collect(),
+                    ),
+                ),
+                single_example(
+                    "Custom Size",
+                    Facepile::new(
+                        few_faces
+                            .iter()
+                            .map(|&url| Avatar::new(url).size(px(24.)).into_any_element())
+                            .collect(),
+                    ),
+                ),
+            ],
+        )]
+    }
+}