refactor: icon to icons for infotooltip component (#15398)

* intital commit

* align label texts and icons

* fix style
This commit is contained in:
Phillip Kelley-Dotson 2021-07-01 08:52:17 -07:00 committed by GitHub
parent b5119b8dff
commit 7889564250
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 330 additions and 316 deletions

View File

@ -20,7 +20,7 @@
import React from 'react';
import { styled } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icon from 'src/components/Icon';
import Icons from 'src/components/Icons';
export interface InfoTooltipProps {
className?: string;
@ -74,7 +74,7 @@ export default function InfoTooltip({
overlayStyle={overlayStyle}
color={bgColor}
>
<Icon name="info-solid-small" />
<Icons.InfoSolidSmall />
</StyledTooltip>
);
}

View File

@ -18,7 +18,7 @@
*/
import React, { ChangeEvent, EventHandler } from 'react';
import cx from 'classnames';
import { t, SupersetTheme } from '@superset-ui/core';
import { t, SupersetTheme, styled } from '@superset-ui/core';
import InfoTooltip from 'src/components/InfoTooltip';
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
import Collapse from 'src/components/Collapse';
@ -34,6 +34,15 @@ const defaultExtra =
'{\n "metadata_params": {},\n "engine_params": {},' +
'\n "metadata_cache_timeout": {},\n "schemas_allowed_for_csv_upload": [] \n}';
const StyledOptionContainer = styled.div`
.input-container > div > svg {
margin-top: ${({ theme }) => theme.gridUnit * 0.25}px;
}
span[role='img'] {
margin-top: ${({ theme }) => theme.gridUnit * 0.5}px;
}
`;
const ExtraOptions = ({
db,
onInputChange,
@ -49,6 +58,7 @@ const ExtraOptions = ({
const createAsOpen = !!(db?.allow_ctas || db?.allow_cvas);
return (
<StyledOptionContainer>
<Collapse
expandIconPosition="right"
accordion
@ -174,7 +184,8 @@ const ExtraOptions = ({
<div>
<h4>Performance</h4>
<p className="helper">
Adjust settings that will impact the performance of this database.
Adjust settings that will impact the performance of this
database.
</p>
</div>
}
@ -246,7 +257,9 @@ const ExtraOptions = ({
</div>
<div className="helper">
<div>
{t('JSON string containing additional connection configuration.')}
{t(
'JSON string containing additional connection configuration.',
)}
</div>
<div>
{t(
@ -381,6 +394,7 @@ const ExtraOptions = ({
</StyledInputContainer>
</Collapse.Panel>
</Collapse>
</StyledOptionContainer>
);
};