From 5bcfd30df6c2682ae5bff6c3aebb5ddd01047691 Mon Sep 17 00:00:00 2001 From: Dimitar Nestorov <8790386+DimitarNestorov@users.noreply.github.com> Date: Fri, 21 Apr 2023 17:53:25 +0300 Subject: [PATCH] PoC: move Props type below component --- src/components/Button/Button.tsx | 202 +++++++++++++++---------------- 1 file changed, 101 insertions(+), 101 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 55a539ecf4..b12eabbf95 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -21,107 +21,6 @@ import TouchableRipple from '../TouchableRipple/TouchableRipple'; import Text from '../Typography/Text'; import { ButtonMode, getButtonColors } from './utils'; -export type Props = $Omit, 'mode'> & { - /** - * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis. - * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options. - * - `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis. - * - `contained` - button with a background color, used for important action, have the most visual impact and high emphasis. - * - `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3 - * - `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3 - */ - mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'; - /** - * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for: - * * `contained` mode for theme version 2 - * * `contained`, `contained-tonal` and `elevated` modes for theme version 3. - */ - dark?: boolean; - /** - * Use a compact look, useful for `text` buttons in a row. - */ - compact?: boolean; - /** - * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead. - * Custom text color for flat button, or background color for contained button. - */ - color?: string; - /** - * Custom button's background color. - */ - buttonColor?: string; - /** - * Custom button's text color. - */ - textColor?: string; - /** - * Whether to show a loading indicator. - */ - loading?: boolean; - /** - * Icon to display for the `Button`. - */ - icon?: IconSource; - /** - * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; - /** - * Label text of the button. - */ - children: React.ReactNode; - /** - * Make the label text uppercased. Note that this won't work if you pass React elements as children. - */ - uppercase?: boolean; - /** - * Accessibility label for the button. This is read by the screen reader when the user taps the button. - */ - accessibilityLabel?: string; - /** - * Accessibility hint for the button. This is read by the screen reader when the user taps the button. - */ - accessibilityHint?: string; - /** - * Function to execute on press. - */ - onPress?: (e: GestureResponderEvent) => void; - /** - * Function to execute as soon as the touchable element is pressed and invoked even before onPress. - */ - onPressIn?: (e: GestureResponderEvent) => void; - /** - * Function to execute as soon as the touch is released even before onPress. - */ - onPressOut?: (e: GestureResponderEvent) => void; - /** - * Function to execute on long press. - */ - onLongPress?: (e: GestureResponderEvent) => void; - /** - * The number of milliseconds a user must touch the element before executing `onLongPress`. - */ - delayLongPress?: number; - /** - * Style of button's inner content. - * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`. - */ - contentStyle?: StyleProp; - style?: Animated.WithAnimatedValue>; - /** - * Style for the button text. - */ - labelStyle?: StyleProp; - /** - * @optional - */ - theme?: ThemeProp; - /** - * testID to be used on tests. - */ - testID?: string; -}; - /** * A button is component that the user can press to trigger an action. * @@ -383,6 +282,107 @@ const Button = ({ ); }; +export type Props = $Omit, 'mode'> & { + /** + * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis. + * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options. + * - `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis. + * - `contained` - button with a background color, used for important action, have the most visual impact and high emphasis. + * - `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3 + * - `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3 + */ + mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal'; + /** + * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for: + * * `contained` mode for theme version 2 + * * `contained`, `contained-tonal` and `elevated` modes for theme version 3. + */ + dark?: boolean; + /** + * Use a compact look, useful for `text` buttons in a row. + */ + compact?: boolean; + /** + * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead. + * Custom text color for flat button, or background color for contained button. + */ + color?: string; + /** + * Custom button's background color. + */ + buttonColor?: string; + /** + * Custom button's text color. + */ + textColor?: string; + /** + * Whether to show a loading indicator. + */ + loading?: boolean; + /** + * Icon to display for the `Button`. + */ + icon?: IconSource; + /** + * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch. + */ + disabled?: boolean; + /** + * Label text of the button. + */ + children: React.ReactNode; + /** + * Make the label text uppercased. Note that this won't work if you pass React elements as children. + */ + uppercase?: boolean; + /** + * Accessibility label for the button. This is read by the screen reader when the user taps the button. + */ + accessibilityLabel?: string; + /** + * Accessibility hint for the button. This is read by the screen reader when the user taps the button. + */ + accessibilityHint?: string; + /** + * Function to execute on press. + */ + onPress?: (e: GestureResponderEvent) => void; + /** + * Function to execute as soon as the touchable element is pressed and invoked even before onPress. + */ + onPressIn?: (e: GestureResponderEvent) => void; + /** + * Function to execute as soon as the touch is released even before onPress. + */ + onPressOut?: (e: GestureResponderEvent) => void; + /** + * Function to execute on long press. + */ + onLongPress?: (e: GestureResponderEvent) => void; + /** + * The number of milliseconds a user must touch the element before executing `onLongPress`. + */ + delayLongPress?: number; + /** + * Style of button's inner content. + * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`. + */ + contentStyle?: StyleProp; + style?: Animated.WithAnimatedValue>; + /** + * Style for the button text. + */ + labelStyle?: StyleProp; + /** + * @optional + */ + theme?: ThemeProp; + /** + * testID to be used on tests. + */ + testID?: string; +}; + const styles = StyleSheet.create({ button: { minWidth: 64,