Merge pull request #215 from ZeroGachis/fix/rew-315-datefield-error-b…

…ackground-color Fix/rew 315 datefield error background color
ZeroGachis · Mar 22, 2024 · 439c071 · 439c071
2 parents c74580c + 7ac6017
commit 439c071
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 68 deletions.
diff --git a/Storybook/components/Colors/Colors.stories.tsx b/Storybook/components/Colors/Colors.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
-import { ScrollView, Text } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { Badge } from 'react-native-paper';
 import { theme } from '../../../src/styles/themes';
 import { Headline } from 'smartway-react-native-ui';
@@ -13,6 +13,22 @@ export default {
 
 type Story = StoryObj<ComponentProps>;
 
+const ColorItem = ({ token, value, color }) => {
+    return (
+        <View
+            style={{
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                backgroundColor: value,
+                padding: 8,
+            }}
+        >
+            <Text style={{ color }}>{token}</Text>
+            <Text style={{ color }}>{value}</Text>
+        </View>
+    );
+};
+
 export const Default: Story = {
     render: () => {
         const neutral = Object.entries(theme.sw.color.neutral);
@@ -28,110 +44,83 @@ export const Default: Story = {
                 <Headline size='h1'>Neutral</Headline>
                 {neutral.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 300 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 300 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
                 <Headline size='h1'>Primary</Headline>
                 {primary.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 200 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 200 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
                 <Headline size='h1'>Secondary</Headline>
                 {secondary.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 200 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 200 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
                 <Headline size='h1'>Information</Headline>
                 {information.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 400 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 400 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
                 <Headline size='h1'>Success</Headline>
                 {success.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 300 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 300 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
                 <Headline size='h1'>Warning</Headline>
                 {warning.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 500 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 500 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
                 <Headline size='h1'>Error</Headline>
                 {error.map(([key, hex]) => {
                     return (
-                        <Text
-                            style={{
-                                backgroundColor: hex,
-                                padding: 8,
-                                color: Number(key) <= 500 ? '#000' : undefined,
-                            }}
+                        <ColorItem
+                            color={Number(key) <= 500 ? '#000' : undefined}
+                            value={hex}
+                            token={key}
                             key={key}
-                        >
-                            {key}
-                        </Text>
+                        />
                     );
                 })}
             </ScrollView>
         );
     },
 };
+
 Default.parameters = { noSafeArea: false };
diff --git a/src/__tests__/components/__snapshots__/DateField.test.tsx.snap b/src/__tests__/components/__snapshots__/DateField.test.tsx.snap
@@ -257,7 +257,7 @@ exports[`MODULE | DateField component renders correctly in error state 1`] = `
       selectionColor="#18a58629"
       style={
         {
-          "backgroundColor": "#ff563014",
+          "backgroundColor": "#ffe4de",
           "borderColor": undefined,
           "borderRadius": 18,
           "borderWidth": 0,

diff --git a/src/components/dateSelector/DateField.tsx b/src/components/dateSelector/DateField.tsx
@@ -136,9 +136,7 @@ function useDateFieldStyle(
                 break;
             case 'error':
                 textColor = theme.sw.color.error[500];
-                backgroundColor =
-                    // TODO: use new tokens
-                    theme.sw.color.error[500] + '14';
+                backgroundColor = theme.sw.color.error[100];
                 break;
             default:
                 textColor = theme.sw.color.neutral[500];