Add ‌Button Components with different state and modes

[esmaeil-ahmadipour]

Overview

Feature Description

We are implementing a new button component in the components repository. This button will support multi-theme and multi-language capabilities, ensuring seamless adaptability across different themes and languages in the Pactus GUI project. Additionally, the button will handle various API states such as Loading, Loaded, Error, and Default.

Click to expand the scenario

Scenario: Button Interaction with API States

Imagine a user interacts with a button that triggers an API request. Initially, the button displays its default state. When the user clicks it, the button switches to a loading state.

• If the API request is successful, the button transitions to the loaded state, optionally showing a success indicator or message.
• If the request fails, the button displays an error state to notify the user of the failure.
• The button will also adapt visually based on the current theme and language settings applied in the application.

---

Design Reference

Attachments

• Design Reference: Figma Design Link

• Example Image:
  

• Responsive Design:
  Ensure the button is fully responsive and adapts to different screen sizes and orientations using Flutter's responsive layout techniques. The button should scale and adjust to various screen sizes smoothly.

---

API Integration

• Data Requirements:
  The button will need to handle responses from the API, including:
  • Success Response: Data or a confirmation message.
  • Error Response: Error message or status code.
  • Loading State: Indicate the request is in progress (Button should be disabled during this state to prevent multiple taps).
  • Initial State: Normal state, ready for user interaction.

---

Implementation Steps

1. Create a Flutter button component in the components repository.
2. Add support for multi-theme functionality (button appearance should adapt to different themes).
3. Implement multi-language support using localization (intl or l10n) to display messages in various languages.
4. Implement state management for API states (Loading, Loaded, Error, Initial).
5. Ensure the button is styled and responsive according to the Figma design references.
6. Add unit and widget tests to ensure the button functions correctly across all states and configurations.
7. Ensure the button integrates seamlessly with the rest of the GUI components, especially in multi-theme and multi-language contexts.

---

[PouriaMoradi021]

📊 Progress Update on Issue: Button Component Implementation

Progress: 50%

---

✔️ Completed Tasks:

• Task 1: Create the Flutter button component in the components repository.
• Task 2: Add support for multi-theme functionality to adapt the button’s appearance to different themes.
• Task 3: Implement multi-language support using localization libraries (e.g., intl or l10n).
• Task 4: Implement state management for handling API states (Loading, Loaded, Error, and Default).
• Task 5: Ensure the button adheres to the Figma design references for styling and responsiveness.
• Task 6: Develop responsive design capabilities to make the button adaptable to different screen sizes and orientations.
• Task 7: Integrate API handling:
  • Subtask 7.1: Handle success responses (data/confirmation messages).
  • Subtask 7.2: Handle error responses (error messages/status codes).
  • Subtask 7.3: Indicate the loading state (disable the button to prevent multiple taps).
• Task 8: Add unit and widget tests to validate the button’s functionality in all configurations.
• Task 9: Ensure seamless integration with the Pactus GUI components, particularly for multi-theme and multi-language contexts.

---

🚧 Challenges/Blockers:

• The issue in question cannot be implemented or continued due to the lack of UI-related issues mentioned in the comment below, and will be put on hold until these issues are resolved.

---

🛤️ Next Steps:

• Start implementation of the Flutter button component and progress through the tasks.

---

❓ Questions/Requests:

• No open questions at the moment.

---

@esmaeil-ahmadipour

[PouriaMoradi021]

📑 Button Variants

After reviewing the Figma design, I have extracted all the button variants that are ready to be implemented. Below are the details of each button variant. Click on each button type to view its corresponding image.

---

🔹 Variant 1: AdaptivePrimaryButton

Description:
This is the primary button designed for key actions within the application. It features a solid background with high contrast, ensuring maximum visibility and emphasis. This button is typically used for actions that require user attention or confirmation.

---

🔹 Variant 2: AdaptiveSecondaryButton

Description:
This is the secondary button, used for less prominent actions or as an alternative to the primary button. It features a bordered outline with minimal background, making it less visually dominant while still clear and accessible.

---

🔹 Variant 3: AdaptivePrimaryRoundedButton

Description:
This variant is a rounded version of the primary button, designed for situations where a softer, more approachable design is preferred. It retains the solid background and high contrast of the primary button, while the rounded corners add a modern and friendly touch.

---

🔹 Variant 4: AdaptiveSecondaryRoundedButton

Description:
A rounded version of the secondary button, designed for less critical actions. This button combines the secondary button's minimalistic outline style with rounded corners, making it suitable for visually subtle yet stylish actions.

---

🔹 Variant 5: AdaptiveIconButton

Description:
A compact button designed for actions that involve only an icon, such as closing dialogs, refreshing content, or toggling settings. This button ensures functionality and accessibility while maintaining a clean and simple design.

---

🔹 Variant 6: AdaptiveIconTextButton

Description:
A button that combines an icon with text to provide clear and detailed action cues. It is suitable for scenarios where both visual and textual representation of an action are needed for better usability and clarity.

---

🚧 Issues/Challenges

1. Missing States for Buttons

   • Many essential states for the buttons have not been designed:
     • The Disabled state is only designed for the FilledButton variant, leaving other button types without a proper disabled state.
     • States like Loading and Error have not been designed for any of the button variants.

2. Hover and Pressed States Not Designed

   • The buttons lack designs for Hover and InPressed states, which are critical for providing visual feedback during user interactions.

3. Inconsistent Font and Style Across Buttons

   • The fonts and styles used in the buttons are not consistent, which makes it impossible to implement them as a single reusable component.
   • As a result, each button needs to be implemented as a separate component.
   • Suggestion: It is recommended to unify the text styles across all buttons (except for icon buttons). This change will optimize coding efficiency and improve performance.

---

🔄 Feedback Request

@esmaeil-ahmadipour and @phoenixit99
Please review this comment and share your thoughts. If any updates or adjustments are needed, I will make the necessary changes to ensure the content aligns with the project requirements.

@Ja7ad
Please share your thoughts on the suggestion to unify text styles for buttons to streamline implementation and improve performance.

[esmaeil-ahmadipour]

Thank you for your review! Please check the Fluent UI Flutter documentation for these issues and share your insights. Your feedback is important for identifying any gaps that may have been overlooked.

@PouriaMoradi021

[PouriaMoradi021]

The necessary review has been completed on the Fluent UI documentation concerning the button component, and various states have been extracted. However, there are still unresolved issues in the following cases, which require a decision from the product team or designer:

1- The design does not currently specify the button states for loading, error, and initial.
2- The button's color is not defined for hover, press, and disabled states.

To prevent any delays in the development process, these items were temporarily addressed by using a SizedBox for different button states. For the hover and press states, the button color was simply made darker than its original version.

Additionally, the accent colors that can be selected in the Figma design within the application settings were added to the project. However, dark mode was not accounted for in the provided color values. As a result, I manually defined darker shades for these colors in the dark mode.

@esmaeil-ahmadipour @Ja7ad