This is an automated email from the ASF dual-hosted git repository.
pkdotson pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new e4e23ea fix: fix adhocpopovers tab animate. (#14478)
e4e23ea is described below
commit e4e23ea4878e61a05e51da060404386acd5213b9
Author: Phillip Kelley-Dotson <[email protected]>
AuthorDate: Thu May 13 20:30:27 2021 -0700
fix: fix adhocpopovers tab animate. (#14478)
* fix popover
* addd tabs default css
* fix lint
* fix tests
* address comments
* lint fix
* fix test
* lint
---
.../dashboard/components/DashboardBuilder_spec.jsx | 6 +-
superset-frontend/src/components/Tabs/Tabs.tsx | 131 ++++++++++-----------
.../DashboardBuilder/DashboardContainer.tsx | 1 +
3 files changed, 66 insertions(+), 72 deletions(-)
diff --git
a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
index b341e89..6f2385b 100644
---
a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
+++
b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
@@ -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')
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx
b/superset-frontend/src/components/Tabs/Tabs.tsx
index c9239f0..f5a1d14 100644
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -26,75 +26,73 @@ export interface TabsProps extends AntDTabsProps {
allowOverflow?: boolean;
}
-const notForwardedProps = ['fullWidth', 'allowOverflow'];
-
-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;
- }
+const StyledTabs = ({
+ animated = false,
+ fullWidth = true,
+ allowOverflow = true,
+ ...props
+}: TabsProps) => (
+ <AntDTabs
+ animated={animated}
+ {...props}
+ css={theme => css`
+ overflow: ${allowOverflow ? 'visible' : 'hidden'};
+
+ .ant-tabs-content-holder {
+ overflow: ${allowOverflow ? 'visible' : 'auto'};
}
- }
-
- .short-link-trigger.btn {
- padding: 0 ${({ theme }) => theme.gridUnit}px;
-
- & > .fa.fa-link {
- top: 0;
+ .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%;
+ }
- ${({ fullWidth }) =>
- fullWidth &&
- css`
- .ant-tabs-nav-list {
- width: 100%;
+ .ant-tabs-tab {
+ width: 0;
+ margin-right: 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};
+ }
}
-
- .ant-tabs-tab {
- width: 0;
+ .ant-tabs-ink-bar {
+ background: ${theme.colors.secondary.base};
}
- `};
-
- .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;
diff --git
a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index 4bdd667..d9dcb02 100644
---
a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++
b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -72,6 +72,7 @@ const DashboardContainer: FC<DashboardContainerProps> = ({
topLevelTabs }) => {
activeKey={activeKey}
renderTabBar={() => <></>}
fullWidth={false}
+ animated
allowOverflow
>
{childIds.map((id, index) => (
