feat: adjust IconButton to Material You (#3187)

callstack · Jun 8, 2022 · 4db7fe2 · 4db7fe2
1 parent 8718f3f
commit 4db7fe2
Show file tree

Hide file tree

Showing 19 changed files with 2,248 additions and 1,350 deletions.
diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
@@ -1,42 +1,159 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
-import { IconButton, MD2Colors, MD3Colors, useTheme } from 'react-native-paper';
+import { StyleSheet, View } from 'react-native';
+import {
+  IconButton,
+  List,
+  MD2Colors,
+  MD3Colors,
+  useTheme,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
   const { isV3 } = useTheme();
+  if (!isV3) {
+    return (
+      <ScreenWrapper contentContainerStyle={styles.v2Container}>
+        <IconButton icon="camera" size={24} onPress={() => {}} />
+        <IconButton
+          icon="lock"
+          size={24}
+          iconColor={MD2Colors.green500}
+          onPress={() => {}}
+        />
+        <IconButton icon="camera" size={36} onPress={() => {}} />
+        <IconButton
+          icon="lock"
+          size={36}
+          onPress={() => {}}
+          style={{ backgroundColor: MD2Colors.lightGreen200 }}
+        />
+        <IconButton icon="heart" size={60} onPress={() => {}} />
+      </ScreenWrapper>
+    );
+  }
+
   return (
-    <ScreenWrapper contentContainerStyle={styles.container}>
-      <IconButton icon="camera" size={24} onPress={() => {}} />
-      <IconButton
-        icon="lock"
-        size={24}
-        color={isV3 ? MD3Colors.tertiary50 : MD2Colors.green500}
-        onPress={() => {}}
-      />
-      <IconButton icon="camera" size={36} onPress={() => {}} />
-      <IconButton
-        icon="lock"
-        size={36}
-        onPress={() => {}}
-        style={{
-          backgroundColor: isV3
-            ? MD3Colors.tertiary50
-            : MD2Colors.lightGreen200,
-        }}
-      />
-      <IconButton icon="heart" size={60} onPress={() => {}} />
+    <ScreenWrapper contentContainerStyle={styles.v3Container}>
+      <List.Section title="Default">
+        <View style={styles.row}>
+          <IconButton icon="camera" size={24} onPress={() => {}} />
+          <IconButton icon="camera" selected size={24} onPress={() => {}} />
+          <IconButton icon="camera" disabled size={24} onPress={() => {}} />
+        </View>
+      </List.Section>
+
+      <List.Section title="Contained">
+        <View style={styles.row}>
+          <IconButton
+            icon="camera"
+            mode="contained"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="contained"
+            selected
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="contained"
+            disabled
+            size={24}
+            onPress={() => {}}
+          />
+        </View>
+      </List.Section>
+
+      <List.Section title="Contained-tonal">
+        <View style={styles.row}>
+          <IconButton
+            icon="camera"
+            mode="contained-tonal"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            selected
+            mode="contained-tonal"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="contained-tonal"
+            disabled
+            size={24}
+            onPress={() => {}}
+          />
+        </View>
+      </List.Section>
+
+      <List.Section title="Outlined">
+        <View style={styles.row}>
+          <IconButton
+            icon="camera-outline"
+            mode="outlined"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            selected
+            icon="camera"
+            mode="outlined"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="outlined"
+            disabled
+            size={24}
+            onPress={() => {}}
+          />
+        </View>
+      </List.Section>
+
+      <List.Section title="Custom">
+        <View style={styles.row}>
+          <IconButton
+            icon="lock"
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton icon="camera" size={36} onPress={() => {}} />
+          <IconButton
+            icon="lock"
+            size={36}
+            onPress={() => {}}
+            containerColor={MD3Colors.tertiary60}
+          />
+          <IconButton icon="heart" size={60} onPress={() => {}} />
+        </View>
+      </List.Section>
     </ScreenWrapper>
   );
 };
 
 ButtonExample.title = 'Icon Button';
 
 const styles = StyleSheet.create({
-  container: {
+  v2Container: {
     flexDirection: 'row',
     padding: 8,
   },
+  v3Container: {
+    flexDirection: 'column',
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+  },
 });
 
 export default ButtonExample;
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
@@ -6,7 +6,7 @@ import type {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { black } from '../../styles/themes/v2/colors';
-import IconButton from '../IconButton';
+import IconButton from '../IconButton/IconButton';
 import type { IconSource } from '../Icon';
 import { useTheme } from '../../core/theming';
 
@@ -104,7 +104,7 @@ const AppbarAction = ({
     <IconButton
       size={size}
       onPress={onPress}
-      color={actionIconColor}
+      iconColor={actionIconColor}
       icon={icon}
       disabled={disabled}
       accessibilityLabel={accessibilityLabel}

diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
@@ -7,7 +7,7 @@ import {
   I18nManager,
 } from 'react-native';
 import color from 'color';
-import IconButton from '../IconButton';
+import IconButton from '../IconButton/IconButton';
 import Text from '../Typography/Text';
 import { withTheme, useTheme } from '../../core/theming';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
@@ -97,7 +97,7 @@ const PaginationControls = ({
               direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
             />
           )}
-          color={textColor}
+          iconColor={textColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
           accessibilityLabel="page-first"
@@ -112,7 +112,7 @@ const PaginationControls = ({
             direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
           />
         )}
-        color={textColor}
+        iconColor={textColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
         accessibilityLabel="chevron-left"
@@ -126,7 +126,7 @@ const PaginationControls = ({
             direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
           />
         )}
-        color={textColor}
+        iconColor={textColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
         accessibilityLabel="chevron-right"
@@ -141,7 +141,7 @@ const PaginationControls = ({
               direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
             />
           )}
-          color={textColor}
+          iconColor={textColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
           accessibilityLabel="page-last"