feat(guide): updated modal page for label #11169
Conversation
bowenjw
requested review from
Jiralite,
almostSouji,
iCrawl,
monbrey,
sdanialraza and
vladfrangu
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
| </Callout> | ||
|
|
||
| The next step is to add the input fields in which users responding can enter free-text. Adding inputs is similar to adding components to messages. | ||
| The next step is to add a Modal components to the `modalBuilder`. Which users responding can enter free-text. Adding inputs is similar to adding components to messages. |
There was a problem hiding this comment.
"Modal components" shouldn't be plural.
The second sentence could be rewritten with the new select menus in mind; entering free-text isn't necessarily the case anymore.
|
|
||
| ### Input properties | ||
|
|
||
| In addition to the `customId` and `style`, a text input can be customised in a number of ways to apply validation, prompt the user, or set default values via the `TextInputBuilder` methods: |
There was a problem hiding this comment.
prefer using the american english word for "customised" ("customized")
|
|
||
| ### Text Display | ||
|
|
||
| Modals support adding a texts display. Unlike interactive components a text display is added to the modal builder, without being put in a label first. |
There was a problem hiding this comment.
"texts" is not supposed to be plural.
(also, did you forget to say text display component instead of text display?)
| Modals support adding a texts display. Unlike interactive components a text display is added to the modal builder, without being put in a label first. | ||
|
|
||
| <Callout> | ||
| Adding text display components decrees the number of labels that can be added to the modal. The modal only has maximum |
There was a problem hiding this comment.
did you mean "decreases"?
also use "has a maximum..." (you forgot the "a")
| --- | ||
|
|
||
| Select menus are one of the `MessageComponent` classes, which can be sent via messages or interaction responses. | ||
| Select menus are Interactive components. which can be sent via messages, interaction responses, or in modals |
There was a problem hiding this comment.
"interactive" shouldn't be capitalized. "which" should be capitalized unless you meant to put a comma between the sentences.
End the sentence with a period.
|
|
||
| modal.setLabelComponents(favoriteStarterLabel); | ||
|
|
||
| // Show modal to user |
There was a problem hiding this comment.
Put a "the" between "Show" and "modal"
Put a "the" between "to" and "user"
| }; | ||
| ``` | ||
|
|
||
| Image of what a select menu in modal |
There was a problem hiding this comment.
did you mean
"...in a modal looks like."
|
|
||
| ### Extracting data from modal submissions | ||
|
|
||
| Unlike when used in a message or interaction reply select menus in a modal to not cause a `Client#InteractionCreate` event. Instead the selected menu values with be in the fields property of the modal submission interaction |
There was a problem hiding this comment.
Put a comma between "reply" and "select menus."
Replace "to" with "do."
I suggest removing "menu" between "selected" and "values."
Replace "with" with "will."
Dont forget periods at the end of a sentence.
|
|
||
| Unlike when used in a message or interaction reply select menus in a modal to not cause a `Client#InteractionCreate` event. Instead the selected menu values with be in the fields property of the modal submission interaction | ||
|
|
||
| <Callout>The get function will always return an array even if no values are selected</Callout> |
There was a problem hiding this comment.
may want to clarify this a bit (and use code notation)
| mentions with the `allowedMentions` message option. | ||
| </Callout> | ||
| <Callout> | ||
| Text displays components can be used in modals. see [modal guide](../interactions/modals.mdx#text-display) for how to |
There was a problem hiding this comment.
"displays" shouldn't be plural.
Rewrite the last sentence to:
"If you wanna learn how to, see the [modal guide]|(link)"
There was a problem hiding this comment.
Please give this another read-over in terms of reading flow and grammar. I tried to cover everything that wasn't already pointed out, but after applying reviews, this may require some additional or different changes to read well.
Please also review heading nesting levels and make sure they nest as they should (H3 > H4, H4 etc.).
| ``` | ||
|
|
||
| Below image is an example of a modal with only one text display in it: | ||
|  |
There was a problem hiding this comment.
as per Discord devs, display-only modals being supported is more a side effect and a "not explicitly handled to be denied" rather than a fully thought-through feature. (It having 2 buttons makes little sense, for example).
i'd prefer showcasing a modal that shows all the "base" types of components
(should file upload or other more complex/unusual components be added, i can see those having their own spotlight!)
| --- | ||
|
|
||
| With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modal forms using discord.js! | ||
| With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modals |
There was a problem hiding this comment.
| With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modals | |
| With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modals using discord.js! |
| The custom id is a developer-defined string of up to 100 characters. Use this field to ensure you can uniquely define | ||
| all incoming interactions from your modals! | ||
| all incoming interactions from your modals. |
There was a problem hiding this comment.
while we're changing this page, i think we can use much clearer wording here.
i'd propose something more like "[...]. Use this field to uniquely identify modals in incoming interactions" or something along those lines (feel free to adapt wording, if needed, but i hope the point comes across)
| <Callout> | ||
| Current supported component for modals are: - [Label](#label) - A layout component to add interactive components to | ||
| modals - [Text Display](#text-display) - A content component used to contain text | ||
| </Callout> |
There was a problem hiding this comment.
I don't think this callout is beneficial to the guide and may cause further maintenance work if more components are added.
|
|
||
| ### Label | ||
|
|
||
| A Layout component, labels are used to display a label and description ore interactive components in modals. |
There was a problem hiding this comment.
| A Layout component, labels are used to display a label and description ore interactive components in modals. | |
| Labels are layout components used to display a label and description on interactive components in modals. |
| <Callout> | ||
| Labels need to have one interactive components. Current supported component for labels are: - [Text | ||
| Input](#text-input) - An interactive component allowing free form text input - [Select | ||
| Menus](../interactive-components/select-menus#using-select-menus-in-modals) - Interactive components allowing for | ||
| limiting user input to users, roles, channels, and preselected options | ||
| </Callout> |
There was a problem hiding this comment.
Same here, not a huge fan of sections that need to be remembered if more components are added in the future.
|
|
||
| ### Text Input | ||
|
|
||
| ### Input styles |
There was a problem hiding this comment.
| ### Input styles | |
| #### Input styles |
Assuming this should be nested under "Input". H3 (empty) > H3 is not valid
| - `Short`, a single-line text entry | ||
| - `Paragraph`, a multi-line text entry | ||
|
|
||
| ### Input properties |
There was a problem hiding this comment.
| ### Input properties | |
| #### Input properties |
same as above
3 participants
Please describe the changes this PR makes and why it should be merged:
Update of Modal interaction page to reflect the addition of label, Text Display and Select Menu components
Status and versioning classification:
In Development