feat(exoflex): add capability for button to able to change text… (#175)

* feat(exoflex): add capability for button to able to change text preset * docs(exoflex): add `textPreset` to docs
kodefox · Nov 6, 2019 · a7e6706 · a7e6706
1 parent 415de7a
commit a7e6706
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/packages/exoflex/README.md b/packages/exoflex/README.md
@@ -29,6 +29,7 @@ To use this library, it's really advised that you use the `Provider` component t
 
 You can find all available components from links below:
 
+- [Accordion](https://github.com/kodefox/infra/blob/master/packages/exoflex/docs/components/Accordion.md)
 - [ActivityIndicator](https://github.com/kodefox/infra/blob/master/packages/exoflex/docs/components/ActivityIndicator.md)
 - [Button](https://github.com/kodefox/infra/blob/master/packages/exoflex/docs/components/Button.md)
 - [Calendar](https://github.com/kodefox/infra/blob/master/packages/exoflex/docs/components/Calendar.md)

diff --git a/packages/exoflex/docs/components/Button.md b/packages/exoflex/docs/components/Button.md
@@ -10,8 +10,9 @@ Button with three presets. Use within the `Provider` component to be able to cha
 
 | Name           |                                                            Type                                                             |   Default   | Description                                                                                                                                                                                                                                                                                                                 |
 | -------------- | :-------------------------------------------------------------------------------------------------------------------------: | :---------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children\*`   |                                                         `ReactNode`                                                         |             | Label text of the button.                                                                                                                                                                                                                                                                                                   |
+| `children *`   |                                                         `ReactNode`                                                         |             | Label text of the button.                                                                                                                                                                                                                                                                                                   |
 | `preset`       |                                                          `string`                                                           | `'primary'` | Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.<br>- `primary` - button with a background color and elevation shadow (high emphasis)<br>- `secondary` - button with an outline (medium emphasis)<br>- `invisible` - flat button without background or outline (low emphasis) |
+| `textPreset`   |                                                          `string`                                                           |             | Name of font preset that will be used on `Text` componnet inside the `Button`. This prop won't work with custom children.                                                                                                                                                                                                   |
 | `onPress`      |                                                        `() => void`                                                         |             | Function that will be invoked when the `Button` pressed.                                                                                                                                                                                                                                                                    |
 | `disabled`     |                                                          `boolean`                                                          |             | Whether to disable the press functionality.                                                                                                                                                                                                                                                                                 |
 | `loading`      |                                                          `boolean`                                                          |             | Whether to show a loading indicator.                                                                                                                                                                                                                                                                                        |
@@ -21,6 +22,8 @@ Button with three presets. Use within the `Provider` component to be able to cha
 | `style`        |                                                   `StyleProp<ViewStyle>`                                                    |             | Style of button's outer content.                                                                                                                                                                                                                                                                                            |
 | `labelStyle`   |                                                   `StyleProp<TextStyle>`                                                    |             | Style for the button text. This is only work when the children is a string, not a custom component.                                                                                                                                                                                                                         |
 
+Props marked with \* are required.
+
 ### Example
 
 ```tsx

diff --git a/packages/exoflex/src/components/Button.tsx b/packages/exoflex/src/components/Button.tsx
@@ -13,6 +13,7 @@ type ButtonPresets = {
 
 type Props = Omit<ButtonProps, 'theme' | 'mode'> & {
   preset: keyof ButtonPresets;
+  textPreset?: string;
   labelStyle?: StyleProp<TextStyle>;
 };
 
@@ -26,6 +27,7 @@ export default function Button(props: Props) {
   let {
     preset,
     children,
+    textPreset,
     uppercase,
     contentStyle,
     style,
@@ -54,7 +56,7 @@ export default function Button(props: Props) {
       {...buttonProps}
     >
       {typeof children === 'string' ? (
-        <Text weight="500" style={labelStyle}>
+        <Text preset={textPreset} weight="500" style={labelStyle}>
           {uppercase ? children.toUpperCase() : children}
         </Text>
       ) : (