geido commented on code in PR #32959:
URL: https://github.com/apache/superset/pull/32959#discussion_r2026924669
##########
superset-frontend/src/SqlLab/components/ColumnElement/index.tsx:
##########
@@ -105,7 +105,7 @@ const ColumnElement = ({ column }: ColumnElementProps) => {
}
return (
<div className="clearfix table-column">
- <div className="pull-left m-l-10 col-name">
+ <div className="pull-left col-name">
Review Comment:
Do we know where these classes are coming from? Can we use the standard Ant
Design approach here, like `Flex` or `Space`?
##########
superset-frontend/src/SqlLab/components/TableElement/index.tsx:
##########
@@ -72,41 +68,14 @@ const Fade = styled.div`
opacity: ${(props: { hovered: boolean }) => (props.hovered ? 1 : 0)};
`;
-const StyledCollapsePanel = styled(Collapse.Panel)`
- ${({ theme }) => css`
- & {
- .ws-el-controls {
- margin-right: ${-theme.sizeUnit}px;
- display: flex;
- }
-
- .header-container {
- display: flex;
- flex: 1;
- align-items: center;
- width: 100%;
-
- .table-name {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: ${theme.fontSizeLG}px;
- flex: 1;
- }
-
- .header-right-side {
- margin-left: auto;
- display: flex;
- align-items: center;
- margin-right: ${theme.sizeUnit * 8}px;
- }
- }
- }
- `}
+const StyledControls = styled.div`
Review Comment:
Don't want to go too much outside of the scope of the PR but do you think we
can use standard Ant Design `Flex` and `Space` components to manage the layout
for all the styles in this file?
##########
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx:
##########
@@ -70,32 +46,32 @@ const CrossFiltersVerticalCollapse = (props: {
}
return (
- <StyledCollapse
+ <Collapse
ghost
defaultActiveKey="crossFilters"
expandIconPosition="right"
- >
- <Collapse.Panel
- key="crossFilters"
- header={
- <StyledCrossFiltersTitle>
- {t('Cross-filters')}
- </StyledCrossFiltersTitle>
- }
- >
- {crossFiltersIndicators}
- <span
- data-test="cross-filters-divider"
- css={css`
- width: 100%;
- height: 1px;
- display: block;
- background: ${theme.colors.grayscale.light3};
- margin: ${theme.sizeUnit * 8}px auto 0 auto;
- `}
- />
- </Collapse.Panel>
- </StyledCollapse>
+ items={[
+ {
+ key: 'crossFilters',
+ label: t('Cross-filters'),
+ children: (
+ <>
+ {crossFiltersIndicators}
+ <span
+ data-test="cross-filters-divider"
+ css={css`
+ width: 100%;
+ height: 1px;
+ display: block;
+ background: ${theme.colors.grayscale.light3};
Review Comment:
Do we need this? Can we use an Ant Design color instead? Also, this should
be a standard atomic component?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
