UI - Wrap Material Components in Atomic Design System

• Pull Request: #7221

Status

• Accepted

Context

As we continued developing our Jetpack Compose application, we found a need to increase the consistency, reusability, and maintainability of our user interface (UI) components. We have been using Material components directly throughout our application. This lead to a lack of uniformity and increases the complexity of changes as the same modifications had to be implemented multiple times across different screens.

Decision

To address these challenges, we've decided to adopt an Atomic Design System as a foundation for our application UI. This system encapsulates Material components within our own components, organized into categories of atoms, molecules, and organisms. We also defined templates as layout structures that can be flexibly combined to construct pages. These components collectively form the building blocks that we are using to construct our application's UI.

Consequences

• Positive Consequences
  • Increased reusability of components across the application, reducing code duplication.
  • More consistent UI and uniform styling 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.