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

1
front/src/modules/ui/dropdown/components/DropdownMenu.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenu = styled.div<{

6
front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx
View File

@ -11,7 +11,7 @@ type Props = {
id?: string;
};
const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
const StyledDropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
align-items: center;
display: flex;
justify-content: space-between;
@ -42,11 +42,11 @@ export function DropdownMenuCheckableItem({
}
return (
<DropdownMenuCheckableItemContainer onClick={handleClick}>
<StyledDropdownMenuCheckableItemContainer onClick={handleClick}>
<StyledLeftContainer>
<Checkbox checked={checked} />
<StyledChildrenContainer>{children}</StyledChildrenContainer>
</StyledLeftContainer>
</DropdownMenuCheckableItemContainer>
</StyledDropdownMenuCheckableItemContainer>
);
}

6
front/src/modules/ui/dropdown/components/DropdownMenuInput.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/theme/constants/effects';
export const DropdownMenuInputContainer = styled.div`
const StyledDropdownMenuInputContainer = styled.div`
--vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center;
@ -28,7 +28,7 @@ export const DropdownMenuInput = forwardRef<
HTMLInputElement,
InputHTMLAttributes<HTMLInputElement>
>((props, ref) => (
<DropdownMenuInputContainer>
<StyledDropdownMenuInputContainer>
<StyledInput autoComplete="off" placeholder="Search" {...props} ref={ref} />
</DropdownMenuInputContainer>
</StyledDropdownMenuInputContainer>
));

1
front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenuItemsContainer = styled.div<{

6
front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx
View File

@ -13,7 +13,7 @@ type Props = React.ComponentProps<'li'> & {
disabled?: boolean;
};
const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
const StyledDropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
Pick<Props, 'hovered'>
>`
${hoverBackground};
@ -72,7 +72,7 @@ export function DropdownMenuSelectableItem({
}, [hovered]);
return (
<DropdownMenuSelectableItemContainer
<StyledDropdownMenuSelectableItemContainer
{...restProps}
onClick={handleClick}
hovered={hovered}
@ -82,6 +82,6 @@ export function DropdownMenuSelectableItem({
<StyledRightIcon>
{selected && <IconCheck size={theme.icon.size.md} />}
</StyledRightIcon>
</DropdownMenuSelectableItemContainer>
</StyledDropdownMenuSelectableItemContainer>
);
}

1
front/src/modules/ui/dropdown/components/DropdownMenuSeparator.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div`

1
front/src/modules/ui/dropdown/components/DropdownMenuSubheader.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenuSubheader = styled.div`

16
front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -43,19 +43,19 @@ const FakeContentBelow = () => (
const avatarUrl =
'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
const FakeMenuContent = styled.div`
const StyledFakeMenuContent = styled.div`
height: 400px;
width: 100%;
`;
const FakeBelowContainer = styled.div`
const StyledFakeBelowContainer = styled.div`
height: 600px;
position: relative;
width: 300px;
`;
const MenuAbsolutePositionWrapper = styled.div`
const StyledMenuAbsolutePositionWrapper = styled.div`
height: fit-content;
position: absolute;
@ -157,7 +157,7 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
export const Empty: Story = {
render: (args) => (
<DropdownMenu {...args}>
<FakeMenuContent />
<StyledFakeMenuContent />
</DropdownMenu>
),
};
@ -166,12 +166,12 @@ export const WithContentBelow: Story = {
...Empty,
decorators: [
(Story) => (
<FakeBelowContainer>
<StyledFakeBelowContainer>
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<StyledMenuAbsolutePositionWrapper>
<Story />
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>
</StyledMenuAbsolutePositionWrapper>
</StyledFakeBelowContainer>
),
],
};