From 21e652fc01bdc6746555b1e45717fb3dd27bfa27 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Sun, 27 Mar 2022 20:27:25 +0200
Subject: [PATCH] refactor: remove elevation prop from appbar, move back
 screenshots

---
 src/components/Appbar/Appbar.tsx           | 16 ++++++----------
 src/components/Appbar/AppbarAction.tsx     | 13 +++++++++++++
 src/components/Appbar/AppbarBackAction.tsx | 14 ++++++++++++++
 src/components/Appbar/AppbarContent.tsx    |  6 ++++++
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index b7e2b4b360..ed31d3d62b 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/src/components/Appbar/Appbar.tsx
@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  View,
-  ViewStyle,
-  Platform,
-  StyleSheet,
-  StyleProp,
-  Animated,
-} from 'react-native';
+import { View, ViewStyle, Platform, StyleSheet, StyleProp } from 'react-native';
 import color from 'color';
 
 import AppbarContent from './AppbarContent';
@@ -52,7 +45,6 @@ type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
    */
   theme: Theme;
   style?: StyleProp<ViewStyle>;
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
 };
 
 /**
@@ -63,6 +55,10 @@ type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
  * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
  * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations
  *
+ * <div class="screenshots">
+ *   <img class="medium" src="screenshots/appbar.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -108,7 +104,7 @@ const Appbar = ({
   const { isV3 } = theme;
   const {
     backgroundColor: customBackground,
-    elevation = rest.elevation || isV3 ? (elevated ? 2 : 0) : 4,
+    elevation = isV3 ? (elevated ? 2 : 0) : 4,
     ...restStyle
   }: ViewStyle = StyleSheet.flatten(style) || {};
 
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index c29958b3f2..3cb5c327c8 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -47,6 +47,19 @@ type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
 
 /**
  * A component used to display an action item in the appbar.
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/appbar-action-android.png" />
+ *       <figcaption>Android</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/appbar-action-ios.png" />
+ *       <figcaption>iOS</figcaption>
+ *   </figure>
+ * </div>
  *
  * ## Usage
  * ```js
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index 0fb54c4e6b..a5581a4039 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -34,6 +34,20 @@ type Props = $Omit<
 /**
  * A component used to display a back button in the appbar.
  *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/appbar-backaction-android.png" />
+ *     <figcaption>Android</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/appbar-backaction-ios.png" />
+ *     <figcaption>iOS</figcaption>
+ *   </figure>
+ * </div>
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index 8c8597bc40..c71081bbc7 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/src/components/Appbar/AppbarContent.tsx
@@ -63,6 +63,12 @@ type Props = $RemoveChildren<typeof View> & {
 /**
  * A component used to display a title and optional subtitle in an appbar.
  *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/appbar-content.png" />
+ *   </figure>
+ * </div>
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';