Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a reusable Label component #9833

Merged
merged 3 commits into from
Jan 24, 2025
Merged

Create a reusable Label component #9833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6ec81c
feat: create a reusable label component and use in it the workflows
Devessier Jan 24, 2025
180f444
refactor: use satisfies instead of as
Devessier Jan 24, 2025
a932390
refactor: change how component is exported
Devessier Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions ...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import styled from '@emotion/styled';
import { Handle, Position } from '@xyflow/react';
import React from 'react';
import { capitalize } from 'twenty-shared';
import { isDefined, OverflowingTextWithTooltip } from 'twenty-ui';
import { isDefined, Label, OverflowingTextWithTooltip } from 'twenty-ui';

type Variant = 'placeholder';

Expand All @@ -19,15 +19,11 @@ const StyledStepNodeContainer = styled.div`
padding-block: ${({ theme }) => theme.spacing(3)};
`;

const StyledStepNodeType = styled.div`
const StyledStepNodeType = styled(Label)`
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm}
${({ theme }) => theme.border.radius.sm} 0 0;

color: ${({ theme }) => theme.font.color.light};
font-size: 9px;
font-weight: ${({ theme }) => theme.font.weight.semiBold};

margin-left: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
align-self: flex-start;
Expand Down Expand Up @@ -119,7 +115,9 @@ export const WorkflowDiagramBaseStepNode = ({
<StyledTargetHandle type="target" position={Position.Top} />
) : null}

<StyledStepNodeType>{capitalize(nodeType)}</StyledStepNodeType>
<StyledStepNodeType variant="small">
{capitalize(nodeType)}
</StyledStepNodeType>

<StyledStepNodeInnerContainer variant={variant}>
<StyledStepNodeLabel variant={variant}>
Expand Down
1 change: 1 addition & 0 deletions packages/twenty-ui/src/display/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,5 @@ export * from './tooltip/OverflowingTextWithTooltip';
export * from './typography/components/H1Title';
export * from './typography/components/H2Title';
export * from './typography/components/H3Title';
export * from './typography/components/Label';
export * from './typography/components/StyledText';
18 changes: 18 additions & 0 deletions packages/twenty-ui/src/display/typography/components/Label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import styled from '@emotion/styled';

export type LabelVariant = 'default' | 'small';

const StyledLabel = styled.div<{ variant?: LabelVariant }>`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider using semantic HTML by extending 'label' or 'span' instead of 'div' for better accessibility

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: isn't greptile right about this ? Or I've also misunderstood emotion styled here too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The label is not strictly meant to be used as part of a form. The benefit of exporting the component as-is is that it's possible to change the rendered element with the as prop.

color: ${({ theme }) => theme.font.color.light};
font-size: ${({ variant = 'default' }) => {
switch (variant) {
case 'default':
return '11px';
case 'small':
return '9px';
}
}};
Comment on lines +7 to +14
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Switch statement missing default case. Could cause undefined font-size if invalid variant is passed.

font-weight: ${({ theme }) => theme.font.weight.semiBold};
`;

export { StyledLabel as Label };
42 changes: 42 additions & 0 deletions packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Meta, StoryObj } from '@storybook/react';

import { CatalogDecorator } from '@ui/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
import { CatalogStory } from '@ui/testing/types/CatalogStory';

import { Label, LabelVariant } from '../Label';

const meta: Meta<typeof Label> = {
title: 'UI/Display/Typography/Label',
component: Label,
decorators: [ComponentDecorator],
};

export default meta;

type Story = StoryObj<typeof Label>;

export const Default: Story = {
decorators: [ComponentDecorator],
args: {
children: 'Label',
},
};
Comment on lines +19 to +24
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: ComponentDecorator is redundant here since it's already defined in the meta object's decorators


export const Catalog: CatalogStory<Story, typeof Label> = {
decorators: [CatalogDecorator],
args: {
children: 'Label',
},
parameters: {
catalog: {
dimensions: [
{
name: 'Variant',
values: ['default', 'small'] satisfies LabelVariant[],
props: (variant: LabelVariant) => ({ variant }),
Copy link
Contributor

@prastoin prastoin Jan 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remark: Unless I'm mistaken force cast is not mandatory here, might wanna use satisfies instead if we wanna keep it tied to LabelVariant ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this. My as LabelVariant[] was pure bullshit.

},
],
},
},
};
Loading