fix: cant change button text color by font

Signed-off-by: Bibazavr <[email protected]>
lad-tech · Feb 2, 2024 · 878512a · 878512a
1 parent 3b31c6c
commit 878512a
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 53 deletions.
diff --git a/packages/calendar/src/Calendar/__tests__/__snapshots__/ModalCalendar.test.tsx.snap b/packages/calendar/src/Calendar/__tests__/__snapshots__/ModalCalendar.test.tsx.snap
@@ -4532,15 +4532,14 @@ exports[`ModalCalendar bottomView IButtonView.large 1`] = `
           style={
             [
               {
-                "color": "#FFF",
+                "color": "#2B78EE",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 27,
                 "lineHeight": 33,
                 "minHeight": 33,
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -4607,7 +4606,6 @@ exports[`ModalCalendar bottomView IButtonView.large 1`] = `
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -9141,7 +9139,6 @@ exports[`ModalCalendar bottomView IButtonView.small onAcceptDateRangeChange 1`]
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 6,
                 },
                 undefined,
@@ -13675,7 +13672,6 @@ exports[`ModalCalendar bottomView IButtonView.small onDateRangeChange 1`] = `
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 6,
                 },
                 undefined,
@@ -27154,15 +27150,14 @@ exports[`ModalCalendar renders correctly initialRange only fromDate isShowToday
           style={
             [
               {
-                "color": "#FFF",
+                "color": "#2B78EE",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 27,
                 "lineHeight": 33,
                 "minHeight": 33,
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -27229,7 +27224,6 @@ exports[`ModalCalendar renders correctly initialRange only fromDate isShowToday
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,

diff --git a/packages/core/src/cta/components/Button/Button.tsx b/packages/core/src/cta/components/Button/Button.tsx
@@ -11,6 +11,7 @@ import Counter from '../../../other/components/Badge/Counter/Counter';
 
 import {IButtonProps, IButtonSize, IButtonTypes} from './types';
 import stylesCreate from './stylesCreate';
+import {getDefaultFont} from './getDefaultFont';
 
 const Button = forwardRef<ITouchableOpacity, IButtonProps>((props, ref) => {
   const {
@@ -36,8 +37,7 @@ const Button = forwardRef<ITouchableOpacity, IButtonProps>((props, ref) => {
     Boolean(text),
   );
 
-  const defaultFont =
-    size === IButtonSize.small ? 'SemiBold-White-XS' : 'SemiBold-White-L';
+  const defaultFont = getDefaultFont(size, type);
 
   const counterSize =
     size === IButtonSize.small ? ICounterSize.small : ICounterSize.medium;

diff --git a/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -55,7 +55,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly 1`] = `
         },
         [
           {
-            "color": "#FFF",
             "paddingHorizontal": 9,
           },
           undefined,
@@ -124,7 +123,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly 2`] = `
         },
         [
           {
-            "color": "#FFF",
             "paddingHorizontal": 6,
           },
           undefined,
@@ -413,7 +411,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly left icon size large 1
         },
         [
           {
-            "color": "#FFF",
             "paddingHorizontal": 9,
           },
           undefined,
@@ -484,7 +481,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly left icon size small 1
         },
         [
           {
-            "color": "#FFF",
             "paddingHorizontal": 6,
           },
           undefined,
@@ -1594,7 +1590,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly text 1`] = `
         },
         [
           {
-            "color": "#FFF",
             "paddingHorizontal": 6,
           },
           undefined,

diff --git a/packages/core/src/cta/components/Button/getDefaultFont.tsx b/packages/core/src/cta/components/Button/getDefaultFont.tsx
@@ -0,0 +1,35 @@
+import {TypographyProp} from '../../../typography';
+
+import {IButtonSize, IButtonTypes} from './types';
+
+export const getDefaultFont = (
+  size: IButtonSize,
+  type: IButtonTypes,
+): TypographyProp => {
+  let defaultButtonFont = 'SemiBold';
+
+  switch (type) {
+    case IButtonTypes.primary:
+    case IButtonTypes.disabled:
+    case IButtonTypes.destructive:
+    case IButtonTypes.loading:
+      defaultButtonFont += '-White';
+      break;
+    case IButtonTypes.secondary:
+    case IButtonTypes.tertiary:
+      defaultButtonFont += '-Accent';
+  }
+
+  switch (size) {
+    case IButtonSize.small:
+      defaultButtonFont += '-XS';
+      break;
+    case IButtonSize.large:
+    case IButtonSize.fixed:
+    default:
+      defaultButtonFont += '-L';
+      break;
+  }
+
+  return defaultButtonFont as TypographyProp;
+};
diff --git a/packages/core/src/cta/components/Button/stylesCreate.ts b/packages/core/src/cta/components/Button/stylesCreate.ts
@@ -84,7 +84,6 @@ const primaryStyle = ({
     },
 
     text: {
-      color: colors.TextWhite,
       paddingHorizontal:
         size === IButtonSize.small ? theme.spaces.Space4 : theme.spaces.Space6,
     },
@@ -103,11 +102,10 @@ const secondaryStyle = ({
 }: IButtonContents) => {
   const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text});
   const {
-    colors: {CtaBtnSecondary, TextAccent},
+    colors: {CtaBtnSecondary},
   } = theme;
 
   defaultStyles.container.backgroundColor = CtaBtnSecondary;
-  defaultStyles.text.color = TextAccent;
 
   return defaultStyles;
 };
@@ -120,12 +118,8 @@ const tertiaryStyle = ({
   text,
 }: IButtonContents) => {
   const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text});
-  const {
-    colors: {TextAccent},
-  } = theme;
 
   defaultStyles.container.backgroundColor = 'transparent';
-  defaultStyles.text.color = TextAccent;
 
   return defaultStyles;
 };
@@ -139,11 +133,10 @@ const disabledStyle = ({
 }: IButtonContents) => {
   const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text});
   const {
-    colors: {CtaBtnMuted, TextWhite},
+    colors: {CtaBtnMuted},
   } = theme;
 
   defaultStyles.container.backgroundColor = CtaBtnMuted;
-  defaultStyles.text.color = TextWhite;
 
   return defaultStyles;
 };
@@ -157,11 +150,10 @@ const destructiveStyle = ({
 }: IButtonContents) => {
   const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text});
   const {
-    colors: {CtaBtnDestructive, TextWhite},
+    colors: {CtaBtnDestructive},
   } = theme;
 
   defaultStyles.container.backgroundColor = CtaBtnDestructive;
-  defaultStyles.text.color = TextWhite;
 
   return defaultStyles;
 };

diff --git a/...c/popups/components/ModalBase/__tests__/__snapshots__/HorizontalButtonsView.test.tsx.snap b/...c/popups/components/ModalBase/__tests__/__snapshots__/HorizontalButtonsView.test.tsx.snap
@@ -65,7 +65,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
           },
           [
             {
-              "color": "#FFF",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -132,7 +131,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
           },
           [
             {
-              "color": "#FFF",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -211,7 +209,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
           },
           [
             {
-              "color": "#FFF",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -278,7 +275,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
           },
           [
             {
-              "color": "#FFF",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -349,15 +345,14 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
       style={
         [
           {
-            "color": "#FFF",
+            "color": "#2B78EE",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 27,
             "lineHeight": 33,
             "minHeight": 33,
           },
           [
             {
-              "color": "#2B78EE",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -416,15 +411,14 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
       style={
         [
           {
-            "color": "#FFF",
+            "color": "#2B78EE",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 27,
             "lineHeight": 33,
             "minHeight": 33,
           },
           [
             {
-              "color": "#2B78EE",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -495,15 +489,14 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
       style={
         [
           {
-            "color": "#FFF",
+            "color": "#2B78EE",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 27,
             "lineHeight": 33,
             "minHeight": 33,
           },
           [
             {
-              "color": "#2B78EE",
               "paddingHorizontal": 9,
             },
             undefined,
@@ -562,15 +555,14 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu
       style={
         [
           {
-            "color": "#FFF",
+            "color": "#2B78EE",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 27,
             "lineHeight": 33,
             "minHeight": 33,
           },
           [
             {
-              "color": "#2B78EE",
               "paddingHorizontal": 9,
             },
             undefined,

diff --git a/...src/popups/components/ModalBase/__tests__/__snapshots__/VerticalButtonsView.test.tsx.snap b/...src/popups/components/ModalBase/__tests__/__snapshots__/VerticalButtonsView.test.tsx.snap
@@ -64,7 +64,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly VerticalButt
           },
           [
             {
-              "color": "#FFF",
               "paddingHorizontal": 9,
             },
             undefined,

diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap
@@ -209,15 +209,14 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly 1`] = `
           style={
             [
               {
-                "color": "#FFF",
+                "color": "#2B78EE",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 27,
                 "lineHeight": 33,
                 "minHeight": 33,
               },
               [
                 {
-                  "color": "#2B78EE",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -284,7 +283,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly 1`] = `
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -517,7 +515,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly with optional
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -584,7 +581,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly with optional
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,

diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap
@@ -216,7 +216,6 @@ exports[`@lad-tech/mobydick-core/modalError should renders correctly 1`] = `
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ -448,7 +447,6 @@ exports[`@lad-tech/mobydick-core/modalError should renders correctly with option
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
-Original file line number
+Diff line change
@@ Expand Up @@
               },
               [
                 {
-                  "color": "#FFF",
                   "paddingHorizontal": 9,
                 },
                 undefined,
@@ Expand Down @@