Update Icon Button

[annefranca]

Goal

Avaliar a proposta de adicionar states no componente Icon Button

Context

Na tab de Casa Inteligente, vamos aplicar o Icon Button como um slot no componente Boxed Row, com isso, precisamos confirmar se existe a possibilidade de criar os estados para o componente, pois no Figma, não está disponível.

• Default
• Selected
• Disabled
• Loading

Impact

Aplicando essa evolução proposta, não precisaríamos criar uma variação do componente Icon Button na biblioteca Vivo Extended.

Discussion Questions

ND

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/FO2rWBWMWFrtSvazuuS0If/Evolu%C3%A7%C3%A3o-Icon-Button?type=design&node-id=1%3A86&mode=design&t=lS5m9nLj4KE5CBRV-1

[yceballost]

I think we can expand iconButton definition with this request

I can imagine this component with and without circle variant. WDYT @AnaMontes11 ?

[AnaMontes11]

Yes, absolutely. I think it's a good time to evolve it and include the states.

[yceballost]

we can close this discussion and evolve it. Thanks Anne & Ana 😁

[annefranca]

@AnaMontes11 @yceballost quando essa melhoria estaria disponível?

[yceballost]

We don't know, we have a lot of thing before this request. At the moment, the migration of Loading Screen and mosaics has more priority than this. (priority defined by your team!), after that, we have the accessibility project to improve some components in Mística and then, we can prioritize this if you want

[annefranca]

@yceballost @AnaMontes11

Além do update dos estados (default, selected, disabled, loading), temos a necessidade da aplicação do theme context inverse e a possibilidade da alteração do ícone para 16px.

[yceballost]

The iconButton will change automatically according to the context where it is applied, the problem I'm seeing in your screenshot is that the inverse of the BoxedRow is not possible.

[annefranca]

@yceballost

E sobre o tamanho do ícone (16px) no componente Icon Button ?

Sobre o componente Boxed Row: seria a aplicação da propriedade custom color (ref: poster card) como foi solicitada na discussion
#1546

[yceballost]

That's a good question to discuss here.

• Should the size be customizable? In ButtonPrimary the start and end icon is not customizable, should be opened here?
• Should the size of the circle be customizable? Why?
• Should the color of the label be customizable?

In my mind, we should define iconButton as just another button, having these properties more narrowly.

<IconButton circle={true/false} label={true/false} />

By opening these properties we could change the focus of this component and make it more like a primitive. Is it ok? or not? I have doubts 😁

---

Sobre o componente Boxed Row: seria a aplicação da propriedade custom color (ref: poster card) como foi solicitada na discussion

That question is outside the scope of this thread / discussion, just to be organised, please consider opening a new discussion or reopening a existing one!

[annefranca]

@yceballost

Vamos tentar alinhar tudo bem certinho, ok?

1. Tamanho do ícone no Icon Button: necessitamos da aplicação com 16px, com isso, é possível fazer essa evolução em Mística?
2. Resposta: o tamanho do círculo não é personalizável, se mantém com 40px.
3. Resposta: que label? Icon Button não tem label.
4. Resposta: já existe uma discussion aberta para o Boxed Row.

Observação: peço que revise todas solicitações e nos diga se é possível ou não evoluir com esse tópicos em Mística.

[yceballost]

We are trying to align some needs regarding this component, so Im trying to put all the concerns over the table.

The label is for application like this. To have the possibility to show or hide this text label. There are other teams with this need.

We will talk tomorrow in a meeting to align all of the needs to start to define the evolution of this component. This is the first component that we will evolve in Q1.