Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Integrate Widget Book with a sample widget supporting dark and light themes #3

Open
PouriaMoradi021 opened this issue Jan 3, 2025 · 1 comment · May be fixed by #5
Open

Integrate Widget Book with a sample widget supporting dark and light themes #3

PouriaMoradi021 opened this issue Jan 3, 2025 · 1 comment · May be fixed by #5
Assignees
@phoenixit99 @PouriaMoradi021
Labels
feature Add/Create new feature

Comments

@PouriaMoradi021
Copy link

PouriaMoradi021 commented Jan 3, 2025 •
edited by esmaeil-ahmadipour
Loading

Overview

Feature Description

We aim to integrate Widget Book into the project with a simple sample widget that demonstrates the theme handling. The widget should be implemented with a basic design that supports both dark and light themes. The user should be able to test the widget's appearance under both theme modes.

Click to expand the scenario

Scenario: Testing Widget with Dark and Light Themes

Imagine a developer wants to verify the appearance of a widget across different themes. The developer opens Widget Book and navigates to the simple sample widget. They can switch between dark and light themes and observe the widget's behavior. The widget should adapt to both themes seamlessly.

Once the developer confirms that the widget looks appropriate in both modes, they can proceed with additional testing or modifications. Any issues with theme adaptation should be clearly visible for further refinement.

Design Reference

  • Figma Design: Link to Figma Design

    (Include the relevant Figma design(s) that outline the desired user interface and interactions.)

  • Responsive Design:
    Ensure the widget adapts smoothly to both light and dark themes, and all elements are visible and functional across various screen sizes and orientations.
@PouriaMoradi021 PouriaMoradi021 added the feature Add/Create new feature label Jan 3, 2025
@PouriaMoradi021 PouriaMoradi021 self-assigned this Jan 3, 2025
@esmaeil-ahmadipour esmaeil-ahmadipour changed the title Add a sample code of widget book Integrate Widget Book with a sample widget supporting dark and light themes Jan 3, 2025
@esmaeil-ahmadipour esmaeil-ahmadipour mentioned this issue Jan 3, 2025
Open
@esmaeil-ahmadipour esmaeil-ahmadipour mentioned this issue Jan 3, 2025
Open
PouriaMoradi021 pushed a commit that referenced this issue Jan 3, 2025
feat: integrate Widget Book with a sample button code #3
34e7f55 
- add `ButtonIconState` enum
- add `customButtonWidgetUseCase` for `custom button` widget
- add `CustomButtonWidget`
- update `main` & add widget book required setup
- add `main.directories`
- comment `widget_test`
@PouriaMoradi021 PouriaMoradi021 linked a pull request Jan 3, 2025 that will close this issue
feat: integrate Widget Book with a sample button code #3 #5
Open
@PouriaMoradi021
Copy link
Author

PouriaMoradi021 commented Jan 3, 2025 •
edited
Loading

📊 Current Status:

Progress: 100%

  • ✔️ Completed Tasks:

    • Task 1: Integrate the Widget Book package into the project.
    • Task 2: Create a sample widget that demonstrates basic theme handling.
    • Task 3: Implement the widget with support for both light and dark themes.
    • Task 4: Add functionality to toggle between light and dark themes within Widget Book.
    • Task 5: Test the widget's appearance in both themes for seamless adaptation.
    • Task 6: Ensure the widget is responsive and functional across various screen sizes and orientations.
    • Task 7: Compare the widget with the provided Figma design and adjust for consistency.

🛤️ Next Steps:

  • Estimated time for completion: -

❓ Questions/Requests:

  • Not identified

@esmaeil-ahmadipour

PouriaMoradi021 pushed a commit that referenced this issue Jan 3, 2025
feat: add theme data details to pactus gui widget book #3
846f4f5 
- add/create `SurfacePallet`
- add/crete `OnSurfacePallet`
- add/create `AppThemeData`
- add/create `AppTheme`
- add `fluent_ui` package to `pubspec.yaml`
- add `ThemeAddon` to `WidgetBookApp` according to new themes
- update `main.dart` file
- add/create `InterTextStyles` according text styles that defined in Figma design
- update `CustomButtonWidget`
- add/create `AppScaffold` to show light & dark mode in output result
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@phoenixit99 phoenixit99

@PouriaMoradi021 PouriaMoradi021

Labels
feature Add/Create new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: integrate Widget Book with a sample button code #3 pactus-project/pactus-gui-widgetbook
2 participants
@phoenixit99 @PouriaMoradi021