Merge branch 'buttons' into 'main'

Buttons

See merge request react-native/react-native-material-components!14

Author: computools-anastasiia-nahaiska

README.md

@@ -212,6 +212,92 @@ export const AppBodyLargeText: React.FC<PropsWithChildren> = ({children}) => {
 ![linear activity indicator gif](https://ik.imagekit.io/Computools/rn-material-components/linear-indicator-gif.gif?updatedAt=1705066319092)
 </details>
 </details>
+<details><summary>Buttons</summary>
+<br />
+<details><summary>Common buttons</summary>
+<br />
+
+**Components**
+
+- ```TextButton```
+- ```FilledButton```
+- ```OutlinedButton```
+- ```ElevatedButton```
+- ```TonalButton```
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| title | required | string | - |
+| StartIcon | - | React.FC<T> | - |
+| EndIcon | - | React.FC<T> | - |
+| iconProps | - | T | - |
+| titleStyle | - | StyleProp<TextStyle | - |
+
+![common buttons](https://ik.imagekit.io/Computools/rn-material-components/common_buttons.png?updatedAt=1730123562488)
+</details>
+<details><summary>Icon buttons</summary>
+<br />
+
+**Components**
+
+- ```StandartIconButton```
+- ```FilledIconButton```
+- ```OutlinedIconButton```
+- ```TonalIconButton```
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| Icon | required | React.FC<T> | - |
+| size | - | number | - |
+| selectedIcon | - | React.FC<T> | - |
+| selected | - | boolean | false |
+| iconProps | - | T | - |
+
+![icon buttons](https://ik.imagekit.io/Computools/rn-material-components/icon_buttons.png?updatedAt=1730123727799)
+</details>
+<details><summary>Floatin action button</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| type | PRIMARY, SECONDARY, TERTIARY, SURRFACE | FloatingActionButtonType | PRIMARY |
+| label | - | string | - |
+| extended | Enables control over label visibility with animation. If set to true, the label remains constantly visible; otherwise, it appears or hides with an animation based on specific conditions | true | - |
+| size | SMALL, BIG | FloatingActionButtonSize | SMALL |
+| iconProps | - | T | - |
+| Icon | - | React.FC<T> | - |
+| labelStyle | - | StyleProp<TextStyle> | - |
+
+![fab](https://ik.imagekit.io/Computools/rn-material-components/fab.gif?updatedAt=1730123868550)
+</details>
+<details><summary>Segmented button</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| segments | required |  ButtonSegment<T, U>[] | - |
+| selected | required | T[] | - |
+| onSegmentPress | required |(value: T[] | ((currValues: T[]) => T[])) => void | - |
+| disabled | - | boolean | false |
+| multiSelectionEnabled | - | boolean | false |
+| withCheckmark |  Enables control over checkmark visibility with selected segment. | boolean | true |
+| iconSize | - | number | 18 |
+| iconColor | - | ColorValue | - |
+| iconColor | - | ColorValue | - |
+| rippleColor | - | ColorValue | - |
+| labelStyle | - | StyleProp<TextStyle> | - |
+
+![segmented buttons](https://ik.imagekit.io/Computools/rn-material-components/segmented_button_single.gif?updatedAt=1730123815131)
+</details>
+</details>
 <details><summary>Cards</summary>
 <br />
 <details><summary>Filled Card</summary>

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

@@ -0,0 +1,39 @@
+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<T extends IconProps> extends TouchableOpacityProps {
+  title: string;
+
+  titleStyle?: StyleProp<TextStyle>;
+  StartIcon?: React.FC<T>;
+  EndIcon?: React.FC<T>;
+  iconProps?: T;
+}
+
+const DEFAULT_ICON_SIZE = 18;
+
+export const CommonButton = <T extends IconProps>({
+  title,
+  StartIcon,
+  EndIcon,
+  titleStyle,
+  iconProps = {} as T,
+  style,
+  ...props
+}: CommonButtonProps<T>) => {
+  const {labelLarge} = useTypography();
+
+  const containerPaddingStart = StartIcon || EndIcon ? 16 : 24;
+
+  return (
+    <TouchableOpacity style={[styles.container, {paddingStart: containerPaddingStart}, style]} hitSlop={16} {...props}>
+      {StartIcon && <StartIcon size={DEFAULT_ICON_SIZE} {...iconProps} />}
+      <Text style={[labelLarge, titleStyle]}>{title}</Text>
+      {EndIcon && <EndIcon size={DEFAULT_ICON_SIZE} {...iconProps} />}
+    </TouchableOpacity>
+  );
+};

src/buttons/common-buttons/common-button/common-button.styles.ts

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+
+    paddingVertical: 10,
+    paddingEnd: 24,
+    paddingStart: 16,
+    borderRadius: 100,
+  },
+});

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

@@ -0,0 +1,34 @@
+import React, {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+
+import {styles} from './elevated-button.styles';
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
+import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
+
+export const ElevatedButton = <T extends IconProps>({titleStyle, style, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
+  const {primary, surface, shadow, surfaceContainer} = useTheme();
+
+  const colorStyles = useMemo(
+    () =>
+      StyleSheet.create(
+        props.disabled
+          ? {
+              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]}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
+      {...props}
+    />
+  );
+};

src/buttons/common-buttons/elevated-button/elevated-button.styles.ts

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+});

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

@@ -0,0 +1,33 @@
+import React, {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
+import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
+
+export const FilledButton = <T extends IconProps>({style, titleStyle, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
+  const {primary, surface} = useTheme();
+
+  const colorStyles = useMemo(
+    () =>
+      StyleSheet.create(
+        props.disabled
+          ? {
+              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]}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,31 @@
+import React, {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+
+import {styles} from './outlined-button.styles';
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
+import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
+
+export const OutlinedButton = <T extends IconProps>({titleStyle, style, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
+  const {primary, outline, surface} = useTheme();
+
+  const colorStyles = useMemo(
+    () =>
+      StyleSheet.create(
+        props.disabled
+          ? {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
+      titleStyle={[colorStyles.title, titleStyle]}
+      style={[styles.container, colorStyles.container, style]}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
+      {...props}
+    />
+  );
+};

src/buttons/common-buttons/outlined-button/outlined-button.styles.ts

@@ -0,0 +1,7 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+  },
+});

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

@@ -0,0 +1,21 @@
+import React, {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
+import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
+
+export const TextButton = <T extends IconProps>({titleStyle, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
+  const {primary, surface} = useTheme();
+
+  const colorStyles = useMemo(
+    () =>
+      StyleSheet.create({
+        title: {color: props.disabled ? convertToRGBA(surface.text as string, 0.38) : primary.background},
+      }),
+    [props.disabled]
+  );
+
+  return <CommonButton titleStyle={[colorStyles.title, titleStyle]} iconProps={{color: colorStyles.title.color, ...iconProps}} {...props} />;
+};

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

@@ -0,0 +1,33 @@
+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';
+import {type IconProps} from '../../../icons/icon-props';
+
+export const TonalButton = <T extends IconProps>({titleStyle, style, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
+  const {secondaryContainer, surface} = useTheme();
+
+  const colorStyles = useMemo(
+    () =>
+      StyleSheet.create(
+        props.disabled
+          ? {
+              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]}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
+      {...props}
+    />
+  );
+};