From 22db1bb97ddb7997e4396950d02b865d200a5ba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Tue, 7 Oct 2025 15:55:52 +0200 Subject: [PATCH] Updates on chart selection (#14943) - Updated the disabled design - Disabled the 3 charts which won't be released this sprint - Updated the icon of the number chart - Added labels Before: CleanShot 2025-10-07 at 15 40 31@2x After: CleanShot 2025-10-07 at 15 46 21@2x --- .../components/ChartTypeSelectionSection.tsx | 39 ++++++++++++------- .../CommandMenuPageLayoutGraphTypeSelect.tsx | 3 +- .../constants/GraphTypeInformation.ts | 14 +++---- .../navigation/menu/components/MenuPicker.tsx | 16 +++----- 4 files changed, 41 insertions(+), 31 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx index 3a2b02a2ac..6a37494f56 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx @@ -7,9 +7,15 @@ import { MenuPicker } from 'twenty-ui/navigation'; const graphTypeOptions = [ GraphType.BAR, + GraphType.NUMBER, + GraphType.PIE, + GraphType.LINE, + GraphType.GAUGE, +]; + +const disabledGraphTypeOptions = [ GraphType.PIE, GraphType.LINE, - GraphType.NUMBER, GraphType.GAUGE, ]; @@ -30,18 +36,25 @@ export const ChartTypeSelectionSection = ({ }: ChartTypeSelectionSectionProps) => { return ( - {graphTypeOptions.map((graphType) => ( - { - setCurrentGraphType(graphType); - }} - label={t(GRAPH_TYPE_INFORMATION[graphType].label)} - showLabel={false} - /> - ))} + {graphTypeOptions.map((graphType) => { + const isDisabled = disabledGraphTypeOptions.includes(graphType); + + return ( + { + setCurrentGraphType(graphType); + }} + label={ + isDisabled ? t`Soon` : t(GRAPH_TYPE_INFORMATION[graphType].label) + } + showLabel + disabled={isDisabled} + /> + ); + })} ); }; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx index 812df46083..0237bff1b2 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx @@ -36,6 +36,7 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => { } const currentGraphType = widgetInEditMode.configuration.graphType; + const graphTypeLabel = t(GRAPH_TYPE_INFORMATION[currentGraphType].label); return ( <> @@ -43,7 +44,7 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => { Icon={GRAPH_TYPE_INFORMATION[currentGraphType].icon} iconColor={theme.font.color.tertiary} initialTitle={t`Chart`} - headerType={t(GRAPH_TYPE_INFORMATION[currentGraphType].label)} + headerType={t`${graphTypeLabel} Chart`} onTitleChange={() => {}} /> diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts index 025bd382c5..180d96f2ce 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts @@ -7,12 +7,12 @@ import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ import { type MessageDescriptor } from '@lingui/core'; import { msg } from '@lingui/core/macro'; import { + Icon123, IconChartBar, IconChartLine, IconChartPie, type IconComponent, IconGauge, - IconNumber, } from 'twenty-ui/display'; import { GraphType } from '~/generated-metadata/graphql'; @@ -25,27 +25,27 @@ export const GRAPH_TYPE_INFORMATION: Record< } > = { [GraphType.BAR]: { - label: msg`Bar Chart`, + label: msg`Bar`, icon: IconChartBar, settings: BAR_CHART_SETTINGS, }, [GraphType.PIE]: { - label: msg`Pie Chart`, + label: msg`Pie`, icon: IconChartPie, settings: PIE_CHART_SETTINGS, }, [GraphType.LINE]: { - label: msg`Line Chart`, + label: msg`Line`, icon: IconChartLine, settings: LINE_CHART_SETTINGS, }, [GraphType.NUMBER]: { - label: msg`Number Chart`, - icon: IconNumber, + label: msg`Number`, + icon: Icon123, settings: NUMBER_CHART_SETTINGS, }, [GraphType.GAUGE]: { - label: msg`Gauge Chart`, + label: msg`Gauge`, icon: IconGauge, settings: GAUGE_CHART_SETTINGS, }, diff --git a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx index 162b5ea9ab..28b72c684f 100644 --- a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx +++ b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx @@ -2,7 +2,7 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { type IconComponent } from '@ui/display'; -const StyledMenuItemPicker = styled.button<{ +const StyledMenuPicker = styled.button<{ selected: boolean; disabled: boolean; }>` @@ -28,14 +28,10 @@ const StyledMenuItemPicker = styled.button<{ ${({ theme, selected, disabled }) => { if (disabled) { return css` - background: inherit; + background: ${theme.background.secondary}; border-color: ${theme.border.color.medium}; - color: ${theme.font.color.tertiary}; + color: ${theme.font.color.extraLight}; cursor: default; - - &:hover { - background: inherit; - } `; } @@ -89,7 +85,7 @@ const StyledLabel = styled.div<{ ${({ theme, selected, disabled }) => { if (disabled) { return css` - color: ${theme.font.color.tertiary}; + color: ${theme.font.color.extraLight}; `; } @@ -129,7 +125,7 @@ export const MenuPicker = ({ const theme = useTheme(); return ( - )} - + ); };