From f7565757a9a4b6e5c7d02191bdbde1aa01b002a2 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 27 Nov 2020 11:26:56 +0100 Subject: [PATCH 1/2] Prepare for ui-core@5 #draft --- src/Table/Density.tsx | 8 ++++---- src/Table/LoadingRow.tsx | 8 ++++---- src/Table/Table.style.ts | 18 +++++++++--------- src/Table/Table.tsx | 5 ++++- src/Table/TablePagination.tsx | 8 ++++---- src/cell/BooleanCell/BooleanCell.tsx | 6 ++++-- src/cell/IconCell/IconCell.style.ts | 2 +- src/components/LoadingBar/LoadingBar.tsx | 4 ++-- src/imex/imex.style.ts | 4 ++-- src/imex/useImportTable.tsx | 3 ++- src/types/Table.ts | 9 ++++----- 11 files changed, 40 insertions(+), 35 deletions(-) diff --git a/src/Table/Density.tsx b/src/Table/Density.tsx index f5687eb1..cb45986a 100644 --- a/src/Table/Density.tsx +++ b/src/Table/Density.tsx @@ -1,21 +1,21 @@ import * as React from 'react' import styled from 'styled-components' -import { Tooltip, Icon, palette } from '@habx/ui-core' +import { Tooltip, Icon, theme } from '@habx/ui-core' import { TableInstance } from '../types/Table' const DensityIcon = styled(Icon)` margin-left: 18px; - color: ${palette.darkBlue[800]}; + color: ${theme.neutralColor(800)}; &[data-active='false'] { - color: ${palette.darkBlue[300]}; + color: ${theme.neutralColor(300)}; transition: all ease-in-out 150ms; } &:hover { - color: ${palette.darkBlue[500]}; + color: ${theme.neutralColor(500)}; cursor: pointer; } ` diff --git a/src/Table/LoadingRow.tsx b/src/Table/LoadingRow.tsx index 69333f17..d444c7c5 100644 --- a/src/Table/LoadingRow.tsx +++ b/src/Table/LoadingRow.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { palette } from '@habx/ui-core' +import { theme } from '@habx/ui-core' import { TableInstance } from '../types/Table' @@ -22,9 +22,9 @@ const Loader = styled.div` max-height: 16px; background: linear-gradient( to right, - ${palette.darkBlue[200]} 20%, - ${palette.darkBlue[300]} 50%, - ${palette.darkBlue[200]} 80% + ${theme.neutralColor(200)} 20%, + ${theme.neutralColor(300)} 50%, + ${theme.neutralColor(200)} 80% ); animation: fading 2s linear infinite; background-size: 500px 100px; diff --git a/src/Table/Table.style.ts b/src/Table/Table.style.ts index fd69a0d5..521a769f 100644 --- a/src/Table/Table.style.ts +++ b/src/Table/Table.style.ts @@ -1,6 +1,6 @@ import styled, { css } from 'styled-components' -import { palette, Text, theme } from '@habx/ui-core' +import { Text, theme } from '@habx/ui-core' const alignItems = css` &[data-align='center'] { @@ -54,13 +54,13 @@ export const TableHeadCell = styled.th<{ size: number }>` grid-column-end: span ${({ size }) => size}; --table-header-font-size: 12px; - --table-header-color: ${palette.darkBlue[400]}; + --table-header-color: ${theme.neutralColor(400)}; &[data-big='true'] { font-size: 16px; - border-bottom: solid 1px ${palette.darkBlue[300]}; + border-bottom: solid 1px ${theme.neutralColor(300)}; --table-header-font-size: 16px; - --table-header-color: ${palette.darkBlue[900]}; + --table-header-color: ${theme.neutralColor(900)}; } ` @@ -84,22 +84,22 @@ export const TableBodyRow = styled.tr` transition: background-color 50ms ease-in-out; &[data-striped='true']:nth-child(2n + 1) { - background-color: ${palette.darkBlue[100]}; + background-color: ${theme.neutralColor(100)}; } &[data-active='true'] { - background-color: ${palette.blue[100]}; + background-color: ${theme.neutralColor(100)}; &[data-clickable='true'] { &:hover { - background-color: ${palette.blue[200]}; + background-color: ${theme.neutralColor(200)}; } } } &:not([data-active='true'])[data-clickable='true'] { &:hover { - background-color: ${palette.darkBlue[200]}; + background-color: ${theme.neutralColor(200)}; } } @@ -133,7 +133,7 @@ export const TableCell = styled.td` > div { font-size: 16px; - color: ${palette.darkBlue[700]}; + color: ${theme.neutralColor(700)}; width: 100%; } ` diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index c9799d3e..7a083ab9 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -155,7 +155,10 @@ const Table = ({ - + {renderHeader} {column.isSorted && ( diff --git a/src/Table/TablePagination.tsx b/src/Table/TablePagination.tsx index a12f9fdd..c101476a 100644 --- a/src/Table/TablePagination.tsx +++ b/src/Table/TablePagination.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { Text, Icon, Select, palette } from '@habx/ui-core' +import { Text, Icon, Select, theme } from '@habx/ui-core' import { TableInstance } from '../types/Table' @@ -24,16 +24,16 @@ export const PagesChevrons = styled.div` ` export const PaginationIcon = styled(Icon)` - color: ${palette.darkBlue[800]}; + color: ${theme.neutralColor(800)}; transition: all ease-in-out 150ms; cursor: pointer; &:hover { - color: ${palette.darkBlue[500]}; + color: ${theme.neutralColor(500)}; } &[data-disabled='true'] { - color: ${palette.darkBlue[300]}; + color: ${theme.neutralColor(300)}; pointer-events: none; } ` diff --git a/src/cell/BooleanCell/BooleanCell.tsx b/src/cell/BooleanCell/BooleanCell.tsx index e70eb49b..e962fb93 100644 --- a/src/cell/BooleanCell/BooleanCell.tsx +++ b/src/cell/BooleanCell/BooleanCell.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { palette } from '@habx/ui-core' +import { useThemeVariant } from '@habx/ui-core' import IconCell, { IconCellProps } from '../IconCell' @@ -8,11 +8,13 @@ const BooleanCell = React.forwardRef( (props, ref) => { const { value, ...rest } = props + const theme = useThemeVariant() + return ( ) diff --git a/src/cell/IconCell/IconCell.style.ts b/src/cell/IconCell/IconCell.style.ts index e7ad2d2d..ff26fe7b 100644 --- a/src/cell/IconCell/IconCell.style.ts +++ b/src/cell/IconCell/IconCell.style.ts @@ -20,7 +20,7 @@ export const IconContainer = styled.div<{ color?: string }>` color: ${color}; ` : css` - color: ${theme.textColor({ opacity: 0.72 })}; + color: ${theme.textColor()}; `}; ` diff --git a/src/components/LoadingBar/LoadingBar.tsx b/src/components/LoadingBar/LoadingBar.tsx index dca3c3ae..b11a4d90 100644 --- a/src/components/LoadingBar/LoadingBar.tsx +++ b/src/components/LoadingBar/LoadingBar.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { palette, theme } from '@habx/ui-core' +import { theme } from '@habx/ui-core' export const LoadingBarStyled = styled.div` width: 300px; @@ -9,7 +9,7 @@ export const LoadingBarStyled = styled.div` --loading-bar-progress: 0%; position: relative; - background: ${palette.darkBlue[300]}; + background: ${theme.neutralColor(300)}; &:after { transition: width ease-in-out 150ms; diff --git a/src/imex/imex.style.ts b/src/imex/imex.style.ts index b78745a3..46cd3a30 100644 --- a/src/imex/imex.style.ts +++ b/src/imex/imex.style.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { palette, Text, theme } from '@habx/ui-core' +import { Text, theme } from '@habx/ui-core' export const OverlayContainer = styled(Text)` position: fixed; @@ -8,7 +8,7 @@ export const OverlayContainer = styled(Text)` height: 100vh; width: 100vw; left: 0; - background-color: ${palette.darkBlue[300]}; + background-color: ${theme.neutralColor(300)}; opacity: 0.9; display: grid; justify-items: center; diff --git a/src/imex/useImportTable.tsx b/src/imex/useImportTable.tsx index f0c0a280..f5133e6e 100644 --- a/src/imex/useImportTable.tsx +++ b/src/imex/useImportTable.tsx @@ -322,10 +322,11 @@ const useImportTable = ( -