From b1de466a523a0f188142f4e52c5eed295e2fb23a Mon Sep 17 00:00:00 2001
From: Enieber Cunha <7907068+enieber@users.noreply.github.com>
Date: Mon, 7 Jun 2021 01:36:19 -0300
Subject: [PATCH 1/2] create documentation of button component

---
 docs/button.md | 133 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 132 insertions(+), 1 deletion(-)

diff --git a/docs/button.md b/docs/button.md
index 43d2865..2b57794 100644
--- a/docs/button.md
+++ b/docs/button.md
@@ -1,5 +1,136 @@
 ---
 id: button
 title: Button
-wip: true
 ---
+
+A basic button component that should render nicely on any platform. Supports a minimal level of customization.
+
+If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity) or [TouchableWithoutFeedback](touchablewithoutfeedback).
+
+```res
+<Button
+  onPress={onPressLearnMore}
+  title="Learn More"
+  color="#841584"
+  accessibilityLabel="Learn more about this purple button"
+/>
+```
+
+## Example
+
+```SnackPlayer name=Button%20Example
+open ReactNative
+
+let styles = {
+  open Style
+  StyleSheet.create({
+    "title": textStyle(~fontSize=24., ~fontWeight=#_600, ()),
+  })
+}
+
+@react.component
+let app = () => {
+  <SafeAreaView>
+    <StatusBar />
+    <ScrollView contentInsetAdjustmentBehavior=#automatic>
+      <Text style={styles["title"]}> {"Button component"->React.string} </Text>
+      <Button
+        onPress={(_) => 
+          Alert.alert(
+            ~title="Button pressed",
+            ~message="The button is pressed and show this alert",
+            (),
+          )
+        }
+        title="Press me"
+        color="#841584"
+        accessibilityLabel="Learn more about this purple button"
+        />
+       <Button
+        title="Press me"
+        color="#f194ff"
+        onPress={(_) => 
+          Alert.alert(
+            ~title="Button pressed",
+            ~message="Button with adjusted color pressed",
+            (),
+          )
+        }
+      />
+    </ScrollView>
+  </SafeAreaView>
+}
+```
+
+---
+
+# Reference
+
+## Props
+
+### <div class="label required basic">Required</div>**`onPress`**
+
+Handler to be called when the user taps the button.
+
+| Type                               |
+| ---------------------------------- |
+| function([PressEvent](pressevent)) |
+
+---
+
+### <div class="label required basic">Required</div>**`title`**
+
+Text to display inside the button. On Android the given title will be converted to the uppercased form.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Text to display for blindness accessibility features.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `color`
+
+Color of the text (iOS), or background color of the button (Android).
+
+| Type            | Default                                                                                                                                                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [color](colors) | <ins style={{background: '#2196F3'}} className="color-box" /> `'#2196F3'` <div className="label android">Android</div><hr/><ins style={{background: '#007AFF'}} className="color-box" /> `'#007AFF'` <div className="label ios">iOS</div> |
+
+---
+
+### `disabled`
+
+If `true`, disable all interactions for this component.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div class="label android">Android</div>
+
+If `true`, doesn't play system sound on touch.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |

From 4c71fa374023132d7fb186aeb3fd53de159c5c2a Mon Sep 17 00:00:00 2001
From: Enieber Cunha <7907068+enieber@users.noreply.github.com>
Date: Mon, 7 Jun 2021 04:43:07 -0300
Subject: [PATCH 2/2] fix: doc button errors find in review

---
 docs/button.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/button.md b/docs/button.md
index 2b57794..b749eaa 100644
--- a/docs/button.md
+++ b/docs/button.md
@@ -1,11 +1,12 @@
 ---
 id: button
 title: Button
+wip: true
 ---
 
 A basic button component that should render nicely on any platform. Supports a minimal level of customization.
 
-If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity) or [TouchableWithoutFeedback](touchablewithoutfeedback).
+If this button doesn't look right for your app, you can build your own button using [Pressable](pressable).
 
 ```res
 <Button
@@ -18,7 +19,7 @@ If this button doesn't look right for your app, you can build your own button us
 
 ## Example
 
-```SnackPlayer name=Button%20Example
+```res
 open ReactNative
 
 let styles = {
@@ -68,17 +69,17 @@ let app = () => {
 
 ## Props
 
-### <div class="label required basic">Required</div>**`onPress`**
+### Required **`onPress`**
 
 Handler to be called when the user taps the button.
 
 | Type                               |
 | ---------------------------------- |
-| function([PressEvent](pressevent)) |
+| function(PressEvent) |
 
 ---
 
-### <div class="label required basic">Required</div>**`title`**
+### Required **`title`**
 
 Text to display inside the button. On Android the given title will be converted to the uppercased form.
 
@@ -104,7 +105,7 @@ Color of the text (iOS), or background color of the button (Android).
 
 | Type            | Default                                                                                                                                                                                                                                   |
 | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [color](colors) | <ins style={{background: '#2196F3'}} className="color-box" /> `'#2196F3'` <div className="label android">Android</div><hr/><ins style={{background: '#007AFF'}} className="color-box" /> `'#007AFF'` <div className="label ios">iOS</div> |
+| colors in hex | 
 
 ---