v1.4.0

Breakchanges

Removido os tokens para os novos projetos. Caso precise basta importar do compat:

- import '@eduzz/houston/ThemeProvider';
+ import '@eduzz/houston/ThemeProvider/compat';

- import '@eduzz/houston/ThemeProvider/createTheme';
+ import '@eduzz/houston/ThemeProvider/compat/createTheme';

v1.2 - AntD5 e Dark Mode Beta

Nova versão do AntD para a v5 removeu a dependência do less, facilitando assim a customização do css.

Para facilitar, adicionamos os tokens do AntD no theme utilize eles sempre possível respeitando o propósito de cada um.

import styled from '@eduzz/houston-ui/styled';

styled.div`
    background-color: ${theme.antd.colorBgElevated}
`

Dark Mode

⚠️ Ainda em Beta

WhatsApp.Video.2022-11-18.at.12.59.27.mp4

Basta configurar no ThemeProvider a prop mode.

<ThemeProvider theme={theme} mode='dark'>
  ...
</ThemeProvider>

Break Changes

Apenas remova a referencia de qualquer css, pois o AntD5 não utiliza mais o less.

- import '@eduzz/houston-ui/ThemeProvider/theme.css';

What's Changed

• Feat/antd 5 e Dark Mode Beta by @danieloprado in #464

Full Changelog: v1.1.4...v1.2.0

v1 - Finalmente!

Conforme conversado durante nosso comitê de front, vamos utilizar o AntD como base para as nossas aplicações. O Houston não deixar de existir apenas será focado em componentes mais complexos e/ou específicos da Eduzz™.

Break Changes

Não houve break changes significativos, apenas marcamos como @deprecated componentes que não devem mais ser usado. O único componente que ficou foi o Layout e seus filhos.

Quando ver componentes marcados procure migrar para seu equivalente do AntD:

Packages que foram descontinuados:

• @eduzz/houston-styles ~> utilizar o @emotion diretamente, para mais detalhes veja aqui
  • Como o AntD não possui uma style-engine, decidimos manter o emotion, e vamos adicionar algumas props no Theme dele (ex: primaryColor, spacing e etc).
• @eduzz/houston-icons ~> utilizar o @ant-design/icons
• @eduzz/houston-tokens

A documentação nova já esta no ar, mas caso necessite da documentação antiga:
http://eduzz-houston-deprecated-docs.s3-website-us-east-1.amazonaws.com

Como migrar

Acesse aqui o migrar

v0.64.0

Geral

Novo padrão de classes, adicionado ID nos componentes para dar suporte aos testes e atualização nos componentes.

className

Recentemente tivemos um probleminha chato com sobrescrita de CSS em nossas classes por elas serem "muito genéricas" e utilizarem o padrão BEM (em alguns casos). Isso acabou quebrando os estilos dos componentes em algumas aplicações.

Alguns casos bem comuns que nos prejudicaram: --isActive, __container, & > .__wrapper, etc...

Nós começamos a inserir o prefixo hst- no começo de cada classe dos nossos componentes, mas não foi o suficiente e gera muita dúvida de como escrever as classes internas, por exemplo:

• hst-dialog .hst-dialog__header .hst-dialog-header__icon ou hst-dialog .hst-dialog__header .hst-dialog__header-icon?
• hst-dialog-footer-logo ou hst-dialog-footer__logo?

Enfim, são vários casos que estávamos nos perdendo e cada um escrevendo de uma forma. Para reduzir as margens de "erros" e despadronização vamos definir um padrão mais simples, apenas com hífens (-) para separar os níveis. Por exemplo:

• hst-dialog-header,
• hst-dialog-header-icon,
• hst-dialog-footer-logo
• hst-dialog-header.hst-dialog-header-variant-outline.

(Composto por prefixo: hst-, nome do componente: footer, filho/seção/elemento/modificador: logo = hst-footer-logo).

Isto inclui os "modificadores" também (.hst-button-variant-outline).

Em resumo não precisamos mais gastar esforços pensando em como escrever nome de classes. A nova versão padroniza TODAS as classes para este novo formato.

Obrigado @miguelaugl pela sugestão e pelos questionamentos.

Pull request

• Atualização nas classes by @ffernandomoraes in #443
• Adiciona id nos componentes by @miguelaugl in #442
• fix: add icons to documentation by @michel-klein in #440
• Atualização de tokens do Apps Menu by @ffernandomoraes in #439
• Versão 0.64.0 by @ffernandomoraes in #444

Novos colaboradores

• @michel-klein made their first contribution in #440

Full Changelog: v0.63.4...v0.64.0

v0.63.0

Geral

Novos componentes adicionados em nossa lib de UI.

Novos componentes

• Card
• Dropdown

Pull request

• Card Component by @ffernandomoraes in #434
• Componente de Dropdown/Popover by @ffernandomoraes in #429
• Versão 0.63.0 by @ffernandomoraes in #435

Full Changelog: v0.62.0...v0.63.0

v0.62.0

Geral

Componente atualizado de acordo com os tokens para uma nova proposta de design.

Componente atualizado

• Showcase

Pull Request

• Refactor/showcase by @MatheusRaj in #422
• Versão 0.62.0 by @ffernandomoraes in #430

Full Changelog: v0.61.2...v0.62.0

v0.61.0

Geral

Novos componentes, novos tokens e correção de bugs.

Novos componentes

• Badge
• Accordion

Componentes atualizados

• Checkbox
• Tokens (Next Tokens)

Pull Request

• feat(tokens): add Next tokens in brand colors by @ffernandomoraes in #420
• Componente Badge by @ffernandomoraes in #424
• Feat/accordion by @phelpa in #423
• feat(Checkbox): make it able to use as unique component inside a form by @miguelaugl in #425
• Versão 0.61.0 by @ffernandomoraes in #426

Full Changelog: v0.60.3...v0.61.0

v0.59.0

Geral

Melhorias no Radio, Checkbox e remoção do MUI dos componentes Tabs e Progress. 🚀

Componentes atualizados

• Radio
• Checkbox
• Tabs
• Progress

Break changes

Progress

Não há mais dois tipos (Line e Round), agora existe apenas um tipo (Line).

- import ProgressLine from '@eduzz/houston-ui/Progress/Line';
- import ProgressRound from '@eduzz/houston-ui/Progress/Round';
+ import Progress from '@eduzz/houston-ui/Progress';

- interface ProgressLine { ... }
- interface ProgressRound { ... }

+ interface ProgressProps { ... }
+ type ProgressFormat { ... }
+ type ProgressInfoPosition { ... }
+ type ProgressSize { ... }

A implementação ficou mais simples e mais "contextualizada":

<Progress value={value} />
<Progress value={value} min={10} max={50} />

Confira todas as props disponíveis na documentação do componente.

Radio e Checkbox

Foi criado um componente (Group) para simplificar a implementação quando há mais de uma opção. Os componentes podem ser utilizados normalmente fora do contexto de Group.

// dentro do <Form />
<Checkbox.Group name="checkbox">
  <Checkbox value={1} label="Valor 1" />
  <Checkbox value={2} label="Valor 2" />
  <Checkbox value={3} label="Valor 3" />
</Checkbox.Group>

// fora do <Form />
<Checkbox.Group value={...} onChange={...}>
  <Checkbox value={1} label="Valor 1" />
  <Checkbox value={2} label="Valor 2" />
  <Checkbox value={3} label="Valor 3" />
</Checkbox.Group>

// dentro do <Form />
<Radio.Group name="radio">
  <Radio.Item value={1} label="Opção 1" />
  <Radio.Item value={2} label="Opção 2" />
</Radio.Group>

// fora do <Form />
<Radio.Group value={...} onChange={...}>
  <Radio.Item value={1} label="Opção 1" />
  <Radio.Item value={2} label="Opção 2" />
</Radio.Group>

Tabs

Removemos o MUI do componente. No entanto as props principais (value e onChange) não foram afetadas. Foi adicionado também a TabVertical.

- import Tabs from '@eduzz/houston-ui/Tabs';

- <Tabs>
-   <Tabs.Content label='Título 1'>
-     <div>Conteúdo 1</div>
-   </Tabs.Content>
-   <Tabs.Content label='Título 2'>
-     <div>Conteúdo 2</div>
-  </Tabs.Content>
- </Tabs>

+ import Tabs from '@eduzz/houston-ui/Tabs';
+ const { Tab } = Tabs;

+ <Tabs>
+   <Tab label='Label 1'>Conteúdo 1</Tab>
+   <Tab label='Label 2'>Conteúdo 2</Tab>
+ </Tabs>

+ <Tabs.Vertical>
+   <Tab label="Label 1">Conteúdo 1</Tab>
+   <Tab label="Label 2">Conteúdo 2</Tab>
+ </Tabs.Vertical>

Confira todas as props disponíveis na documentação do componente.

Pull Request

• Fix checkable inputs by @miguelaugl in #415
• Feat/tabs horizontal and vertical by @phelpa in #401
• refactor(progress): new component by @ffernandomoraes in #416
• Versão 0.59.0 by @ffernandomoraes in #418

Full Changelog: v0.58.11...v0.59.0

v0.58.11

Geral

Refatoração de componentes e implementações de novos recursos.

Componentes atualizados

• Modal
• Switch
• Dialog

Pull Request

• Feature/typography bem again by @danieloprado in #399
• Feat/modal fullscreen by @ffernandomoraes in #410
• Feature/global dialogs by @danieloprado in #411
• Update components by @phelpa in #409
• feat(houston-ui): adicionado id no datepicker e arrumado tamanho dola… by @JonathasRodrigues in #412
• Refactor/switch by @phelpa in #405
• Versão 0.58.11 by @ffernandomoraes in #413

Full Changelog: v0.58.10...v0.58.11

v0.58.0

Break Change

Datepicker

Uma nova implementação do datepicker foi feita. Embora nao teve grandes alterações na implementação, visualmente mudou.

Table

O sort foi quebrado em duas props sortField e sortDirection para facilitar o consumo do lado da api, que dificulta o uso de json dentro de um param no get.

As configurações do sort foram movidas para o TableHeader afim de manter o melhor contexto.

- <Table sort={sort} onSort={onSort}>
+ <Table.Header sortField={params.sortField} sortDirection={params.sortDirection} onSort={handleSort}>