mirror of
https://github.com/apache/superset.git
synced 2026-04-20 00:24:38 +00:00
style: Tabs now support AntD compound components (+ basic stories) (#10728)
* Supporting compound coponents, adding stories * Adding a coupe o' knobs just for fun.
This commit is contained in:
@@ -23,7 +23,6 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||
import Icon from 'src/components/Icon';
|
||||
import Modal from 'src/common/components/Modal';
|
||||
import Tabs from 'src/common/components/Tabs';
|
||||
import { Tabs as BaseTabs } from 'src/common/components';
|
||||
|
||||
export type DatabaseObject = {
|
||||
id?: number;
|
||||
@@ -41,8 +40,6 @@ interface DatabaseModalProps {
|
||||
database?: DatabaseObject | null; // If included, will go into edit mode
|
||||
}
|
||||
|
||||
const { TabPane } = BaseTabs;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
|
||||
`;
|
||||
@@ -160,7 +157,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||
}
|
||||
>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane
|
||||
<Tabs.TabPane
|
||||
tab={
|
||||
<span>
|
||||
{t('Connection')}
|
||||
@@ -210,19 +207,19 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||
{t(' for more information on how to structure your URI.')}
|
||||
</div>
|
||||
</StyledInputContainer>
|
||||
</TabPane>
|
||||
<TabPane tab={<span>{t('Performance')}</span>} key="2">
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={<span>{t('Performance')}</span>} key="2">
|
||||
Performance Form Data
|
||||
</TabPane>
|
||||
<TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
|
||||
SQL Lab Settings Form Data
|
||||
</TabPane>
|
||||
<TabPane tab={<span>{t('Security')}</span>} key="4">
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={<span>{t('Security')}</span>} key="4">
|
||||
Security Form Data
|
||||
</TabPane>
|
||||
<TabPane tab={<span>{t('Extra')}</span>} key="5">
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={<span>{t('Extra')}</span>} key="5">
|
||||
Extra Form Data
|
||||
</TabPane>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user