Updates CheckBox Component in Table and Kanban View ( #4850 ) (#6519)

fixes #4850

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Faisal-imtiyaz123
2024-08-05 18:56:09 +05:30
committed by GitHub
parent d23e5f18c3
commit fe9144a4a7
4 changed files with 6 additions and 3 deletions

View File

@ -245,6 +245,7 @@ export const RecordBoardCard = () => {
)} )}
<StyledCheckboxContainer className="checkbox-container"> <StyledCheckboxContainer className="checkbox-container">
<Checkbox <Checkbox
hoverable
checked={isCurrentCardSelected} checked={isCurrentCardSelected}
onChange={() => setIsCurrentCardSelected(!isCurrentCardSelected)} onChange={() => setIsCurrentCardSelected(!isCurrentCardSelected)}
variant={CheckboxVariant.Secondary} variant={CheckboxVariant.Secondary}

View File

@ -36,7 +36,7 @@ export const RecordTableCellCheckbox = () => {
return ( return (
<RecordTableTd isSelected={isSelected} hasRightBorder={false}> <RecordTableTd isSelected={isSelected} hasRightBorder={false}>
<StyledContainer onClick={handleClick}> <StyledContainer onClick={handleClick}>
<Checkbox checked={currentRowSelected} /> <Checkbox hoverable checked={currentRowSelected} />
</StyledContainer> </StyledContainer>
</RecordTableTd> </RecordTableTd>
); );

View File

@ -47,6 +47,7 @@ export const RecordTableHeaderCheckboxColumn = () => {
<StyledColumnHeaderCell> <StyledColumnHeaderCell>
<StyledContainer> <StyledContainer>
<Checkbox <Checkbox
hoverable
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
indeterminate={indeterminate} indeterminate={indeterminate}

View File

@ -1,5 +1,5 @@
import * as React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import * as React from 'react';
import { IconCheck, IconMinus } from 'twenty-ui'; import { IconCheck, IconMinus } from 'twenty-ui';
import { v4 } from 'uuid'; import { v4 } from 'uuid';
@ -49,10 +49,11 @@ const StyledInputContainer = styled.div<InputProps>`
border-radius: ${({ theme, shape }) => border-radius: ${({ theme, shape }) =>
shape === CheckboxShape.Rounded shape === CheckboxShape.Rounded
? theme.border.radius.rounded ? theme.border.radius.rounded
: theme.border.radius.sm}; : theme.border.radius.md};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex; display: flex;
padding: ${({ theme }) => theme.spacing(1)};
position: relative; position: relative;
${({ hoverable, isChecked, theme, indeterminate, disabled }) => { ${({ hoverable, isChecked, theme, indeterminate, disabled }) => {
if (!hoverable || disabled === true) return ''; if (!hoverable || disabled === true) return '';