-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add ADR 0002 about wrapping the material components in an atomic desi…
…gn system
- Loading branch information
Showing
1 changed file
with
36 additions
and
0 deletions.
There are no files selected for viewing
36 changes: 36 additions & 0 deletions
36
docs/architecture/adr/0002-ui-wrap-material-components-in-atomic-design-system.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# 0002 - UI - Wrap Material Components in Atomic Design System | ||
|
||
## Status | ||
|
||
- **Proposed** | ||
|
||
## Context | ||
|
||
As we continue developing our Jetpack Compose application, we find a need to increase the consistency, reusability, | ||
and maintainability of our UI components. Currently, we are using Material components directly throughout our | ||
application. This leads to a lack of uniformity and increases the complexity of changes as the same modifications | ||
must be implemented multiple times across different screens. | ||
|
||
## Decision | ||
|
||
We are proposing to create a new atomic design system where Material components are wrapped into our own 'atomic' | ||
components. For instance, we would have components such as `AtomicButton`, `AtomicText`, etc. These atomic components | ||
will encapsulate Material components with predefined styles and behaviors. | ||
|
||
This approach will be taken further to develop more complex 'molecule' and 'organism' components by combining these | ||
atomic components. We will also define 'templates' as layout structures and 'pages' as specific instances of these | ||
templates to build a complete user interface. | ||
|
||
## Consequences | ||
|
||
- **Positive Consequences** | ||
|
||
- Increased reusability of components across the application, reducing code duplication. | ||
- More consistent UI across the entire application. | ||
- Improved maintainability, as changes to a component only need to be made in one place. | ||
|
||
- **Negative Consequences** | ||
|
||
- Initial effort and time investment needed to implement the atomic design system. | ||
- Developers need to adapt to the new system and learn how to use it effectively. | ||
- Potential for over-complication if simple components are excessively broken down into atomic parts. |