Skip to content

Table-related improvements #25333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gzdunek merged 6 commits into from
May 4, 2023
Merged

Table-related improvements #25333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ba5b363
Use a better icon for the reverse tunnel cell
gzdunek Apr 28, 2023
5e156ec
Use `ButtonIcon` for pagination icons
gzdunek Apr 28, 2023
f2406f1
Fix rendering table border on Safari
gzdunek Apr 28, 2023
9f5c89d
Manually add a visual separator between the table and the element bel…
gzdunek Apr 28, 2023
af11d99
Add bottom padding to resource tables in Connect
gzdunek Apr 28, 2023
4a87372
Update snapshots
gzdunek Apr 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e
Open in desktop
Submodule e updated from 759991 to 96f898
25 changes: 5 additions & 20 deletions web/packages/design/src/DataTable/Pager/StyledPager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,16 @@

import styled from 'styled-components';

import { ButtonIcon } from 'design';
import Icon from 'design/Icon';

export const StyledArrowBtn = styled.button`
background: none;
border: none;
cursor: pointer;

export const StyledArrowBtn = styled(ButtonIcon)`
${Icon} {
font-size: 20px;
transition: all 0.3s;
opacity: 0.5;
}

&:hover,
&:focus {
${Icon} {
opacity: 1;
}
}

&:disabled {
cursor: default;
${Icon} {
opacity: 0.1;
}
${Icon}:before {
// arrow icons have some padding that makes them look slightly off-center, padding compensates it
padding-left: 1px;
}
`;

Expand Down
12 changes: 9 additions & 3 deletions web/packages/design/src/DataTable/StyledTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import Icon from '../Icon';
export const StyledTable = styled.table(
props => `
background: ${props.theme.colors.levels.surface};
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
width: 100%;
Expand Down Expand Up @@ -74,7 +73,10 @@ export const StyledTable = styled.table(
line-height: 16px;
}

tbody tr {
// When border-collapse: collapse is set on a table element, Safari incorrectly renders the row border with alpha channel.
// It looks like the collapsed border was rendered twice, that is, opacity 0.07 looks like opacity 0.14.
// A workaround is to not use collapse and apply border to td elements.
& > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid ${props.theme.colors.spotBackground[0]};
}

Expand All @@ -87,7 +89,7 @@ export const StyledTable = styled.table(
borderRadius
);

export const StyledPanel = styled.nav`
export const StyledPanel = styled.nav<{ showTopBorder: boolean }>`
padding: 16px 24px;
display: flex;
height: 24px;
Expand All @@ -96,6 +98,10 @@ export const StyledPanel = styled.nav`
justify-content: space-between;
background: ${props => props.theme.colors.levels.surface};
${borderRadius}
border-top: ${props =>
props.showTopBorder
? '1px solid ' + props.theme.colors.spotBackground[0]
: undefined}
`;

export const StyledTableWrapper = styled.div`
Expand Down
8 changes: 6 additions & 2 deletions web/packages/design/src/DataTable/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,11 @@ function PagedTable<T>({
{renderBody(paginatedData[currentPage])}
</StyledTable>
{!isTopPager && (
<StyledPanel borderBottomLeftRadius={3} borderBottomRightRadius={3}>
<StyledPanel
borderBottomLeftRadius={3}
borderBottomRightRadius={3}
showTopBorder={true}
>
<ClientSidePager
nextPage={nextPage}
prevPage={prevPage}
Expand Down Expand Up @@ -317,7 +321,7 @@ function ServersideTable<T>({
{renderHeaders()}
{renderBody(data)}
</StyledTable>
<StyledPanel>
<StyledPanel showTopBorder={true}>
<ServerSidePager nextPage={nextPage} prevPage={prevPage} />
</StyledPanel>
</>
Expand Down
6 changes: 5 additions & 1 deletion web/packages/shared/components/Search/SearchPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ import { CircleArrowLeft, CircleArrowRight } from 'design/Icon';

export function SearchPagination({ prevPage, nextPage }: Props) {
return (
<StyledPanel borderBottomLeftRadius={3} borderBottomRightRadius={3}>
<StyledPanel
borderBottomLeftRadius={3}
borderBottomRightRadius={3}
showTopBorder={true}
>
<Flex justifyContent="flex-end" width="100%">
<Flex alignItems="center" mr={2}></Flex>
<Flex>
Expand Down
6 changes: 2 additions & 4 deletions ...ckages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ exports[`render device dashboard 1`] = `

.c11 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
width: 100%;
Expand Down Expand Up @@ -205,7 +204,7 @@ exports[`render device dashboard 1`] = `
line-height: 16px;
}

.c11 tbody tr {
.c11 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
}

Expand Down Expand Up @@ -683,7 +682,6 @@ exports[`render failed state for creating restricted privilege token 1`] = `

.c12 {
background: #222C59;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
width: 100%;
Expand Down Expand Up @@ -748,7 +746,7 @@ exports[`render failed state for creating restricted privilege token 1`] = `
line-height: 16px;
}

.c12 tbody tr {
.c12 > tbody > tr:not(:last-of-type) > td {
border-bottom: 1px solid rgba(255,255,255,0.07);
}

Expand Down
Loading