mirror of https://github.com/apache/superset.git
fix: fix adhocpopovers tab animate. (#14478)
* fix popover * addd tabs default css * fix lint * fix tests * address comments * lint fix * fix test * lint
This commit is contained in:
parent
2bd0b62902
commit
e4e23ea487
|
@ -128,10 +128,10 @@ describe('DashboardBuilder', () => {
|
|||
expect(parentSize.find(Tabs.TabPane)).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should set animated=true on Tabs for perf', () => {
|
||||
it('should have default animated=true on Tabs for perf', () => {
|
||||
const wrapper = setup({ dashboardLayout: undoableDashboardLayoutWithTabs });
|
||||
const tabProps = wrapper.find(ParentSize).find(Tabs).props();
|
||||
expect(tabProps.animated).toEqual({ inkBar: true, tabPane: false });
|
||||
expect(tabProps.animated).toEqual(true);
|
||||
});
|
||||
|
||||
it('should render a TabPane and DashboardGrid for first Tab', () => {
|
||||
|
@ -182,7 +182,7 @@ describe('DashboardBuilder', () => {
|
|||
dashboardLayout: undoableDashboardLayoutWithTabs,
|
||||
});
|
||||
|
||||
expect(wrapper.find(Tabs).prop('activeKey')).toBe(DASHBOARD_GRID_ID);
|
||||
expect(wrapper.find(Tabs).at(1).prop('activeKey')).toBe(DASHBOARD_GRID_ID);
|
||||
|
||||
wrapper
|
||||
.find('.dashboard-component-tabs .ant-tabs .ant-tabs-tab')
|
||||
|
|
|
@ -26,75 +26,73 @@ export interface TabsProps extends AntDTabsProps {
|
|||
allowOverflow?: boolean;
|
||||
}
|
||||
|
||||
const notForwardedProps = ['fullWidth', 'allowOverflow'];
|
||||
const StyledTabs = ({
|
||||
animated = false,
|
||||
fullWidth = true,
|
||||
allowOverflow = true,
|
||||
...props
|
||||
}: TabsProps) => (
|
||||
<AntDTabs
|
||||
animated={animated}
|
||||
{...props}
|
||||
css={theme => css`
|
||||
overflow: ${allowOverflow ? 'visible' : 'hidden'};
|
||||
|
||||
const StyledTabs = styled(AntDTabs, {
|
||||
shouldForwardProp: prop => !notForwardedProps.includes(String(prop)),
|
||||
})<TabsProps>`
|
||||
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')};
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'auto')};
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.anchor-link-container {
|
||||
cursor: pointer;
|
||||
|
||||
.fa.fa-link {
|
||||
visibility: visible;
|
||||
.ant-tabs-content-holder {
|
||||
overflow: ${allowOverflow ? 'visible' : 'auto'};
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
flex: 1 1 auto;
|
||||
&.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: inherit;
|
||||
}
|
||||
&:hover {
|
||||
.anchor-link-container {
|
||||
cursor: pointer;
|
||||
.fa.fa-link {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.short-link-trigger.btn {
|
||||
padding: 0 ${theme.gridUnit}px;
|
||||
& > .fa.fa-link {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${fullWidth &&
|
||||
css`
|
||||
.ant-tabs-nav-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.short-link-trigger.btn {
|
||||
padding: 0 ${({ theme }) => theme.gridUnit}px;
|
||||
.ant-tabs-tab {
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
`};
|
||||
|
||||
& > .fa.fa-link {
|
||||
top: 0;
|
||||
.ant-tabs-tab-btn {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
.required {
|
||||
margin-left: ${theme.gridUnit / 2}px;
|
||||
color: ${theme.colors.error.base};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
${({ fullWidth }) =>
|
||||
fullWidth &&
|
||||
css`
|
||||
.ant-tabs-nav-list {
|
||||
width: 100%;
|
||||
.ant-tabs-ink-bar {
|
||||
background: ${theme.colors.secondary.base};
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
width: 0;
|
||||
}
|
||||
`};
|
||||
|
||||
.ant-tabs-tab-btn {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
|
||||
.required {
|
||||
margin-left: ${({ theme }) => theme.gridUnit / 2}px;
|
||||
color: ${({ theme }) => theme.colors.error.base};
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: ${({ theme }) => theme.colors.secondary.base};
|
||||
}
|
||||
`;
|
||||
`}
|
||||
/>
|
||||
);
|
||||
|
||||
const StyledTabPane = styled(AntDTabs.TabPane)``;
|
||||
|
||||
|
@ -102,11 +100,6 @@ const Tabs = Object.assign(StyledTabs, {
|
|||
TabPane: StyledTabPane,
|
||||
});
|
||||
|
||||
Tabs.defaultProps = {
|
||||
fullWidth: true,
|
||||
animated: { inkBar: true, tabPane: false },
|
||||
};
|
||||
|
||||
const StyledEditableTabs = styled(StyledTabs)`
|
||||
.ant-tabs-content-holder {
|
||||
background: white;
|
||||
|
|
|
@ -72,6 +72,7 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
|
|||
activeKey={activeKey}
|
||||
renderTabBar={() => <></>}
|
||||
fullWidth={false}
|
||||
animated
|
||||
allowOverflow
|
||||
>
|
||||
{childIds.map((id, index) => (
|
||||
|
|
Loading…
Reference in New Issue