feat(buttons): implemented icon buttons

Author: computools-anastasiia-nahaiska

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

@@ -12,7 +12,7 @@ export const OutlinedButton: React.FC<CommonButtonProps> = ({titleStyle, style,
     () =>
       StyleSheet.create(
         props.disabled
-          ? {title: {opacity: 0.38, color: surface.text}, container: {opacity: 0.12, borderColor: surface.text}}
+          ? {title: {opacity: 0.38, color: surface.text}, container: {borderColor: surface.text}}
           : {title: {color: primary.background}, container: {borderColor: outline}}
       ),
     [props.disabled]

src/buttons/icon-buttons/base-icon-button/BaseIconButton.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {TouchableOpacity, type TouchableOpacityProps} from 'react-native';
+
+import {type IconProps} from '../../../types/icon-props.type';
+import {getIconButtonFrameStyles, styles} from './base-icon-button.styles';
+
+export interface BaseIconButtonProps extends TouchableOpacityProps {
+  Icon: React.FC<IconProps>;
+
+  size?: number;
+  iconProps?: IconProps;
+}
+
+const DEFAULT_SIZE = 40;
+const ICON_SIZE_COEFF = 0.6;
+
+export const BaseIconButton: React.FC<BaseIconButtonProps> = ({Icon, size = DEFAULT_SIZE, iconProps, style, ...props}) => (
+  <TouchableOpacity style={[styles.container, getIconButtonFrameStyles(size), style]} hitSlop={8} {...props}>
+    <Icon size={size * ICON_SIZE_COEFF} {...iconProps} />
+  </TouchableOpacity>
+);

src/buttons/icon-buttons/base-icon-button/base-icon-button.styles.ts

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const getIconButtonFrameStyles = (size: number) =>
+  StyleSheet.create({
+    container: {
+      width: size,
+      height: size,
+      borderRadius: size * 0.5,
+    },
+  }).container;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+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 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 [activeContainerColor, activeIconColor, IconComponent] = selected
+    ? [primary.background, primary.text, selectedIcon ?? Icon]
+    : [surfaceContainer.backgroundHighest, primary.background, Icon];
+  const [appliedContainerColor, appliedIconColor] = props.disabled
+    ? [disabledContainerColor, disabledIconColor]
+    : [activeContainerColor, activeIconColor];
+
+  return (
+    <BaseIconButton style={[{backgroundColor: appliedContainerColor}, style]} Icon={IconComponent} iconProps={{color: appliedIconColor}} {...props} />
+  );
+};

src/buttons/icon-buttons/icon-button.types.ts

@@ -0,0 +1,7 @@
+import type {IconProps} from '../../icons/icon-props';
+import type {BaseIconButtonProps} from './base-icon-button/BaseIconButton.component';
+
+export interface IconButtonProps extends BaseIconButtonProps {
+  selected?: boolean;
+  selectedIcon?: React.FC<IconProps>;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type ColorValue} from 'src/theme/theme.types';
+import {type IconButtonProps} from '../icon-button.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 [activeContainerColor, activeIconColor, activeBorderColor, IconComponent] = selected
+    ? [surface.backgroundInverse, surface.textInverse, surface.backgroundInverse, selectedIcon ?? Icon]
+    : ['transparent', surface.textVariant, outline, Icon];
+  const [appliedContainerColor, appliedIconColor, appliedBorderColor] = props.disabled
+    ? [appliedDisabledContainerColor, disabledIconColor, disabledContainerColor]
+    : [activeContainerColor, activeIconColor, activeBorderColor];
+
+  return (
+    <BaseIconButton
+      style={[{backgroundColor: appliedContainerColor, borderColor: appliedBorderColor, borderWidth: Number(!selected)}, style]}
+      Icon={IconComponent}
+      iconProps={{color: appliedIconColor}}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+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 StandartIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, ...props}) => {
+  const {primary, surface} = useTheme();
+
+  const disabledIconColor = convertToRGBA(surface.text as ColorValue, 0.38);
+
+  const [iconColor, IconComponent] = selected ? [primary.background, selectedIcon ?? Icon] : [surface.textVariant, Icon];
+
+  return <BaseIconButton Icon={IconComponent} iconProps={{color: props.disabled ? disabledIconColor : iconColor}} {...props} />;
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+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 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 [activeContainerColor, activeIconColor, IconComponent] = selected
+    ? [secondaryContainer.background, secondaryContainer.text, selectedIcon ?? Icon]
+    : [surfaceContainer.backgroundHighest, surface.textVariant, Icon];
+  const [appliedContainerColor, appliedIconColor] = props.disabled
+    ? [disabledContainerColor, disabledIconColor]
+    : [activeContainerColor, activeIconColor];
+
+  return (
+    <BaseIconButton style={[{backgroundColor: appliedContainerColor}, style]} Icon={IconComponent} iconProps={{color: appliedIconColor}} {...props} />
+  );
+};

src/theme/theme.types.ts

@@ -1,8 +1,8 @@
 import type {ColorValue as RNColorValue} from 'react-native';
 
-type ColorHex = `#${string}`;
-type ColorRgn = `rgb(${number}, ${number}, ${number})`;
-type ColorRgba = `rgba(${number}, ${number}, ${number}, ${number})`;
+export type ColorHex = `#${string}`;
+export type ColorRgn = `rgb(${number}, ${number}, ${number})`;
+export type ColorRgba = `rgba(${number}, ${number}, ${number}, ${number})`;
 
 export type ColorValue = ColorHex | ColorRgn | ColorRgba;
 

src/types/icon-props.type.ts

@@ -0,0 +1,10 @@
+import {type ColorValue} from 'react-native';
+
+export interface IconProps extends BaseIconProps {
+  [key: string]: any;
+}
+
+export interface BaseIconProps {
+  size?: number;
+  color?: ColorValue;
+}