Add animation of visibility for the shelf

Author: mpdifran

Sources/AppUI/Extensions/View/View+Shelf.swift

@@ -11,17 +11,20 @@ struct ViewShelf<ShelfContent: View, S: ShapeStyle>: ViewModifier {
     private let spacing: CGFloat?
     private let backgroundFill: S
     private let includePadding: Bool
+    private let isVisible: Bool
     private let shelfContent: ShelfContent
 
     init(
         spacing: CGFloat? = nil,
         backgroundFill: S = .regularMaterial,
         includePadding: Bool = true,
+        isVisible: Bool = true,
         @ViewBuilder shelfContent: () -> ShelfContent
     ) {
         self.spacing = spacing
         self.backgroundFill = backgroundFill
         self.includePadding = includePadding
+        self.isVisible = isVisible
         self.shelfContent = shelfContent()
     }
 
@@ -33,15 +36,20 @@ struct ViewShelf<ShelfContent: View, S: ShapeStyle>: ViewModifier {
             GlassEffectContainer {
                 content
                     .safeAreaInset(edge: .bottom) {
-                        VStack(spacing: spacing) {
-                            shelfContent
+                        if isVisible {
+                            VStack(spacing: spacing) {
+                                shelfContent
+                            }
+                            .horizontallyCentered()
+                            .if(includePadding) {
+                                $0.padding()
+                            }
+                            .glassEffect(in: RoundedRectangle(cornerRadius: 34))
+                            .padding(.horizontal, 8)
+                            .transition(.move(edge: .bottom))
+                        } else {
+                            EmptyView()
                         }
-                        .horizontallyCentered()
-                        .if(includePadding) {
-                            $0.padding()
-                        }
-                        .glassEffect(in: RoundedRectangle(cornerRadius: 34))
-                        .padding(.horizontal, 8)
                     }
             }
         } else {
@@ -53,17 +61,22 @@ struct ViewShelf<ShelfContent: View, S: ShapeStyle>: ViewModifier {
     func legacyLayout(for content: Content) -> some View {
         content
             .safeAreaInset(edge: .bottom) {
-                VStack(spacing: spacing) {
-                    shelfContent
-                }
-                .horizontallyCentered()
-                .if(includePadding) {
-                    $0.padding()
-                }
-                .background {
-                    Rectangle()
-                        .fill(backgroundFill)
-                        .edgesIgnoringSafeArea(.bottom)
+                if isVisible {
+                    VStack(spacing: spacing) {
+                        shelfContent
+                    }
+                    .horizontallyCentered()
+                    .if(includePadding) {
+                        $0.padding()
+                    }
+                    .background {
+                        Rectangle()
+                            .fill(backgroundFill)
+                            .edgesIgnoringSafeArea(.bottom)
+                    }
+                    .transition(.move(edge: .bottom))
+                } else {
+                    EmptyView()
                 }
             }
     }
@@ -75,13 +88,15 @@ public extension View {
         spacing: CGFloat? = nil,
         backgroundFill: S = .regularMaterial,
         includePadding: Bool = true,
+        isVisible: Bool = true,
         @ViewBuilder _ shelfContent: @escaping () -> ShelfContent
     ) -> some View {
         modifier(
             ViewShelf(
                 spacing: spacing,
                 backgroundFill: backgroundFill,
                 includePadding: includePadding,
+                isVisible: isVisible,
                 shelfContent: shelfContent
             )
         )
@@ -90,6 +105,8 @@ public extension View {
 
 
 #Preview {
+    @Previewable @State var isVisible = true
+
     NavigationView {
         List {
             Text("1")
@@ -124,7 +141,19 @@ public extension View {
             Text("0")
         }
         .navigationTitle("Preview")
-        .shelf {
+        .animation(.default, value: isVisible)
+        .toolbar {
+            ToolbarItem(placement: .primaryAction) {
+                Button {
+                    withAnimation {
+                        isVisible.toggle()
+                    }
+                } label: {
+                    Text("Toggle")
+                }
+            }
+        }
+        .shelf(isVisible: isVisible) {
             ProminentButton("Create") { }
             ProminentButton("Cancel") { }
         }