refactor: change xsm Icons and dnd icons to new dynamic icons (#14419)

* intial commit

* fix test and add more icons

* fix lint
This commit is contained in:
Phillip Kelley-Dotson 2021-05-12 22:52:25 -07:00 committed by GitHub
parent 5f7722cb36
commit 3eef38f309
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 9 deletions

View File

@ -18,7 +18,7 @@
*/
import React from 'react';
import { useTheme } from '@superset-ui/core';
import Icon from 'src/components/Icon';
import Icons from 'src/components/Icons';
import {
CaretContainer,
CloseContainer,
@ -29,7 +29,6 @@ import { OptionProps } from 'src/explore/components/controls/DndColumnSelectCont
export default function Option(props: OptionProps) {
const theme = useTheme();
return (
<OptionControlContainer
data-test="option-label"
@ -40,12 +39,12 @@ export default function Option(props: OptionProps) {
data-test="remove-control-button"
onClick={() => props.clickClose(props.index)}
>
<Icon name="x-small" color={theme.colors.grayscale.light1} />
<Icons.XSmall color={theme.colors.grayscale.light1} />
</CloseContainer>
<Label data-test="control-label">{props.children}</Label>
{props.withCaret && (
<CaretContainer>
<Icon name="caret-right" color={theme.colors.grayscale.light1} />
<Icons.CaretRight color={theme.colors.grayscale.light1} />
</CaretContainer>
)}
</OptionControlContainer>

View File

@ -79,7 +79,7 @@ test('should render the remove button', () => {
test('should render the right caret', () => {
render(setup(mockedProps));
expect(screen.getByTestId('caret-right')).toBeInTheDocument();
expect(screen.getByRole('img', { name: 'caret-right' })).toBeInTheDocument();
});
test('should render the Popover on clicking the right caret', () => {

View File

@ -21,7 +21,7 @@ import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
import { styled, t, useTheme } from '@superset-ui/core';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import { Tooltip } from 'src/components/Tooltip';
import Icon from 'src/components/Icon';
import Icons from 'src/components/Icons';
import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
import { StyledMetricOption } from '../../optionRenderers';
@ -260,10 +260,10 @@ export const OptionControlLabel = ({
data-test="remove-control-button"
onClick={onRemove}
>
<Icon name="x-small" color={theme.colors.grayscale.light1} />
<Icons.XSmall iconColor={theme.colors.grayscale.light1} />
</CloseContainer>
<Label data-test="control-label">
{isFunction && <Icon name="function" viewBox="0 0 16 11" />}
{isFunction && <Icons.FunctionX viewBox="0 0 16 11" iconSize="l" />}
{getLabelContent()}
</Label>
{isExtra && (
@ -279,7 +279,7 @@ export const OptionControlLabel = ({
)}
{withCaret && (
<CaretContainer>
<Icon name="caret-right" color={theme.colors.grayscale.light1} />
<Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
</CaretContainer>
)}
</OptionControlContainer>