[GitHub] [superset] ktmud commented on pull request #14478: fix: fix adhocpopovers tab animate.

[GitBox]

ktmud commented on pull request #14478:
URL: https://github.com/apache/superset/pull/14478#issuecomment-832370585


   Could we disable the animation globally by default?  E.g. like this:
   
   ```diff
   diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx 
b/superset-frontend/src/components/Tabs/Tabs.tsx
   index 90c3a64e6..f016b73f3 100644
   --- a/superset-frontend/src/components/Tabs/Tabs.tsx
   +++ b/superset-frontend/src/components/Tabs/Tabs.tsx
   @@ -20,81 +20,92 @@ import React from 'react';
    import { css, styled } from '@superset-ui/core';
    import AntDTabs, { TabsProps as AntDTabsProps } from 'antd/lib/tabs';
    import Icon from 'src/components/Icon';
   +import { useTheme } from '@emotion/react';
    
    export interface TabsProps extends AntDTabsProps {
      fullWidth?: boolean;
      allowOverflow?: boolean;
    }
    
   -const notForwardedProps = ['fullWidth', 'allowOverflow'];
   +const StyledTabs = ({
   +  animated = false,
   +  fullWidth = true,
   +  allowOverflow = true,
   +  ...props
   +}: TabsProps) => {
   +  const theme = useTheme();
   +  return (
   +    <AntDTabs
   +      animated={animated}
   +      {...props}
   +      css={css`
   +        overflow: ${allowOverflow ? 'visible' : 'hidden'};
   +
   +        .ant-tabs-content-holder {
   +          overflow: ${allowOverflow ? 'visible' : 'auto'};
   +        }
    
   -const StyledTabs = styled(AntDTabs, {
   -  shouldForwardProp: prop => !notForwardedProps.includes(String(prop)),
   -})<TabsProps>`
   -  overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 
'hidden')};
   +        .ant-tabs-tab {
   +          flex: 1 1 auto;
    
   -  .ant-tabs-content-holder {
   -    overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 
'auto')};
   -  }
   +          &.ant-tabs-tab-active .ant-tabs-tab-btn {
   +            color: inherit;
   +          }
    
   -  .ant-tabs-tab {
   -    flex: 1 1 auto;
   +          &:hover {
   +            .anchor-link-container {
   +              cursor: pointer;
    
   -    &.ant-tabs-tab-active .ant-tabs-tab-btn {
   -      color: inherit;
   -    }
   +              .fa.fa-link {
   +                visibility: visible;
   +              }
   +            }
   +          }
    
   -    &:hover {
   -      .anchor-link-container {
   -        cursor: pointer;
   +          .short-link-trigger.btn {
   +            padding: 0 ${theme.gridUnit}px;
    
   -        .fa.fa-link {
   -          visibility: visible;
   +            & > .fa.fa-link {
   +              top: 0;
   +            }
   +          }
            }
   -      }
   -    }
   -
   -    .short-link-trigger.btn {
   -      padding: 0 ${({ theme }) => theme.gridUnit}px;
   -
   -      & > .fa.fa-link {
   -        top: 0;
   -      }
   -    }
   -  }
   -
   -  ${({ fullWidth }) =>
   -    fullWidth &&
   -    css`
   -      .ant-tabs-nav-list {
   -        width: 100%;
   -      }
   -
   -      .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};
   -    }
   -  }
   +        ${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-ink-bar {
   -    background: ${({ theme }) => theme.colors.secondary.base};
   -  }
   -`;
   +        .ant-tabs-ink-bar {
   +          background: ${theme.colors.secondary.base};
   +        }
   +      `}
   +    />
   +  );
   +};
    
    const StyledTabPane = styled(AntDTabs.TabPane)``;
    
   @@ -102,11 +113,6 @@ const Tabs = Object.assign(StyledTabs, {
      TabPane: StyledTabPane,
    });
    
   -Tabs.defaultProps = {
   -  fullWidth: true,
   -  animated: true,
   -};
   -
    const StyledEditableTabs = styled(StyledTabs)`
      .ant-tabs-content-holder {
        background: white;
   
   ```
   
   Note this diff also fixes a bug where tabs are not expanded to full width:
   
   ### Before
   
   <img width="488" alt="Xnip2021-05-04_19-20-51" 
src="https://user-images.githubusercontent.com/335541/117090684-dbdff600-ad0d-11eb-8112-026dff30fdf1.png";>
   
   
   ### After
   
   <img width="432" alt="Xnip2021-05-04_19-20-18" 
src="https://user-images.githubusercontent.com/335541/117090653-c8348f80-ad0d-11eb-9748-6d4cb36900e8.png";>
   


-- 
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.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org