fix(buttons): fixed common buttons disabled colors

Author: computools-anastasiia-nahaiska

src/buttons/common-buttons/common-button/CommonButton.component.tsx

@@ -1,27 +1,31 @@
-import React, {type ReactNode} from 'react';
+import React from 'react';
 import {TouchableOpacity, Text, type StyleProp, type TextStyle, type TouchableOpacityProps} from 'react-native';
 
 import {styles} from './common-button.styles';
+import {type IconProps} from '../../../icons/icon-props';
 import {useTypography} from '../../../typography/useTypography.component';
 
 export interface CommonButtonProps extends TouchableOpacityProps {
   title: string;
 
-  prepend?: ReactNode;
-  append?: ReactNode;
   titleStyle?: StyleProp<TextStyle>;
+  StartIcon?: React.FC<IconProps>;
+  EndIcon?: React.FC<IconProps>;
+  iconProps?: IconProps;
 }
 
-export const CommonButton: React.FC<CommonButtonProps> = ({title, prepend, append, titleStyle, style, ...props}) => {
+const DEFAULT_ICON_SIZE = 18;
+
+export const CommonButton: React.FC<CommonButtonProps> = ({title, StartIcon, EndIcon, titleStyle, iconProps, style, ...props}) => {
   const {labelLarge} = useTypography();
 
-  const containerPaddingStart = append || prepend ? 16 : 24;
+  const containerPaddingStart = StartIcon || EndIcon ? 16 : 24;
 
   return (
     <TouchableOpacity style={[styles.container, {paddingStart: containerPaddingStart}, style]} hitSlop={16} {...props}>
-      {prepend}
+      {StartIcon && <StartIcon size={DEFAULT_ICON_SIZE} {...iconProps} />}
       <Text style={[labelLarge, titleStyle]}>{title}</Text>
-      {append}
+      {EndIcon && <EndIcon size={DEFAULT_ICON_SIZE} {...iconProps} />}
     </TouchableOpacity>
   );
 };

src/buttons/common-buttons/elevated-button/ElevatedButton.component.tsx

@@ -3,6 +3,7 @@ import {StyleSheet} from 'react-native';
 
 import {styles} from './elevated-button.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
 export const ElevatedButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...props}) => {
@@ -12,11 +13,21 @@ export const ElevatedButton: React.FC<CommonButtonProps> = ({titleStyle, style,
     () =>
       StyleSheet.create(
         props.disabled
-          ? {title: {opacity: 0.38, color: surface.text}, container: {opacity: 0.12, backgroundColor: surface.text}}
+          ? {
+              title: {color: convertToRGBA(surface.text as string, 0.38)},
+              container: {backgroundColor: convertToRGBA(surface.text as string, 0.12)},
+            }
           : {title: {color: primary.background}, container: {backgroundColor: surfaceContainer.backgroundLow, shadowColor: shadow}}
       ),
     [props.disabled]
   );
 
-  return <CommonButton style={[colorStyles.container, styles.container, style]} titleStyle={[colorStyles.title, titleStyle]} {...props} />;
+  return (
+    <CommonButton
+      style={[colorStyles.container, styles.container, style]}
+      titleStyle={[colorStyles.title, titleStyle]}
+      iconProps={{color: colorStyles.title.color}}
+      {...props}
+    />
+  );
 };

src/buttons/common-buttons/filled-button/FilledButton.component.tsx

@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
 export const FilledButton: React.FC<CommonButtonProps> = ({style, titleStyle, ...props}) => {
@@ -11,11 +12,21 @@ export const FilledButton: React.FC<CommonButtonProps> = ({style, titleStyle, ..
     () =>
       StyleSheet.create(
         props.disabled
-          ? {title: {opacity: 0.38, color: surface.text}, container: {opacity: 0.12, backgroundColor: surface.text}}
+          ? {
+              title: {color: convertToRGBA(surface.text as string, 0.38)},
+              container: {backgroundColor: convertToRGBA(surface.text as string, 0.12)},
+            }
           : {title: {color: primary.text}, container: {backgroundColor: primary.background}}
       ),
     [props.disabled]
   );
 
-  return <CommonButton style={[colorStyles.container, style]} titleStyle={[colorStyles.title, titleStyle]} {...props} />;
+  return (
+    <CommonButton
+      style={[colorStyles.container, style]}
+      titleStyle={[colorStyles.title, titleStyle]}
+      iconProps={{color: colorStyles.title.color}}
+      {...props}
+    />
+  );
 };

src/buttons/common-buttons/outlined-button/OutlinedButton.component.tsx

@@ -3,6 +3,7 @@ import {StyleSheet} from 'react-native';
 
 import {styles} from './outlined-button.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
 export const OutlinedButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...props}) => {
@@ -12,11 +13,18 @@ export const OutlinedButton: React.FC<CommonButtonProps> = ({titleStyle, style,
     () =>
       StyleSheet.create(
         props.disabled
-          ? {title: {opacity: 0.38, color: surface.text}, container: {borderColor: surface.text}}
+          ? {title: {color: convertToRGBA(surface.text as string, 0.38)}, container: {borderColor: convertToRGBA(surface.text as string, 0.12)}}
           : {title: {color: primary.background}, container: {borderColor: outline}}
       ),
     [props.disabled]
   );
 
-  return <CommonButton style={[styles.container, colorStyles.container, style]} titleStyle={[colorStyles.title, titleStyle]} {...props} />;
+  return (
+    <CommonButton
+      iconProps={{color: colorStyles.title.color}}
+      titleStyle={[colorStyles.title, titleStyle]}
+      style={[styles.container, colorStyles.container, style]}
+      {...props}
+    />
+  );
 };

src/buttons/common-buttons/text-button/TextButton.component.tsx

@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
 export const TextButton: React.FC<CommonButtonProps> = ({titleStyle, ...props}) => {
@@ -10,10 +11,10 @@ export const TextButton: React.FC<CommonButtonProps> = ({titleStyle, ...props})
   const colorStyles = useMemo(
     () =>
       StyleSheet.create({
-        title: props.disabled ? {color: surface.text, opacity: 0.38} : {color: primary.background},
+        title: {color: props.disabled ? convertToRGBA(surface.text as string, 0.38) : primary.background},
       }),
     [props.disabled]
   );
 
-  return <CommonButton titleStyle={[colorStyles.title, titleStyle]} {...props} />;
+  return <CommonButton titleStyle={[colorStyles.title, titleStyle]} iconProps={{color: colorStyles.title.color}} {...props} />;
 };

src/buttons/common-buttons/tonal-button/TonalButton.component.tsx

@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
 export const TonalButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...props}) => {
@@ -11,11 +12,21 @@ export const TonalButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...
     () =>
       StyleSheet.create(
         props.disabled
-          ? {title: {opacity: 0.38, color: surface.text}, container: {opacity: 0.12, borderColor: surface.text}}
+          ? {
+              title: {color: convertToRGBA(surface.text as string, 0.38)},
+              container: {borderColor: convertToRGBA(surface.text as string, 0.12)},
+            }
           : {title: {color: secondaryContainer.text}, container: {backgroundColor: secondaryContainer.background}}
       ),
     [props.disabled]
   );
 
-  return <CommonButton style={[colorStyles.container, style]} titleStyle={[colorStyles.title, titleStyle]} {...props} />;
+  return (
+    <CommonButton
+      style={[colorStyles.container, style]}
+      titleStyle={[colorStyles.title, titleStyle]}
+      iconProps={{color: colorStyles.title.color}}
+      {...props}
+    />
+  );
 };