ui: Apply elevation outside `SettingsContainer` (#15346)

Marshall Bowers created 1 year ago

This PR changes the `SettingsContainer` component such that the
elevation styles are applied by the parent instead of
`SettingsContainer` itself.

This means that components using `SettingsContainer` can be embedded in
different contexts, like the settings UI or a popover containing the
settings.

Release Notes:

- N/A

Change summary

crates/settings_ui/src/settings_ui.rs          | 20 +++++++++++---------
crates/ui/src/components/settings_container.rs |  8 ++------
2 files changed, 13 insertions(+), 15 deletions(-)

Detailed changes

crates/settings_ui/src/settings_ui.rs

@@ -100,23 +100,25 @@ impl Item for SettingsPage {
 }
 
 impl Render for SettingsPage {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         v_flex()
             .p_4()
             .size_full()
             .gap_4()
             .child(Label::new("Settings").size(LabelSize::Large))
             .child(
-                v_flex()
-                    .gap_1()
-                    .child(Label::new("Appearance"))
-                    .child(AppearanceSettingsControls::new()),
+                v_flex().gap_1().child(Label::new("Appearance")).child(
+                    v_flex()
+                        .elevation_2(cx)
+                        .child(AppearanceSettingsControls::new()),
+                ),
             )
             .child(
-                v_flex()
-                    .gap_1()
-                    .child(Label::new("Editor"))
-                    .child(EditorSettingsControls::new()),
+                v_flex().gap_1().child(Label::new("Editor")).child(
+                    v_flex()
+                        .elevation_2(cx)
+                        .child(EditorSettingsControls::new()),
+                ),
             )
     }
 }

crates/ui/src/components/settings_container.rs

@@ -23,11 +23,7 @@ impl ParentElement for SettingsContainer {
 }
 
 impl RenderOnce for SettingsContainer {
-    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        v_flex()
-            .elevation_2(cx)
-            .px_2()
-            .gap_1()
-            .children(self.children)
+    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+        v_flex().px_2().gap_1().children(self.children)
     }
 }