Repository: callstack/react-native-paper
Pull request #1316 (2019-08-29 13:37:36)

refactor: use textTransform to upperCase Button
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation

When testing with `@testing-library/react-native` I want to find buttons by text. However, `Button` component uses `toUpperCase` explicitly, so I have to upprecase all my search strings. This is annoying, especially since I use react-i18next. With this change, I can use the same string in my tests (you can see this from snapshots)

<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->

### Test plan

I tested it in example app visually on iOS and Android simulators and web version. Everything looks properly uppercased.

<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->


callstack-bot: Hey @doomsower, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://12520-71323749-gh.circle-artifacts.com/0/docs/index.html).
jaysbytes: I'm totally for that, but maybe there was a reason to use uppercase. Any ideas @satya164 @Trancever ?
satya164: `textTransform` wasn't available in React Native before. If it works on Platforms now, we can use it.

Patch:
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 91885c71d..3770c3abc 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -268,15 +268,12 @@ class Button extends React.Component<Props, State> {
               style={[
                 styles.label,
                 compact && styles.compactLabel,
+                uppercase && styles.uppercaseLabel,
                 textStyle,
                 font,
               ]}
             >
-              {React.Children.map(children, child =>
-                typeof child === 'string' && uppercase
-                  ? child.toUpperCase()
-                  : child
-              )}
+              {children}
             </Text>
           </View>
         </TouchableRipple>
@@ -312,6 +309,9 @@ const styles = StyleSheet.create({
   compactLabel: {
     marginHorizontal: 8,
   },
+  uppercaseLabel: {
+    textTransform: 'uppercase',
+  },
 });
 
 export default withTheme(Button);
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 1c29f8d65..3f6ad950b 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -257,7 +257,7 @@ class Snackbar extends React.Component<Props, State> {
               compact
               mode="text"
             >
-              {action.label.toUpperCase()}
+              {action.label}
             </Button>
           ) : null}
         </Surface>


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index 294f76703..fb100ea8f 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -267,6 +267,9 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                       Object {
                         "marginHorizontal": 8,
                       },
+                      Object {
+                        "textTransform": "uppercase",
+                      },
                       Object {
                         "color": "#6200ee",
                         "fontFamily": "System",
@@ -280,7 +283,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                   ]
                 }
               >
-                FIRST
+                first
               </Text>
             </View>
           </View>
@@ -440,6 +443,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                       Object {
                         "marginHorizontal": 8,
                       },
+                      Object {
+                        "textTransform": "uppercase",
+                      },
                       Object {
                         "color": "#6200ee",
                         "fontFamily": "System",
@@ -453,7 +459,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   ]
                 }
               >
-                FIRST
+                first
               </Text>
             </View>
           </View>
@@ -527,6 +533,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                       Object {
                         "marginHorizontal": 8,
                       },
+                      Object {
+                        "textTransform": "uppercase",
+                      },
                       Object {
                         "color": "#6200ee",
                         "fontFamily": "System",
@@ -540,7 +549,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   ]
                 }
               >
-                SECOND
+                second
               </Text>
             </View>
           </View>
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index 13eff66aa..82e5f5a16 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -67,6 +67,9 @@ exports[`renders button with color 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#e91e63",
                 "fontFamily": "System",
@@ -80,7 +83,7 @@ exports[`renders button with color 1`] = `
           ]
         }
       >
-        CUSTOM BUTTON
+        Custom Button
       </Text>
     </View>
   </View>
@@ -198,6 +201,9 @@ exports[`renders button with icon 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#6200ee",
                 "fontFamily": "System",
@@ -211,7 +217,7 @@ exports[`renders button with icon 1`] = `
           ]
         }
       >
-        ICON BUTTON
+        Icon Button
       </Text>
     </View>
   </View>
@@ -292,6 +298,9 @@ exports[`renders contained contained with mode 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#ffffff",
                 "fontFamily": "System",
@@ -305,7 +314,7 @@ exports[`renders contained contained with mode 1`] = `
           ]
         }
       >
-        CONTAINED BUTTON
+        Contained Button
       </Text>
     </View>
   </View>
@@ -383,6 +392,9 @@ exports[`renders disabled button 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "rgba(0, 0, 0, 0.32)",
                 "fontFamily": "System",
@@ -396,7 +408,7 @@ exports[`renders disabled button 1`] = `
           ]
         }
       >
-        DISABLED BUTTON
+        Disabled Button
       </Text>
     </View>
   </View>
@@ -653,6 +665,9 @@ exports[`renders loading button 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#6200ee",
                 "fontFamily": "System",
@@ -666,7 +681,7 @@ exports[`renders loading button 1`] = `
           ]
         }
       >
-        LOADING BUTTON
+        Loading Button
       </Text>
     </View>
   </View>
@@ -740,6 +755,9 @@ exports[`renders outlined button with mode 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#6200ee",
                 "fontFamily": "System",
@@ -753,7 +771,7 @@ exports[`renders outlined button with mode 1`] = `
           ]
         }
       >
-        OUTLINED BUTTON
+        Outlined Button
       </Text>
     </View>
   </View>
@@ -827,6 +845,9 @@ exports[`renders text button by default 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#6200ee",
                 "fontFamily": "System",
@@ -840,7 +861,7 @@ exports[`renders text button by default 1`] = `
           ]
         }
       >
-        TEXT BUTTON
+        Text Button
       </Text>
     </View>
   </View>
@@ -914,6 +935,9 @@ exports[`renders text button with mode 1`] = `
                 "textAlign": "center",
               },
               undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
               Object {
                 "color": "#6200ee",
                 "fontFamily": "System",
@@ -927,7 +951,7 @@ exports[`renders text button with mode 1`] = `
           ]
         }
       >
-        TEXT BUTTON
+        Text Button
       </Text>
     </View>
   </View>
diff --git a/src/components/__tests__/__snapshots__/Menu.test.js.snap b/src/components/__tests__/__snapshots__/Menu.test.js.snap
index b38af75e8..b09e5280c 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.js.snap
@@ -70,6 +70,9 @@ exports[`renders menu with content styles 1`] = `
                   "textAlign": "center",
                 },
                 undefined,
+                Object {
+                  "textTransform": "uppercase",
+                },
                 Object {
                   "color": "#6200ee",
                   "fontFamily": "System",
@@ -83,7 +86,7 @@ exports[`renders menu with content styles 1`] = `
             ]
           }
         >
-          OPEN MENU
+          Open menu
         </Text>
       </View>
     </View>
@@ -161,6 +164,9 @@ exports[`renders not visible menu 1`] = `
                   "textAlign": "center",
                 },
                 undefined,
+                Object {
+                  "textTransform": "uppercase",
+                },
                 Object {
                   "color": "#6200ee",
                   "fontFamily": "System",
@@ -174,7 +180,7 @@ exports[`renders not visible menu 1`] = `
             ]
           }
         >
-          OPEN MENU
+          Open menu
         </Text>
       </View>
     </View>
@@ -252,6 +258,9 @@ exports[`renders visible menu 1`] = `
                   "textAlign": "center",
                 },
                 undefined,
+                Object {
+                  "textTransform": "uppercase",
+                },
                 Object {
                   "color": "#6200ee",
                   "fontFamily": "System",
@@ -265,7 +274,7 @@ exports[`renders visible menu 1`] = `
             ]
           }
         >
-          OPEN MENU
+          Open menu
         </Text>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 451ef410d..986c5f641 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -212,6 +212,9 @@ exports[`renders snackbar with action button 1`] = `
                   Object {
                     "marginHorizontal": 8,
                   },
+                  Object {
+                    "textTransform": "uppercase",
+                  },
                   Object {
                     "color": "#03dac4",
                     "fontFamily": "System",
@@ -225,7 +228,7 @@ exports[`renders snackbar with action button 1`] = `
               ]
             }
           >
-            UNDO
+            Undo
           </Text>
         </View>
       </View>