-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
New Streams Table Column Sizing Fix #20141
Changes from all commits
2af3e9d
a4e43bd
0c8d8f6
aeb02a1
09b3dc0
b1fb9f3
a61a825
61cee57
52fd062
2f9c530
7541097
0b0b097
30c47cd
ecd304f
5118061
8fb4e9d
35e0a51
92d338c
8e5d56c
57c4dbf
73dbfb7
0d2b24b
b352f87
b7c2df8
c2c0e62
0ff8247
c3d6f4f
56c7671
8497700
7b90282
bf9a9ce
2e737bf
fa784fb
82fbf71
f1e9e3a
316c6e1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,7 @@ | ||
.container { | ||
margin-bottom: 29px; | ||
max-height: 600px; | ||
overflow-y: auto; | ||
overflow: unset; | ||
min-width: fit-content; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolutely core to this working. |
||
|
||
--webkit-overlay: true; | ||
|
||
width: 100%; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,7 +9,7 @@ import { useConnectionFormService } from "hooks/services/ConnectionForm/Connecti | |
|
||
import styles from "./CatalogTreeSubheader.module.scss"; | ||
|
||
const SubtitleCell = styled(Cell).attrs(() => ({ lighter: true }))` | ||
const SubtitleCell = styled(Cell).attrs(() => ({ light: true }))` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was not caught by the rename! Can't wait to get rid of styled components. |
||
font-size: 10px; | ||
line-height: 12px; | ||
border-top: 1px solid ${({ theme }) => theme.greyColor0}; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
$xsmall: 20px; | ||
$small: 50px; | ||
$medium: 120px; | ||
$large: 200px; | ||
|
||
.tableCell { | ||
flex: 1 0 $medium; | ||
min-width: $medium; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Need to pair this with the flex-basis for it to work. |
||
word-break: break-word; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
|
||
&.xsmall { | ||
flex-basis: $xsmall; | ||
min-width: $xsmall; | ||
} | ||
|
||
&.small { | ||
flex-basis: $small; | ||
min-width: $small; | ||
} | ||
|
||
&.large { | ||
flex-basis: $large; | ||
min-width: $large; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import classNames from "classnames"; | ||
import React from "react"; | ||
|
||
import styles from "./CatalogTreeTableCell.module.scss"; | ||
|
||
type Sizes = "xsmall" | "small" | "medium" | "large"; | ||
|
||
interface CatalogTreeTableCellProps { | ||
size?: Sizes; | ||
className?: string; | ||
} | ||
|
||
// This lets us avoid the eslint complaint about unused styles | ||
const sizeMap: Record<Sizes, string> = { | ||
xsmall: styles.xsmall, | ||
small: styles.small, | ||
medium: styles.medium, | ||
large: styles.large, | ||
}; | ||
|
||
export const CatalogTreeTableCell: React.FC<React.PropsWithChildren<CatalogTreeTableCellProps>> = ({ | ||
size = "medium", | ||
className, | ||
children, | ||
}) => { | ||
return <div className={classNames(styles.tableCell, className, sizeMap[size])}>{children}</div>; | ||
}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. New cell component for these tables |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,23 @@ | ||
@use "scss/_colors"; | ||
@use "scss/_variables"; | ||
@forward "./CatalogTreeTableRow.module.scss"; | ||
|
||
.cellText { | ||
color: colors.$grey; | ||
} | ||
|
||
.headerContainer { | ||
margin: variables.$spacing-md variables.$spacing-md variables.$spacing-sm variables.$spacing-md; | ||
margin: variables.$spacing-md 0 variables.$spacing-sm 0; | ||
gap: variables.$spacing-sm; | ||
overflow: hidden; | ||
scrollbar-gutter: stable; | ||
min-height: 33px; | ||
} | ||
|
||
.checkboxCell { | ||
margin-right: variables.$spacing-sm; | ||
max-width: 43px; | ||
font-size: 10px; | ||
line-height: 13px; | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: flex-end; | ||
padding-left: calc(#{variables.$spacing-xl} + #{variables.$spacing-sm}); | ||
&.newTable { | ||
overflow: unset; | ||
} | ||
} | ||
|
||
.arrowPlaceholder { | ||
width: 20px; | ||
.checkboxCell { | ||
@extend %streamRowCheckboxCell; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
light
was unused so I renamedlighter
to light and removed thelight
functionality.