From e6ec81c6ec9b28937bd94461b1101be8e6b825ef Mon Sep 17 00:00:00 2001 From: Devessier Date: Fri, 24 Jan 2025 15:13:37 +0100 Subject: [PATCH 1/3] feat: create a reusable label component and use in it the workflows --- .../WorkflowDiagramBaseStepNode.tsx | 12 +++--- packages/twenty-ui/src/display/index.ts | 1 + .../display/typography/components/Label.tsx | 18 ++++++++ .../components/__stories__/Label.stories.tsx | 42 +++++++++++++++++++ 4 files changed, 66 insertions(+), 7 deletions(-) create mode 100644 packages/twenty-ui/src/display/typography/components/Label.tsx create mode 100644 packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx index 51bb310b6c3f..be2e2b956ccd 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx @@ -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'; @@ -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; @@ -119,7 +115,9 @@ export const WorkflowDiagramBaseStepNode = ({ ) : null} - {capitalize(nodeType)} + + {capitalize(nodeType)} + diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index 85aea3e8b900..93a2512b6866 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -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'; diff --git a/packages/twenty-ui/src/display/typography/components/Label.tsx b/packages/twenty-ui/src/display/typography/components/Label.tsx new file mode 100644 index 000000000000..75eeb9946929 --- /dev/null +++ b/packages/twenty-ui/src/display/typography/components/Label.tsx @@ -0,0 +1,18 @@ +import styled from '@emotion/styled'; + +export type LabelVariant = 'default' | 'small'; + +const StyledLabel = styled.div<{ variant?: LabelVariant }>` + color: ${({ theme }) => theme.font.color.light}; + font-size: ${({ variant = 'default' }) => { + switch (variant) { + case 'default': + return '11px'; + case 'small': + return '9px'; + } + }}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; +`; + +export const Label = StyledLabel; diff --git a/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx b/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx new file mode 100644 index 000000000000..faed80ae1683 --- /dev/null +++ b/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx @@ -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 = { + title: 'UI/Display/Typography/Label', + component: Label, + decorators: [ComponentDecorator], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + decorators: [ComponentDecorator], + args: { + children: 'Label', + }, +}; + +export const Catalog: CatalogStory = { + decorators: [CatalogDecorator], + args: { + children: 'Label', + }, + parameters: { + catalog: { + dimensions: [ + { + name: 'Variant', + values: ['default', 'small'] as LabelVariant[], + props: (variant: LabelVariant) => ({ variant }), + }, + ], + }, + }, +}; From 180f444e73e5f62fce32686dd96ced83b584a3a6 Mon Sep 17 00:00:00 2001 From: Devessier Date: Fri, 24 Jan 2025 18:42:26 +0100 Subject: [PATCH 2/3] refactor: use satisfies instead of as --- .../display/typography/components/__stories__/Label.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx b/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx index faed80ae1683..3ea510972951 100644 --- a/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx +++ b/packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx @@ -33,7 +33,7 @@ export const Catalog: CatalogStory = { dimensions: [ { name: 'Variant', - values: ['default', 'small'] as LabelVariant[], + values: ['default', 'small'] satisfies LabelVariant[], props: (variant: LabelVariant) => ({ variant }), }, ], From a9323904943e9f4b17198a5a42a501a6d168c57c Mon Sep 17 00:00:00 2001 From: Devessier Date: Fri, 24 Jan 2025 18:44:04 +0100 Subject: [PATCH 3/3] refactor: change how component is exported --- packages/twenty-ui/src/display/typography/components/Label.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-ui/src/display/typography/components/Label.tsx b/packages/twenty-ui/src/display/typography/components/Label.tsx index 75eeb9946929..61a4e66d8fb0 100644 --- a/packages/twenty-ui/src/display/typography/components/Label.tsx +++ b/packages/twenty-ui/src/display/typography/components/Label.tsx @@ -15,4 +15,4 @@ const StyledLabel = styled.div<{ variant?: LabelVariant }>` font-weight: ${({ theme }) => theme.font.weight.semiBold}; `; -export const Label = StyledLabel; +export { StyledLabel as Label };