chore(buttons): wrapped disalbed color generation in useMemo

Author: computools-anastasiia-nahaiska

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

@@ -17,6 +17,6 @@ export const ElevatedButton: React.FC<CommonButtonProps> = ({titleStyle, style,
       ),
     [props.disabled]
   );
-  console.log(colorStyles.container);
+
   return <CommonButton style={[colorStyles.container, styles.container, style]} titleStyle={[colorStyles.title, titleStyle]} {...props} />;
 };

src/buttons/icon-buttons/filled-icon-button/FilledIconButton.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
 import {type IconButtonProps} from '../icon-button.types';
@@ -9,8 +9,10 @@ import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 export const FilledIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, style, ...props}) => {
   const {primary, surface, surfaceContainer} = useTheme();
 
-  const disabledIconColor = convertToRGBA(surface.text as ColorValue, 0.38);
-  const disabledContainerColor = convertToRGBA(surface.text as ColorValue, 0.12);
+  const [disabledIconColor, disabledContainerColor] = useMemo(
+    () => [convertToRGBA(surface.text as ColorValue, 0.38), convertToRGBA(surface.text as ColorValue, 0.12)],
+    [surface.text]
+  );
 
   const [activeContainerColor, activeIconColor, IconComponent] = selected
     ? [primary.background, primary.text, selectedIcon ?? Icon]

src/buttons/icon-buttons/outlined-icon-button/OutlinedIconButton.component.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
-import {type ColorValue} from 'src/theme/theme.types';
 import {type IconButtonProps} from '../icon-button.types';
+import {type ColorValue} from '../../../theme/theme.types';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 
 export const OutlinedIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, style, ...props}) => {
   const {surface, outline} = useTheme();
 
-  const disabledIconColor = convertToRGBA(surface.text as ColorValue, 0.38);
-  const disabledContainerColor = convertToRGBA(surface.text as ColorValue, 0.12);
-  const appliedDisabledContainerColor = selected ? convertToRGBA(surface.text as ColorValue, 0.12) : 'transparent';
+  const [disabledIconColor, disabledContainerColor] = useMemo(
+    () => [convertToRGBA(surface.text as ColorValue, 0.38), convertToRGBA(surface.text as ColorValue, 0.12)],
+    [surface.text]
+  );
 
+  const appliedDisabledContainerColor = selected ? disabledContainerColor : 'transparent';
   const [activeContainerColor, activeIconColor, activeBorderColor, IconComponent] = selected
     ? [surface.backgroundInverse, surface.textInverse, surface.backgroundInverse, selectedIcon ?? Icon]
     : ['transparent', surface.textVariant, outline, Icon];

src/buttons/icon-buttons/standart-icon-button/StandardIconButton.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
 import {type IconButtonProps} from '../icon-button.types';
@@ -9,7 +9,7 @@ import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 export const StandartIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, ...props}) => {
   const {primary, surface} = useTheme();
 
-  const disabledIconColor = convertToRGBA(surface.text as ColorValue, 0.38);
+  const disabledIconColor = useMemo(() => convertToRGBA(surface.text as ColorValue, 0.38), [surface.text]);
 
   const [iconColor, IconComponent] = selected ? [primary.background, selectedIcon ?? Icon] : [surface.textVariant, Icon];
 

src/buttons/icon-buttons/tonal-icon-button/TonalIconButton.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
 import {type IconButtonProps} from '../icon-button.types';
@@ -9,8 +9,10 @@ import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 export const TonalIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, style, ...props}) => {
   const {surfaceContainer, surface, secondaryContainer} = useTheme();
 
-  const disabledIconColor = convertToRGBA(surface.text as ColorValue, 0.38);
-  const disabledContainerColor = convertToRGBA(surface.text as ColorValue, 0.12);
+  const [disabledIconColor, disabledContainerColor] = useMemo(
+    () => [convertToRGBA(surface.text as ColorValue, 0.38), convertToRGBA(surface.text as ColorValue, 0.12)],
+    [surface.text]
+  );
 
   const [activeContainerColor, activeIconColor, IconComponent] = selected
     ? [secondaryContainer.background, secondaryContainer.text, selectedIcon ?? Icon]