mirror of https://github.com/apache/superset.git
refactor: icon to icons for inderteminatecheckbox icon (#15397)
* initial commit * fix cypress tests * Update superset-frontend/src/components/IndeterminateCheckbox/index.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update index.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
parent
ed6d10e283
commit
a0179ac513
|
@ -51,11 +51,11 @@ describe('chart list view', () => {
|
||||||
it('should bulk delete correctly', () => {
|
it('should bulk delete correctly', () => {
|
||||||
cy.get('[data-test="listview-table"]').should('be.visible');
|
cy.get('[data-test="listview-table"]').should('be.visible');
|
||||||
cy.get('[data-test="bulk-select"]').eq(0).click();
|
cy.get('[data-test="bulk-select"]').eq(0).click();
|
||||||
cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click();
|
cy.get('[aria-label="checkbox-off"]').eq(1).siblings('input').click();
|
||||||
cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click();
|
cy.get('[aria-label="checkbox-off"]').eq(2).siblings('input').click();
|
||||||
cy.get('[data-test="bulk-select-action"]').eq(0).click();
|
cy.get('[data-test="bulk-select-action"]').eq(0).click();
|
||||||
cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
|
cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
|
||||||
cy.get('[data-test="modal-confirm-button"]').eq(0).click();
|
cy.get('[data-test="modal-confirm-button"]').eq(0).click();
|
||||||
cy.get('[data-test="checkbox-on"]').should('not.exist');
|
cy.get('[aria-label="checkbox-on"]').should('not.exist');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -51,11 +51,11 @@ describe('dashboard list view', () => {
|
||||||
it('should bulk delete correctly', () => {
|
it('should bulk delete correctly', () => {
|
||||||
cy.get('[data-test="listview-table"]').should('be.visible');
|
cy.get('[data-test="listview-table"]').should('be.visible');
|
||||||
cy.get('[data-test="bulk-select"]').eq(0).click();
|
cy.get('[data-test="bulk-select"]').eq(0).click();
|
||||||
cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click();
|
cy.get('[aria-label="checkbox-off"]').eq(1).siblings('input').click();
|
||||||
cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click();
|
cy.get('[aria-label="checkbox-off"]').eq(2).siblings('input').click();
|
||||||
cy.get('[data-test="bulk-select-action"]').eq(0).click();
|
cy.get('[data-test="bulk-select-action"]').eq(0).click();
|
||||||
cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
|
cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
|
||||||
cy.get('[data-test="modal-confirm-button"]').eq(0).click();
|
cy.get('[data-test="modal-confirm-button"]').eq(0).click();
|
||||||
cy.get('[data-test="checkbox-on"]').should('not.exist');
|
cy.get('[aria-label="checkbox-on"]').should('not.exist');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { styled } from '@superset-ui/core';
|
import { styled } from '@superset-ui/core';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
|
|
||||||
export interface IndeterminateCheckboxProps {
|
export interface IndeterminateCheckboxProps {
|
||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
|
@ -35,8 +35,18 @@ const CheckboxLabel = styled.label`
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const IconWithColor = styled(Icon)`
|
const CheckboxHalf = styled(Icons.CheckboxHalf)`
|
||||||
color: ${({ theme }) => theme.colors.primary.dark1};
|
color: ${({ theme }) => theme.colors.primary.base};
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CheckboxOff = styled(Icons.CheckboxOff)`
|
||||||
|
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CheckboxOn = styled(Icons.CheckboxOn)`
|
||||||
|
color: ${({ theme }) => theme.colors.primary.base};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -79,9 +89,9 @@ const IndeterminateCheckbox = React.forwardRef(
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<InputContainer>
|
<InputContainer>
|
||||||
{indeterminate && <IconWithColor name="checkbox-half" />}
|
{indeterminate && <CheckboxHalf />}
|
||||||
{!indeterminate && checked && <IconWithColor name="checkbox-on" />}
|
{!indeterminate && checked && <CheckboxOn />}
|
||||||
{!indeterminate && !checked && <Icon name="checkbox-off" />}
|
{!indeterminate && !checked && <CheckboxOff />}
|
||||||
<HiddenInput
|
<HiddenInput
|
||||||
name={id}
|
name={id}
|
||||||
id={id}
|
id={id}
|
||||||
|
|
Loading…
Reference in New Issue