Make styles overridable to support different font sizes (#57)

Needed for observation/app#634 - Make the LargeButton title text style overridable - Make InputField styles overridable
observation · Dec 6, 2024 · 1df76aa · 1df76aa
1 parent 17b4dc0
commit 1df76aa
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "main": "src/index.ts",
   "repository": "[email protected]:observation/react-native-components.git",
   "author": "Observation.org",

diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
@@ -11,6 +11,8 @@ type Props = {
   containerStyle?: StyleProp<ViewStyle>
   inputProps?: TextInputProps & RefAttributes<TextInput>
   inputStyle?: StyleProp<ViewStyle>
+  errorStyle?: StyleProp<ViewStyle>
+  descriptionStyle?: StyleProp<ViewStyle>
   label?: string
   rightIcon?: JSX.Element
   description?: string
@@ -22,6 +24,8 @@ const InputField = ({
   containerStyle,
   inputProps,
   inputStyle,
+  errorStyle,
+  descriptionStyle,
   label,
   rightIcon,
   description,
@@ -64,12 +68,14 @@ const InputField = ({
           icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error} />}
           text={errorMessage}
           style={{
-            textStyle: styles.errorStyle,
+            textStyle: [styles.errorStyle, errorStyle],
             containerStyle: { marginTop: theme.margin.half },
           }}
         />
       )}
-      {description && <Text style={{ marginTop: theme.margin.half, ...styles.descriptionStyle }}>{description}</Text>}
+      {description && (
+        <Text style={[{ marginTop: theme.margin.half }, styles.descriptionStyle, descriptionStyle]}>{description}</Text>
+      )}
     </View>
   )
 }

diff --git a/src/components/LargeButton.tsx b/src/components/LargeButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import { IconName } from '../lib/Icons'
@@ -11,6 +11,7 @@ import theme from '../styles/theme'
 
 type LargeButtonProps = {
   title: string
+  titleStyle?: StyleProp<TextStyle>
   onPress?: () => void
   onPressIn?: () => void
   iconName?: IconName
@@ -52,6 +53,7 @@ const LargeButton = ({
   danger,
   style,
   title,
+  titleStyle,
   iconName,
   onPress,
   onPressIn,
@@ -74,7 +76,7 @@ const LargeButton = ({
             <Icon name={iconName} size={theme.icon.size.large} color={iconColor} />
           </View>
         )}
-        <Text style={[styles.title, textStyle]}>{title}</Text>
+        <Text style={[styles.title, titleStyle, textStyle]}>{title}</Text>
       </View>
     </TouchableOpacity>
   )

diff --git a/src/components/__tests__/LargeButton.test.tsx b/src/components/__tests__/LargeButton.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { fireEvent, render } from '@testing-library/react-native'
 
+import appTextStyle from '../../styles/text'
 import LargeButton from '../LargeButton'
 
 const onPress = jest.fn()
@@ -52,6 +53,19 @@ describe('LargeButton', () => {
     expect(toJSON()).toMatchSnapshot()
   })
 
+  test('Rendering, with title style', () => {
+    const { toJSON } = render(
+      <LargeButton
+        iconName="info-circle"
+        title="Press me"
+        titleStyle={appTextStyle.subtitle}
+        onPress={onPress}
+        style={{ flex: 1 }}
+      />,
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+
   test('Click', async () => {
     const { getByTestId } = render(<LargeButton title="Press me" onPress={onPress} style={{ flex: 1 }} />)
     await fireEvent.press(getByTestId('touchable-opacity'))

diff --git a/src/components/__tests__/__snapshots__/BottomSheet.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomSheet.test.tsx.snap
@@ -126,6 +126,7 @@ exports[`BottomSheet Rendering Only buttons 1`] = `
                     "lineHeight": 20,
                     "textAlignVertical": "center",
                   },
+                  undefined,
                   {
                     "color": "#FFFFFF",
                   },
@@ -313,6 +314,7 @@ exports[`BottomSheet Rendering With button 1`] = `
                     "lineHeight": 20,
                     "textAlignVertical": "center",
                   },
+                  undefined,
                   {
                     "color": "#FFFFFF",
                   },

diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
@@ -182,15 +182,20 @@ exports[`InputField Rendering With a description 1`] = `
   </View>
   <Text
     style={
-      {
-        "color": "#666666",
-        "fontFamily": "Ubuntu",
-        "fontSize": 12,
-        "fontStyle": "normal",
-        "fontWeight": "normal",
-        "lineHeight": 16,
-        "marginTop": 8,
-      }
+      [
+        {
+          "marginTop": 8,
+        },
+        {
+          "color": "#666666",
+          "fontFamily": "Ubuntu",
+          "fontSize": 12,
+          "fontStyle": "normal",
+          "fontWeight": "normal",
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
     }
   >
     The description
@@ -431,14 +436,17 @@ exports[`InputField Rendering With an error message 1`] = `
           {
             "flexShrink": 1,
           },
-          {
-            "color": "#EA554B",
-            "fontFamily": "Ubuntu",
-            "fontSize": 12,
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-            "lineHeight": 16,
-          },
+          [
+            {
+              "color": "#EA554B",
+              "fontFamily": "Ubuntu",
+              "fontSize": 12,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+              "lineHeight": 16,
+            },
+            undefined,
+          ],
         ]
       }
     >

diff --git a/src/components/__tests__/__snapshots__/LargeButton.test.tsx.snap b/src/components/__tests__/__snapshots__/LargeButton.test.tsx.snap
@@ -64,6 +64,7 @@ exports[`LargeButton Rendering, disabled, primary 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#FFFFFF",
           },
@@ -142,6 +143,7 @@ exports[`LargeButton Rendering, disabled, secondary 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#E6E6E6",
           },
@@ -218,6 +220,7 @@ exports[`LargeButton Rendering, enabled, primary 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#FFFFFF",
           },
@@ -296,6 +299,7 @@ exports[`LargeButton Rendering, enabled, secondary 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#0066B1",
           },
@@ -372,6 +376,7 @@ exports[`LargeButton Rendering, primary, danger 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#FFFFFF",
           },
@@ -450,6 +455,7 @@ exports[`LargeButton Rendering, secondary, danger 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#EA554B",
           },
@@ -526,6 +532,7 @@ exports[`LargeButton Rendering, secondary, danger, disabled => defaults to prima
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
           {
             "color": "#FFFFFF",
           },
@@ -617,6 +624,106 @@ exports[`LargeButton Rendering, with icon 1`] = `
             "lineHeight": 20,
             "textAlignVertical": "center",
           },
+          undefined,
+          {
+            "color": "#FFFFFF",
+          },
+        ]
+      }
+    >
+      Press me
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`LargeButton Rendering, with title style 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#0066B1",
+      "borderRadius": 4,
+      "flex": 1,
+      "height": 32,
+      "justifyContent": "center",
+      "margin": 16,
+      "opacity": 1,
+      "overflow": "hidden",
+    }
+  }
+  testID="touchable-opacity"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "marginHorizontal": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "justifyContent": "center",
+          "paddingRight": 8,
+        }
+      }
+    >
+      <Icon
+        color="#FFFFFF"
+        name="circle-info"
+        size={16}
+        type="light"
+      />
+    </View>
+    <Text
+      style={
+        [
+          {
+            "color": "#212121",
+            "fontFamily": "Ubuntu",
+            "fontSize": 14,
+            "fontStyle": "normal",
+            "fontWeight": "bold",
+            "lineHeight": 20,
+            "textAlignVertical": "center",
+          },
+          {
+            "color": "#212121",
+            "fontFamily": "Ubuntu",
+            "fontSize": 16,
+            "fontStyle": "normal",
+            "fontWeight": "bold",
+            "lineHeight": 26,
+          },
           {
             "color": "#FFFFFF",
           },

diff --git a/src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap b/src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap
@@ -184,6 +184,7 @@ exports[`NotificationPopup Rendering Left and right buttons 1`] = `
                         "lineHeight": 20,
                         "textAlignVertical": "center",
                       },
+                      undefined,
                       {
                         "color": "#FFFFFF",
                       },
@@ -265,6 +266,7 @@ exports[`NotificationPopup Rendering Left and right buttons 1`] = `
                         "lineHeight": 20,
                         "textAlignVertical": "center",
                       },
+                      undefined,
                       {
                         "color": "#FFFFFF",
                       },
@@ -467,6 +469,7 @@ exports[`NotificationPopup Rendering Only left button 1`] = `
                         "lineHeight": 20,
                         "textAlignVertical": "center",
                       },
+                      undefined,
                       {
                         "color": "#FFFFFF",
                       },
@@ -719,6 +722,7 @@ exports[`NotificationPopup Rendering With close button 1`] = `
                         "lineHeight": 20,
                         "textAlignVertical": "center",
                       },
+                      undefined,
                       {
                         "color": "#FFFFFF",
                       },
@@ -800,6 +804,7 @@ exports[`NotificationPopup Rendering With close button 1`] = `
                         "lineHeight": 20,
                         "textAlignVertical": "center",
                       },
+                      undefined,
                       {
                         "color": "#FFFFFF",
                       },

diff --git a/src/components/__tests__/__snapshots__/ToolTip.test.tsx.snap b/src/components/__tests__/__snapshots__/ToolTip.test.tsx.snap
@@ -163,6 +163,7 @@ exports[`Tooltip Rendering With button 1`] = `
                     "lineHeight": 20,
                     "textAlignVertical": "center",
                   },
+                  undefined,
                   {
                     "color": "#FFFFFF",
                   },