diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx index 9c79a5a58..f5ada9b65 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { IconChevronRight } from '@/ui/display/icon'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; -import { SoonPill } from '@/ui/display/pill/components/SoonPill'; +import { Pill } from '@/ui/display/pill/components/Pill'; import { Card } from '@/ui/layout/card/components/Card'; import { CardContent } from '@/ui/layout/card/components/CardContent'; @@ -81,7 +81,7 @@ export const SettingsNavigationCard = ({ {title} - {soon && } + {soon && } diff --git a/packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx b/packages/twenty-front/src/modules/ui/display/pill/components/Pill.tsx similarity index 78% rename from packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx rename to packages/twenty-front/src/modules/ui/display/pill/components/Pill.tsx index 8e1393436..414b11db7 100644 --- a/packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx +++ b/packages/twenty-front/src/modules/ui/display/pill/components/Pill.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; -type SoonPillProps = { +type PillProps = { className?: string; + label?: string; }; -const StyledSoonPill = styled.span` +const StyledPill = styled.span` align-items: center; background: ${({ theme }) => theme.background.transparent.light}; border-radius: ${({ theme }) => theme.border.radius.pill}; @@ -20,6 +21,6 @@ const StyledSoonPill = styled.span` padding: ${({ theme }) => `0 ${theme.spacing(2)}`}; `; -export const SoonPill = ({ className }: SoonPillProps) => ( - Soon +export const Pill = ({ className, label }: PillProps) => ( + {label} ); diff --git a/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx b/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/Pill.stories.tsx similarity index 56% rename from packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx rename to packages/twenty-front/src/modules/ui/display/pill/components/__stories__/Pill.stories.tsx index 0a302f97d..5ac65f7a0 100644 --- a/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx +++ b/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/Pill.stories.tsx @@ -2,15 +2,15 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { SoonPill } from '../SoonPill'; +import { Pill } from '../Pill'; -const meta: Meta = { - title: 'UI/Display/Pill/SoonPill', - component: SoonPill, +const meta: Meta = { + title: 'UI/Display/Pill/Pill', + component: Pill, decorators: [ComponentDecorator], }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx index 0248812b1..4c3a3fc47 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx @@ -3,7 +3,7 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; -import { SoonPill } from '@/ui/display/pill/components/SoonPill'; +import { Pill } from '@/ui/display/pill/components/Pill'; export type ButtonSize = 'medium' | 'small'; export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right'; @@ -251,7 +251,7 @@ const StyledButton = styled.button< } `; -const StyledSoonPill = styled(SoonPill)` +const StyledSoonPill = styled(Pill)` margin-left: auto; `; @@ -285,7 +285,7 @@ export const Button = ({ > {Icon && } {title} - {soon && } + {soon && } ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index 7bfce7eb9..9fb0362fa 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -104,6 +104,7 @@ export const ShowPageRightContainer = ({ Icon: IconMail, hide: !shouldDisplayEmailsTab, disabled: !isMessagingEnabled, + hasBetaPill: true, }, ]; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index 7866503be..e83aa260a 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { Pill } from '@/ui/display/pill/components/Pill'; type TabProps = { id: string; @@ -12,6 +13,7 @@ type TabProps = { className?: string; onClick?: () => void; disabled?: boolean; + hasBetaPill?: boolean; }; const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>` @@ -59,6 +61,7 @@ export const Tab = ({ onClick, className, disabled, + hasBetaPill, }: TabProps) => { const theme = useTheme(); return ( @@ -72,6 +75,7 @@ export const Tab = ({ {Icon && } {title} + {hasBetaPill && } ); diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index 157fb7aa2..8554be46b 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -14,6 +14,7 @@ type SingleTabProps = { id: string; hide?: boolean; disabled?: boolean; + hasBetaPill?: boolean; }; type TabListProps = { @@ -59,6 +60,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => { setActiveTabId(tab.id); }} disabled={tab.disabled} + hasBetaPill={tab.hasBetaPill} /> ))} diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx index 0886dbd65..af01e5b65 100644 --- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx +++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { IconArrowUpRight, IconBolt } from '@/ui/display/icon'; -import { SoonPill } from '@/ui/display/pill/components/SoonPill'; +import { Pill } from '@/ui/display/pill/components/Pill'; import { Button } from '@/ui/input/button/components/Button'; import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration'; @@ -36,7 +36,7 @@ const StyledIntegrationLogo = styled.div` color: ${({ theme }) => theme.border.color.strong}; `; -const StyledSoonPill = styled(SoonPill)` +const StyledSoonPill = styled(Pill)` padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}; `; @@ -69,7 +69,7 @@ export const SettingsIntegrationComponent = ({ {integration.text} {integration.type === 'Soon' ? ( - + ) : (