feat: refactor icon button component

docs/src/data/screenshots.ts

@@ -81,10 +81,10 @@ export const screenshots = {
   'FAB.Group': 'screenshots/fab-group.gif',
   Icon: 'screenshots/icon.png',
   IconButton: {
-    default: 'screenshots/icon-button-1.png',
+    standard: 'screenshots/icon-button-1.png',
+    filled: 'screenshots/icon-button-2.png',
+    tonal: 'screenshots/icon-button-3.png',
     outlined: 'screenshots/icon-button-4.png',
-    contained: 'screenshots/icon-button-2.png',
-    'contained-tonal': 'screenshots/icon-button-3.png',
   },
   'List.Accordion': {
     'with left icon': 'screenshots/list-accordion-1.png',

docs/src/data/themeColors.ts

@@ -191,56 +191,72 @@ export const themeColors = {
     },
   },
   IconButton: {
+    default: {
+      standard: {
+        iconColor: 'theme.colors.onSurfaceVariant',
+      },
+      outlined: {
+        iconColor: 'theme.colors.onSurfaceVariant',
+        borderColor: 'theme.colors.outlineVariant',
+      },
+      filled: {
+        backgroundColor: 'theme.colors.primary',
+        iconColor: 'theme.colors.onPrimary',
+      },
+      tonal: {
+        backgroundColor: 'theme.colors.secondaryContainer',
+        iconColor: 'theme.colors.onSecondaryContainer',
+      },
+    },
     selected: {
-      default: {
+      standard: {
         iconColor: 'theme.colors.primary',
       },
       outlined: {
         backgroundColor: 'theme.colors.inverseSurface',
         iconColor: 'theme.colors.inverseOnSurface',
       },
-      contained: {
+      filled: {
         backgroundColor: 'theme.colors.primary',
         iconColor: 'theme.colors.onPrimary',
       },
-      'contained-tonal': {
-        backgroundColor: 'theme.colors.secondaryContainer',
-        iconColor: 'theme.colors.onSecondaryContainer',
+      tonal: {
+        backgroundColor: 'theme.colors.secondary',
+        iconColor: 'theme.colors.onSecondary',
       },
     },
     unselected: {
-      default: {
+      standard: {
         iconColor: 'theme.colors.onSurfaceVariant',
       },
       outlined: {
         iconColor: 'theme.colors.onSurfaceVariant',
-        borderColor: 'theme.colors.outline',
-      },
-      contained: {
-        backgroundColor: 'theme.colors.surfaceVariant',
-        iconColor: 'theme.colors.primary',
+        borderColor: 'theme.colors.outlineVariant',
       },
-      'contained-tonal': {
-        backgroundColor: 'theme.colors.surfaceVariant',
+      filled: {
+        backgroundColor: 'theme.colors.surfaceContainer',
         iconColor: 'theme.colors.onSurfaceVariant',
       },
+      tonal: {
+        backgroundColor: 'theme.colors.secondaryContainer',
+        iconColor: 'theme.colors.onSecondaryContainer',
+      },
     },
     disabled: {
-      default: {
-        iconColor: 'theme.colors.onSurfaceDisabled',
+      standard: {
+        iconColor: 'theme.colors.onSurface',
       },
       outlined: {
-        backgroundColor: 'theme.colors.surfaceDisabled',
-        iconColor: 'theme.colors.onSurfaceDisabled',
-        borderColor: 'theme.colors.surfaceDisabled',
+        iconColor: 'theme.colors.onSurface',
+        borderColor: 'theme.colors.outlineVariant',
       },
-      contained: {
-        backgroundColor: 'theme.colors.surfaceDisabled',
-        iconColor: 'theme.colors.onSurfaceDisabled',
+      filled: {
+        backgroundColor: 'theme.colors.onSurface',
+        iconColor: 'theme.colors.onSurface',
       },
-      'contained-tonal': {
-        backgroundColor: 'theme.colors.surfaceDisabled',
-        iconColor: 'theme.colors.onSurfaceDisabled',
+      tonal: {
+        backgroundColor: 'theme.colors.onSurface',
+        iconColor: 'theme.colors.onSurface',
       },
     },
   },

example/src/Examples/BadgeExample.tsx

@@ -29,13 +29,17 @@ const BadgeExample = () => {
       <List.Section title="Text">
         <View style={styles.row}>
           <View style={styles.item}>
-            <IconButton icon="palette-swatch" size={36} style={styles.button} />
+            <IconButton
+              icon="palette-swatch"
+              size="medium"
+              style={styles.button}
+            />
             <Badge visible={visible} style={styles.textBadge}>
               12
             </Badge>
           </View>
           <View style={styles.item}>
-            <IconButton icon="inbox" size={36} style={styles.button} />
+            <IconButton icon="inbox" size="medium" style={styles.button} />
             <Badge
               visible={visible}
               style={[
@@ -53,11 +57,11 @@ const BadgeExample = () => {
       <List.Section title="Dot">
         <View style={styles.row}>
           <View style={styles.item}>
-            <IconButton icon="book-open" size={36} style={styles.button} />
+            <IconButton icon="book-open" size="medium" style={styles.button} />
             <Badge visible={visible} style={styles.dotBadge} />
           </View>
           <View style={styles.item}>
-            <IconButton icon="receipt" size={36} style={styles.button} />
+            <IconButton icon="receipt" size="medium" style={styles.button} />
             <Badge visible={visible} style={styles.dotBadge} />
           </View>
         </View>

example/src/Examples/CardExample.tsx

@@ -83,9 +83,7 @@ const CardExample = () => {
             title="Berries that are trimmed at the end"
             subtitle="Omega Ruby"
             left={(props: any) => <Avatar.Icon {...props} icon="folder" />}
-            right={(props: any) => (
-              <IconButton {...props} icon="dots-vertical" onPress={() => {}} />
-            )}
+            right={() => <IconButton icon="dots-vertical" onPress={() => {}} />}
           />
           <Card.Content>
             <Text variant="bodyMedium">
@@ -138,10 +136,10 @@ const CardExample = () => {
           <Card.Title
             title="Just Strawberries"
             subtitle="... and only Strawberries"
-            right={(props: any) => (
+            right={() => (
               <IconButton
-                {...props}
                 icon={isSelected ? 'heart' : 'heart-outline'}
+                selected={isSelected}
                 onPress={() => setIsSelected(!isSelected)}
               />
             )}