BREAKING: rename Paper to Surface

Author: satya164

docs/assets/screenshots/paper.1_2.png renamed to docs/assets/screenshots/surface-1.png

@@ -56,7 +56,7 @@ A theme usually contains the following properties:
   - `primary` - primary color for your app, usually your brand color.
   - `accent` - secondary color for your app which complements the primary color.
   - `background` - background color for pages, such as lists.
-  - `paper` - background color for elements containing content, such as cards.
+  - `surface` - background color for elements containing content, such as cards.
   - `text` - text color for content.
   - `disabled` - color for disabled elements.
   - `placeholder` - color for placeholder text, such as input placeholder.

docs/assets/screenshots/paper.4_6.png renamed to docs/assets/screenshots/surface-2.png

@@ -47,13 +47,10 @@ class DrawerItems extends React.Component<Props, State> {
   };
 
   render() {
-    const {
-      theme: {
-        colors: { paper },
-      },
-    } = this.props;
+    const { colors } = this.props.theme;
+
     return (
-      <View style={[styles.drawerContent, { backgroundColor: paper }]}>
+      <View style={[styles.drawerContent, { backgroundColor: colors.surface }]}>
         <DrawerSection title="Subheader">
           {DrawerItemsData.map((props, index) => (
             <DrawerItem

docs/assets/screenshots/paper.9_12.png renamed to docs/assets/screenshots/surface-3.png

@@ -13,13 +13,13 @@ import DividerExample from './DividerExample';
 import FABExample from './FABExample';
 import ListAccordionExample from './ListAccordionExample';
 import ListSectionExample from './ListSectionExample';
-import PaperExample from './PaperExample';
 import ProgressBarExample from './ProgressBarExample';
 import RadioButtonExample from './RadioButtonExample';
 import RadioButtonGroupExample from './RadioButtonGroupExample';
 import RippleExample from './RippleExample';
 import SearchbarExample from './SearchbarExample';
 import SnackbarExample from './SnackbarExample';
+import SurfaceExample from './SurfaceExample';
 import SwitchExample from './SwitchExample';
 import TextExample from './TextExample';
 import TextInputExample from './TextInputExample';
@@ -42,13 +42,13 @@ export const examples = {
   fab: FABExample,
   listAccordion: ListAccordionExample,
   listSection: ListSectionExample,
-  paper: PaperExample,
   progressbar: ProgressBarExample,
   radio: RadioButtonExample,
   radioGroup: RadioButtonGroupExample,
   ripple: RippleExample,
   searchbar: SearchbarExample,
   snackbar: SnackbarExample,
+  surface: SurfaceExample,
   switch: SwitchExample,
   text: TextExample,
   textInput: TextInputExample,

docs/pages/3.theming.md

@@ -2,15 +2,15 @@
 
 import * as React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
-import { Text, Paper, withTheme } from 'react-native-paper';
+import { Text, Surface, withTheme } from 'react-native-paper';
 import type { Theme } from 'react-native-paper/types';
 
 type Props = {
   theme: Theme,
 };
 
-class PaperExample extends React.Component<Props> {
-  static title = 'Paper';
+class SurfaceExample extends React.Component<Props> {
+  static title = 'Surface';
 
   render() {
     const {
@@ -24,9 +24,9 @@ class PaperExample extends React.Component<Props> {
         contentContainerStyle={styles.content}
       >
         {[1, 2, 4, 6, 12].map(i => (
-          <Paper key={i} style={[styles.paper, { elevation: i }]}>
+          <Surface key={i} style={[styles.surface, { elevation: i }]}>
             <Text>{i}</Text>
-          </Paper>
+          </Surface>
         ))}
       </ScrollView>
     );
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 
-  paper: {
+  surface: {
     margin: 24,
     height: 80,
     width: 80,
@@ -52,4 +52,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withTheme(PaperExample);
+export default withTheme(SurfaceExample);

example/DrawerItems.js

@@ -13,15 +13,15 @@ import {
 import { polyfill } from 'react-lifecycles-compat';
 import color from 'color';
 import Icon from './Icon';
-import Paper from './Paper';
+import Surface from './Surface';
 import Text from './Typography/Text';
 import { black, grey900, white } from '../styles/colors';
 import withTheme from '../core/withTheme';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
-const AnimatedPaper = Animated.createAnimatedComponent(Paper);
+const AnimatedSurface = Animated.createAnimatedComponent(Surface);
 
 type Route = $Shape<{
   key: string,
@@ -592,7 +592,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
             );
           })}
         </View>
-        <AnimatedPaper style={[styles.bar, barStyle, { backgroundColor }]}>
+        <AnimatedSurface style={[styles.bar, barStyle, { backgroundColor }]}>
           <SafeAreaView
             style={[styles.items, { maxWidth: maxTabWidth * routes.length }]}
           >
@@ -827,7 +827,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
               );
             })}
           </SafeAreaView>
-        </AnimatedPaper>
+        </AnimatedSurface>
       </View>
     );
   }

example/src/ExampleList.js

@@ -4,15 +4,15 @@ import * as React from 'react';
 import { ActivityIndicator, Animated, View, StyleSheet } from 'react-native';
 import color from 'color';
 import Icon from './Icon';
-import Paper from './Paper';
+import Surface from './Surface';
 import Text from './Typography/Text';
 import TouchableRipple from './TouchableRipple';
 import { black, white } from '../styles/colors';
 import withTheme from '../core/withTheme';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
-const AnimatedPaper = Animated.createAnimatedComponent(Paper);
+const AnimatedSurface = Animated.createAnimatedComponent(Surface);
 
 type Props = {
   /**
@@ -186,7 +186,7 @@ class Button extends React.Component<Props, State> {
     const elevation = disabled ? 0 : this.state.elevation;
 
     return (
-      <AnimatedPaper
+      <AnimatedSurface
         style={[
           styles.button,
           compact && styles.compact,
@@ -234,7 +234,7 @@ class Button extends React.Component<Props, State> {
             </Text>
           </View>
         </TouchableRipple>
-      </AnimatedPaper>
+      </AnimatedSurface>
     );
   }
 }

example/src/PaperExample.js renamed to example/src/SurfaceExample.js

@@ -7,11 +7,11 @@ import {
   TouchableWithoutFeedback,
   StyleSheet,
 } from 'react-native';
-import Paper from '../Paper';
+import Surface from '../Surface';
 import withTheme from '../../core/withTheme';
 import type { Theme } from '../../types';
 
-const AnimatedPaper = Animated.createAnimatedComponent(Paper);
+const AnimatedSurface = Animated.createAnimatedComponent(Surface);
 
 type Props = {
   /**
@@ -110,7 +110,7 @@ class Card extends React.Component<Props, State> {
         typeof child === 'object' && child.type ? child.type.displayName : null
     );
     return (
-      <AnimatedPaper
+      <AnimatedSurface
         style={[styles.card, { borderRadius: roundness, elevation }, style]}
       >
         <TouchableWithoutFeedback
@@ -135,7 +135,7 @@ class Card extends React.Component<Props, State> {
             )}
           </View>
         </TouchableWithoutFeedback>
-      </AnimatedPaper>
+      </AnimatedSurface>
     );
   }
 }

src/components/BottomNavigation.js

@@ -3,15 +3,12 @@
 import * as React from 'react';
 import { StyleSheet, Platform, Animated } from 'react-native';
 import Modal from '../Modal';
-import { white } from '../../styles/colors';
-import Paper from '../Paper';
+import Surface from '../Surface';
 import DialogActions from './DialogActions';
 import DialogTitle from './DialogTitle';
 import DialogContent from './DialogContent';
-import withTheme from '../../core/withTheme';
-import type { Theme } from '../../types';
 
-const AnimatedPaper = Animated.createAnimatedComponent(Paper);
+const AnimatedSurface = Animated.createAnimatedComponent(Surface);
 
 type Props = {
   /**
@@ -31,10 +28,6 @@ type Props = {
    */
   children: React.Node,
   style?: any,
-  /**
-   * @optional
-   */
-  theme: Theme,
 };
 
 /**
@@ -82,23 +75,14 @@ type Props = {
  * }
  * ```
  */
-class Dialog extends React.Component<Props, void> {
+export default class Dialog extends React.Component<Props, void> {
   static defaultProps = {
     dismissable: true,
     visible: false,
   };
 
   render() {
-    const {
-      children,
-      dismissable,
-      onDismiss,
-      visible,
-      style,
-      theme,
-    } = this.props;
-
-    const backgroundColor = theme.colors.paper;
+    const { children, dismissable, onDismiss, visible, style } = this.props;
 
     const childrenArray = React.Children.toArray(children);
     /* $FlowFixMe */
@@ -128,18 +112,16 @@ class Dialog extends React.Component<Props, void> {
     }
     return (
       <Modal dismissable={dismissable} onDismiss={onDismiss} visible={visible}>
-        <AnimatedPaper style={[styles.container, { backgroundColor }, style]}>
+        <AnimatedSurface style={[styles.container, style]}>
           {title}
           {restOfChildrenWithoutTitle}
           {actionBtnsChildren}
-        </AnimatedPaper>
+        </AnimatedSurface>
       </Modal>
     );
   }
 }
 
-export default withTheme(Dialog);
-
 const styles = StyleSheet.create({
   container: {
     /**
@@ -152,7 +134,6 @@ const styles = StyleSheet.create({
     marginVertical: Platform.OS === 'android' ? 44 : 0,
     marginHorizontal: 26,
     borderRadius: 2,
-    backgroundColor: white,
     elevation: 24,
   },
 });

src/components/Button.js

@@ -2,8 +2,8 @@
 
 import color from 'color';
 import * as React from 'react';
-import { StyleSheet, View, Animated } from 'react-native';
-import Paper from './Paper';
+import { Animated, View, StyleSheet } from 'react-native';
+import Surface from './Surface';
 import CrossFadeIcon from './CrossFadeIcon';
 import Text from './Typography/Text';
 import TouchableRipple from './TouchableRipple';
@@ -12,7 +12,7 @@ import withTheme from '../core/withTheme';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
-const AnimatedPaper = Animated.createAnimatedComponent(Paper);
+const AnimatedSurface = Animated.createAnimatedComponent(Surface);
 
 type Props = {
   /**
@@ -93,7 +93,7 @@ class FAB extends React.Component<Props> {
       .string();
 
     return (
-      <AnimatedPaper
+      <AnimatedSurface
         {...rest}
         style={[{ backgroundColor, elevation: 12 }, styles.container, style]}
       >
@@ -123,7 +123,7 @@ class FAB extends React.Component<Props> {
             ) : null}
           </View>
         </TouchableRipple>
-      </AnimatedPaper>
+      </AnimatedSurface>
     );
   }
 }

src/components/Card/Card.js

@@ -247,7 +247,7 @@ class FABGroup extends React.Component<Props, State> {
                       style={[
                         {
                           transform: [{ scale: scales[i] }],
-                          backgroundColor: theme.colors.paper,
+                          backgroundColor: theme.colors.surface,
                         },
                       ]}
                       onPress={it.onPress}

src/components/Dialog/Dialog.js

@@ -6,7 +6,7 @@ import { StyleSheet, TextInput } from 'react-native';
 import color from 'color';
 import withTheme from '../core/withTheme';
 import TouchableIcon from './TouchableIcon';
-import Paper from './Paper';
+import Surface from './Surface';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
@@ -135,7 +135,7 @@ class Searchbar extends React.Component<Props> {
       .string();
 
     return (
-      <Paper
+      <Surface
         style={[
           { borderRadius: roundness, elevation: 4 },
           styles.container,
@@ -171,7 +171,7 @@ class Searchbar extends React.Component<Props> {
             source="close"
           />
         ) : null}
-      </Paper>
+      </Surface>
     );
   }
 }