Repository: laboratoriobridge/bold
Pull request #482 (2019-10-04 12:29:03)

Fix border transparent - agora não samba
Desculpa @calistro :sob: 


Patch:
diff --git a/package.json b/package.json
index 6686d4a3d..4912d87a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bold-ui",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.16",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://bold.bridge.ufsc.br",
diff --git a/site/pages/components/select/Select.demo.tsx b/site/pages/components/select/Select.demo.tsx
index e228650d4..89c359466 100644
--- a/site/pages/components/select/Select.demo.tsx
+++ b/site/pages/components/select/Select.demo.tsx
@@ -1,29 +1,14 @@
-import { useState } from 'react'
-
-import { FormControl, Select, Text, VFlow } from '../../../../lib'
+import { FormControl, Select } from '../../../../lib'
 
 const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']
 
 function SelectDemo() {
-  const [value, setValue] = useState()
-
-  const handleChange = (item: string) => setValue(item)
-
-  const itemToString = (item: string) => item
+  const itemToString = (item: any) => item
 
   return (
-    <VFlow>
-      <Text>Selected item: {value || '[none]'}</Text>
-      <Select<string>
-        label='Favorite pasta'
-        items={items}
-        value={value}
-        onChange={handleChange}
-        itemToString={itemToString}
-        name='favorite pasta'
-        required
-      />
-    </VFlow>
+    <FormControl label='Favorite pasta' required>
+      <Select<string> items={items} itemToString={itemToString} name='favorite pasta' required />
+    </FormControl>
   )
 }
 
diff --git a/site/pages/components/select/Suggestion.demo.tsx b/site/pages/components/select/Suggestion.demo.tsx
deleted file mode 100644
index 45e1fd200..000000000
--- a/site/pages/components/select/Suggestion.demo.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useState } from 'react'
-
-import { Select, Text, VFlow } from '../../../../lib'
-
-const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']
-
-function SuggestionDemo() {
-  const [value, setValue] = useState()
-
-  const handleChange = (item: string) => setValue(item)
-
-  const itemToString = (item: string) => item
-  const createNewItem = (inputValue: string) => inputValue
-
-  return (
-    <VFlow>
-      <Text>Selected item: {value || '[none]'}</Text>
-      <Select<string>
-        value={value}
-        label='Favorite pasta'
-        name='favorite pasta'
-        items={items}
-        onChange={handleChange}
-        itemToString={itemToString}
-        createNewItem={createNewItem}
-        icon={null}
-        required
-      />
-    </VFlow>
-  )
-}
-
-export default SuggestionDemo
diff --git a/site/pages/components/select/index.mdx b/site/pages/components/select/index.mdx
index a41d2e874..533c2d51b 100644
--- a/site/pages/components/select/index.mdx
+++ b/site/pages/components/select/index.mdx
@@ -13,11 +13,3 @@ Select is a type of input that is used in forms, where a user is submitting data
 ## Example
 
 <Demo src='pages/components/select/Select' />
-
-## Suggestion
-
-Allow select value to be whatever the user types, by providing a `createNewItem` prop.
-
-You can use the prop `openOnFocus` to control whether the suggestion menu should appear when input receives focus - default is false for suggestion selects (when createNewItem) and true for normal selects.
-
-<Demo src='pages/components/select/Suggestion' />
diff --git a/site/pages/components/table/DataTable.demo.tsx b/site/pages/components/table/DataTable.demo.tsx
index 39b117c9e..4a1fefcbc 100644
--- a/site/pages/components/table/DataTable.demo.tsx
+++ b/site/pages/components/table/DataTable.demo.tsx
@@ -48,12 +48,12 @@ function DataTableExample() {
         },
         {
           name: 'actions',
-          align: 'right',
           render: item => (
             <Button size='small' skin='ghost'>
               <Icon icon='penOutline' />
             </Button>
           ),
+          style: { textAlign: 'right' },
         },
       ]}
     />
diff --git a/site/pages/components/table/PagedTable.demo.tsx b/site/pages/components/table/PagedTable.demo.tsx
index b38c7b391..cce872e4e 100644
--- a/site/pages/components/table/PagedTable.demo.tsx
+++ b/site/pages/components/table/PagedTable.demo.tsx
@@ -67,12 +67,12 @@ function PagedTableExample() {
         },
         {
           name: 'actions',
-          align: 'right',
           render: item => (
             <Button size='small' skin='ghost'>
               <Icon icon='penOutline' />
             </Button>
           ),
+          style: { textAlign: 'right' },
         },
       ]}
     />
diff --git a/src/components/FileUploader/FileUploader.tsx b/src/components/FileUploader/FileUploader.tsx
index 52371225b..b08da3368 100644
--- a/src/components/FileUploader/FileUploader.tsx
+++ b/src/components/FileUploader/FileUploader.tsx
@@ -136,6 +136,7 @@ export const createStyles = (theme: Theme) => ({
     padding: '0.25em',
   } as CSSProperties,
   dropzone: {
+    border: `1px dashed transparent`,
     borderRadius: theme.radius.paper,
     padding: '0.52em',
   } as CSSProperties,
diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx
index b95b80965..97ab970e2 100644
--- a/src/components/Paginator/Paginator.tsx
+++ b/src/components/Paginator/Paginator.tsx
@@ -28,16 +28,13 @@ export function Paginator(props: PaginatorProps) {
   const { page, total, onChange } = props
   const locale = useLocale()
 
-  const [inputValue, setInputValue] = useState<string>(`${page + 1}`)
+  const [inputValue, setInputValue] = useState<number>(0)
   useEffect(() => {
-    setInputValue(`${page + 1}`)
+    setInputValue(page + 1)
   }, [page])
 
   const { classes } = useStyles(createStyles, inputValue)
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value)
-  }
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => setInputValue(parseInt(e.target.value, 10))
 
   const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
@@ -50,11 +47,12 @@ export function Paginator(props: PaginatorProps) {
   }
 
   const applyInputValue = () => {
-    const inputNumber = parseInt(inputValue, 10)
-    if (!isNaN(inputNumber) && inputNumber !== currentPage() && inputNumber >= 1 && inputNumber <= total) {
-      onChange && onChange(inputNumber - 1)
-    } else {
-      setInputValue(`${page + 1}`)
+    if (inputValue !== currentPage()) {
+      if (inputValue >= 1 && inputValue <= total) {
+        onChange && onChange(inputValue - 1)
+      } else {
+        setInputValue(page + 1)
+      }
     }
   }
 
@@ -111,7 +109,7 @@ Paginator.defaultProps = {
   onChange: (page: number) => null,
 } as Partial<PaginatorProps>
 
-export const createStyles = (theme: Theme, inputValue: string) => ({
+export const createStyles = (theme: Theme, inputValue: number) => ({
   paginator: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -125,7 +123,7 @@ export const createStyles = (theme: Theme, inputValue: string) => ({
     },
   } as CSSProperties,
   input: {
-    width: Number(40 + (inputValue && inputValue.length * 7)),
+    width: 40 + (inputValue && inputValue.toString().length * 7),
     textAlign: 'center',
     margin: '0 0.5rem 0 0.25rem',
   } as CSSProperties,
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 61b3bffe2..6bf90e3fe 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -42,27 +42,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
-      loading={boolean('loading', false)}
-      onChange={action('changed')}
-      onBlur={action('blur')}
-    />
-  ))
-  .add('suggestion', () => (
-    <Select<DefaultItemType>
-      label='Fruit'
-      name='fruit'
-      items={fruits}
-      error={text('error', '')}
-      icon={null}
-      createNewItem={str => ({ value: str, label: str })}
-      itemToString={item => item && item.label}
-      itemIsEqual={(a, b) => a.value === b.value}
-      placeholder='Select a value...'
-      multiple={boolean('multiple', false)}
-      clearable={boolean('clearable', true)}
-      disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', false)}
       loading={boolean('loading', false)}
       onChange={action('changed')}
       onBlur={action('blur')}
@@ -80,7 +59,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
       onChange={action('changed')}
       onBlur={action('blur')}
     />
@@ -105,7 +83,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
       loading={boolean('loading', false)}
       onChange={action('changed')}
       onBlur={action('blur')}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index be181d756..76f308448 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -35,12 +35,6 @@ export function Select<T = DefaultItemType>(props: SelectProps<T>) {
     checkedValue = value[0]
   }
 
-  if (props.multiple && props.createNewItem) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(`Select does not support props 'createNewItem' and 'multiple' together`)
-    }
-  }
-
   if (multiple) {
     return <SelectMulti<T> {...rest} value={checkedValue as T[]} onChange={onChange} itemIsEqual={itemIsEqual} />
   } else {
diff --git a/src/components/Select/SelectMenu/SelectMenuItem.tsx b/src/components/Select/SelectMenu/SelectMenuItem.tsx
index 0a8926076..9c0c24cf0 100644
--- a/src/components/Select/SelectMenu/SelectMenuItem.tsx
+++ b/src/components/Select/SelectMenu/SelectMenuItem.tsx
@@ -26,12 +26,7 @@ export function SelectMenuItem(props: SelectMenuItemProps) {
 export function SelectHelperMenuItem(props: SelectMenuItemProps) {
   const theme = useTheme()
 
-  return (
-    <SelectMenuItem
-      style={{ background: theme.pallete.surface.background, paddingTop: '0.25rem', paddingBottom: '0.25rem' }}
-      {...props}
-    />
-  )
+  return <SelectMenuItem style={{ background: theme.pallete.surface.background }} {...props} />
 }
 
 export function SelectLoadingItem(props: SelectMenuItemProps) {
@@ -52,12 +47,6 @@ export function SelectEmptyItem(props: SelectMenuItemProps) {
   return <SelectHelperMenuItem {...props}>{locale.select.emptyItem}</SelectHelperMenuItem>
 }
 
-export function SelectCreateItem(props: SelectMenuItemProps) {
-  const locale = useLocale()
-
-  return <SelectHelperMenuItem {...props}>{locale.select.createItem}</SelectHelperMenuItem>
-}
-
 export const createStyles = (theme: Theme) => ({
   item: {
     ...theme.typography.variant('main'),
diff --git a/src/components/Select/SelectSingle/SelectDownshift.tsx b/src/components/Select/SelectSingle/SelectDownshift.tsx
index 19d2dfce9..146312aac 100644
--- a/src/components/Select/SelectSingle/SelectDownshift.tsx
+++ b/src/components/Select/SelectSingle/SelectDownshift.tsx
@@ -1,6 +1,6 @@
-import Downshift, { ControllerStateAndHelpers, DownshiftProps, DownshiftState, StateChangeOptions } from 'downshift'
+import Downshift, { ControllerStateAndHelpers, DownshiftProps, StateChangeOptions } from 'downshift'
 import matchSorter from 'match-sorter'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
   /**
@@ -8,11 +8,6 @@ export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
    */
   items: T[]
 
-  /**
-   * Whether the select menu should be opened when the select is focused.
-   */
-  openOnFocus?: boolean
-
   children?(props: SelectDownshiftRenderProps<T>): React.ReactNode
 
   /**
@@ -21,13 +16,6 @@ export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
    * @param downshift The downshift controller and helpers.
    */
   onFilterChange?(filter: string, downshift: SelectDownshiftRenderProps<T>): void
-
-  /**
-   * If informed, select will allow insertion of items not present on the select.
-   * @param inputValue The string type in the text box
-   * @return The value that should be created and hold by the select
-   */
-  createNewItem?(inputValue: string): T
 }
 
 export interface SelectDownshiftRenderProps<T> extends ControllerStateAndHelpers<T>, State<T> {
@@ -54,40 +42,30 @@ export function defaultSelectFilter<T>(
  * Downshift extension with item and filter management.
  */
 export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
-  const { items, onFilterChange, children, createNewItem, openOnFocus, ...rest } = props
-
-  const stateReducer = useMemo(() => createReducer(props), [openOnFocus, props.stateReducer])
+  const { items, onFilterChange, children, ...rest } = props
 
   const [visibleItems, setVisibleItems] = useState<T[]>(items)
   useEffect(() => {
     setVisibleItems(props.items)
   }, [props.items])
 
-  const handleStateChange = (changes: StateChangeOptions<T>, downshift: ControllerStateAndHelpers<T>) => {
-    if (createNewItem && changes.hasOwnProperty('inputValue')) {
-      rest.onChange && rest.onChange(createNewItem(changes.inputValue), getStateAndHelpers(downshift))
-    }
-
-    if (changes.type === Downshift.stateChangeTypes.changeInput && changes.inputValue === '') {
-      rest.onChange && rest.onChange(null, getStateAndHelpers(downshift))
-    }
-
-    if (changes.isOpen) {
+  const handleStateChange = (options: StateChangeOptions<T>, downshift: ControllerStateAndHelpers<T>) => {
+    if (options.isOpen) {
       onFilterChange(null, getStateAndHelpers(downshift))
     }
 
-    if (changes.type === Downshift.stateChangeTypes.changeInput) {
-      onFilterChange(changes.inputValue, getStateAndHelpers(downshift))
+    if (options.type === Downshift.stateChangeTypes.changeInput) {
+      onFilterChange(options.inputValue, getStateAndHelpers(downshift))
     }
 
     if (
-      changes.type === Downshift.stateChangeTypes.clickItem ||
-      changes.type === Downshift.stateChangeTypes.keyDownEnter
+      options.type === Downshift.stateChangeTypes.clickItem ||
+      options.type === Downshift.stateChangeTypes.keyDownEnter
     ) {
       onFilterChange(null, getStateAndHelpers(downshift))
     }
 
-    props.onStateChange && props.onStateChange(changes, getStateAndHelpers(downshift))
+    props.onStateChange && props.onStateChange(options, getStateAndHelpers(downshift))
   }
 
   const handleChange = (item: T, downshift: ControllerStateAndHelpers<T>) => {
@@ -102,7 +80,7 @@ export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
   })
 
   return (
-    <Downshift {...rest} stateReducer={stateReducer} onStateChange={handleStateChange} onChange={handleChange}>
+    <Downshift {...rest} onStateChange={handleStateChange} onChange={handleChange}>
       {downshift => children(getStateAndHelpers(downshift))}
     </Downshift>
   )
@@ -114,15 +92,3 @@ SelectDownshift.defaultProps = {
     setVisibleItems(defaultSelectFilter(items, filter, itemToString))
   },
 } as Partial<SelectDownshiftProps<any>>
-
-function createReducer(props: SelectDownshiftProps<any>) {
-  const { openOnFocus = props.createNewItem ? false : undefined, stateReducer } = props
-
-  return (state: DownshiftState<any>, changes: StateChangeOptions<any>) => {
-    if (openOnFocus === false && changes.type === undefined && !state.isOpen && changes.isOpen) {
-      return { ...changes, isOpen: false }
-    }
-
-    return stateReducer ? stateReducer(state, changes) : changes
-  }
-}
diff --git a/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx b/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
index 9b134de3c..545380623 100644
--- a/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
+++ b/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
@@ -3,13 +3,12 @@ import React, { CSSProperties } from 'react'
 
 import { useStyles } from '../../../styles'
 import { SelectEmptyItem, SelectLoadingItem, SelectMenu, SelectMenuItem } from '../SelectMenu'
-import { SelectCreateItem } from '../SelectMenu/SelectMenuItem'
 
 export interface SelectDownshiftMenuProps<T> {
   items: T[]
   loading: boolean
   downshift: ControllerStateAndHelpers<T>
-  createNewItem?: boolean
+
   components?: Partial<SelectMenuComponents<T>>
 
   /**
@@ -21,7 +20,6 @@ export interface SelectDownshiftMenuProps<T> {
 }
 
 export interface SelectMenuComponents<T> {
-  CreateItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   LoadingItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   EmptyItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   Item: React.ComponentType<SelectDownshiftMenuProps<T> & { item: T; index: number }>
@@ -32,12 +30,11 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
     items,
     loading: isLoading,
     components,
-    createNewItem,
     downshift: { isOpen, getMenuProps },
   } = props
 
   const { classes } = useStyles(createStyles)
-  const { CreateItem, LoadingItem, EmptyItem, Item } = { ...defaultComponents, ...components }
+  const { LoadingItem, EmptyItem, Item } = { ...defaultComponents, ...components }
 
   return (
     <div className={classes.wrapper}>
@@ -45,9 +42,7 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
         <SelectMenu {...getMenuProps({ refKey: 'menuRef' })}>
           {isLoading && <LoadingItem {...props} />}
 
-          {!isLoading && createNewItem && (items || []).length > 0 && <CreateItem {...props} />}
-
-          {!isLoading && !createNewItem && (items || []).length === 0 && <EmptyItem {...props} />}
+          {!isLoading && (!items || items.length === 0) && <EmptyItem {...props} />}
 
           {items && items.map((item, index) => <Item key={index} index={index} item={item} {...props} />)}
         </SelectMenu>
@@ -57,7 +52,6 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
 }
 
 export const defaultComponents: SelectMenuComponents<any> = {
-  CreateItem: (props: SelectDownshiftMenuProps<any>) => <SelectCreateItem />,
   LoadingItem: (props: SelectDownshiftMenuProps<any>) => <SelectLoadingItem />,
   EmptyItem: (props: SelectDownshiftMenuProps<any>) => <SelectEmptyItem />,
   Item: (props: SelectDownshiftMenuProps<any> & { item: any; index: number }) => {
diff --git a/src/components/Select/SelectSingle/SelectSingle.tsx b/src/components/Select/SelectSingle/SelectSingle.tsx
index a4ea7b9bb..dec37cf10 100644
--- a/src/components/Select/SelectSingle/SelectSingle.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.tsx
@@ -23,9 +23,7 @@ export interface SelectSingleProps<T = DefaultItemType>
   itemToString: SelectDownshiftProps<T>['itemToString']
   onChange?: SelectDownshiftProps<T>['onChange']
   isOpen?: SelectDownshiftProps<T>['isOpen']
-  openOnFocus?: SelectDownshiftProps<T>['openOnFocus']
   onFilterChange?: SelectDownshiftProps<T>['onFilterChange']
-  createNewItem?: SelectDownshiftProps<T>['createNewItem']
 
   loading?: SelectDownshiftMenuProps<T>['loading']
   renderItem?: SelectDownshiftMenuProps<T>['renderItem']
@@ -39,9 +37,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
     itemToString,
     onChange,
     isOpen,
-    openOnFocus,
     onFilterChange,
-    createNewItem,
     loading,
     renderItem,
     components,
@@ -83,9 +79,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
         itemToString={itemToString}
         onChange={onChange}
         isOpen={isOpen}
-        openOnFocus={openOnFocus}
         onFilterChange={onFilterChange}
-        createNewItem={createNewItem}
         labelId={formControlProps.labelId}
       >
         {downshift => {
@@ -95,7 +89,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
             <div className={css(style)}>
               <div>
                 <TextInput
-                  icon={downshiftOpen ? 'angleUp' : 'angleDown'}
+                  icon={isOpen ? 'zoomOutline' : downshiftOpen ? 'angleUp' : 'angleDown'}
                   {...rest}
                   onBlur={handleInputBlur(downshift)}
                   onFocus={handleInputFocus(downshift)}
@@ -114,7 +108,6 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
                 loading={loading}
                 renderItem={renderItem}
                 components={components}
-                createNewItem={!!createNewItem}
               />
             </div>
           )
diff --git a/src/components/Table/DataTable/DataTable.stories.tsx b/src/components/Table/DataTable/DataTable.stories.tsx
index 45f999525..a1f61c4d1 100644
--- a/src/components/Table/DataTable/DataTable.stories.tsx
+++ b/src/components/Table/DataTable/DataTable.stories.tsx
@@ -33,7 +33,7 @@ storiesOf('Components|Table', module).add('DataTable', () => (
       { name: 'age', header: 'Age', render: (row: Row) => row.age },
       {
         name: 'buttons',
-        align: 'right',
+        style: { textAlign: 'right', whiteSpace: 'nowrap' },
         render: (row: Row) => (
           <>
             <Button size='small' skin='ghost'>
diff --git a/src/components/Table/DataTable/DataTable.tsx b/src/components/Table/DataTable/DataTable.tsx
index 03b68243e..d359aed3c 100644
--- a/src/components/Table/DataTable/DataTable.tsx
+++ b/src/components/Table/DataTable/DataTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ExternalStyles, useCss } from '../../../styles'
+import { ExternalStyles } from '../../../styles'
 import { SortDirection } from '../SortableLabel/SortableLabel'
 import { Table, TableHead, TableHeader, TableHeaderProps, TableProps, TableRow } from '../Table'
 
@@ -11,7 +11,6 @@ export interface TableColumnConfig<T = any> {
   header?: React.ReactNode
   sortable?: boolean
   style?: ExternalStyles
-  align?: 'left' | 'center' | 'right'
   render(row: T): React.ReactNode
 }
 
@@ -31,8 +30,6 @@ export interface DataTableRenderProps extends DataTableProps {
 }
 
 export function DataTable<T = any>(props: DataTableProps<T>) {
-  const { css } = useCss()
-
   const getColumn = (columnName: string): TableColumnConfig => {
     return props.columns.find(col => col.name === columnName)
   }
@@ -44,15 +41,12 @@ export function DataTable<T = any>(props: DataTableProps<T>) {
       throw new Error(`Column '${column}' not found.`)
     }
 
-    const { name, sortable, style } = col
-
     return {
-      key: name,
-      'data-name': name,
-      sortable,
+      key: col.name,
+      'data-name': col.name,
+      sortable: col.sortable,
       sortDirection: getSortDirection(col),
       onSortChange: handleSortChange(col),
-      style: css(defaultColumnStyles(col), style),
     }
   }
 
@@ -128,7 +122,3 @@ const changeSort = (sort: string[], name: string, dir: SortDirection): string[]
   })
   return swap ? newArray : [...newArray, newSort]
 }
-
-export const defaultColumnStyles = (col: TableColumnConfig) => ({
-  textAlign: col.align,
-})
diff --git a/src/components/Table/DataTable/TableFilledBody.tsx b/src/components/Table/DataTable/TableFilledBody.tsx
index 9a9b777a6..6578257ea 100644
--- a/src/components/Table/DataTable/TableFilledBody.tsx
+++ b/src/components/Table/DataTable/TableFilledBody.tsx
@@ -1,37 +1,39 @@
 import React from 'react'
 
-import { useCss } from '../../../styles'
 import { TableBody, TableCell, TableRow } from '../Table'
 
-import { DataTableProps, defaultColumnStyles } from './DataTable'
+import { DataTableProps } from './DataTable'
 import { TableLoadingRow } from './TableLoadingRow'
 import { TablePlaceholderRow } from './TablePlaceholderRow'
 
 export interface TableFilledBodyProps extends Pick<DataTableProps, 'columns' | 'rows' | 'loading' | 'onRowClick'> {}
 
-export function TableFilledBody(props: TableFilledBodyProps) {
-  const { columns, rows, loading, onRowClick } = props
-  const { css } = useCss()
-
-  const handleClick = row => e => onRowClick(row)
-
-  const isEmpty = () => !rows || rows.length === 0
-
-  return (
-    <TableBody>
-      {loading && <TableLoadingRow colSpan={columns.length} />}
-
-      {!loading && isEmpty() && <TablePlaceholderRow colSpan={columns.length} />}
-
-      {rows.map((row, idx) => (
-        <TableRow key={idx} onClick={onRowClick && handleClick(row)}>
-          {columns.map((col, colIdx) => (
-            <TableCell key={colIdx} style={css(defaultColumnStyles(col), col.style)}>
-              {col.render(row)}
-            </TableCell>
-          ))}
-        </TableRow>
-      ))}
-    </TableBody>
-  )
+export class TableFilledBody extends React.PureComponent<TableFilledBodyProps> {
+  render() {
+    const { columns, rows, loading, onRowClick } = this.props
+
+    return (
+      <TableBody>
+        {loading && <TableLoadingRow colSpan={columns.length} />}
+
+        {!loading && this.isEmpty() && <TablePlaceholderRow colSpan={columns.length} />}
+
+        {rows.map((row, idx) => (
+          <TableRow key={idx} onClick={onRowClick && this.handleClick(row)}>
+            {columns.map((col, colIdx) => (
+              <TableCell key={colIdx} style={col.style}>
+                {col.render(row)}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    )
+  }
+
+  private handleClick = row => e => {
+    this.props.onRowClick(row)
+  }
+
+  private isEmpty = () => !this.props.rows || this.props.rows.length === 0
 }
diff --git a/src/components/Table/TableFooter/TableFooter.stories.tsx b/src/components/Table/TableFooter/TableFooter.stories.tsx
index 6c694b3fc..44e90b79d 100644
--- a/src/components/Table/TableFooter/TableFooter.stories.tsx
+++ b/src/components/Table/TableFooter/TableFooter.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import { boolean, number } from '@storybook/addon-knobs'
+import { number } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
@@ -10,8 +10,7 @@ storiesOf('Components|Table', module).add('TableFooter', () => (
     page={number('page', 0)}
     pageSize={number('pageSize', 10)}
     totalPages={number('totalPages', 10)}
-    abbrev={boolean('abbrev', false)}
-    totalElements={number('totalElements', 1000)}
+    totalElements={number('totalElements', 100)}
     onPageChange={action('page-changed')}
     onSizeChange={action('size-changed')}
   />
diff --git a/src/components/Table/TableFooter/TableFooter.tsx b/src/components/Table/TableFooter/TableFooter.tsx
index db3acf332..dcb7c6615 100644
--- a/src/components/Table/TableFooter/TableFooter.tsx
+++ b/src/components/Table/TableFooter/TableFooter.tsx
@@ -1,6 +1,5 @@
 import React, { CSSProperties } from 'react'
 
-import { useLocale } from '../../../i18n'
 import { ExternalStyles, Theme, useStyles } from '../../../styles'
 import { HFlow } from '../../HFlow'
 import { Number } from '../../Number'
@@ -13,7 +12,6 @@ export interface TableFooterProps {
   page: number
   totalPages: number
   totalElements: number
-  abbrev?: boolean
   pageSize: number
   style?: ExternalStyles
   sizeOptions?: number[]
@@ -22,9 +20,8 @@ export interface TableFooterProps {
 }
 
 export function TableFooter(props: TableFooterProps) {
-  const { style, page, totalPages, totalElements, abbrev, pageSize, sizeOptions, onSizeChange, onPageChange } = props
+  const { style, page, totalPages, totalElements, pageSize, sizeOptions, onSizeChange, onPageChange } = props
   const { classes, css } = useStyles(createStyles)
-  const locale = useLocale()
 
   const showPagination = () => {
     return totalElements > pageSize || totalElements > Math.min(...sizeOptions)
@@ -33,17 +30,7 @@ export function TableFooter(props: TableFooterProps) {
   return (
     <div className={css(classes.footer, style)}>
       <span className={classes.results}>
-        <Number
-          value={totalElements}
-          suffix={` ${
-            totalElements === 0
-              ? locale.tableFooter.results.zero
-              : totalElements === 1
-              ? locale.tableFooter.results.one
-              : locale.tableFooter.results.other
-          }`}
-          abbrev={abbrev}
-        />
+        <Number value={totalElements} suffix={' ' + (totalElements === 1 ? 'resultado' : 'resultados')} abbrev />
       </span>
       {showPagination() && (
         <div className={classes.pagination}>
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 7ab96682a..3fd679cf9 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -27,18 +27,10 @@ const locale = {
     currentPage: 'Current page',
   },
   select: {
-    createItem: 'Select an item or type a new value',
     emptyItem: 'No results were found',
     loadingItem: 'Loading...',
     removeItem: 'Remove',
   },
-  tableFooter: {
-    results: {
-      zero: 'results',
-      one: 'result',
-      other: 'results',
-    },
-  },
 }
 
 export default locale
diff --git a/src/i18n/locales/pt-BR.ts b/src/i18n/locales/pt-BR.ts
index b1ad0c395..1eaded132 100644
--- a/src/i18n/locales/pt-BR.ts
+++ b/src/i18n/locales/pt-BR.ts
@@ -29,18 +29,10 @@ const locale: LocaleConfiguration = {
     currentPage: 'Página atual',
   },
   select: {
-    createItem: 'Selecione um item ou digite um novo valor',
     emptyItem: 'Nenhum resultado encontrado',
     loadingItem: 'Carregando...',
     removeItem: 'Remover',
   },
-  tableFooter: {
-    results: {
-      zero: 'resultados',
-      one: 'resultado',
-      other: 'resultados',
-    },
-  },
 }
 
 export default locale


Test patch:
diff --git a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
index 941b586ec..03497d211 100644
--- a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
+++ b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`should render correct without extension 1`] = `
 }
 
 .emotion-3 {
+  border: 1px dashed transparent;
   border-radius: 4px;
   padding: 0.52em;
 }
@@ -227,6 +228,7 @@ exports[`should render correctly at initial state 1`] = `
 }
 
 .emotion-3 {
+  border: 1px dashed transparent;
   border-radius: 4px;
   padding: 0.52em;
 }
@@ -325,6 +327,7 @@ exports[`should render correctly at uploading state 1`] = `
 }
 
 .emotion-3 {
+  border: 1px dashed transparent;
   border-radius: 4px;
   padding: 0.52em;
 }
@@ -548,6 +551,7 @@ exports[`should render correctly complete state 1`] = `
 }
 
 .emotion-3 {
+  border: 1px dashed transparent;
   border-radius: 4px;
   padding: 0.52em;
 }
diff --git a/src/components/Paginator/Paginator.test.tsx b/src/components/Paginator/Paginator.test.tsx
index 34e248e29..43ba2df71 100644
--- a/src/components/Paginator/Paginator.test.tsx
+++ b/src/components/Paginator/Paginator.test.tsx
@@ -52,31 +52,6 @@ it('should call onChange when Enter is pressed', () => {
   expect(handleChange).toHaveBeenCalledTimes(1)
 })
 
-it('should reset value if value is not an integer', () => {
-  const handleChange = jest.fn()
-  const { container } = render(<Paginator page={4} total={10} onChange={handleChange} />)
-  const input = container.querySelector('input')
-
-  fireEvent.change(input, { target: { value: 'a' } })
-  fireEvent.blur(input)
-
-  expect(input.value).toBe('5')
-})
-
-it('should reset value if value is less than 1 or bigger than total', () => {
-  const handleChange = jest.fn()
-  const { container } = render(<Paginator page={4} total={10} onChange={handleChange} />)
-  const input = container.querySelector('input')
-
-  fireEvent.change(input, { target: { value: '0' } })
-  fireEvent.blur(input)
-  expect(input.value).toBe('5')
-
-  fireEvent.change(input, { target: { value: '11' } })
-  fireEvent.blur(input)
-  expect(input.value).toBe('5')
-})
-
 it('should allow message customization via locale context', () => {
   const { container, queryByText } = render(
     <LocaleContext.Provider value={ptBr}>
diff --git a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
index d0fd3b546..556becdca 100644
--- a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -73,6 +73,65 @@ exports[`should render correctly 1`] = `
   position: relative;
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -147,65 +206,6 @@ exports[`should render correctly 1`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 <div>
   <div
     class="emotion-7"
@@ -293,6 +293,65 @@ exports[`should render correctly 2`] = `
   position: relative;
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -367,65 +426,6 @@ exports[`should render correctly 2`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -567,6 +567,65 @@ exports[`should render correctly 3`] = `
   position: relative;
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -641,65 +700,6 @@ exports[`should render correctly 3`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index fc777c92d..1590e457c 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -17,35 +17,28 @@ const items: DefaultItemType[] = [
 afterEach(jest.clearAllMocks)
 
 // tslint:disable jsx-no-lambda
-function SelectTest(props: Partial<SelectProps<DefaultItemType>>) {
+function createSelect(props: Partial<SelectProps<DefaultItemType>> = {}) {
   return <Select<DefaultItemType> items={items} itemToString={item => item && item.label} {...props} />
 }
 
 describe('single', () => {
   it('should render without errors', () => {
-    render(<SelectTest value={items[3]} />)
+    render(createSelect({ value: items[3] }))
   })
   it('should warn when value is an array', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => null)
-    render(<SelectTest value={[]} />)
+    render(createSelect({ value: [] }))
     expect(spy).toMatchSnapshot()
   })
 })
 
 describe('multiple', () => {
   it('should render without errors', () => {
-    render(SelectTest({ multiple: true, value: [items[4], items[3]] }))
+    render(createSelect({ multiple: true, value: [items[4], items[3]] }))
   })
   it('should warn when value is NOT an array', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => null)
-    render(<SelectTest value={items[0]} multiple />)
+    render(createSelect({ multiple: true, value: items[0] }))
     expect(spy).toMatchSnapshot()
   })
-  it('should throw an error when createNewItem is set together with multiple prop', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => undefined)
-
-    expect(() => {
-      render(<SelectTest createNewItem={jest.fn()} multiple />)
-    }).toThrowErrorMatchingInlineSnapshot(`"Select does not support props 'createNewItem' and 'multiple' together"`)
-  })
 })
diff --git a/src/components/Select/SelectMenu/SelectMenuItem.test.tsx b/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
index f08e933ae..a45842c3a 100644
--- a/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
+++ b/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
@@ -1,13 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import {
-  SelectCreateItem,
-  SelectEmptyItem,
-  SelectHelperMenuItem,
-  SelectLoadingItem,
-  SelectMenuItem,
-} from './SelectMenuItem'
+import { SelectEmptyItem, SelectHelperMenuItem, SelectLoadingItem, SelectMenuItem } from './SelectMenuItem'
 
 describe('SelectMenuItem', () => {
   it('should render correctly', () => {
@@ -46,10 +40,3 @@ describe('SelectEmptyItem', () => {
     expect(container).toMatchSnapshot()
   })
 })
-
-describe('SelectCreateItem', () => {
-  it('should render correctly', () => {
-    const { container } = render(<SelectCreateItem />)
-    expect(container).toMatchSnapshot()
-  })
-})
diff --git a/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap b/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
index 84c14bd25..18f0b5a14 100644
--- a/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
+++ b/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
@@ -1,45 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectCreateItem should render correctly 1`] = `
-.emotion-0 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-  border-bottom: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.5rem 0.5rem;
-  -webkit-transition: .1s ease;
-  transition: .1s ease;
-  background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.emotion-0:last-of-type {
-  border-bottom: none;
-}
-
-.emotion-0:hover {
-  background: #F0F0F5;
-}
-
-.emotion-0:focus {
-  outline: 0;
-  border-radius: 3px;
-  box-shadow: inset 0 0 0 2px #0069D0;
-}
-
-<div>
-  <li
-    aria-selected="false"
-    class="emotion-0"
-  >
-    Select an item or type a new value
-  </li>
-</div>
-`;
-
 exports[`SelectEmptyItem should render correctly 1`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
@@ -52,8 +12,6 @@ exports[`SelectEmptyItem should render correctly 1`] = `
   -webkit-transition: .1s ease;
   transition: .1s ease;
   background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .emotion-0:last-of-type {
@@ -143,8 +101,6 @@ exports[`SelectLoadingItem should render correctly 1`] = `
   -webkit-transition: .1s ease;
   transition: .1s ease;
   background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .emotion-1:last-of-type {
diff --git a/src/components/Select/SelectSingle/SelectSingle.test.tsx b/src/components/Select/SelectSingle/SelectSingle.test.tsx
index 4dcee613f..4ca6a4702 100644
--- a/src/components/Select/SelectSingle/SelectSingle.test.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.test.tsx
@@ -1,9 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
-import { resetIdCounter } from 'downshift'
 import React from 'react'
 
-import en from '../../../i18n/locales/en-US'
-
 import { DefaultItemType, SelectSingle, SelectSingleProps } from './SelectSingle'
 
 jest.mock('../../../util/string')
@@ -21,8 +18,6 @@ function SelectTest(props: Partial<SelectSingleProps>) {
   return <SelectSingle items={items} itemToString={item => item.label} placeholder='Select a value...' {...props} />
 }
 
-beforeEach(() => resetIdCounter())
-
 it('should render correctly when closed', () => {
   const { container } = render(<SelectTest />)
   expect(container).toMatchSnapshot()
@@ -53,14 +48,6 @@ it('should call the onChange event when an item is clicked', () => {
   expect(onChange).toHaveBeenLastCalledWith(items[2], expect.anything())
 })
 
-it('should call the onChange event with target.value empty when text input is cleared', () => {
-  const onChange = jest.fn()
-  const { container } = render(<SelectTest onChange={onChange} value={items[0]} />)
-
-  fireEvent.change(container.querySelector('input'), { target: { value: '' } })
-  expect(onChange).toHaveBeenLastCalledWith(null, expect.anything())
-})
-
 it('should render current value and allow changes via prop', () => {
   const { container, rerender } = render(<SelectTest />)
   const input = container.querySelector('input')
@@ -140,39 +127,3 @@ describe('input label', () => {
     expect(container.querySelector('input').getAttribute('aria-labelledby')).toBeFalsy()
   })
 })
-
-describe('createNewItem', () => {
-  it('should allow selectedItem to become whatever is typed on text input', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const change = jest.fn()
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} onChange={change} />)
-
-    fireEvent.change(container.querySelector('input'), { target: { value: 'my item' } })
-
-    expect(createNewItem).toHaveBeenCalledWith('my item')
-    expect(change).toHaveBeenCalledWith({ value: -1, label: 'my item' }, expect.anything())
-  })
-  it('should render CreateItemSelect message', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { queryByText } = render(<SelectTest id='foo' createNewItem={createNewItem} isOpen />)
-    expect(queryByText(en.select.createItem)).toBeTruthy()
-  })
-  it('should NOT render CreateItemSelect message when suggestion list is empty', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container, queryByText } = render(<SelectTest id='foo' createNewItem={createNewItem} isOpen />)
-    fireEvent.change(container.querySelector('input'), { target: { value: 'empty suggestion' } })
-    expect(queryByText(en.select.createItem)).toBeFalsy()
-  })
-  it('should NOT open select when focus by default', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} />)
-    fireEvent.focus(container.querySelector('input'))
-    expect(container.querySelector('ul')).toBeFalsy()
-  })
-  it('should open select when focus and openOnFocus is true', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} openOnFocus />)
-    fireEvent.focus(container.querySelector('input'))
-    expect(container.querySelector('ul')).toBeTruthy()
-  })
-})
diff --git a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index b43328128..9a14ba966 100644
--- a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -187,7 +187,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-labelledby="downshift-0-label"
+      aria-labelledby="downshift-12-label"
       class="emotion-7"
       role="combobox"
     >
@@ -199,7 +199,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
             aria-autocomplete="list"
             autocomplete="off"
             class="emotion-1"
-            id="downshift-0-input"
+            id="downshift-12-input"
             placeholder="Select a value..."
             type="text"
             value=""
@@ -438,7 +438,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
             aria-labelledby="label-abc"
             autocomplete="off"
             class="emotion-1"
-            id="downshift-0-input"
+            id="downshift-13-input"
             placeholder="Select a value..."
             type="text"
             value=""
@@ -918,8 +918,8 @@ exports[`should render correctly when opened 1`] = `
     <div
       aria-expanded="true"
       aria-haspopup="listbox"
-      aria-labelledby="downshift-0-label"
-      aria-owns="downshift-0-menu"
+      aria-labelledby="downshift-1-label"
+      aria-owns="downshift-1-menu"
       class="emotion-12"
       role="combobox"
     >
@@ -929,10 +929,10 @@ exports[`should render correctly when opened 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="downshift-0-menu"
+            aria-controls="downshift-1-menu"
             autocomplete="off"
             class="emotion-0"
-            id="downshift-0-input"
+            id="downshift-1-input"
             placeholder="Select a value..."
             type="text"
             value=""
@@ -955,7 +955,7 @@ exports[`should render correctly when opened 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                    d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                   />
                 </svg>
               </span>
@@ -967,15 +967,15 @@ exports[`should render correctly when opened 1`] = `
         class="emotion-11"
       >
         <ul
-          aria-labelledby="downshift-0-label"
+          aria-labelledby="downshift-1-label"
           class="emotion-10"
-          id="downshift-0-menu"
+          id="downshift-1-menu"
           role="listbox"
         >
           <li
             aria-selected="false"
             class="emotion-5"
-            id="downshift-0-item-0"
+            id="downshift-1-item-0"
             role="option"
           >
             Apple
@@ -983,7 +983,7 @@ exports[`should render correctly when opened 1`] = `
           <li
             aria-selected="false"
             class="emotion-5"
-            id="downshift-0-item-1"
+            id="downshift-1-item-1"
             role="option"
           >
             Banana
@@ -991,7 +991,7 @@ exports[`should render correctly when opened 1`] = `
           <li
             aria-selected="false"
             class="emotion-5"
-            id="downshift-0-item-2"
+            id="downshift-1-item-2"
             role="option"
           >
             Grape
@@ -999,7 +999,7 @@ exports[`should render correctly when opened 1`] = `
           <li
             aria-selected="false"
             class="emotion-5"
-            id="downshift-0-item-3"
+            id="downshift-1-item-3"
             role="option"
           >
             Orange
@@ -1007,7 +1007,7 @@ exports[`should render correctly when opened 1`] = `
           <li
             aria-selected="false"
             class="emotion-5"
-            id="downshift-0-item-4"
+            id="downshift-1-item-4"
             role="option"
           >
             Pear
diff --git a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index ea9b8f905..f4d7af6ac 100644
--- a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -394,7 +394,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                        d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                       />
                     </svg>
                   </span>
@@ -847,7 +847,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
                         width="1em"
                       >
                         <path
-                          d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                          d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                         />
                       </svg>
                     </span>
@@ -1301,7 +1301,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                        d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                       />
                     </svg>
                   </span>
diff --git a/src/components/Table/DataTable/DataTable.test.tsx b/src/components/Table/DataTable/DataTable.test.tsx
index b080dcd6d..29e47faec 100644
--- a/src/components/Table/DataTable/DataTable.test.tsx
+++ b/src/components/Table/DataTable/DataTable.test.tsx
@@ -17,7 +17,7 @@ const rows: Row[] = [
 ]
 
 const sortHandler = jest.fn()
-const DataTableTest = (props: Partial<DataTableProps>) => (
+const createTable = (props: Partial<DataTableProps> = {}) => (
   // tslint:disable jsx-no-lambda
   <DataTable
     rows={rows}
@@ -30,8 +30,7 @@ const DataTableTest = (props: Partial<DataTableProps>) => (
         name: 'age',
         header: 'Age',
         sortable: true,
-        align: 'right',
-        style: { color: 'red' },
+        style: { textAlign: 'right' },
         render: (row: Row) => row.age,
       },
     ]}
@@ -40,12 +39,12 @@ const DataTableTest = (props: Partial<DataTableProps>) => (
 )
 
 it('should render correctly', () => {
-  const { container } = render(<DataTableTest />)
+  const { container } = render(createTable())
   expect(container).toMatchSnapshot()
 })
 
 it('should call onSortChange with right parameters when clicked over column title', () => {
-  const { container } = render(<DataTableTest />)
+  const { container } = render(createTable())
   fireEvent.click(container.querySelector('th[data-name="id"] span'))
   expect(sortHandler).toHaveBeenLastCalledWith(['-id'])
 
@@ -67,7 +66,7 @@ it('should render TableLoadingRow when loading prop is on', () => {
 
 it('should accept the render prop', () => {
   const renderSpy = jest.fn()
-  render(<DataTableTest render={renderSpy} />)
+  render(createTable({ render: renderSpy }))
   expect(renderSpy).toHaveBeenCalledWith(
     expect.objectContaining({
       columns: expect.anything(),
@@ -78,7 +77,7 @@ it('should accept the render prop', () => {
 describe('onRowClick prop', () => {
   it('should call the prop with the clicked row', () => {
     const clickHandler = jest.fn()
-    const { container } = render(<DataTableTest onRowClick={clickHandler} />)
+    const { container } = render(createTable({ onRowClick: clickHandler }))
     const trs = container.querySelectorAll('tbody tr')
 
     expect(clickHandler).not.toHaveBeenCalled()
@@ -93,7 +92,7 @@ describe('onRowClick prop', () => {
 
 describe('getColumn', () => {
   const renderSpy = jest.fn()
-  render(<DataTableTest render={renderSpy} />)
+  render(createTable({ render: renderSpy }))
   const getColumn = renderSpy.mock.calls[0][0].getColumn
 
   it('should return the column configuration by its name', () => {
@@ -108,7 +107,7 @@ describe('getColumn', () => {
 
 describe('getHeaderProps', () => {
   const renderSpy = jest.fn()
-  render(<DataTableTest render={renderSpy} />)
+  render(createTable({ render: renderSpy }))
   const getHeaderProps = renderSpy.mock.calls[0][0].getHeaderProps
 
   it('should return the table header props of a column configuration', () => {
@@ -116,7 +115,6 @@ describe('getHeaderProps', () => {
       name: 'id',
       render: () => null,
       sortable: true,
-      align: 'right',
     })
 
     expect(config).toMatchObject({
diff --git a/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap b/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap
index 0604aeab4..718cb1f81 100644
--- a/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap
@@ -1,6 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
+.emotion-4 {
+  text-align: left;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #D3D4DD;
+}
+
+.emotion-17 {
+  text-align: left;
+  padding: 0 1rem;
+  height: 2.5rem;
+  border-bottom: 1px solid #D3D4DD;
+}
+
 .emotion-30 {
   width: 100%;
   border-collapse: collapse;
@@ -11,12 +24,6 @@ exports[`should render correctly 1`] = `
   background: #F0F0F5;
 }
 
-.emotion-4 {
-  text-align: left;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid #D3D4DD;
-}
-
 .emotion-3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -39,28 +46,12 @@ exports[`should render correctly 1`] = `
   fill: #0069D0;
 }
 
-.emotion-14 {
-  text-align: left;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid #D3D4DD;
-  text-align: right;
-  color: red;
-}
-
-.emotion-17 {
-  text-align: left;
-  padding: 0 1rem;
-  height: 2.5rem;
-  border-bottom: 1px solid #D3D4DD;
-}
-
 .emotion-19 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
   border-bottom: 1px solid #D3D4DD;
   text-align: right;
-  color: red;
 }
 
 <div>
@@ -124,7 +115,7 @@ exports[`should render correctly 1`] = `
           </span>
         </th>
         <th
-          class="emotion-14"
+          class="emotion-4"
           data-name="age"
         >
           <span
diff --git a/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap b/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
index a3e4cd82a..86b2b7872 100644
--- a/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
+++ b/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
@@ -1,6 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
+.emotion-4 {
+  text-align: left;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #D3D4DD;
+}
+
+.emotion-13 {
+  text-align: left;
+  padding: 0 1rem;
+  height: 2.5rem;
+  border-bottom: 1px solid #D3D4DD;
+}
+
 .emotion-26 {
   width: 100%;
   border-collapse: collapse;
@@ -11,12 +24,6 @@ exports[`should render correctly 1`] = `
   background: #F0F0F5;
 }
 
-.emotion-4 {
-  text-align: left;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid #D3D4DD;
-}
-
 .emotion-3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -39,13 +46,6 @@ exports[`should render correctly 1`] = `
   fill: #0069D0;
 }
 
-.emotion-13 {
-  text-align: left;
-  padding: 0 1rem;
-  height: 2.5rem;
-  border-bottom: 1px solid #D3D4DD;
-}
-
 .emotion-27 {
   font-weight: bold;
   display: -webkit-box;
@@ -211,8 +211,10 @@ exports[`should render correctly 1`] = `
       <span
         class="emotion-27"
       >
-        <span>
-          3 results
+        <span
+          title="3"
+        >
+          3 resultados
         </span>
       </span>
     </div>
diff --git a/src/components/Table/TableFooter/TableFooter.test.tsx b/src/components/Table/TableFooter/TableFooter.test.tsx
index dbb038b50..1321026f4 100644
--- a/src/components/Table/TableFooter/TableFooter.test.tsx
+++ b/src/components/Table/TableFooter/TableFooter.test.tsx
@@ -1,12 +1,9 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../../i18n'
-import ptBr from '../../../i18n/locales/pt-BR'
-
 import { TableFooter, TableFooterProps } from './TableFooter'
 
-const TableFooterTest = (props: Partial<TableFooterProps>) => {
+const createComponent = (props?: Partial<TableFooterProps>) => {
   return (
     <TableFooter
       page={1}
@@ -21,59 +18,26 @@ const TableFooterTest = (props: Partial<TableFooterProps>) => {
 }
 
 it('renders correctly', () => {
-  const { container } = render(<TableFooterTest />)
+  const { container } = render(createComponent())
   expect(container).toMatchSnapshot()
 })
 
 it('renders without pagination', () => {
-  const { container } = render(<TableFooterTest totalElements={10} />)
+  const { container } = render(createComponent({ totalElements: 10 }))
   expect(container).toMatchSnapshot()
 })
 
 it('does not show pagination options if totalElements is less than pageSize and minimum optionSize', () => {
-  const { container } = render(<TableFooterTest totalElements={10} pageSize={10} sizeOptions={[10, 30, 50, 100]} />)
+  const { container } = render(createComponent({ totalElements: 10, pageSize: 10, sizeOptions: [10, 30, 50, 100] }))
   expect(container.querySelector('input')).toBeFalsy()
 
   const { container: container2 } = render(
-    <TableFooterTest totalElements={11} pageSize={10} sizeOptions={[10, 30, 50, 100]} />
+    createComponent({ totalElements: 11, pageSize: 10, sizeOptions: [10, 30, 50, 100] })
   )
   expect(container2.querySelector('input')).toBeTruthy()
 
   const { container: container3 } = render(
-    <TableFooterTest totalElements={15} pageSize={30} sizeOptions={[10, 30, 50, 100]} />
+    createComponent({ totalElements: 15, pageSize: 30, sizeOptions: [10, 30, 50, 100] })
   )
   expect(container3.querySelector('input')).toBeTruthy()
 })
-
-it('change default state when abbrev equals true', () => {
-  const { container } = render(<TableFooterTest totalElements={1000} abbrev />)
-  expect(container.querySelector('[title="1,000"]').textContent).toEqual('1k results')
-})
-
-it('default value of prop abbrev equals false', () => {
-  const { container } = render(<TableFooterTest totalElements={1000} />)
-  expect(container.querySelector('div > span').textContent).toEqual('1,000 results')
-})
-
-it('should allow message customization via locale context', () => {
-  const { container, rerender } = render(
-    <LocaleContext.Provider value={ptBr}>
-      <TableFooterTest totalElements={0} />
-    </LocaleContext.Provider>
-  )
-  expect(container.textContent).toEqual('0 ' + ptBr.tableFooter.results.zero)
-
-  rerender(
-    <LocaleContext.Provider value={ptBr}>
-      <TableFooterTest totalElements={1} />
-    </LocaleContext.Provider>
-  )
-  expect(container.textContent).toEqual('1 ' + ptBr.tableFooter.results.one)
-
-  rerender(
-    <LocaleContext.Provider value={ptBr}>
-      <TableFooterTest totalElements={2} />
-    </LocaleContext.Provider>
-  )
-  expect(container.textContent).toEqual('2 ' + ptBr.tableFooter.results.other)
-})
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 8f16b9a2d..7b3f75412 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -196,6 +196,58 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
+.emotion-12 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-12 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-12:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-12:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-12:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-8 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -270,58 +322,6 @@ exports[`renders correctly 1`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-12 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-12:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-12:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-12:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 <div>
   <div
     class="emotion-15"
@@ -329,8 +329,10 @@ exports[`renders correctly 1`] = `
     <span
       class="emotion-0"
     >
-      <span>
-        100 results
+      <span
+        title="100"
+      >
+        100 resultados
       </span>
     </span>
     <div
@@ -471,8 +473,10 @@ exports[`renders without pagination 1`] = `
     <span
       class="emotion-0"
     >
-      <span>
-        10 results
+      <span
+        title="10"
+      >
+        10 resultados
       </span>
     </span>
   </div>