✨ Label - improve style customization

ZeroGachis · Dec 19, 2023 · 0caa467 · 0caa467
1 parent 9767c9b
commit 0caa467
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/Storybook/components/Label/Label.stories.tsx b/Storybook/components/Label/Label.stories.tsx
@@ -10,8 +10,12 @@ export default {
     component: Label,
     args: {
         type: 'soft',
+        text: 'text',
     },
     argTypes: {
+        text: {
+            control: { type: 'text' },
+        },
         labelColor: {
             control: { type: 'radio' },
             options: [
@@ -32,6 +36,12 @@ export default {
             control: { type: 'radio' },
             options: ['outlined', 'filled', 'soft'],
         },
+        mainColor: {
+            control: 'color',
+        },
+        backgroundColor: {
+            control: 'color',
+        },
     },
 
     decorators: [
@@ -50,9 +60,12 @@ export default {
 
 type Story = StoryObj<LabelProps>;
 
-export const Default: Story = {
-    args: {
-        text: 'text',
-    },
+export const Default: Story = (args) => {
+    const style = {
+        borderColor: args.mainColor,
+        backgroundColor: args.backgroundColor,
+    };
+    const textStyle = { color: args.mainColor };
+    return <Label {...args} style={style} textStyle={textStyle} />;
 };
 Default.parameters = { noSafeArea: false };
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
 import { useTheme } from '../../styles/themes';
 
 import { Body, BodyProps } from '../typography/Body';
@@ -20,14 +20,22 @@ type OptionnalBodyPropsWithoutSizeAndWeight = Partial<
 
 export interface Props extends OptionnalBodyPropsWithoutSizeAndWeight {
     style?: ViewStyle;
+    textStyle?: TextStyle;
     text: string;
     type: LabelType;
     labelColor?: LabelColor;
     size?: 'm' | 's';
 }
 
 export const Label = (props: Props) => {
-    const { style, text, type, labelColor = 'neutral', size = 'm' } = props;
+    const {
+        style,
+        textStyle,
+        text,
+        type,
+        labelColor = 'neutral',
+        size = 'm',
+    } = props;
     const theme = useTheme();
 
     const transparencyValue = theme.sw.transparency[16];
@@ -166,8 +174,9 @@ export const Label = (props: Props) => {
             ...style,
         },
         text: {
-            lineHeight: size == 'm' ? 20 : undefined,
+            lineHeight: size === 'm' ? 20 : undefined,
             color,
+            ...textStyle,
         },
     });
     return (