feat(label): separate textstyle props

Author: minheq

docs/CustomizeTheme.mdx

@@ -67,6 +67,7 @@ import { ThemeProvider } from 'paramount-ui'
     getContainerStyles?: GetContainerStyles;
     getRowStyles?: GetRowStyles;
     getTextInputStyles?: GetIconTextInputStyles;
+    getLabelStyles?: GetLabelStyles;
     getListItemStyles?: GetListItemStyles;
     getOverlayStyles?: GetOverlayStyles;
     getPickerButtonStyles?: GetPickerButtonStyles;

src/components/Form/FormField.tsx

@@ -72,7 +72,7 @@ export const FormField = (props: FormFieldProps) => {
 
   const labelContent = (
     <View style={labelWrapperStyle}>
-      <Label getStyles={() => ({ textStyle: labelTextStyle })}>{label}</Label>
+      <Label getStyles={() => ({ labelStyle: labelTextStyle })}>{label}</Label>
     </View>
   );
 

src/components/Typography/Label.mdx

@@ -28,15 +28,15 @@ Composes `Text`
 Using `getStyles` prop
 
 ```
-TextStyles {
-  textStyle: TextStyle;
+LabelStyles {
+  labelStyle: LabelStyle;
 }
 
-getStyles={(TextProps, Theme) => TextStyles}
+getStyles={(LabelProps, Theme) => LabelStyles}
 ```
 
 Markup
 
 ```tsx
-<Text textStyle />
+<Text labelStyle />
 ```

src/components/Typography/Label.styles.ts

@@ -0,0 +1,18 @@
+import { TextStyle } from 'react-native';
+
+import { Theme } from '../../theme/Theme';
+import { LabelProps } from './Label';
+import { getTextStyles } from './Text.styles';
+
+export interface LabelStyles {
+  labelStyle: TextStyle;
+}
+
+export type GetLabelStyles = (props: LabelProps, theme: Theme) => LabelStyles;
+
+export const getLabelStyles: GetLabelStyles = (props, theme) => {
+  const { getStyles, ...rest } = props;
+  const { textStyle } = getTextStyles(rest, theme);
+
+  return { labelStyle: textStyle };
+};

src/components/Typography/Label.tsx

@@ -1,15 +1,34 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
+import { useTheme } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import { GetLabelStyles, getLabelStyles, LabelStyles } from './Label.styles';
 import { Text, TextProps } from './Text';
 
-export const Label = (props: TextProps) => {
-  const { children, ...textProps } = props;
+// tslint:disable-next-line
+// @ts-ignore
+export interface LabelProps extends TextProps {
+  /** Callback to get element styles. */
+  getStyles?: ReplaceReturnType<GetLabelStyles, DeepPartial<LabelStyles>>;
+}
+
+export const Label = (props: LabelProps) => {
+  const { children, getStyles, ...textProps } = props;
+  const theme = useTheme();
+
+  const { labelStyle } = mergeStyles(
+    getLabelStyles,
+    getStyles,
+    theme.components.getLabelStyles,
+  )(props, theme);
 
   return (
     <Text
       // @ts-ignore
       accessibilityRole={Platform.OS === 'web' ? 'label' : 'none'}
+      getStyles={() => ({ textStyle: labelStyle })}
       {...textProps}
     >
       {children}

src/theme/Theme.tsx

@@ -31,6 +31,7 @@ import { GetTabStyles } from '../components/Tabs/Tab.styles';
 import { GetTabsStyles } from '../components/Tabs/Tabs.styles';
 import { GetToastStyles } from '../components/Toast/Toast.styles';
 import { GetHeadingStyles } from '../components/Typography/Heading.styles';
+import { GetLabelStyles } from '../components/Typography/Label.styles';
 import { GetParagraphStyles } from '../components/Typography/Paragraph.styles';
 import { GetTextStyles } from '../components/Typography/Text.styles';
 import { defaultTheme } from './defaultTheme';
@@ -273,6 +274,7 @@ export interface Theme {
     getContainerStyles?: GetContainerStyles;
     getRowStyles?: GetRowStyles;
     getTextInputStyles?: GetTextInputStyles;
+    getLabelStyles?: GetLabelStyles;
     getListItemStyles?: GetListItemStyles;
     getOverlayStyles?: GetOverlayStyles;
     getPickerButtonStyles?: GetPickerButtonStyles;

tests/__snapshots__/snapshot.test.js.snap

@@ -16150,11 +16150,11 @@ exports[`Label_2 1`] = `<div />`;
 exports[`Label_3 1`] = `
 <pre>
   <code>
-    TextStyles {
-  textStyle: TextStyle;
+    LabelStyles {
+  labelStyle: LabelStyle;
 }
 
-getStyles={(TextProps, Theme) =&gt; TextStyles}
+getStyles={(LabelProps, Theme) =&gt; LabelStyles}
 
   </code>
 </pre>
@@ -16165,7 +16165,7 @@ exports[`Label_4 1`] = `
   <code
     className="language-tsx"
   >
-    &lt;Text textStyle /&gt;
+    &lt;Text labelStyle /&gt;
 
   </code>
 </pre>