Composants UI Standardisés - BTPXpress

ActionButton - Boutons d'Actions Standardisés

Vue d'ensemble

Les composants ActionButton fournissent une approche cohérente pour tous les boutons d'actions dans l'application BTPXpress. Ils utilisent le style p-button-text pour un rendu subtil et professionnel, similaire au template Atlantis React.

Utilisation de base

import { ActionButton, ActionButtonGroup } from '../../components/ui/ActionButton';

// Bouton personnalisé
<ActionButton 
    icon="pi pi-eye"
    tooltip="Voir détails"
    onClick={() => handleView()}
    color="blue"
/>

// Groupe de boutons
<ActionButtonGroup>
    <ViewButton tooltip="Voir" onClick={() => handleView()} />
    <EditButton tooltip="Modifier" onClick={() => handleEdit()} />
    <DeleteButton tooltip="Supprimer" onClick={() => handleDelete()} />
</ActionButtonGroup>

Boutons prédéfinis disponibles

ViewButton: pi pi-eye - Couleur par défaut (gris)
EditButton: pi pi-pencil - Orange
DeleteButton: pi pi-trash - Rouge
StartButton: pi pi-play - Vert
CompleteButton: pi pi-check - Vert
ProgressButton: pi pi-percentage - Bleu
PauseButton: pi pi-pause - Orange
ResumeButton: pi pi-play - Teal
DownloadButton: pi pi-download - Bleu
PrintButton: pi pi-print - Violet

Props ActionButton

Prop	Type	Default	Description
icon	string	-	Icône PrimeIcons (ex: "pi pi-eye")
tooltip	string	-	Texte du tooltip
onClick	function	-	Fonction appelée au clic
color	string	'default'	Couleur: 'default', 'green', 'blue', 'orange', 'red', 'purple', 'teal'
disabled	boolean	false	Désactiver le bouton
size	string	'small'	Taille: 'small', 'normal', 'large'

Props ActionButtonGroup

Prop	Type	Default	Description
children	ReactNode	-	Boutons enfants
align	string	'center'	Alignement: 'left', 'center', 'right'
gap	string	'1'	Espacement: '1', '2', '3'

Exemples d'utilisation dans les tableaux

DataTable avec actions contextuelles

const actionBodyTemplate = (rowData: any) => {
    return (
        <ActionButtonGroup>
            <ViewButton 
                tooltip="Voir détails"
                onClick={() => viewDetails(rowData)}
            />
            
            {rowData.status === 'DRAFT' && (
                <EditButton 
                    tooltip="Modifier"
                    onClick={() => editItem(rowData)}
                />
            )}
            
            {rowData.canDelete && (
                <DeleteButton 
                    tooltip="Supprimer"
                    onClick={() => confirmDelete(rowData)}
                />
            )}
        </ActionButtonGroup>
    );
};

Actions en en-tête de page

<ActionButtonGroup align="right" gap="2">
    <DownloadButton 
        tooltip="Exporter PDF"
        onClick={handleExportPDF}
    />
    <PrintButton 
        tooltip="Imprimer"
        onClick={handlePrint}
    />
</ActionButtonGroup>

Standards visuels

Style: Tous les boutons utilisent p-button-text pour un rendu subtil
Forme: Boutons ronds (p-button-rounded)
Taille: Par défaut petite (p-button-sm)
Tooltips: Toujours positionnés en haut
Couleurs: Système cohérent basé sur l'action
- Actions neutres: Gris par défaut
- Actions positives: Vert (démarrer, valider, compléter)
- Actions d'information: Bleu (voir, télécharger)
- Actions de modification: Orange (éditer, pauser)
- Actions destructives: Rouge (supprimer)
- Actions spéciales: Violet (imprimer), Teal (reprendre)

Intégration dans les pages existantes

Pour appliquer ces standards dans vos pages :

Importez les composants nécessaires

import { ActionButtonGroup, ViewButton, EditButton, DeleteButton } from '../../components/ui/ActionButton';

Remplacez les boutons existants

// Ancien style
<Button icon="pi pi-eye" className="p-button-text" onClick={handleView} />
<Button icon="pi pi-pencil" className="p-button-warning" onClick={handleEdit} />

// Nouveau style standardisé
<ActionButtonGroup>
    <ViewButton tooltip="Voir" onClick={handleView} />
    <EditButton tooltip="Modifier" onClick={handleEdit} />
</ActionButtonGroup>

Adaptez selon le contexte

Utilisez les boutons prédéfinis quand possible
Créez des boutons personnalisés avec ActionButton si nécessaire
Groupez les actions logiquement avec ActionButtonGroup

Maintenance et évolution

Cohérence: Tous les boutons d'actions de l'application doivent utiliser ces composants
Extensibilité: Ajoutez de nouveaux boutons prédéfinis selon les besoins
Accessibilité: Les tooltips et l'état disabled sont automatiquement gérés
Responsive: Les boutons s'adaptent automatiquement aux différentes tailles d'écran

5.0 KiB Raw Blame History