admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Unify Label Styles Across App #6389 (#10728)

Browse Source 
Chores #6389 

## Description
This PR addresses inconsistencies in the codebase where elements that
visually function as labels were implemented with custom-styled
components rather than the standardized Label component from the UI
library.

## Changes
I've replaced several custom-styled text elements with the standardized
Label component from twenty-ui to improve consistency and
maintainability across the application. These modifications maintain the
same visual appearance and functionality while standardizing the
implementation.

## Components Modified:
InputLabel: Converted from a styled label to use the Label component
InputHint: Replaced styled div with a styled Label component
TableSection: Introduced a StyledLabel using the Label component for
section headings
StyledDropdownMenuSubheader: Converted from a styled div to a styled
Label component
NavigationDrawerSectionTitle: Replaced internal text element with the
Label component
SettingsCard: Updated description element to use the Label component
SettingsListItemCardContent: Changed description span to use the Label
component
RecordDetailSectionHeader: Added a StyledLabelLink for link text using
the Label component
TaskList: Modified the task count display to use the Label component
CommandGroup: Updated group headings to use the Label component
WorkerMetricsGraph: Replaced no-data message with a Label-based
component
ViewPickerSelectContainer: Changed from a styled div to a styled Label
component

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Aaryan Bajaj
2025-03-20 15:02:34 +05:30
committed by GitHub
parent 3b3ed1a907
commit e666506ea3
6 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx
View File

@ -1,7 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ReactNode, useState } from 'react';
import { IconChevronDown, IconChevronUp } from 'twenty-ui';
import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui';
import { TableBody } from './TableBody';
type TableSectionProps = {
@ -14,16 +14,12 @@ const StyledSectionHeader = styled.div<{ isExpanded: boolean }>`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.light};
cursor: pointer;
display: flex;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: ${({ theme }) => theme.spacing(6)};
justify-content: space-between;
padding: 0 ${({ theme }) => theme.spacing(2)};
text-align: left;
text-transform: uppercase;
`;
const StyledSection = styled.div<{ isExpanded: boolean }>`
@ -44,8 +40,8 @@ export const TableSection = ({
isInitiallyExpanded = true,
title,
}: TableSectionProps) => {
const theme = useTheme();
const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
const theme = useTheme();
const handleToggleSection = () =>
setIsExpanded((previousIsExpanded) => !previousIsExpanded);
@ -56,11 +52,17 @@ export const TableSection = ({
isExpanded={isExpanded}
onClick={handleToggleSection}
>
{title}
<Label>{title}</Label>
{isExpanded ? (
<IconChevronUp size={theme.icon.size.sm} />
<IconChevronUp
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
) : (
<IconChevronDown size={theme.icon.size.sm} />
<IconChevronDown
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
)}
</StyledSectionHeader>
<StyledSection isExpanded={isExpanded}>