Skip to content

Commit 7d33127

Browse files
authored
docs: sync Button widget properties and add related cross-links (#3030)
## Description - Sync the Button widget reference with the product: add missing **Label styles** (Font color, Font size, Emphasis), rename **Disabled invalid forms** to **Disable when form is invalid**, and fix the Reference properties section heading plus a `setVisibility` typo. - Add cross-links from the Form widget to Button Form settings, and from the Google reCAPTCHA guide to Button Validation properties. ## Pull request type - [ ] Review Fixes - [ ] Documentation Overhaul - [x] Feature/Story - appsmithorg/appsmith#41998 (fixes appsmithorg/appsmith#15065) - [ ] A-Force - [ ] Error in documentation - [ ] Maintenance ## Documentation tickets ## Checklist - [ ] Checked for Grammarly suggestions. - [ ] Adhered to the writing checklist. - [ ] Adhered to the media checklist. - [x] Verified and updated cross-references or added redirect rules. - [x] Tested the redirect rules on deploy preview. - [x] Validated the modifications made to the content on the deploy preview. - [ ] Validated the CSS modifications on different screen sizes.
1 parent d16c8ec commit 7d33127

3 files changed

Lines changed: 32 additions & 9 deletions

File tree

website/docs/reference/widgets/button/README.md

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ Sets the Google reCAPTCHA version to use for the button, either v2 or v3.
9696

9797
Buttons can have some special behaviors when they're located within the boundaries of a [Form widget](/reference/widgets/form). Its form-specific behavior is controlled by two of the button's properties:
9898

99-
#### Disabled invalid forms
99+
#### Disable when form is invalid
100100

101101
<dd>
102102

@@ -174,6 +174,32 @@ This property can be dynamically set using JavaScript by providing a string valu
174174

175175
</dd>
176176

177+
### Label styles
178+
179+
#### Font color `string`
180+
181+
<dd>
182+
183+
Sets the text color of the button label. Additionally, you can programmatically modify the text color using JavaScript functions.
184+
185+
</dd>
186+
187+
#### Font size `string`
188+
189+
<dd>
190+
191+
Controls the font size of the button label. Additionally, you can programmatically modify the text size using JavaScript functions.
192+
193+
</dd>
194+
195+
#### Emphasis `string`
196+
197+
<dd>
198+
199+
Allows you to choose a font style for the button label, such as bold or italic. Additionally, you can programmatically modify the font style using JavaScript functions.
200+
201+
</dd>
202+
177203
### Color
178204

179205
#### Button color `string`
@@ -204,11 +230,9 @@ This property adds a drop shadow effect to the frame of the widget. If JavaScrip
204230

205231
</dd>
206232

233+
## Reference properties
207234

208-
209-
### Reference properties
210-
211-
Reference properties enable you to access the widget's data and state using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to retrieve the visibility status of a button widget, you can use `Button1.isVisible`.
235+
Reference properties enable you to access the widget's data and state using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to retrieve the visibility status of a button widget, you can use `Button1.isVisible`.
212236

213237
#### text `string`
214238

@@ -248,7 +272,6 @@ It reflects the state of the widget's **Disabled** setting. It is represented by
248272

249273
</dd>
250274

251-
252275
## Methods
253276

254277
Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.
@@ -265,7 +288,7 @@ Sets the visibility of the widget.
265288
*Example*:
266289

267290
```js
268-
Button1..setVisibility(true)
291+
Button1.setVisibility(true)
269292

270293
```
271294

website/docs/reference/widgets/button/google-recaptcha.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ description: >-
2828
The exact steps depend on your backend - see [Google's reference](https://developers.google.com/recaptcha/docs/verify) for detailed instructions.
2929
:::
3030

31-
The user's reCAPTCHA response can be obtained in the API Pane with the `recaptchaToken` key.
31+
The user's reCAPTCHA response can be obtained in the API Pane with the `recaptchaToken` key. See the Button widget [Validation](/reference/widgets/button#validation) properties for configuring Google reCAPTCHA on a button.
3232

3333
Make a `POST` request to `https://www.google.com/recaptcha/api/siteverify` with the `secret` (secret key) and `response` (user response) parameters to retrieve the score in a JSON format:
3434

website/docs/reference/widgets/form.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This page provides information on how to use the Form widget to collect, validate, and submit user input. It acts as a container for grouping related inputs and comes with a default Text widget for the title, as well as Submit and Reset buttons for form interaction.
44

5-
The Reset button allows for one-click clearing of form fields to default values. Similarly, the Success button allows you to set actions to be performed when the submit button is clicked.
5+
The Reset button allows for one-click clearing of form fields to default values. Similarly, the Success button allows you to set actions to be performed when the submit button is clicked. These behaviors are controlled by the Button widget's [Form settings](/reference/widgets/button#form-settings), including **Disable when form is invalid** and **Reset form on success**.
66

77
<VideoEmbed host="youtube" videoId="UgpQ0ZOnzdg" title="How to use Form Widget" caption="How to use Form Widget"/>
88

0 commit comments

Comments
 (0)