Skip to content

Commit

Permalink
refactor: updates the text input info, attribute details and table st…
Browse files Browse the repository at this point in the history 
…ructure v1.8 (#691)

* updates the text input info, attribute details and table structure

* Update content/en/api/components/ui/textinput.md

* Update content/pt/api/components/ui/textinput.md
  • Loading branch information
@carlossteinzup
carlossteinzup committed Jul 1, 2021
1 parent f598eb3 commit fd39b7f
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 264 deletions.
148 changes: 15 additions & 133 deletions content/en/api/components/ui/textinput.md
View file
Expand Up @@ -8,142 +8,24 @@ description: Text Input component description and its attributes

## What is it?

Input is a component that displays an editable text area for the user. These text fields are used to collect inputs that the user insert using the keyboard.
The Text Input is a component that displays an editable text area for the user. These text inputs are used to collect data inputs from users using a keyboard.

{{% alert color="danger" %}}
The `hidden` attribute has been deprecated in Beagle version 1.6.0 and will be removed in a future version. Use the `display` attribute of the` style` property instead.
{{% /alert %}}
This component has the following attributes:

See how the structure is represented by the attributes below:
|Attribute|Type|Required|Definition|
|:-----|:-----|:-----:|:-----|
|value|String or [Binding]({{< ref path="/api/context#bindings" lang="en" >}})|&#x2713;|Item referring to the input value that will be entered in the Text Input component editable text field area.|
|placeholder|String or [Binding]({{< ref path="/api/context#bindings" lang="en" >}})||The Placeholder is a text that is displayed when nothing has been entered in the editable text field.|
|enabled|Boolean||Enables or disables a text field|
|readOnly|Boolean||Set the text field to be read only when set to `true`.|
|type|TextInputType or [Binding]({{< ref path="/api/context#bindings" lang="en" >}})||This attribute identifies the text type that it will feed the text field area. On Android and iOS, this field also attributes the type of keyboard that will shown.|
|styleId|String||This attribute sets a String key to map this component in a Design System on the front end and set an style to it.|
|error|String or [Binding]({{< ref path="/api/context#bindings" lang="en" >}})||This attribute defines the TextInput error message.|
|showError|Boolean or [Binding]({{< ref path="/api/context#bindings" lang="en" >}})||Enables the error message to be visible when set to `true`.|
|onFocus|List&lt;Action&gt;||Sets a List of [Actions]({{< ref path="/api/actions" lang="en" >}}) that are triggered when the text field **gains focus**|
|onChange|List&lt;Action&gt;||Sets a List of [Actions]({{< ref path="/api/actions" lang="en" >}}) that are triggered when the text field **value changes**|
|onBlur|List&lt;Action&gt;||Sets a List of [Actions]({{< ref path="/api/actions" lang="en" >}}) that are triggered when the text field **looses focus**|

<table>
<thead>
<tr>
<th style="text-align:left"><strong>Attribute</strong>
</th>
<th style="text-align:left"><strong>Type</strong>
</th>
<th style="text-align:left">Required</th>
<th style="text-align:left"><strong>Definition</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">value</td>
<td style="text-align:left">
String or
<a href="https://docs.usebeagle.io/v/v1.0-en/api/context#bindings"><strong>Binding</strong></a>
</td>
<td style="text-align:left">&#x2713;</td>
<td style="text-align:left">Item referring to the input value that will be entered in the editable
text area of the Text Input component.</td>
</tr>
<tr>
<td style="text-align:left">placeholder</td>
<td style="text-align:left">
String or
<a href="https://docs.usebeagle.io/v/v1.0-en/api/context#bindings"><strong>Binding</strong></a>
</td>
<td style="text-align:left"></td>
<td style="text-align:left">The Placeholder is a text that is displayed when nothing has been entered
in the editable text field.</td>
</tr>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left"></td>
<td style="text-align:left">Enables or disables the field.</td>
</tr>
<tr>
<td style="text-align:left">readOnly</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left"></td>
<td style="text-align:left">Check if the Input will be editable or read only.</td>
</tr>
<tr>
<td style="text-align:left">hidden</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left"></td>
<td style="text-align:left">Enables the component to be visible or not. The `hidden` attribute has been deprecated in Beagle version 1.6.0 and will be removed in a future version. Use the `display` attribute of the` style` property instead.</td>
</tr>
<tr>
<td style="text-align:left">type</td>
<td style="text-align:left">TextInputType or <a href="../../context/#bindings"><strong>Binding</strong></a></td>
<td
style="text-align:left"></td>
<td style="text-align:left">This attribute identifies the text type that it will receive in the editable
field area. On Android and iOS, this field also attributes the type of
keyboard that will be shown to the user.</td>
</tr>
<tr>
<td style="text-align:left">styleId</td>
<td style="text-align:left">String</td>
<td style="text-align:left"></td>
<td style="text-align:left">This attribute receives a key that is registered in the Design System
of each platform that customizes the component.</td>
</tr>
<tr>
<td style="text-align:left">error</td>
<td style="text-align:left">
<p>String or</p>
<p><a href="https://docs.usebeagle.io/v/v1.0-en/api/context#bindings"><b>Binding</b></a>&lt;b&gt;&lt;/b&gt;</p>
</td>
<td style="text-align:left"></td>
<td style="text-align:left">This attribute shows if the TextInput has an error.</td>
</tr>
<tr>
<td style="text-align:left">showError</td>
<td style="text-align:left">
<p>Boolean or</p>
<p><a href="https://docs.usebeagle.io/v/v1.0-en/api/context#bindings"><b>Binding</b></a>&lt;b&gt;&lt;/b&gt;</p>
</td>
</td>
<td style="text-align:left"></td>
<td style="text-align:left">Enables the error string to be visible or not.</td>
</tr>
<tr>
<td style="text-align:left">onChange</td>
<td style="text-align:left">List &lt;<a href="../../actions/"><strong>Action</strong></a>&gt;</td>
<td style="text-align:left"></td>
<td style="text-align:left">
Actions array that this field can trigger when its value is altered. It
is possible to define a <a href="https://docs.usebeagle.io/v/v1.0-en/resources/customization/beagle-para-web/customized-actions"><strong>customized action</strong></a><strong> </strong>or
any available action in the interface, for example, an action that shows
an Alert message. <strong><br /><br /></strong>This attribute is optional, but if
an action is defined here it needs to be configured in the fronted.
</td>
</tr>
<tr>
<td style="text-align:left">onBlur</td>
<td style="text-align:left">List &lt;<a href="https://docs.usebeagle.io/v/v1.0-en/api/actions"><strong>Action</strong></a>&gt;</td>
<td
style="text-align:left"></td>
<td style="text-align:left">
Action array that this field can trigger when its focus is removed. It
is possible to defined a <a href="https://docs.usebeagle.io/v/v1.0-en/resources/customization/beagle-para-web/customized-actions"><strong>customized action</strong></a><strong> </strong>or
any available action in the interface, for example, an action that shows
an alert message (<a href="../../actions/alert"><strong>Alert</strong></a>).
This attribute is optional, but if an action is defined here it needs
to be configured in the fronted.
</td>
</tr>
<tr>
<td style="text-align:left">onFocus</td>
<td style="text-align:left">List &lt;<a href="https://docs.usebeagle.io/v/v1.0-en/api/actions"><strong>Action</strong></a>&gt;</td>
<td
style="text-align:left"></td>
<td style="text-align:left">
Actions array that this field can trigger when this field is on focus.
It is possible to defined a <a href="https://docs.usebeagle.io/v/v1.0-en/resources/customization/beagle-para-web/customized-actions"><strong>customized action</strong></a><strong> </strong>or
any available action in the interface, for example, an action that shows
an alert message (<a href="../../actions/alert"><strong>Alert</strong></a><strong>). </strong>
This attribute is optional, but if an action is defined here it needs
to be configured in the fronted.
</td>
</tr>
</tbody>
</table>

### TextInputType

Expand Down
145 changes: 14 additions & 131 deletions content/pt/api/components/ui/textinput.md
View file
Expand Up @@ -8,140 +8,23 @@ description: Descrição do componente InputText e seus atributos

## O que é?

O Input é um componente responsável por exibir uma área de texto editável para o usuário. Esses campos de textos são usados para coletar entradas que um usuário insere utilizando o teclado.

{{% alert color="danger" %}}
O atributo `hidden` foi depreciado na versão 1.6.0 do Beagle e será removido em uma versão futura. Utilize o atributo `display` da propriedade `style` em seu lugar.
{{% /alert %}}
O Text Input é um componente responsável por exibir uma área de texto editável para o usuário. Esses `campos de textos` são usados para coletar dados que um usuário insere utilizando um teclado.

A sua estrutura é representada como mostrado abaixo:

<table>
<thead>
<tr>
<th style="text-align:left"><strong>Atributo</strong>
</th>
<th style="text-align:left"><strong>Tipo</strong>
</th>
<th style="text-align:center"><strong>Obrigatório</strong></th>
<th style="text-align:left"><strong>Defini&#xE7;&#xE3;o</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">value</td>
<td style="text-align:left">
String ou
<a href="../../contexto/#bindings"><strong>Binding</strong></a>
</td>
<td style="text-align:center"></td>
<td style="text-align:left">Item referente ao valor de entrada que ser&#xE1; digitado na &#xE1;rea
de texto edit&#xE1;vel do componente Text Input.</td>
</tr>
<tr>
<td style="text-align:left">placeholder</td>
<td style="text-align:left">
String ou
<a href="../../contexto/#bindings"><strong>Binding</strong></a>
</td>
<td style="text-align:center"></td>
<td style="text-align:left">Texto que &#xE9; exibido quando nada foi inserido no campo de texto edit&#xE1;vel.</td>
</tr>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:center"></td>
<td style="text-align:left">Propriedade para habilitar ou desabilitar o campo.</td>
</tr>
<tr>
<td style="text-align:left">readOnly</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:center"></td>
<td style="text-align:left">Propriedade para determinar se o campo ser&#xE1; edit&#xE1;vel ou somente
leitura.</td>
</tr>
<tr>
<td style="text-align:left">hidden</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:center"></td>
<td style="text-align:left">Propriedade que determina se o campo ser&#xE1; escondido. O atributo `hidden` foi depreciado na versão 1.6.0 do Beagle e será removido em uma versão futura. Utilize o atributo `display` da propriedade `style` em seu lugar.</td>
</tr>
<tr>
<td style="text-align:left">type</td>
<td style="text-align:left">TextInputType ou <a href="../../contexto/#bindings"><strong>Binding</strong></a></td>
<td
style="text-align:center"></td>
<td style="text-align:left">Esse atributo identifica o tipo de texto que iremos receber na &#xE1;rea
de texto edit&#xE1;vel. No Android e no iOS, esse campo tamb&#xE9;m atribui
o tipo de teclado que ser&#xE1; exibido pro usu&#xE1;rio.</td>
</tr>
<tr>
<td style="text-align:left">styleId</td>
<td style="text-align:left">String</td>
<td style="text-align:center"></td>
<td style="text-align:left">Recebe uma chave que &#xE9; registrada no Design System de cada plataforma
para fazer customiza&#xE7;&#xE3;o no componente.</td>
</tr>
<tr>
<td style="text-align:left">error</td>
<td style="text-align:left">
<p>String ou</p>
<p>&lt;b&gt;&lt;/b&gt;<a href="../../contexto/#bindings"><b>Binding</b></a>&lt;b&gt;&lt;/b&gt;</p>
</td>
<td style="text-align:left"></td>
<td style="text-align:left">Esse atributo mostra se o TextInput possui um erro de acordo com uma entrada.</td>
</tr>
<tr>
<td style="text-align:left">showError</td>
<td style="text-align:left">
<p>Boolean ou</p>
<p>&lt;b&gt;&lt;/b&gt;<a href="../../contexto/#bindings"><b>Binding</b></a>&lt;b&gt;&lt;/b&gt;</p>
</td>
</td>
<td style="text-align:left"></td>
<td style="text-align:left">Propriedade que identifica se o a String de erro deve ser escondida ou não.</td>
</tr>
<tr>
<td style="text-align:left">onChange</td>
<td style="text-align:left">List &lt;<a href="../../acoes/"><strong>Action</strong></a>&gt;</td>
<td style="text-align:center"></td>
<td style="text-align:left">
Array de a&#xE7;&#xF5;es que esse campo <strong>pode disparar quando seu valor for alterado</strong>.
&#xC9; poss&#xED;vel definir uma <a href="../../../features/criacao-de-novas-acoes"><strong>a&#xE7;&#xE3;o customizada</strong></a><strong> </strong>ou
qualquer a&#xE7;&#xE3;o j&#xE1; dispon&#xED;vel na interface, como por
exemplo uma a&#xE7;&#xE3;o que mostra uma mensagem de alerta(<a href="../../acoes/alert"><strong>Alert</strong></a>).
Este atributo &#xE9; opcional, mas se uma a&#xE7;&#xE3;o for definida
aqui ela precisa estar configurada no frontend.
</td>
</tr>
<tr>
<td style="text-align:left">onBlur</td>
<td style="text-align:left">List &lt;<a href="../../acoes/"><strong>Action</strong></a>&gt;</td>
<td style="text-align:center"></td>
<td style="text-align:left">
Array de a&#xE7;&#xF5;es que esse campo <strong>pode disparar quando seu foco &#xE9; retirado</strong>.
&#xC9; poss&#xED;vel definir uma <a href="../../../features/criacao-de-novas-acoes"><strong>a&#xE7;&#xE3;o customizada</strong></a><strong> </strong>ou
qualquer a&#xE7;&#xE3;o j&#xE1; dispon&#xED;vel na interface como, por
exemplo, uma a&#xE7;&#xE3;o que mostra uma mensagem de alerta(<a href="../../acoes/alert"><strong>Alert</strong></a>).
Este atributo &#xE9; opcional, mas se uma a&#xE7;&#xE3;o for definida
aqui ela precisa estar configurada no frontend.
</td>
</tr>
<tr>
<td style="text-align:left">onFocus</td>
<td style="text-align:left">List &lt;<a href="../../acoes/"><strong>Action</strong></a>&gt;</td>
<td style="text-align:center"></td>
<td style="text-align:left">
Array de a&#xE7;&#xF5;es que esse campo pode disparar quando &#xE9; colocado
em foco. &#xC9; poss&#xED;vel definir uma <a href="../../../features/criacao-de-novas-acoes"><strong>a&#xE7;&#xE3;o customizada</strong></a><strong> </strong>ou
qualquer a&#xE7;&#xE3;o j&#xE1; dispon&#xED;vel na interface como, por exemplo, uma a&#xE7;&#xE3;o que mostra uma mensagem de alerta(<a href="../../acoes/alert"><strong>Alert</strong></a>).
Este atributo &#xE9; opcional, mas se uma a&#xE7;&#xE3;o for definida
aqui ela precisa estar configurada no frontend.
</td>
</tr>
</tbody>
</table>
|Atributos|Tipo|Obrigatório|Descrição|
|:-----|:-----|:-----:|:-----|
|value|String ou [Binding]({{< ref path="/api/context#bindings" lang="pt" >}})|&#x2713;|Atributo que guarda o valor inserido em um campo de texto|
|placeholder|String ou [Binding]({{< ref path="/api/context#bindings" lang="pt" >}})||Atributo que define um texto que é mostrado quando não existe informação adicionada ao campo de texto.|
|enabled|Boolean||Habilita ou desabilita um campo de texto|
|readOnly|Boolean||Define um campo de texto como `readOnly` quando definido como `true`.|
|type|TextInputType ou [Binding]({{< ref path="/api/context#bindings" lang="pt" >}})||Este atributo define qual tipo de texto será inserido no campo de texto. Em dispositivos moveis, ele também define qual tipo de teclado aparece quando o campo ganha focus.|
|styleId|String||Define uma chave do tipo String para mapear esse componente em um Design System no front end da aplicação. Essa chave identifica qual estilo será aplicado a esse componente.|
|error|String ou [Binding]({{< ref path="/api/context#bindings" lang="pt" >}})||Define uma mensagem de erro para esse campo de texto.|
|showError|Boolean or [Binding]({{< ref path="/api/context#bindings" lang="en" >}})||Define se a mensagem de erro ficará visível quando definido como `true`|
|onFocus|List&lt;Action&gt;||Define uma lista de [Ações]({{< ref path="/api/actions" lang="pt" >}}) que é executada quando o campo de texto **ganha foco**|
|onChange|List&lt;Action&gt;||Define uma lista de [Ações]({{< ref path="/api/actions" lang="pt" >}}) que é executada quando o campo de texto tem o **valor (value) modificado**|
|onBlur|List&lt;Action&gt;||Define uma lista de [Ações]({{< ref path="/api/actions" lang="pt" >}}) que é executada quando o campo de texto **perde o foco**|

### TextInputType

Expand Down

0 comments on commit fd39b7f

Please sign in to comment.