From 73af09cfb9d4033ce15177f530000b1738dcdd3d Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 10:17:48 +0100 Subject: [PATCH 01/43] add a selector in toolbar to switch between backgroundLevel --- .storybook/preview.js | 27 +++++++++++++++++++++------ stories/common.tsx | 17 +++++++++++------ 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 3cd9d11353..55139cbfaf 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -4,6 +4,7 @@ import { CoreUiThemeProvider } from '../src/lib/next'; import { brand, coreUIAvailableThemes } from '../src/lib/style/theme'; import { Wrapper } from '../stories/common'; import { ToastProvider } from '../src/lib'; +import { background } from 'styled-system'; export const globalTypes = { theme: { @@ -12,19 +13,33 @@ export const globalTypes = { defaultValue: 'darkRebrand', toolbar: { title: 'Preview Theme', - dynamicTitle: false, + dynamicTitle: true, // array of plain string values or MenuItem shape (see below) items: [ - { value: 'darkRebrand', title: 'Dark', icon: 'moon' }, - { value: 'artescaLight', title: 'Light', icon: 'sun' }, - { value: 'ring9dark', title: 'Ring Dark', icon: 'moon' }, + { value: 'darkRebrand', title: ' A-Dark', icon: 'moon' }, + { value: 'artescaLight', title: 'A-Light', icon: 'sun' }, + { value: 'ring9dark', title: 'R-Dark', icon: 'moon' }, ], }, }, + background: { + name: 'Background Level', + description: 'Background for the wrapper', + toolbar: { + title: 'Background Level', + items: [ + { value: 'backgroundLevel1', title: 'backgroundLevel 1' }, + { value: 'backgroundLevel2', title: 'backgroundLevel 2' }, + { value: 'backgroundLevel3', title: 'backgroundLevel 3' }, + { value: 'backgroundLevel4', title: 'backgroundLevel 4' }, + ], + dynamicTitle: true, + }, + }, }; - const withThemeProvider = (Story, context) => { const theme = coreUIAvailableThemes[context.globals.theme]; + const { background } = context.globals; const { viewMode } = context; return ( @@ -32,7 +47,7 @@ const withThemeProvider = (Story, context) => { {/* Wrapper to make the stories take the full screen but not in docs */}
- + diff --git a/stories/common.tsx b/stories/common.tsx index 4e9fcc8838..15637e6e54 100644 --- a/stories/common.tsx +++ b/stories/common.tsx @@ -1,12 +1,17 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { getThemePropSelector } from '../src/lib/utils'; const StyledWrapper = styled.div` - padding: 3rem; - height: 100%; - background-color: ${(props) => props.theme.backgroundLevel1}; - color: ${(props) => props.theme.textPrimary}; - box-sizing: border-box; + ${(props) => { + const { style, theme } = props; + return css` + padding: 3rem; + height: 100%; + background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']}; + color: ${theme.textPrimary}; + box-sizing: border-box; + `; + }} `; const StyledTitle = styled.h3` color: ${getThemePropSelector('textPrimary')}; From c90f0babc097ec6b3bb27af9794a3b6e4bc7f636 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 10:19:32 +0100 Subject: [PATCH 02/43] add an "empty state" story for Table --- stories/tablev2.stories.tsx | 115 ++++++++++++++++++++++-------------- 1 file changed, 72 insertions(+), 43 deletions(-) diff --git a/stories/tablev2.stories.tsx b/stories/tablev2.stories.tsx index 050380b5bc..b56105180a 100644 --- a/stories/tablev2.stories.tsx +++ b/stories/tablev2.stories.tsx @@ -65,51 +65,49 @@ type Entry = { health: string; }; +const columns: Column[] = [ + { + Header: 'First Name', + accessor: 'firstName', + cellStyle: { + textAlign: 'left', + }, + Cell: ({ value }) => { + if (value) return <>{value}; + return ; + }, + }, + { + Header: 'Last Name', + accessor: 'lastName', + cellStyle: { + textAlign: 'left', + }, + // disable the sorting on this column + disableSortBy: true, + }, + { + Header: 'Age', + accessor: 'age', + cellStyle: { + width: '50px', + textAlign: 'left', + }, + }, + { + Header: 'Health', + accessor: 'health', + sortType: 'health', + cellStyle: { + textAlign: 'left', + }, + }, +]; +const getRowId = (row: Entry, relativeIndex: number) => { + return row.lastName + ' ' + row.firstName; +}; export const SimpleContentTable = { render: ({}) => { - const columns: Column[] = [ - { - Header: 'First Name', - accessor: 'firstName', - cellStyle: { - textAlign: 'left', - }, - Cell: ({ value }) => { - if (value) return <>{value}; - return ; - }, - }, - { - Header: 'Last Name', - accessor: 'lastName', - cellStyle: { - textAlign: 'left', - }, - // disable the sorting on this column - disableSortBy: true, - }, - { - Header: 'Age', - accessor: 'age', - cellStyle: { - width: '50px', - textAlign: 'left', - }, - }, - { - Header: 'Health', - accessor: 'health', - sortType: 'health', - cellStyle: { - textAlign: 'left', - }, - }, - ]; - - const getRowId = (row: Entry, relativeIndex: number) => { - return row.lastName + ' ' + row.firstName; - }; - const TableWithQueryParams = ({}) => { const location = useLocation(); return ( @@ -550,3 +548,34 @@ export const MultiTable = { ); }, }; + +export const EmptyTable = { + render: (args) => { + const { background } = args; + return ( + + +
+ ); + }, + argTypes: { + background: { + control: { + type: 'select', + description: 'Background color', + defaultValue: 'backgroundLevel3', + }, + options: [ + 'backgroundLevel1', + 'backgroundLevel2', + 'backgroundLevel3', + 'backgroundLevel4', + ], + }, + }, +}; From 4007f1adee4aa806f85fd45ad498ff74e2271bd8 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 11:14:16 +0100 Subject: [PATCH 03/43] linting --- .../infomessage/InfoMessageUtils.ts | 73 ++++++++++--------- 1 file changed, 40 insertions(+), 33 deletions(-) diff --git a/src/lib/components/infomessage/InfoMessageUtils.ts b/src/lib/components/infomessage/InfoMessageUtils.ts index 93eef450c8..c9c47e5c7a 100644 --- a/src/lib/components/infomessage/InfoMessageUtils.ts +++ b/src/lib/components/infomessage/InfoMessageUtils.ts @@ -1,39 +1,46 @@ -import { DefaultTheme, useTheme } from "styled-components"; -import { hex2RGB } from "../../utils"; -import { useEffect, useRef, useState } from "react"; +import { DefaultTheme, useTheme } from 'styled-components'; +import { hex2RGB } from '../../utils'; +import { useEffect, useRef, useState } from 'react'; export const useComputeBackgroundColor = () => { - const theme = useTheme(); - const containerRef = useRef(null); - const [backgroundColor, setBackgroundColor] = useState(''); - - useEffect(() => { - containerRef.current && - setBackgroundColor(getBackgroundColor(containerRef.current, theme)); - }, [containerRef,theme]); - - return { - containerRef, - backgroundColor, - }; + const theme = useTheme(); + const containerRef = useRef(null); + const [backgroundColor, setBackgroundColor] = useState(''); + + useEffect(() => { + containerRef.current && + setBackgroundColor(getBackgroundColor(containerRef.current, theme)); + console.log('containerRef.current', containerRef.current); + }, [containerRef, theme]); + + return { + containerRef, + backgroundColor, }; +}; -export const getBackgroundColor = (element: HTMLElement, theme: DefaultTheme) => { - if (element.parentElement) { - const parentElementBackgroundColor = window.getComputedStyle( - element.parentElement, - )['background-color']; - if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement,)['background-color']) { - return getBackgroundColor(element.parentElement, theme); - } else { - const rgbArray = hex2RGB(theme.backgroundLevel2); - if ( - `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` === - parentElementBackgroundColor - ) { - return theme.backgroundLevel3; - } +export const getBackgroundColor = ( + element: HTMLElement, + theme: DefaultTheme, +) => { + if (element.parentElement) { + const parentElementBackgroundColor = window.getComputedStyle( + element.parentElement, + )['background-color']; + if ( + /rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || + !window.getComputedStyle(element.parentElement)['background-color'] + ) { + return getBackgroundColor(element.parentElement, theme); + } else { + const rgbArray = hex2RGB(theme.backgroundLevel2); + if ( + `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` === + parentElementBackgroundColor + ) { + return theme.backgroundLevel3; } } - return theme.backgroundLevel2; - }; \ No newline at end of file + } + return theme.backgroundLevel2; +}; From bc301a0744121cbae513a986081a56cbb380a728 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 11:21:03 +0100 Subject: [PATCH 04/43] add overflow in story --- .storybook/preview.js | 11 ++++++++--- stories/common.tsx | 1 + 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 55139cbfaf..29e8227b00 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,8 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query'; import { CoreUiThemeProvider } from '../src/lib/next'; import { brand, coreUIAvailableThemes } from '../src/lib/style/theme'; import { Wrapper } from '../stories/common'; -import { ToastProvider } from '../src/lib'; -import { background } from 'styled-system'; +import { ScrollbarWrapper, ToastProvider } from '../src/lib'; export const globalTypes = { theme: { @@ -45,7 +44,13 @@ const withThemeProvider = (Story, context) => { {/* Wrapper to make the stories take the full screen but not in docs */} -
+
diff --git a/stories/common.tsx b/stories/common.tsx index 15637e6e54..115b3675c5 100644 --- a/stories/common.tsx +++ b/stories/common.tsx @@ -10,6 +10,7 @@ const StyledWrapper = styled.div` background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']}; color: ${theme.textPrimary}; box-sizing: border-box; + overflow: scroll; `; }} `; From 67c3332b1368c3ac4ea7dc816943428e6bb864fb Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 11:21:38 +0100 Subject: [PATCH 05/43] change incorrect arg --- stories/form.stories.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/stories/form.stories.tsx b/stories/form.stories.tsx index 61ba2e9a5f..c2b2689eb4 100644 --- a/stories/form.stories.tsx +++ b/stories/form.stories.tsx @@ -236,9 +236,7 @@ export const AllRequiredPageForm = { export const TabForm = { ...PageForm, args: { - layout: { - kind: 'tab', - }, + kind: 'tab', }, }; From d9a2864d93b33126d41de06fc1c670fe9195a6c5 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 11:22:17 +0100 Subject: [PATCH 06/43] remove wrapper from table stories --- stories/tablev2.stories.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/stories/tablev2.stories.tsx b/stories/tablev2.stories.tsx index b56105180a..4d54346867 100644 --- a/stories/tablev2.stories.tsx +++ b/stories/tablev2.stories.tsx @@ -5,7 +5,7 @@ import { EmptyCell, Table, } from '../src/lib/components/tablev2/Tablev2.component'; -import { Wrapper, Title } from './common'; +import { Title } from './common'; import { BrowserRouter, BrowserRouter as Router, @@ -146,7 +146,7 @@ export const SimpleContentTable = { }; return ( - + <> Non Selectable Table
- + ); }, }; @@ -318,7 +318,7 @@ export const asyncTable = { ]; return ( - + <> async cell Table
- + ); }, }; @@ -382,7 +382,7 @@ export const OnBottomCallback = { }; return ( - + <> async cell Table
- + ); }, }; @@ -490,7 +490,7 @@ export const MultiTable = { }; return ( - + <> Several Multiselect @@ -544,7 +544,7 @@ export const MultiTable = { - + ); }, }; From 8de85ecbf014d8286ce8c8f3ba624be4ee4d4f14 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 11:24:14 +0100 Subject: [PATCH 07/43] Add line separator to HeadRow as we want a separator even if the table is empty, move the border of row to the bottom --- .../tablev2/MultiSelectableContent.tsx | 1 + .../tablev2/SingleSelectableContent.tsx | 1 + src/lib/components/tablev2/Tablestyle.tsx | 26 +++++++++---------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/lib/components/tablev2/MultiSelectableContent.tsx b/src/lib/components/tablev2/MultiSelectableContent.tsx index e963c2b1ca..600a90c276 100644 --- a/src/lib/components/tablev2/MultiSelectableContent.tsx +++ b/src/lib/components/tablev2/MultiSelectableContent.tsx @@ -232,6 +232,7 @@ export const MultiSelectableContent = < hasScrollBar={hasScrollbar} scrollBarWidth={scrollBarWidth} rowHeight={rowHeight} + separationLineVariant={separationLineVariant} ref={headerRef} > {headerGroup.headers.map((column) => { diff --git a/src/lib/components/tablev2/SingleSelectableContent.tsx b/src/lib/components/tablev2/SingleSelectableContent.tsx index a00bba1625..2a26597c27 100644 --- a/src/lib/components/tablev2/SingleSelectableContent.tsx +++ b/src/lib/components/tablev2/SingleSelectableContent.tsx @@ -167,6 +167,7 @@ export function SingleSelectableContent< ` @@ -60,6 +62,8 @@ export const HeadRow = styled.div` color: ${(props) => props.theme.textPrimary}; font-weight: bold; overflow: hidden; + border-bottom: 1px solid + ${(props) => props.theme[props.separationLineVariant]}; `; type TableRowType = { @@ -70,11 +74,8 @@ type TableRowType = { }; export const TableRow = styled.div` color: ${(props) => props.theme.textPrimary}; - border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]}; - :last-child { - border-bottom: 1px solid - ${(props) => props.theme[props.separationLineVariant]}; - } + border-bottom: 1px solid + ${(props) => props.theme[props.separationLineVariant]}; cursor: default; box-sizing: border-box; @@ -117,11 +118,8 @@ type TableRowMultiSelectableType = { }; export const TableRowMultiSelectable = styled.div` color: ${(props) => props.theme.textPrimary}; - border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]}; - :last-child { - border-bottom: 1px solid - ${(props) => props.theme[props.separationLineVariant]}; - } + border-bottom: 1px solid + ${(props) => props.theme[props.separationLineVariant]}; box-sizing: border-box; @@ -168,8 +166,8 @@ export const NoResult = styled.div` display: flex; justify-content: center; color: ${(props) => props.theme.textSecondary}; - padding-top: ${spacing.sp8}; - border-top: 1px solid ${(props) => props.theme.backgroundLevel3}; + padding-top: ${spacing.r8}; + /* border-top: 1px solid ${(props) => props.theme.backgroundLevel3}; */ `; export const SortCaret = < From 68cc67bf20591a4eaa556bb5b3afc5b320f810f5 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 15:24:18 +0100 Subject: [PATCH 08/43] remove unused import --- stories/emptystate.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/stories/emptystate.stories.tsx b/stories/emptystate.stories.tsx index 6c284bf78c..2b74ebdcb7 100644 --- a/stories/emptystate.stories.tsx +++ b/stories/emptystate.stories.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component'; -import { Wrapper } from './common'; + export default { title: 'Components/Data Display/EmptyState', component: EmptyState, From 0ae8088af518e5c43faaae0ae63a9b0828e2ebca Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 15:24:55 +0100 Subject: [PATCH 09/43] add story for attachment table --- stories/attachment.stories.tsx | 54 ++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 stories/attachment.stories.tsx diff --git a/stories/attachment.stories.tsx b/stories/attachment.stories.tsx new file mode 100644 index 0000000000..3311001695 --- /dev/null +++ b/stories/attachment.stories.tsx @@ -0,0 +1,54 @@ +import { action } from '@storybook/addon-actions'; +import React from 'react'; +import { + AttachableEntity, + AttachmentAction, + AttachmentOperation, +} from '../src/lib/organisms/attachments/AttachmentTypes'; +import { + AttachmentProvider, + AttachmentTable, + useAttachmentOperations, +} from '../src/lib/organisms/attachments/AttachmentTable'; + +export default { + title: 'Components/AttachmentTable', + component: AttachmentTable, + decorators: [ + (Story) => ( + + + + ), + ], + render: ({ args }) => { + return ( + { + console.log('changed'); + }} + /> + ); + }, +}; + +export const Playground = { + args: { + label: 'Playground', + }, +}; From 9566249ac2a4078323b49d5db8518dd239313507 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 15:25:32 +0100 Subject: [PATCH 10/43] remove Box from header in attachment table --- src/lib/organisms/attachments/AttachmentTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx index 5704a5b949..e6ad362b06 100644 --- a/src/lib/organisms/attachments/AttachmentTable.tsx +++ b/src/lib/organisms/attachments/AttachmentTable.tsx @@ -595,7 +595,7 @@ export const AttachmentTable = ({ Name, + Header: 'Name', accessor: 'name', cellStyle: { flex: 1.5, @@ -639,7 +639,7 @@ export const AttachmentTable = ({ }, }, { - Header: Attachment status, + Header: 'Attachment', accessor: 'isPending', cellStyle: { flex: 0.5, From 2d35af363c0d6df6be8d760b29a10ea5fca89db3 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 16:21:29 +0100 Subject: [PATCH 11/43] add warning icon to error message --- src/lib/organisms/attachments/AttachmentTable.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx index e6ad362b06..0057aa82c4 100644 --- a/src/lib/organisms/attachments/AttachmentTable.tsx +++ b/src/lib/organisms/attachments/AttachmentTable.tsx @@ -707,9 +707,12 @@ export const AttachmentTable = ({

) : initiallyAttachedEntitiesStatus === 'error' ? ( - - Failed to load {entityName.plural} - + + + + Failed to load attachments {entityName.plural} + + ) : ( desiredAttachedEntities.length === 0 && ( From 5f150b78f1f295b9b33c41ca4cf98a7db331cd52 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 17:04:52 +0100 Subject: [PATCH 12/43] update IconColor type --- src/lib/components/icon/Icon.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx index e65f70e5e8..ac67e4d68f 100644 --- a/src/lib/components/icon/Icon.component.tsx +++ b/src/lib/components/icon/Icon.component.tsx @@ -6,7 +6,7 @@ import React, { useState, } from 'react'; import styled, { css } from 'styled-components'; -import { brand } from '../../style/theme'; +import { CoreUITheme } from '../../style/theme'; import { Loader } from '../loader/Loader.component'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -142,7 +142,7 @@ const IconStyled = styled(FontAwesomeIcon)` `; export type IconName = keyof typeof iconTable; -export type IconColor = keyof typeof brand; +export type IconColor = keyof CoreUITheme; type Props = { name: IconName; size?: SizeProp; From 99b46cef230bade92e9bacd530e9f16bd718224b Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 17:06:03 +0100 Subject: [PATCH 13/43] center erorr message --- src/lib/organisms/attachments/AttachmentTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx index 0057aa82c4..99ef7baa54 100644 --- a/src/lib/organisms/attachments/AttachmentTable.tsx +++ b/src/lib/organisms/attachments/AttachmentTable.tsx @@ -707,7 +707,7 @@ export const AttachmentTable = ({

) : initiallyAttachedEntitiesStatus === 'error' ? ( - + Failed to load attachments {entityName.plural} From 0557f359b846493167de0b1a762f554e660ae015 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 27 Feb 2024 19:04:38 +0100 Subject: [PATCH 14/43] update style of attachmentTable: Add space for error and no entities find to be consistent with rowHeight, fix Menucontainer size, change Box for stac k --- .../organisms/attachments/AttachmentTable.tsx | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx index 99ef7baa54..6740421f80 100644 --- a/src/lib/organisms/attachments/AttachmentTable.tsx +++ b/src/lib/organisms/attachments/AttachmentTable.tsx @@ -32,6 +32,7 @@ import { } from './AttachmentTypes'; import { useQuery, UseQueryOptions } from 'react-query'; import { EmptyCell } from '../../components/tablev2/Tablev2.component'; +import { tableRowHeight } from '../../components/tablev2/TableUtils'; type AttachableEntityWithPendingStatus = { isPending?: boolean; @@ -105,10 +106,6 @@ const MenuContainer = styled.ul<{ const SearchBoxContainer = styled.div` margin-bottom: ${spacing.r24}; - width: 78%; - .sc-tooltip { - width: 100%; - } `; const StyledSearchInput = styled(SearchInput)` @@ -134,6 +131,7 @@ const StyledTable = styled.div` const CenterredSecondaryText = styled(SecondaryText)` display: block; text-align: center; + line-height: ${tableRowHeight[rowHeight]}rem; `; const PrivateAttachmentContext = createContext<{ @@ -477,8 +475,12 @@ export const AttachmentTable = ({ { - if (element) { - setSearchWidth(element.getBoundingClientRect().width - 2 + 'px'); + if (element?.firstElementChild) { + setSearchWidth( + element.firstElementChild.getBoundingClientRect().width - + 2 + + 'px', + ); } }, }} @@ -489,7 +491,7 @@ export const AttachmentTable = ({ <>We failed to load the entities, hence search is disabled } > - + ({ disabled={filteredEntities.status === 'error'} /> - + ) : ( ({ <> {initiallyAttachedEntitiesStatus === 'idle' || initiallyAttachedEntitiesStatus === 'loading' ? ( - +

@@ -707,10 +709,15 @@ export const AttachmentTable = ({

) : initiallyAttachedEntitiesStatus === 'error' ? ( - + - Failed to load attachments {entityName.plural} + Failed to load attached {entityName.plural}. ) : ( From 76e375241078a6dcb275e12128fb8281f414b6a0 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 28 Feb 2024 18:05:13 +0100 Subject: [PATCH 15/43] add rowHeight to NoResult to have consistency --- src/lib/components/tablev2/MultiSelectableContent.tsx | 4 +++- src/lib/components/tablev2/SingleSelectableContent.tsx | 4 +++- src/lib/components/tablev2/Tablestyle.tsx | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/lib/components/tablev2/MultiSelectableContent.tsx b/src/lib/components/tablev2/MultiSelectableContent.tsx index 600a90c276..14650372cf 100644 --- a/src/lib/components/tablev2/MultiSelectableContent.tsx +++ b/src/lib/components/tablev2/MultiSelectableContent.tsx @@ -317,7 +317,9 @@ export const MultiSelectableContent = < RenderRow={RenderRow} /> ) : ( - {translations[locale].noResult} + + {translations[locale].noResult} + )} {isLoadingMoreItems && ( diff --git a/src/lib/components/tablev2/SingleSelectableContent.tsx b/src/lib/components/tablev2/SingleSelectableContent.tsx index 2a26597c27..ee24c94051 100644 --- a/src/lib/components/tablev2/SingleSelectableContent.tsx +++ b/src/lib/components/tablev2/SingleSelectableContent.tsx @@ -233,7 +233,9 @@ export function SingleSelectableContent< RenderRow={RenderRow} /> ) : ( - {translations[locale].noResult} + + {translations[locale].noResult} + )} {isLoadingMoreItems && ( diff --git a/src/lib/components/tablev2/Tablestyle.tsx b/src/lib/components/tablev2/Tablestyle.tsx index 2b347167e7..4cc32a5178 100644 --- a/src/lib/components/tablev2/Tablestyle.tsx +++ b/src/lib/components/tablev2/Tablestyle.tsx @@ -162,12 +162,12 @@ export const TooltipContent = styled.div` min-width: 60px; `; -export const NoResult = styled.div` +export const NoResult = styled.div<{ rowHeight: TableHeightKeyType }>` display: flex; justify-content: center; color: ${(props) => props.theme.textSecondary}; + height: ${(props) => tableRowHeight[props.rowHeight]}rem; padding-top: ${spacing.r8}; - /* border-top: 1px solid ${(props) => props.theme.backgroundLevel3}; */ `; export const SortCaret = < From 9c21b00d112a05425863b3f6806da4f3d93bf482 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 28 Feb 2024 18:08:22 +0100 Subject: [PATCH 16/43] remove orphan trailing bracket --- .../components/constrainedtext/Constrainedtext.component.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/lib/components/constrainedtext/Constrainedtext.component.tsx b/src/lib/components/constrainedtext/Constrainedtext.component.tsx index fa02f596ad..60c0220c57 100644 --- a/src/lib/components/constrainedtext/Constrainedtext.component.tsx +++ b/src/lib/components/constrainedtext/Constrainedtext.component.tsx @@ -28,10 +28,7 @@ const ConstrainedTextContainer = styled.div` overflow-wrap: break-word; ` : `overflow-wrap: break-word; - white-space: nowrap;`} -} - -; + white-space: nowrap;`}; `; const BlockTooltip = styled.div` width: stretch; From e0ea40c2a4f9221d19d75fa95899ef7c46469a92 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 28 Feb 2024 18:17:44 +0100 Subject: [PATCH 17/43] improve stories for attachemment table --- stories/attachment.stories.tsx | 98 +++++++++++++++++++++------------- 1 file changed, 62 insertions(+), 36 deletions(-) diff --git a/stories/attachment.stories.tsx b/stories/attachment.stories.tsx index 3311001695..85c54cf289 100644 --- a/stories/attachment.stories.tsx +++ b/stories/attachment.stories.tsx @@ -1,54 +1,80 @@ import { action } from '@storybook/addon-actions'; import React from 'react'; -import { - AttachableEntity, - AttachmentAction, - AttachmentOperation, -} from '../src/lib/organisms/attachments/AttachmentTypes'; import { AttachmentProvider, AttachmentTable, useAttachmentOperations, } from '../src/lib/organisms/attachments/AttachmentTable'; +import { Box } from '../src/lib/next'; +import { useTheme } from 'styled-components'; +import { CoreUITheme } from '../src/lib/style/theme'; + export default { title: 'Components/AttachmentTable', component: AttachmentTable, - decorators: [ - (Story) => ( - - - - ), - ], - render: ({ args }) => { +}; + +export const Playground = { + render: () => { + const theme = useTheme(); return ( - { - console.log('changed'); - }} - /> + + + { + console.log('changed'); + }} + /> + + ); }, }; -export const Playground = { - args: { - label: 'Playground', +export const FailToLoad = { + render: () => { + const theme = useTheme(); + return ( + + + { + console.log('changed'); + }} + /> + + + ); }, }; From 7a0289c3e21a309da8836c57bc91b26278b8634d Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 28 Feb 2024 18:18:25 +0100 Subject: [PATCH 18/43] increase size of search input in table --- src/lib/components/tablev2/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/tablev2/Search.tsx b/src/lib/components/tablev2/Search.tsx index b99a5839b4..bcd61c89bb 100644 --- a/src/lib/components/tablev2/Search.tsx +++ b/src/lib/components/tablev2/Search.tsx @@ -99,7 +99,7 @@ export function TableSearch(props: SearchProps) { value={value} placeholder={translations[locale].search} disableToggle - size="2/3" + size="1" onChange={(evt) => { if (typeof onChange === 'function') { // @ts-ignore From 5f1de6b651ae6acacac0aa6f536e2f7a393a6ab3 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 29 Feb 2024 10:34:20 +0100 Subject: [PATCH 19/43] change disabledReason type for reactNode --- src/lib/components/selectv2/Selectv2.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/selectv2/Selectv2.component.tsx b/src/lib/components/selectv2/Selectv2.component.tsx index 187e5ecde9..9f8c42ad0c 100644 --- a/src/lib/components/selectv2/Selectv2.component.tsx +++ b/src/lib/components/selectv2/Selectv2.component.tsx @@ -24,7 +24,7 @@ export type OptionProps = { icon?: React.ReactNode; children?: React.ReactNode; value: string; - disabledReason?: JSX.Element; + disabledReason?: React.ReactNode; }; const usePreviousValue = (value) => { const ref = useRef(null); From fcca4a2c1c2c542fd6d962f551a024772909145e Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 29 Feb 2024 11:11:08 +0100 Subject: [PATCH 20/43] add border on hover --- src/lib/components/sidebar/Sidebar.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/sidebar/Sidebar.component.tsx b/src/lib/components/sidebar/Sidebar.component.tsx index 4639316df6..389e2758c6 100644 --- a/src/lib/components/sidebar/Sidebar.component.tsx +++ b/src/lib/components/sidebar/Sidebar.component.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import styled, { css } from 'styled-components'; import { @@ -66,6 +66,7 @@ const Wrapper = styled.div` height: 100%; background-color: ${backgroundLevel1}; z-index: ${zIndex.sidebar}; + border-right: 1px solid ${(props) => props.theme.backgroundLevel3}; } `; } From f1730ab7fe9ddc35cadd6ab5087eea5ae16ec568 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 29 Feb 2024 11:11:30 +0100 Subject: [PATCH 21/43] add import of react --- src/lib/components/searchinput/SearchInput.component.tsx | 1 + src/lib/components/tablev2/SearchWithQueryParams.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/lib/components/searchinput/SearchInput.component.tsx b/src/lib/components/searchinput/SearchInput.component.tsx index 4bf11f5c0f..9757703e0f 100644 --- a/src/lib/components/searchinput/SearchInput.component.tsx +++ b/src/lib/components/searchinput/SearchInput.component.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react'; import styled, { css } from 'styled-components'; import { Icon } from '../icon/Icon.component'; diff --git a/src/lib/components/tablev2/SearchWithQueryParams.tsx b/src/lib/components/tablev2/SearchWithQueryParams.tsx index 12890c4ab7..9a8df09dff 100644 --- a/src/lib/components/tablev2/SearchWithQueryParams.tsx +++ b/src/lib/components/tablev2/SearchWithQueryParams.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { useState } from 'react'; import { useLocation, useHistory } from 'react-router-dom'; import { TableSearch as Search, SearchProps } from './Search'; From ea43f7a73e33604f2be894d4f91b67e72325576b Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 1 Mar 2024 10:33:38 +0100 Subject: [PATCH 22/43] add entity and status props to Table --- src/lib/components/tablev2/Tablev2.component.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/lib/components/tablev2/Tablev2.component.tsx b/src/lib/components/tablev2/Tablev2.component.tsx index 85f210309a..74730aa2ba 100644 --- a/src/lib/components/tablev2/Tablev2.component.tsx +++ b/src/lib/components/tablev2/Tablev2.component.tsx @@ -67,6 +67,11 @@ export type TableProps< onBottom?: (rowLength: number) => void; onBottomOffset?: number; allFilters?: { id: string; value: string }[]; + status?: 'idle' | 'loading' | 'error' | 'success'; + entity?: { + en: { singular: string; plural: string }; + fr: { singular: string; plural: string }; + }; initiallySelectedRowsIds?: Set; //To call it from the Cell renderer to update the original data } & UpdateTableData; @@ -95,6 +100,11 @@ type TableContextType< setHiddenColumns: (param: string[] | setHiddenColumnFuncType) => void; isAllRowsSelected?: boolean; toggleAllRowsSelected: (value?: boolean) => void; + status?: 'idle' | 'loading' | 'error' | 'success'; + entity?: { + en: { singular: string; plural: string }; + fr: { singular: string; plural: string }; + }; }; const TableContext = React.createContext(null); @@ -168,6 +178,8 @@ function Table< onBottomOffset = 10, initiallySelectedRowsIds, updateTableData, + status, + entity, }: TableProps) { sortTypes = { health: (row1, row2) => { @@ -296,6 +308,8 @@ function Table< setHiddenColumns, isAllRowsSelected, toggleAllRowsSelected, + status, + entity, }; return ( Date: Fri, 1 Mar 2024 10:34:54 +0100 Subject: [PATCH 23/43] add an object with messages in en and fr for empty and loading state --- src/lib/components/tablev2/TableUtils.ts | 39 ++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/src/lib/components/tablev2/TableUtils.ts b/src/lib/components/tablev2/TableUtils.ts index 78df3edd48..723168588e 100644 --- a/src/lib/components/tablev2/TableUtils.ts +++ b/src/lib/components/tablev2/TableUtils.ts @@ -58,3 +58,42 @@ export const tableRowHeight = { h48: '3.428', //2 line h64: '4.572', //3 line }; + +type TableMessagesType = 'error' | 'loading' | 'noResult'; + +export const translatedMessages = ( + type: TableMessagesType, + entity: + | { + en: { singular: string; plural: string }; + fr: { singular: string; plural: string }; + } + | undefined, + locale?: TableLocalType, +) => { + if (type === 'error') { + if (locale === 'fr') { + return `Erreur lors du chargement des ${ + entity ? entity.fr.plural : 'données' + }, veuillez rafraîchir la page.`; + } + return `An error occured while loading ${ + entity ? ` the ${entity.en.plural}` : 'data' + }, please refresh the + page.`; + } + if (type === 'loading') { + if (locale === 'fr') { + return `Chargement des ${entity ? entity[locale].plural : 'données'}...`; + } + return `Loading ${entity ? entity.en.plural : 'data'}...`; + } + if (type === 'noResult') { + if (locale === 'fr') { + return `Aucun ${entity ? entity[locale].singular : 'résultat'} trouvé`; + } + return `No ${entity ? entity.en.plural : 'results'} found`; + } + + return ''; +}; From 557482d92db07dd7231a2d13cc0ecf9f39808413 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 1 Mar 2024 10:41:51 +0100 Subject: [PATCH 24/43] add TableRows for empty table or rows rendering, move common elements of singleSelectable and MultiSelectable to TableCommon --- .../tablev2/MultiSelectableContent.tsx | 71 ++---------- .../tablev2/SingleSelectableContent.tsx | 85 +++------------ src/lib/components/tablev2/TableCommon.tsx | 101 +++++++++++++++++- 3 files changed, 125 insertions(+), 132 deletions(-) diff --git a/src/lib/components/tablev2/MultiSelectableContent.tsx b/src/lib/components/tablev2/MultiSelectableContent.tsx index 14650372cf..0127015e8f 100644 --- a/src/lib/components/tablev2/MultiSelectableContent.tsx +++ b/src/lib/components/tablev2/MultiSelectableContent.tsx @@ -4,7 +4,6 @@ import { areEqual } from 'react-window'; import { useTableContext } from './Tablev2.component'; import { HeadRow, - NoResult, SortCaret, TableBody, TableHeader, @@ -15,26 +14,12 @@ import { TableLocalType, TableVariantType, } from './TableUtils'; -import { useTableScrollbar, VirtualizedRows } from './TableCommon'; +import { RenderRowType, TableRows, useTableScrollbar } from './TableCommon'; import useSyncedScroll from './useSyncedScroll'; import { Box } from '../box/Box'; import { Loader } from '../loader/Loader.component'; import { spacing } from '../../spacing'; -const translations = { - en: { - noResult: 'No results found', - }, - fr: { - noResult: `Aucun résultat`, - }, -}; - -type RenderRowType = { - index: number; - style: CSSProperties; -}; - type MultiSelectableContentProps< DATA_ROW extends Record = Record, > = { @@ -88,8 +73,6 @@ export const MultiSelectableContent = < setRowHeight, setHiddenColumns, selectedRowIds, - onBottom, - onBottomOffset, isAllRowsSelected, toggleAllRowsSelected, } = useTableContext(); @@ -132,21 +115,10 @@ export const MultiSelectableContent = < currentRow.toggleRowSelected(!currentRow.isSelected); }; - const { - hasScrollbar, - setHasScrollbar, - scrollBarWidth, - handleScrollbarWidth, - } = useTableScrollbar(); + const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } = + useTableScrollbar(); - const itemKey = (index, data) => { - if (typeof customItemKey === 'function') { - return customItemKey(index, data); - } - return index; - }; - - const { bodyRef, headerRef } = useSyncedScroll(); + const { headerRef } = useSyncedScroll(); const RenderRow = memo(({ index, style }: RenderRowType) => { const row = rows[index]; @@ -292,35 +264,12 @@ export const MultiSelectableContent = < - {typeof children === 'function' ? ( - children( - , - ) - ) : rows.length ? ( - - ) : ( - - {translations[locale].noResult} - - )} + {isLoadingMoreItems && ( ) => void; selectedId?: string; locale?: TableLocalType; - customItemKey?: (index: Number, data: DATA_ROW) => string; + customItemKey?: (index: number, data: DATA_ROW) => string; hasScrollbar?: boolean; isLoadingMoreItems?: boolean; - children?: (rows: JSX.Element) => JSX.Element; -}; - -const translations = { - en: { - noResult: 'No results found', - }, - fr: { - noResult: `Aucun résultat`, - }, -}; - -type RenderRowType = { - index: number; - style: CSSProperties; + children?: (rows: React.JSX.Element) => React.JSX.Element; }; export function SingleSelectableContent< @@ -67,15 +52,9 @@ export function SingleSelectableContent< console.error('Please specify the onRowSelected function.'); } - const { bodyRef, headerRef } = useSyncedScroll(); - const { - headerGroups, - prepareRow, - rows, - onBottom, - onBottomOffset, - setRowHeight, - } = useTableContext(); + const { headerRef } = useSyncedScroll(); + const { headerGroups, prepareRow, rows, setRowHeight } = + useTableContext(); useEffect(() => { setRowHeight(rowHeight); @@ -146,20 +125,9 @@ export function SingleSelectableContent< ); }, areEqual); - const { - hasScrollbar, - setHasScrollbar, - scrollBarWidth, - handleScrollbarWidth, - } = useTableScrollbar(); + const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } = + useTableScrollbar(); - function itemKey(index, data) { - if (typeof customItemKey === 'function') { - return customItemKey(index, data); - } - - return index; - } return ( <>
@@ -208,35 +176,12 @@ export function SingleSelectableContent< ))}
- {typeof children === 'function' ? ( - children( - , - ) - ) : rows.length ? ( - - ) : ( - - {translations[locale].noResult} - - )} + {isLoadingMoreItems && ( = Record, @@ -100,3 +109,93 @@ export const useTableScrollbar = () => { handleScrollbarWidth, }; }; + +export type RenderRowType = { + index: number; + style: CSSProperties; +}; + +type TableRowsProps< + DATA_ROW extends Record = Record, +> = { + locale?: TableLocalType; + children?: (children: JSX.Element) => JSX.Element; + customItemKey?: (index: number, data: DATA_ROW) => string; + RenderRow: React.MemoExoticComponent< + ({ index, style }: RenderRowType) => JSX.Element + >; +}; +export function TableRows< + DATA_ROW extends Record = Record, +>({ locale, children, customItemKey, RenderRow }: TableRowsProps) { + const { setHasScrollbar } = useTableScrollbar(); + const { rows, status, entity, rowHeight, onBottom, onBottomOffset } = + useTableContext(); + const { bodyRef } = useSyncedScroll(); + + function itemKey(index, data) { + if (typeof customItemKey === 'function') { + return customItemKey(index, data); + } + + return index; + } + + if (status === 'idle' || status === 'loading') { + return ( + + + + {translatedMessages('loading', entity, locale)} + + + ); + } + if (status === 'error') { + return ( + + + + {translatedMessages('error', entity, locale)} + + + ); + } + if (status === 'success' || status === undefined) { + if (typeof children === 'function') { + return children( + , + ); + } else if (rows.length) { + return ( + + ); + } else { + return ( + + {translatedMessages('noResult', entity, locale)} + + ); + } + } + + return null; +} From 692dd4c6f5463b21a5fd9df14f3579cbd5500cb4 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 1 Mar 2024 10:46:09 +0100 Subject: [PATCH 25/43] add gap and vertical align so empty and loading state style is consistent with table row --- src/lib/components/tablev2/Tablestyle.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/components/tablev2/Tablestyle.tsx b/src/lib/components/tablev2/Tablestyle.tsx index 4cc32a5178..b9fc27da60 100644 --- a/src/lib/components/tablev2/Tablestyle.tsx +++ b/src/lib/components/tablev2/Tablestyle.tsx @@ -10,6 +10,7 @@ import { HeaderGroup } from 'react-table'; import { Icon } from '../icon/Icon.component'; import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component'; import { spacing } from '../../spacing'; +import { Box } from '../box/Box'; const borderSize = '4px'; export const SortIncentive = styled.span` @@ -162,12 +163,13 @@ export const TooltipContent = styled.div` min-width: 60px; `; -export const NoResult = styled.div<{ rowHeight: TableHeightKeyType }>` +export const NoResult = styled(Box)<{ rowHeight: TableHeightKeyType }>` display: flex; justify-content: center; + align-items: center; color: ${(props) => props.theme.textSecondary}; height: ${(props) => tableRowHeight[props.rowHeight]}rem; - padding-top: ${spacing.r8}; + gap: ${spacing.r8}; `; export const SortCaret = < From e9598fad37e6647a6d19c63bb090d18a963ce154 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 1 Mar 2024 10:47:20 +0100 Subject: [PATCH 26/43] update stories --- .../tablev2/SearchWithQueryParams.tsx | 1 - stories/attachment.stories.tsx | 2 - stories/tablev2.stories.tsx | 50 +++++++++++++++++++ 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/lib/components/tablev2/SearchWithQueryParams.tsx b/src/lib/components/tablev2/SearchWithQueryParams.tsx index 9a8df09dff..12890c4ab7 100644 --- a/src/lib/components/tablev2/SearchWithQueryParams.tsx +++ b/src/lib/components/tablev2/SearchWithQueryParams.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useState } from 'react'; import { useLocation, useHistory } from 'react-router-dom'; import { TableSearch as Search, SearchProps } from './Search'; diff --git a/stories/attachment.stories.tsx b/stories/attachment.stories.tsx index 85c54cf289..0762d73ff8 100644 --- a/stories/attachment.stories.tsx +++ b/stories/attachment.stories.tsx @@ -3,12 +3,10 @@ import React from 'react'; import { AttachmentProvider, AttachmentTable, - useAttachmentOperations, } from '../src/lib/organisms/attachments/AttachmentTable'; import { Box } from '../src/lib/next'; import { useTheme } from 'styled-components'; -import { CoreUITheme } from '../src/lib/style/theme'; export default { title: 'Components/AttachmentTable', diff --git a/stories/tablev2.stories.tsx b/stories/tablev2.stories.tsx index 4d54346867..abb0aea7b7 100644 --- a/stories/tablev2.stories.tsx +++ b/stories/tablev2.stories.tsx @@ -228,6 +228,7 @@ export const SimpleContentTable = { data={data} defaultSortingKey={'health'} getRowId={getRowId} + status="loading" > { + return ( + +
+ +
+ + ); + }, +}; + +export const ErrorTable = { + render: ({}) => { + return ( + + + +
+ + ); + }, +}; From d34c6b9ae97e6d0643d37881f17cfff03505aaa2 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 1 Mar 2024 11:22:52 +0100 Subject: [PATCH 27/43] change entity for entityName --- src/lib/components/tablev2/TableCommon.tsx | 8 ++++---- src/lib/components/tablev2/TableUtils.ts | 18 +++++++++++------- .../components/tablev2/Tablev2.component.tsx | 8 ++++---- stories/tablev2.stories.tsx | 2 +- 4 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/lib/components/tablev2/TableCommon.tsx b/src/lib/components/tablev2/TableCommon.tsx index 8081fba920..606f0e608a 100644 --- a/src/lib/components/tablev2/TableCommon.tsx +++ b/src/lib/components/tablev2/TableCommon.tsx @@ -129,7 +129,7 @@ export function TableRows< DATA_ROW extends Record = Record, >({ locale, children, customItemKey, RenderRow }: TableRowsProps) { const { setHasScrollbar } = useTableScrollbar(); - const { rows, status, entity, rowHeight, onBottom, onBottomOffset } = + const { rows, status, entityName, rowHeight, onBottom, onBottomOffset } = useTableContext(); const { bodyRef } = useSyncedScroll(); @@ -146,7 +146,7 @@ export function TableRows< - {translatedMessages('loading', entity, locale)} + {translatedMessages('loading', entityName, locale)} ); @@ -156,7 +156,7 @@ export function TableRows< - {translatedMessages('error', entity, locale)} + {translatedMessages('error', entityName, locale)} ); @@ -191,7 +191,7 @@ export function TableRows< } else { return ( - {translatedMessages('noResult', entity, locale)} + {translatedMessages('noResult', entityName, locale)} ); } diff --git a/src/lib/components/tablev2/TableUtils.ts b/src/lib/components/tablev2/TableUtils.ts index 723168588e..f8d0dfccb5 100644 --- a/src/lib/components/tablev2/TableUtils.ts +++ b/src/lib/components/tablev2/TableUtils.ts @@ -63,7 +63,7 @@ type TableMessagesType = 'error' | 'loading' | 'noResult'; export const translatedMessages = ( type: TableMessagesType, - entity: + entityName: | { en: { singular: string; plural: string }; fr: { singular: string; plural: string }; @@ -74,25 +74,29 @@ export const translatedMessages = ( if (type === 'error') { if (locale === 'fr') { return `Erreur lors du chargement des ${ - entity ? entity.fr.plural : 'données' + entityName ? entityName.fr.plural : 'données' }, veuillez rafraîchir la page.`; } return `An error occured while loading ${ - entity ? ` the ${entity.en.plural}` : 'data' + entityName ? ` the ${entityName.en.plural}` : 'data' }, please refresh the page.`; } if (type === 'loading') { if (locale === 'fr') { - return `Chargement des ${entity ? entity[locale].plural : 'données'}...`; + return `Chargement des ${ + entityName ? entityName[locale].plural : 'données' + }...`; } - return `Loading ${entity ? entity.en.plural : 'data'}...`; + return `Loading ${entityName ? entityName.en.plural : 'data'}...`; } if (type === 'noResult') { if (locale === 'fr') { - return `Aucun ${entity ? entity[locale].singular : 'résultat'} trouvé`; + return `Aucun ${ + entityName ? entityName[locale].singular : 'résultat' + } trouvé`; } - return `No ${entity ? entity.en.plural : 'results'} found`; + return `No ${entityName ? entityName.en.plural : 'results'} found`; } return ''; diff --git a/src/lib/components/tablev2/Tablev2.component.tsx b/src/lib/components/tablev2/Tablev2.component.tsx index 74730aa2ba..36581e5f8d 100644 --- a/src/lib/components/tablev2/Tablev2.component.tsx +++ b/src/lib/components/tablev2/Tablev2.component.tsx @@ -68,7 +68,7 @@ export type TableProps< onBottomOffset?: number; allFilters?: { id: string; value: string }[]; status?: 'idle' | 'loading' | 'error' | 'success'; - entity?: { + entityName?: { en: { singular: string; plural: string }; fr: { singular: string; plural: string }; }; @@ -101,7 +101,7 @@ type TableContextType< isAllRowsSelected?: boolean; toggleAllRowsSelected: (value?: boolean) => void; status?: 'idle' | 'loading' | 'error' | 'success'; - entity?: { + entityName?: { en: { singular: string; plural: string }; fr: { singular: string; plural: string }; }; @@ -179,7 +179,7 @@ function Table< initiallySelectedRowsIds, updateTableData, status, - entity, + entityName, }: TableProps) { sortTypes = { health: (row1, row2) => { @@ -309,7 +309,7 @@ function Table< isAllRowsSelected, toggleAllRowsSelected, status, - entity, + entityName, }; return ( Date: Mon, 4 Mar 2024 11:29:57 +0100 Subject: [PATCH 28/43] add spacing between columns --- src/lib/components/tablev2/Tablestyle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/tablev2/Tablestyle.tsx b/src/lib/components/tablev2/Tablestyle.tsx index b9fc27da60..4a8255793a 100644 --- a/src/lib/components/tablev2/Tablestyle.tsx +++ b/src/lib/components/tablev2/Tablestyle.tsx @@ -1,6 +1,4 @@ import styled, { css } from 'styled-components'; - -// import { spacing } from '../../style/theme'; import { TableHeightKeyType, tableRowHeight, @@ -53,6 +51,7 @@ type HeadRowType = { export const HeadRow = styled.div` display: flex; align-items: center; + gap: ${spacing.r16}; height: 2.286rem; width: ${(props) => props.hasScrollBar @@ -75,6 +74,7 @@ type TableRowType = { }; export const TableRow = styled.div` color: ${(props) => props.theme.textPrimary}; + gap: ${spacing.r16}; border-bottom: 1px solid ${(props) => props.theme[props.separationLineVariant]}; cursor: default; From 8682f1dc6053f5ebb9ce860f37414a06fdf0b338 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Mon, 4 Mar 2024 11:32:26 +0100 Subject: [PATCH 29/43] remove displayTotalOf dprecated prop, remove displayName as entityName is in table context --- src/lib/components/tablev2/Search.tsx | 35 +++++++++------------------ 1 file changed, 12 insertions(+), 23 deletions(-) diff --git a/src/lib/components/tablev2/Search.tsx b/src/lib/components/tablev2/Search.tsx index bcd61c89bb..0ccd123570 100644 --- a/src/lib/components/tablev2/Search.tsx +++ b/src/lib/components/tablev2/Search.tsx @@ -15,12 +15,6 @@ export type DisplayedName = { export type SearchProps = { onChange: (arg0: string) => void; value?: string; - /** - * @deprecated - * All the Table should display the Total Number of Entity. - */ - displayTotalOf?: boolean; - displayedName: DisplayedName; locale?: TableLocalType; totalCount?: number; } & Omit; @@ -72,29 +66,25 @@ export const TableItemCount = ({ }; export function TableSearch(props: SearchProps) { + const { onChange, value = '', locale = 'en', totalCount, ...rest } = props; const { - onChange, - value = '', - displayTotalOf = true, - displayedName, - locale = 'en', - totalCount, - ...rest - } = props; - const { setGlobalFilter, rows, preGlobalFilteredRows } = useTableContext(); + setGlobalFilter, + rows, + preGlobalFilteredRows, + entityName = { en: { singular: 'result', plural: 'results' } }, + } = useTableContext(); const totalDispayedRows = totalCount ? totalCount : rows.length; React.useEffect(() => { setGlobalFilter(value); }, [value, setGlobalFilter, preGlobalFilteredRows]); return ( - {displayTotalOf && ( - - )} + + { if (typeof onChange === 'function') { - // @ts-ignore onChange(evt.target.value); } }} From 6ac5f4602df515cb40a3839d36c065daab72f17c Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Mon, 4 Mar 2024 11:33:14 +0100 Subject: [PATCH 30/43] fr entityName optionnal --- src/lib/components/tablev2/Tablev2.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/tablev2/Tablev2.component.tsx b/src/lib/components/tablev2/Tablev2.component.tsx index 36581e5f8d..6c6694c032 100644 --- a/src/lib/components/tablev2/Tablev2.component.tsx +++ b/src/lib/components/tablev2/Tablev2.component.tsx @@ -70,7 +70,7 @@ export type TableProps< status?: 'idle' | 'loading' | 'error' | 'success'; entityName?: { en: { singular: string; plural: string }; - fr: { singular: string; plural: string }; + fr?: { singular: string; plural: string }; }; initiallySelectedRowsIds?: Set; //To call it from the Cell renderer to update the original data @@ -103,7 +103,7 @@ type TableContextType< status?: 'idle' | 'loading' | 'error' | 'success'; entityName?: { en: { singular: string; plural: string }; - fr: { singular: string; plural: string }; + fr?: { singular: string; plural: string }; }; }; const TableContext = React.createContext(null); From af0f23c15f18aec5244d2e522b0143bccb1682eb Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Mon, 4 Mar 2024 11:37:01 +0100 Subject: [PATCH 31/43] change prop and condition as fr is now optionnal --- src/lib/components/tablev2/TableUtils.ts | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/lib/components/tablev2/TableUtils.ts b/src/lib/components/tablev2/TableUtils.ts index f8d0dfccb5..034327cc83 100644 --- a/src/lib/components/tablev2/TableUtils.ts +++ b/src/lib/components/tablev2/TableUtils.ts @@ -63,18 +63,16 @@ type TableMessagesType = 'error' | 'loading' | 'noResult'; export const translatedMessages = ( type: TableMessagesType, - entityName: - | { - en: { singular: string; plural: string }; - fr: { singular: string; plural: string }; - } - | undefined, + entityName?: { + en: { singular: string; plural: string }; + fr?: { singular: string; plural: string }; + }, locale?: TableLocalType, ) => { if (type === 'error') { if (locale === 'fr') { return `Erreur lors du chargement des ${ - entityName ? entityName.fr.plural : 'données' + entityName?.fr?.plural || 'données' }, veuillez rafraîchir la page.`; } return `An error occured while loading ${ @@ -84,19 +82,15 @@ export const translatedMessages = ( } if (type === 'loading') { if (locale === 'fr') { - return `Chargement des ${ - entityName ? entityName[locale].plural : 'données' - }...`; + return `Chargement des ${entityName?.fr?.plural || 'données'}...`; } - return `Loading ${entityName ? entityName.en.plural : 'data'}...`; + return `Loading ${entityName?.en.plural || 'data'}...`; } if (type === 'noResult') { if (locale === 'fr') { - return `Aucun ${ - entityName ? entityName[locale].singular : 'résultat' - } trouvé`; + return `Aucun ${entityName?.fr?.singular || 'résultat'} trouvé`; } - return `No ${entityName ? entityName.en.plural : 'results'} found`; + return `No ${entityName?.en.plural || 'results'} found`; } return ''; From a403fda8d105e9f709f8d8c20e21c0637f709393 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Mon, 4 Mar 2024 16:20:25 +0100 Subject: [PATCH 32/43] add resourceToCreate in EmptyState, change displayed text when an other resource is needed before crzating the list resource --- .../emptystate/Emptystate.component.tsx | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/lib/components/emptystate/Emptystate.component.tsx b/src/lib/components/emptystate/Emptystate.component.tsx index 12f3aaaa54..c540706323 100644 --- a/src/lib/components/emptystate/Emptystate.component.tsx +++ b/src/lib/components/emptystate/Emptystate.component.tsx @@ -5,10 +5,16 @@ import { Button } from '../buttonv2/Buttonv2.component'; import { Icon, IconName } from '../icon/Icon.component'; import { LargeText } from '../text/Text.component'; type Props = { - label: string; + listedResource: string; icon: IconName; link?: string; history?: Record; + /** + * The resource to create before browsing the listed resource + * Only used when resource to create is different from listed resource + */ + resourceToCreate?: string; + secondLine?: string; }; const EmptystateContainer = styled.div` ${(props) => { @@ -33,25 +39,27 @@ export const ActionWrapper = styled.div` `; function EmptyState(props: Props) { - const { icon, label, link, history } = props; + const { icon, listedResource, link, history, resourceToCreate, secondLine } = + props; return ( - A list of {`${label}s`} will appear here. + {`A list of ${listedResource}s will appear here.`} - There are no {`${label}s`} created yet, let's create your first{' '} - {label}. + {!resourceToCreate + ? `There are no ${listedResource}s created yet, let's create your first ${listedResource}.` + : `Before browsing your ${listedResource}s, create your first ${resourceToCreate}.`} {history && (
@@ -92,7 +91,6 @@ describe('TableV2', () => {
@@ -117,7 +115,6 @@ describe('TableV2', () => {
diff --git a/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx b/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx index 624903b2bc..313f611894 100644 --- a/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx +++ b/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx @@ -259,7 +259,6 @@ export function AttachmentConfirmationModal({ { return <>{Rows}; }} diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx index 6740421f80..0bd2e122ff 100644 --- a/src/lib/organisms/attachments/AttachmentTable.tsx +++ b/src/lib/organisms/attachments/AttachmentTable.tsx @@ -692,7 +692,6 @@ export const AttachmentTable = ({ defaultSortingKey="name" > diff --git a/stories/modal.stories.tsx b/stories/modal.stories.tsx index 8b38ad2492..825267a4e8 100644 --- a/stories/modal.stories.tsx +++ b/stories/modal.stories.tsx @@ -1,4 +1,3 @@ -import React, { useState } from 'react'; import { Modal } from '../src/lib/components/modal/Modal.component'; import { action } from '@storybook/addon-actions'; import { Wrapper } from './common'; @@ -164,7 +163,6 @@ export const WithinTable = { From 6399fb3f7c4eff5d8b604141f22f178e5f21589f Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 6 Mar 2024 11:35:58 +0100 Subject: [PATCH 34/43] add an optional background prop to empty state --- .../emptystate/Emptystate.component.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/lib/components/emptystate/Emptystate.component.tsx b/src/lib/components/emptystate/Emptystate.component.tsx index c540706323..4c1b8c18cb 100644 --- a/src/lib/components/emptystate/Emptystate.component.tsx +++ b/src/lib/components/emptystate/Emptystate.component.tsx @@ -4,23 +4,27 @@ import { spacing } from '../../spacing'; import { Button } from '../buttonv2/Buttonv2.component'; import { Icon, IconName } from '../icon/Icon.component'; import { LargeText } from '../text/Text.component'; +import { CoreUITheme } from '../../style/theme'; type Props = { listedResource: string; icon: IconName; link?: string; history?: Record; + backgroundColor?: keyof CoreUITheme; /** * The resource to create before browsing the listed resource * Only used when resource to create is different from listed resource */ resourceToCreate?: string; - secondLine?: string; }; -const EmptystateContainer = styled.div` +const EmptystateContainer = styled.div<{ backgroundColor?: keyof CoreUITheme }>` ${(props) => { - const brand = props.theme; + const { theme, backgroundColor } = props; return css` - color: ${brand.textSecondary}; + color: ${theme.textSecondary}; + background-color: ${backgroundColor + ? theme[backgroundColor] + : 'transparent'}; `; }} display: flex; @@ -39,10 +43,19 @@ export const ActionWrapper = styled.div` `; function EmptyState(props: Props) { - const { icon, listedResource, link, history, resourceToCreate, secondLine } = - props; + const { + icon, + listedResource, + link, + history, + resourceToCreate, + backgroundColor, + } = props; return ( - + From 6600e65e9a9c8f05d9344e43854261fca6b9a646 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 6 Mar 2024 17:13:34 +0100 Subject: [PATCH 35/43] add padding left in rows, comment head row width calc as it change nothing with scrollbar --- src/lib/components/tablev2/Tablestyle.tsx | 34 +++++++++++++---------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/lib/components/tablev2/Tablestyle.tsx b/src/lib/components/tablev2/Tablestyle.tsx index 8a3a3758cf..a01f9c4358 100644 --- a/src/lib/components/tablev2/Tablestyle.tsx +++ b/src/lib/components/tablev2/Tablestyle.tsx @@ -49,14 +49,18 @@ type HeadRowType = { }; export const HeadRow = styled.div` + box-sizing: border-box; display: flex; align-items: center; gap: ${spacing.r16}; height: 2.286rem; - width: ${(props) => + width: 100%; + // TO DO : check how we want to handle the scrollbar, for now it's on top of the border + // this calc doesn't work with the scrollbar and change nothing + /* width: ${(props) => props.hasScrollBar ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important` // -4px for border - : `calc(100% - ${borderSize} ) !important`}; + : `calc(100% - ${borderSize} ) !important`}; */ height: ${(props) => tableRowHeight[props.rowHeight]}rem; table-layout: fixed; color: ${(props) => props.theme.textPrimary}; @@ -64,6 +68,8 @@ export const HeadRow = styled.div` overflow: hidden; border-bottom: 1px solid ${(props) => props.theme[props.separationLineVariant]}; + padding-right: ${borderSize}; + padding-left: ${spacing.r16}; `; type TableRowType = { @@ -78,6 +84,8 @@ export const TableRow = styled.div` ${(props) => props.theme[props.separationLineVariant]}; cursor: default; box-sizing: border-box; + padding-left: ${spacing.r16}; + padding-right: ${borderSize}; // single selectable case ${(props) => { @@ -102,10 +110,6 @@ export const TableRow = styled.div` background-color: ${props.theme.highlight}; border-right: ${borderSize} solid ${props.theme.selectedActive}; `; - } else { - return css` - padding-right: ${borderSize}; - `; } }} `; @@ -118,16 +122,7 @@ export const TableRowMultiSelectable = styled.div` color: ${(props) => props.theme.textPrimary}; border-bottom: 1px solid ${(props) => props.theme[props.separationLineVariant]}; - box-sizing: border-box; - - &:hover, - &:focus { - background-color: ${(props) => props.theme.highlight}; - outline: none; - cursor: pointer; - } - ${(props) => { if (props.isSelected) { return css` @@ -136,9 +131,18 @@ export const TableRowMultiSelectable = styled.div` `; } }} + padding-right: ${borderSize}; + padding-left: ${spacing.r16}; + &:hover, + &:focus { + background-color: ${(props) => props.theme.highlight}; + outline: none; + cursor: pointer; + } `; export const TableBody = styled.div` + box-sizing: border-box; display: block; flex-grow: 1; height: 100%; From 4792eeb40822c4dd922a08538d8c3f81fabcaf20 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 8 Mar 2024 11:27:54 +0100 Subject: [PATCH 36/43] remove console.log --- src/lib/components/infomessage/InfoMessageUtils.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/infomessage/InfoMessageUtils.ts b/src/lib/components/infomessage/InfoMessageUtils.ts index c9c47e5c7a..bd01f346a2 100644 --- a/src/lib/components/infomessage/InfoMessageUtils.ts +++ b/src/lib/components/infomessage/InfoMessageUtils.ts @@ -10,7 +10,6 @@ export const useComputeBackgroundColor = () => { useEffect(() => { containerRef.current && setBackgroundColor(getBackgroundColor(containerRef.current, theme)); - console.log('containerRef.current', containerRef.current); }, [containerRef, theme]); return { From bfc9b472e52fdfa04ca9381e9fde141e26bdf182 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 19 Mar 2024 15:47:37 +0100 Subject: [PATCH 37/43] add box sizing borderbox to avoid border being not visible in UIs. remove the margin top to sidebar to avoid gap between border --- src/lib/components/navbar/Navbar.component.tsx | 1 + src/lib/components/sidebar/Sidebar.component.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/navbar/Navbar.component.tsx b/src/lib/components/navbar/Navbar.component.tsx index f0e147c2ed..25281ee860 100644 --- a/src/lib/components/navbar/Navbar.component.tsx +++ b/src/lib/components/navbar/Navbar.component.tsx @@ -37,6 +37,7 @@ const NavbarContainer = styled.div` color: ${getThemePropSelector('textPrimary')}; } border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3}; + box-sizing: border-box; `}; `; const NavbarMenu = styled.div` diff --git a/src/lib/components/sidebar/Sidebar.component.tsx b/src/lib/components/sidebar/Sidebar.component.tsx index 389e2758c6..b3e1da860c 100644 --- a/src/lib/components/sidebar/Sidebar.component.tsx +++ b/src/lib/components/sidebar/Sidebar.component.tsx @@ -41,7 +41,6 @@ const Wrapper = styled.div` } `; }} - margin-top: 1px; border-right: 1px solid ${(props) => props.theme.backgroundLevel3}; ${(props) => { if (props.expanded) { From 60c1296717822d37e44a38f367a2a8b404f4c68c Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 21 Mar 2024 14:54:55 +0100 Subject: [PATCH 38/43] fix typo --- src/lib/components/tablev2/TableUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/tablev2/TableUtils.ts b/src/lib/components/tablev2/TableUtils.ts index 034327cc83..ce0e752f0c 100644 --- a/src/lib/components/tablev2/TableUtils.ts +++ b/src/lib/components/tablev2/TableUtils.ts @@ -75,8 +75,8 @@ export const translatedMessages = ( entityName?.fr?.plural || 'données' }, veuillez rafraîchir la page.`; } - return `An error occured while loading ${ - entityName ? ` the ${entityName.en.plural}` : 'data' + return `An error occurred while loading ${ + entityName ? `the ${entityName.en.plural}` : 'data' }, please refresh the page.`; } From 69d4b3109ae6721f020c8bd62240d11fec9c5136 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 21 Mar 2024 14:56:07 +0100 Subject: [PATCH 39/43] remove trailing bracket, change for new spacing --- src/lib/components/tabsv2/StyledTabs.ts | 30 +++++++++++++------------ 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts index 768e81ebf9..15e6d24054 100644 --- a/src/lib/components/tabsv2/StyledTabs.ts +++ b/src/lib/components/tabsv2/StyledTabs.ts @@ -1,9 +1,11 @@ import styled from 'styled-components'; -import { spacing } from '../../style/theme'; + import { getThemePropSelector } from '../../utils'; +import { spacing } from '../../spacing'; + export const TabBar = styled.div` display: flex; - height: ${spacing.sp40}; + height: ${spacing.r40}; `; export const TabItem = styled.div<{ selected?: boolean; @@ -14,15 +16,15 @@ export const TabItem = styled.div<{ }>` display: flex; align-items: center; - padding: 0 ${spacing.sp24} 0 ${spacing.sp24}; - border-radius: ${spacing.sp4} ${spacing.sp4} 0 0; - border: ${spacing.sp1} solid transparent; + padding: 0 ${spacing.r24} 0 ${spacing.r24}; + border-radius: ${spacing.r4} ${spacing.r4} 0 0; + border: ${spacing.r1} solid transparent; min-width: 5rem; &:focus-visible { outline: 0; position: relative; - border: ${spacing.sp1} dashed ${getThemePropSelector('selectedActive')}; + border: ${spacing.r1} dashed ${getThemePropSelector('selectedActive')}; } &:focus-within { @@ -39,19 +41,19 @@ export const TabItem = styled.div<{ content: ""; background: ${props.activeTabSeparator || selectedActive}; position: absolute; - border-radius: ${spacing.sp2} ${spacing.sp2} 0 0; + border-radius: ${spacing.r2} ${spacing.r2} 0 0; bottom: 0; right: 0; - left: calc(50% - ${spacing.sp16}); - height: ${spacing.sp2}; - width: ${spacing.sp32}; + left: calc(50% - ${spacing.r16}); + height: ${spacing.r2}; + width: ${spacing.r32}; } ` : ` background-color: ${props.inactiveTabColor || backgroundLevel3}; &:hover { cursor: pointer; - border: ${spacing.sp1} solid ${props.tabHoverColor || highlight}; + border: ${spacing.r1} solid ${props.tabHoverColor || highlight}; } `; }} @@ -73,16 +75,16 @@ export const TabsContainer = styled.div<{ } & ${TabItem}::before { - content: ""; + content: ''; background: ${(props) => props.separatorColor || props.theme.infoSecondary}; position: absolute; bottom: 25%; right: 0; - height: ${spacing.sp16}; + height: ${spacing.r16}; width: 1px; margin-right: -1px; } -}`; +`; export const TabContent = styled.div<{ tabContentColor?: string }>` margin: 0; padding: 0; From e85f76dd43279b7ee6732edf2e65bcfa55e1e42f Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 21 Mar 2024 15:03:20 +0100 Subject: [PATCH 40/43] add padding in search box container --- src/lib/organisms/attachments/AttachmentTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx index 0bd2e122ff..b7cc878dca 100644 --- a/src/lib/organisms/attachments/AttachmentTable.tsx +++ b/src/lib/organisms/attachments/AttachmentTable.tsx @@ -105,7 +105,7 @@ const MenuContainer = styled.ul<{ `; const SearchBoxContainer = styled.div` - margin-bottom: ${spacing.r24}; + padding: ${spacing.r16}; `; const StyledSearchInput = styled(SearchInput)` From fabe8691acdfce55507d00737eac5b99f0885929 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 21 Mar 2024 17:08:51 +0100 Subject: [PATCH 41/43] restore margin-top --- src/lib/components/sidebar/Sidebar.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/sidebar/Sidebar.component.tsx b/src/lib/components/sidebar/Sidebar.component.tsx index b3e1da860c..520dede074 100644 --- a/src/lib/components/sidebar/Sidebar.component.tsx +++ b/src/lib/components/sidebar/Sidebar.component.tsx @@ -30,6 +30,7 @@ export type WrapperProps = { hovered?: boolean; }; const Wrapper = styled.div` + margin-top: 1px; flex-shrink: 0; ${(props) => { const { backgroundLevel1, textPrimary } = props.theme; From 2da8a24471fc835c2d67765c372097f0933a7668 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 5 Apr 2024 11:59:46 +0200 Subject: [PATCH 42/43] need to calc width with scrollbar --- src/lib/components/tablev2/Tablestyle.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/lib/components/tablev2/Tablestyle.tsx b/src/lib/components/tablev2/Tablestyle.tsx index a01f9c4358..4bed1d618d 100644 --- a/src/lib/components/tablev2/Tablestyle.tsx +++ b/src/lib/components/tablev2/Tablestyle.tsx @@ -54,13 +54,10 @@ export const HeadRow = styled.div` align-items: center; gap: ${spacing.r16}; height: 2.286rem; - width: 100%; - // TO DO : check how we want to handle the scrollbar, for now it's on top of the border - // this calc doesn't work with the scrollbar and change nothing - /* width: ${(props) => + width: ${(props) => props.hasScrollBar ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important` // -4px for border - : `calc(100% - ${borderSize} ) !important`}; */ + : `calc(100% - ${borderSize} ) !important`}; height: ${(props) => tableRowHeight[props.rowHeight]}rem; table-layout: fixed; color: ${(props) => props.theme.textPrimary}; From 7bcb19a5392b70b1cadcc23eaefc2ea60efa5a32 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 5 Apr 2024 17:02:17 +0200 Subject: [PATCH 43/43] add singular and plural to listedResource --- .../components/emptystate/Emptystate.component.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/lib/components/emptystate/Emptystate.component.tsx b/src/lib/components/emptystate/Emptystate.component.tsx index 4c1b8c18cb..aad25aaff8 100644 --- a/src/lib/components/emptystate/Emptystate.component.tsx +++ b/src/lib/components/emptystate/Emptystate.component.tsx @@ -6,7 +6,10 @@ import { Icon, IconName } from '../icon/Icon.component'; import { LargeText } from '../text/Text.component'; import { CoreUITheme } from '../../style/theme'; type Props = { - listedResource: string; + listedResource: { + singular: string; + plural: string; + }; icon: IconName; link?: string; history?: Record; @@ -60,19 +63,19 @@ function EmptyState(props: Props) { - {`A list of ${listedResource}s will appear here.`} + {`A list of ${listedResource.plural} will appear here.`} {!resourceToCreate - ? `There are no ${listedResource}s created yet, let's create your first ${listedResource}.` - : `Before browsing your ${listedResource}s, create your first ${resourceToCreate}.`} + ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.` + : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.`} {history && (