feat: adjust typography component, fix theme types (#3066)

callstack · Feb 2, 2022 · f0be14c · f0be14c
1 parent 01db18b
commit f0be14c
Show file tree

Hide file tree

Showing 44 changed files with 824 additions and 333 deletions.
diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx
@@ -4,10 +4,11 @@ import { RadioButton, Paragraph, List, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const RadioButtonGroupExample = () => {
-  const [value, setValue] = React.useState<string>('first');
-  const [value2, setValue2] = React.useState<string>('first');
+  const [value, setValue] = React.useState('first');
+  const [value2, setValue2] = React.useState('first');
 
   const { colors } = useTheme();
+
   return (
     <ScreenWrapper>
       <List.Section title="With RadioButton">

diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx
@@ -1,29 +1,99 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import {
   Caption,
   Headline,
   Paragraph,
   Subheading,
+  Text,
   Title,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
+const SectionHeader = ({ children }: React.PropsWithChildren<{}>) => {
+  return (
+    <Text variant="title-large" style={styles.sectionHeader}>
+      {children}
+    </Text>
+  );
+};
+
 const TextExample = () => {
   return (
-    <ScreenWrapper style={styles.container}>
-      <Caption style={styles.text}>Caption</Caption>
-      <Paragraph style={styles.text}>Paragraph</Paragraph>
-      <Subheading style={styles.text}>Subheading</Subheading>
-      <Title style={styles.text}>Title</Title>
-      <Headline style={styles.text}>Headline</Headline>
+    <ScreenWrapper>
+      <View style={styles.container}>
+        <SectionHeader>Old text components:</SectionHeader>
+
+        <Caption style={styles.text}>Caption</Caption>
+        <Paragraph style={styles.text}>Paragraph</Paragraph>
+        <Subheading style={styles.text}>Subheading</Subheading>
+        <Title style={styles.text}>Title</Title>
+        <Headline style={styles.text}>Headline</Headline>
+
+        <SectionHeader>Text component:</SectionHeader>
+
+        <Text style={styles.text} variant="display-large">
+          Display Large
+        </Text>
+        <Text style={styles.text} variant="display-medium">
+          Display Medium
+        </Text>
+        <Text style={styles.text} variant="display-small">
+          Display small
+        </Text>
+
+        <Text style={styles.text} variant="headline-large">
+          Headline Large
+        </Text>
+        <Text style={styles.text} variant="headline-medium">
+          Headline Medium
+        </Text>
+        <Text style={styles.text} variant="headline-small">
+          Headline Small
+        </Text>
+
+        <Text style={styles.text} variant="title-large">
+          Title Large
+        </Text>
+        <Text style={styles.text} variant="title-medium">
+          Title Medium
+        </Text>
+        <Text style={styles.text} variant="title-small">
+          Title Small
+        </Text>
+
+        <Text style={styles.text} variant="body-large">
+          Body Large
+        </Text>
+        <Text style={styles.text} variant="body-medium">
+          Body Medium
+        </Text>
+        <Text style={styles.text} variant="body-small">
+          Body Small
+        </Text>
+
+        <Text style={styles.text} variant="label-large">
+          Label Large
+        </Text>
+        <Text style={styles.text} variant="label-medium">
+          Label Medium
+        </Text>
+        <Text style={styles.text} variant="label-small">
+          Label Small
+        </Text>
+      </View>
     </ScreenWrapper>
   );
 };
 
 TextExample.title = 'Typography';
 
 const styles = StyleSheet.create({
+  sectionHeader: {
+    marginTop: 16,
+    marginBottom: 8,
+    opacity: 0.6,
+  },
   container: {
     padding: 16,
   },

diff --git a/example/src/ScreenWrapper.tsx b/example/src/ScreenWrapper.tsx
@@ -32,7 +32,7 @@ export default function ScreenWrapper({
     styles.container,
     {
       backgroundColor: isV3
-        ? md('md.sys.color.background')
+        ? (md('md.sys.color.background') as string)
         : colors?.background,
       paddingBottom: insets.bottom,
       paddingLeft: insets.left,

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -9,8 +9,8 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   Provider as PaperProvider,
   DarkTheme,
-  DefaultTheme,
-  Theme,
+  DefaultTheme as LightTheme,
+  ThemeBase,
 } from 'react-native-paper';
 import App from './RootNavigator';
 import DrawerItems from './DrawerItems';
@@ -34,39 +34,6 @@ declare global {
 const PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const PREFERENCES_KEY = 'APP_PREFERENCES';
 
-const CustomDarkTheme = {
-  ...DarkTheme,
-  colors: {
-    ...DarkTheme.colors,
-    customColor: '#BADA55',
-  },
-  fonts: {
-    ...DarkTheme.fonts,
-    superLight: { ...DarkTheme.fonts['light'] },
-  },
-  animation: {
-    ...DarkTheme.animation,
-    customProperty: 1,
-  },
-};
-
-const CustomDefaultTheme = {
-  ...DefaultTheme,
-  colors: {
-    ...DefaultTheme.colors,
-    customColor: '#BADA55',
-  },
-  fonts: {
-    ...DefaultTheme.fonts,
-    superLight: { ...DefaultTheme.fonts['light'] },
-  },
-  userDefinedThemeProperty: '',
-  animation: {
-    ...DefaultTheme.animation,
-    customProperty: 1,
-  },
-};
-
 export const PreferencesContext = React.createContext<any>(null);
 
 const DrawerContent = () => {
@@ -94,7 +61,7 @@ export default function PaperExample() {
     InitialState | undefined
   >();
 
-  const [theme, setTheme] = React.useState<Theme>(CustomDefaultTheme);
+  const [theme, setTheme] = React.useState<ThemeBase>(LightTheme);
   const [rtl, setRtl] = React.useState<boolean>(I18nManager.isRTL);
 
   React.useEffect(() => {
@@ -124,9 +91,7 @@ export default function PaperExample() {
 
         if (preferences) {
           // eslint-disable-next-line react/no-did-mount-set-state
-          setTheme(
-            preferences.theme === 'dark' ? CustomDarkTheme : CustomDefaultTheme
-          );
+          setTheme(preferences.theme === 'dark' ? DarkTheme : LightTheme);
 
           if (typeof preferences.rtl === 'boolean') {
             setRtl(preferences.rtl);
@@ -166,9 +131,7 @@ export default function PaperExample() {
   const preferences = React.useMemo(
     () => ({
       toggleTheme: () =>
-        setTheme((theme) =>
-          theme === CustomDefaultTheme ? CustomDarkTheme : CustomDefaultTheme
-        ),
+        setTheme((theme) => (theme === LightTheme ? DarkTheme : LightTheme)),
       toggleRtl: () => setRtl((rtl) => !rtl),
       rtl,
       theme,

diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx
@@ -8,9 +8,9 @@ import {
 } from 'react-native';
 
 import { withTheme } from '../../core/theming';
-import Caption from './../Typography/Caption';
-import Title from './../Typography/Title';
 import type { Theme } from '../../types';
+import Caption from '../Typography/v2/Caption';
+import Title from '../Typography/v2/Title';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   /**

diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -101,19 +101,19 @@ const CheckboxAndroid = ({
 
   const checked = status === 'checked';
   const indeterminate = status === 'indeterminate';
-  const checkedColor = rest.color || theme.colors?.accent;
+  const checkedColor = rest.color || theme?.colors?.accent;
   const uncheckedColor =
     rest.uncheckedColor ||
-    color(theme.colors?.text)
+    color(theme?.colors?.text)
       .alpha(theme.dark ? 0.7 : 0.54)
       .rgb()
       .string();
 
   let rippleColor, checkboxColor;
 
   if (disabled) {
-    rippleColor = color(theme.colors?.text).alpha(0.16).rgb().string();
-    checkboxColor = theme.colors?.disabled;
+    rippleColor = color(theme?.colors?.text).alpha(0.16).rgb().string();
+    checkboxColor = theme?.colors?.disabled;
   } else {
     rippleColor = color(checkedColor).fade(0.32).rgb().string();
     checkboxColor = checked ? checkedColor : uncheckedColor;

diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
@@ -62,13 +62,13 @@ const CheckboxIOS = ({
   const indeterminate = status === 'indeterminate';
 
   const checkedColor = disabled
-    ? theme.colors?.disabled
-    : rest.color || theme.colors?.accent;
+    ? theme?.colors?.disabled
+    : rest.color || theme?.colors?.accent;
 
   let rippleColor;
 
   if (disabled) {
-    rippleColor = color(theme.colors?.text).alpha(0.16).rgb().string();
+    rippleColor = color(theme?.colors?.text).alpha(0.16).rgb().string();
   } else {
     rippleColor = color(checkedColor).fade(0.32).rgb().string();
   }

diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
@@ -82,6 +82,7 @@ const PaginationControls = ({
   showFastPaginationControls,
 }: PaginationControlsProps) => {
   const { colors } = useTheme();
+
   return (
     <>
       {showFastPaginationControls ? (
@@ -269,7 +270,7 @@ const DataTablePagination = ({
   selectPageDropdownAccessibilityLabel,
   ...rest
 }: Props) => {
-  const labelColor = color(theme.colors?.text).alpha(0.6).rgb().string();
+  const labelColor = color(theme?.colors?.text).alpha(0.6).rgb().string();
 
   return (
     <View

diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
@@ -98,7 +98,7 @@ const DataTableTitle = ({
     }).start();
   }, [sortDirection, spinAnim]);
 
-  const textColor = color(theme.colors?.text).alpha(0.6).rgb().string();
+  const textColor = color(theme?.colors?.text).alpha(0.6).rgb().string();
 
   const spin = spinAnim.interpolate({
     inputRange: [0, 1],
@@ -110,7 +110,7 @@ const DataTableTitle = ({
       <MaterialCommunityIcon
         name="arrow-up"
         size={16}
-        color={theme.colors?.text || black}
+        color={theme?.colors?.text || black}
         direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
       />
     </Animated.View>

diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, StyleProp, TextStyle } from 'react-native';
-import Title from '../Typography/Title';
+import Title from '../Typography/v2/Title';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 

diff --git a/src/components/FAB/AnimatedFAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB/AnimatedFAB.tsx
@@ -24,7 +24,7 @@ import type {
   TextLayoutEventData,
 } from 'react-native';
 import { white, black } from '../../../styles/themes/v2/colors';
-import AnimatedText from '../../Typography/AnimatedText';
+import AnimatedText from '../../Typography/v2/AnimatedText';
 import { getCombinedStyles } from './utils';
 
 export type AnimatedFABIconMode = 'static' | 'dynamic';
@@ -151,7 +151,7 @@ const AnimatedFAB = ({
     .rgb()
     .string();
 
-  const { backgroundColor = disabled ? disabledColor : theme.colors?.accent } =
+  const { backgroundColor = disabled ? disabledColor : theme?.colors?.accent } =
     StyleSheet.flatten<ViewStyle>(style) || {};
 
   let foregroundColor: string;

diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
@@ -163,7 +163,7 @@ const FAB = ({
     .rgb()
     .string();
 
-  const { backgroundColor = disabled ? disabledColor : theme.colors?.accent } =
+  const { backgroundColor = disabled ? disabledColor : theme?.colors?.accent } =
     (StyleSheet.flatten(style) || {}) as ViewStyle;
 
   let foregroundColor;

diff --git a/src/components/HelperText.tsx b/src/components/HelperText.tsx
@@ -7,7 +7,7 @@ import {
   TextStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import AnimatedText from './Typography/AnimatedText';
+import AnimatedText from './Typography/v2/AnimatedText';
 import { withTheme } from '../core/theming';
 import type { $Omit, Theme } from '../types';
 

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -169,8 +169,11 @@ const ListAccordion = ({
     }
   };
 
-  const titleColor = color(theme.colors?.text).alpha(0.87).rgb().string();
-  const descriptionColor = color(theme.colors?.text).alpha(0.54).rgb().string();
+  const titleColor = color(theme?.colors?.text).alpha(0.87).rgb().string();
+  const descriptionColor = color(theme?.colors?.text)
+    .alpha(0.54)
+    .rgb()
+    .string();
 
   const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
 
@@ -189,7 +192,7 @@ const ListAccordion = ({
       : handlePressAction;
   return (
     <View>
-      <View style={{ backgroundColor: theme.colors?.background }}>
+      <View style={{ backgroundColor: theme?.colors?.background }}>
         <TouchableRipple
           style={[styles.container, style]}
           onPress={handlePress}

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -177,7 +177,7 @@ const ListItem = ({
   };
 
   const renderTitle = () => {
-    const titleColor = color(theme.colors?.text).alpha(0.87).rgb().string();
+    const titleColor = color(theme?.colors?.text).alpha(0.87).rgb().string();
 
     return typeof title === 'function' ? (
       title({
@@ -198,7 +198,10 @@ const ListItem = ({
     );
   };
 
-  const descriptionColor = color(theme.colors?.text).alpha(0.54).rgb().string();
+  const descriptionColor = color(theme?.colors?.text)
+    .alpha(0.54)
+    .rgb()
+    .string();
 
   return (
     <TouchableRipple