v0.57.2

Geral

Removido margins padrão dos inputs.

Componentes atualizados

• Input
• Input Color
• Select

Pull Request

• feat(fieldset): remove margin by @ffernandomoraes in #400
• Versão 0.57.2 by @ffernandomoraes in #402

Full Changelog: v0.57.1...v0.57.2

v0.57.0

Geral

Ajuste nas margins da Grid (agora a margin é aplicada no componente de Layout) e novo componente adicionado.

Novo componente

• Drawer

Componente atualizado

• Grid

Pull Request

• feat(ui-components): fix grid margins and sizes by @danieloprado in #395
• Componente Drawer by @ffernandomoraes in #394
• Versão 0.57.0 by @ffernandomoraes in #396

Full Changelog: v0.56.1...v0.57.0

v0.56.1

Geral

Adicionado ID nos elementos para facilitar os testes.

Componente atualizado

• Select

Pull Requests

• feat(houston-ui): adicionado id no elemento e na opções do select by @JonathasRodrigues in #392
• Versão 0.56.1 by @ffernandomoraes in #393

Full Changelog: v0.56.0...v0.56.1

v0.56.0

Geral

Novos componentes criados.

Novos componentes

• Link
• Tag Category

Pull Requests

• Feat/link by @phelpa in #388
• Feat/tag category by @phelpa in #387
• Versão 0.56.0 by @ffernandomoraes in #391

Full Changelog: v0.55.0...v0.56.0

v0.55.0

Geral

Novos componentes foram adicionados em nossa biblioteca de componentes UI.

Novos componentes:

• Dialog
• Tag
• TagHighlight

Componentes atualizados:

• Modal

Pull Request

• Feat/tag highlight by @phelpa in #378
• Feat/tag by @phelpa in #377
• Componente de Dialog by @ffernandomoraes in #379
• Versão 0.55.0 by @ffernandomoraes in #389

Full Changelog: v0.54.0...v0.55.0

v0.54.0

Atualização do componente de Layout. A toolbar, que antes era em um package a parte, agora faz parte do Houston. Veja na documentação a nova maneira de implementar.

Desktop:

Mobile:

v0.53.0

Olá, essa versão traz bastante novidades.

Geral

• Removemos todos os I iniciais das interfaces. Por exemplo: IButtonProps agora é ButtonProps. Essa decisão foi tomada em conjunto pelo time, definimos que não faz mais sentido essa nomenclatura. Consequentemente removemos do nosso eslint-config essa regra.

Novos componentes:

• Modal

Componentes atualizados:

• Tooltip
• Icon
• List
• useForm

Breaking Changes

Todas as modificações foram necessárias para atender o novo design. O único componente que não se encaixa nesse contexto foi o useForm. Decidimos atualizar como lidamos com os formulários para simplificar o uso interno de alguns recursos e por que o formik não é atualizado a mais de 1 ano, com isso migramos nosso form para utilizar o react-hook-form que tem uma melhor performance e simplificou bastante o processo.

Guia de migração dos formulários.

Mantemos a versão antiga em outro caminho para não atrapalhar (muito) quem já utiliza.

import useForm from '@eduzz/houston-forms/deprecated/useForm';
import Form from '@eduzz/houston-ui/Forms/deprecated/Form';

A maneira antiga, segue da mesma forma:

import useForm from '@eduzz/houston-forms/deprecated/useForm';
import Button from '@eduzz/houston-ui/Button';
import Form from '@eduzz/houston-ui/Forms/deprecated/Form';
import Input from '@eduzz/houston-ui/Forms/Input';

function Component() {
  const form = useForm({
    initialValues: { name: 'Eduzz' },
    validationSchema: yup => yup.object({ name: yup.string().min(7).required() }),
    onSubmit: values => console.log(values)
  });

  return (
    <Form context={form}>
      <Input name='name' label='Nome' />
      <Button type='submit'>Enviar</Button>
    </Form>
  );
}

export default Component;

A versão nova, muda bem pouco a forma de implementação:

import useForm, { FormModel } from '@eduzz/houston-forms/useForm';
import Button from '@eduzz/houston-ui/Button';
import Form from '@eduzz/houston-ui/Forms/Form';
import Input from '@eduzz/houston-ui/Forms/Input';
import Select from '@eduzz/houston-ui/Forms/Select';

function Component() {
  const form = useForm({
    defaultValues: { name: 'Eduzz' },
    validationSchema: zod => zod.object({ name: zod.string().min(7).required('Campo obrigatório') })
  });

  const onSubmit = (values: FormModel<typeof form>) => console.log(values);

  return (
    <Form context={form} onSubmit={onSubmit}>
      <Input name='name' label='Nome' />
      <Button type='submit'>Enviar</Button>
    </Form>
  );
}

export default Component;

Guia de migração do componente Tooltip.

Removemos a prop isOpen.

interface TooltipProps {
- isOpen
}

Guia de migração do componente List.

No geral, removemos algumas props e liberamos children em alguns sub-componentes.

interface ListProps {
- stripedRows
+ dividers
}

interface ListLeftProps {
- icon
- image
- striped
+ children
}

interface ListRightProps {
- icon
- text
+ children
}

interface ListTextProps {
- title: string | React.ReactNode;
- subtitle?: string | React.ReactNode;
+ title: React.ReactNode;
+ description?: React.ReactNode;
+ disableTypography?: boolean;
}

Exemplo de uso:

import HomeIcon from '@eduzz/houston-icons/HomeOutline';
import Checkbox from '@eduzz/houston-ui/Forms/Checkbox';
import IconButton from '@eduzz/houston-ui/IconButton';
import Thumbnail from '@eduzz/houston-ui/Image/Thumbnail';
import List from '@eduzz/houston-ui/List';

function Component() {
  return (
    <List dividers>
      <List.Item>
        <List.Left>
          <Thumbnail src='https://picsum.photos/80' size='md' />
        </List.Left>
        <List.Text title='Lorem Ipsum Dolor' description='Lorem Ipsum Dolor' />
        <List.Right>
          <IconButton>
            <HomeIcon />
          </IconButton>
        </List.Right>
      </List.Item>

      <List.Item>
        <List.Left>
          <Thumbnail src='https://picsum.photos/80' size='md' />
        </List.Left>
        <List.Text title='Lorem Ipsum Dolor' description='Lorem Ipsum Dolor' />
        <List.Right>
          <IconButton>
            <HomeIcon />
          </IconButton>
        </List.Right>
      </List.Item>
    </List>
  );
}

export default Component;

Guia de migração dos ícones.

Nada mudou, apenas removemos o span que envolvia os ícones.

Para mais informações veja a doc atualizada.

v0.52.0

Break Change

Grid

Container

- spacing;

Row:
spacing agora é no row e são :

+ spacing?: 'none' | 'nano' | 'xxxs' | 'xxs' | 'xs' | 'md' | 'xl';

Column:
Prop auto removido
Se breakpoint(xs, sm, md...) for true pega todo o espaço faltante
Se não passar breakpoints a coluna vai pegar todo o espaço faltante. Ex: Se uma Row tiver duas columns cada uma vai pegar 50% nesse caso.
Não é mais xl é xlg

- auto

Break Change

Tooltip

Removido prop 'open'

- open

Para mais informações veja a doc atualizada.

v0.49.0

ESLint Novas Regras

• Força public/private em métodos de classes.
• Força a ordem correta de private/publics dentro de uma classe.
• Remove a regra de interfaces começarem com a letra "I"
• Força uma melhor convenção de nomes para variáveis.

v0.47.0

Break Change

Alert

Simplificamos e limitamos algumas props. Não é mais possível adicionar ícones customizados e múltiplas ações.

- type?: AlertColor;
- closable?: boolean;
- multiline?: boolean;
- icon?: React.ReactNode;
+ type?: AlertTypes;
+ closeIcon?: boolean;
+ visible?: boolean;

Guia de migração

// simples
- <Alert type='error'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
+ <Alert type='negative'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>

// com título e ação
- <Alert>
-   <Alert.Title>Lorem ipsum</Alert.Title>
-   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-   <Alert.Action label='Cancelar' variant='text' />
-   <Alert.Action label='Ação' />
- </Alert>

+ <Alert title='Lorem ipsum' actionProps={{ text: 'Ação' }}>
+   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ </Alert>

Forms

Migramos (quase) todos os components de Forms para poder remover o MUI, embora não tenha nenhum break change no código, teve mudanças visuais significativas, então sugerimos testar na hora de migrar.

Deprecations

Embora não removemos alguns components e props marcamos eles como @deprecated, dando tempo assim para a migração, então sugerimos migrar assim que possível:

# Apenas o caminho mudará, todas as props se mantém.
- import TextField from '@eduzz/houston-ui/Forms/Text';
+ import Input from '@eduzz/houston-ui/Forms/Input';

<Select 
    label='Com texto de ajuda' 
    helperText='Exemplo de texto de ajuda' 
-  emptyOption="Selecione..."
-  options={options}
    value={text} 
    onChange={setText}>
+    <Select.Option>Selecione...</Select.Option>
+    <Select.Option value={1}>Opção 1</Select.Option>
</Select>

Para mais informações veja a doc atualizada.