admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add styled component rule (#1261)

Browse Source 
* Add StyledComponent rule

* update doc

* update doc

* update doc
This commit is contained in:
Weiko
2023-08-17 20:58:02 -07:00
committed by GitHub
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/modules/ui/editable-field/components/EditableField.tsx
View File

@ -50,7 +50,7 @@ const StyledEditButtonContainer = styled(motion.div)`
right: 0;
`;
export const EditableFieldBaseContainer = styled.div`
export const StyledEditableFieldBaseContainer = styled.div`
align-items: center;
box-sizing: border-box;
@ -114,7 +114,7 @@ export function EditableField({
const showEditButton = !isFieldInEditMode && isHovered && useEditButton;
return (
<EditableFieldBaseContainer
<StyledEditableFieldBaseContainer
onMouseEnter={handleContainerMouseEnter}
onMouseLeave={handleContainerMouseLeave}
>
@ -151,6 +151,6 @@ export function EditableField({
<EditableFieldEditButton />
</StyledEditButtonContainer>
)}
</EditableFieldBaseContainer>
</StyledEditableFieldBaseContainer>
);
}

12
front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
export const EditableFieldNormalModeOuterContainer = styled.div<
const StyledEditableFieldNormalModeOuterContainer = styled.div<
Pick<
OwnProps,
| 'disableClick'
@ -51,7 +51,7 @@ export const EditableFieldNormalModeOuterContainer = styled.div<
}}
`;
export const EditableFieldNormalModeInnerContainer = styled.div`
const StyledEditableFieldNormalModeInnerContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.primary};
font-size: 'inherit';
@ -82,16 +82,16 @@ export function EditableFieldDisplayMode({
isDisplayModeFixHeight,
}: React.PropsWithChildren<OwnProps>) {
return (
<EditableFieldNormalModeOuterContainer
<StyledEditableFieldNormalModeOuterContainer
onClick={disableClick ? undefined : onClick}
disableClick={disableClick}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
disableHoverEffect={disableHoverEffect}
isDisplayModeFixHeight={isDisplayModeFixHeight}
>
<EditableFieldNormalModeInnerContainer>
<StyledEditableFieldNormalModeInnerContainer>
{children}
</EditableFieldNormalModeInnerContainer>
</EditableFieldNormalModeOuterContainer>
</StyledEditableFieldNormalModeInnerContainer>
</StyledEditableFieldNormalModeOuterContainer>
);
}

6
front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
export const EditableFieldEditModeContainer = styled.div<OwnProps>`
const StyledEditableFieldEditModeContainer = styled.div<OwnProps>`
align-items: center;
display: flex;
@ -33,11 +33,11 @@ export function EditableFieldEditMode({
useRegisterCloseFieldHandlers(wrapperRef, onSubmit, onCancel);
return (
<EditableFieldEditModeContainer
<StyledEditableFieldEditModeContainer
data-testid="editable-field-edit-mode-container"
ref={wrapperRef}
>
{children}
</EditableFieldEditModeContainer>
</StyledEditableFieldEditModeContainer>
);
}

6
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
View File

@ -19,7 +19,7 @@ import {
FieldRelationValue,
} from '../types/FieldMetadata';
const RelationPickerContainer = styled.div`
const StyledRelationPickerContainer = styled.div`
left: 0px;
position: absolute;
top: -8px;
@ -116,13 +116,13 @@ export function GenericEditableRelationFieldEditMode() {
}
return (
<RelationPickerContainer>
<StyledRelationPickerContainer>
<RelationPicker
fieldDefinition={currentEditableFieldDefinition}
fieldValue={fieldValue}
handleEntitySubmit={handleSubmit}
handleCancel={handleCancel}
/>
</RelationPickerContainer>
</StyledRelationPickerContainer>
);
}