Naming conventions and naming schema

DS-2 - Getting issue details... STATUS

Introduction

Principles

1. Using atomic design classification

2. Simple and descriptive

3. Scalable

Hierarchical structure (atoms, molecules, organisms, etc.).

Consistent naming rules (descriptive, clear, no abbreviations).

We are following atomic design…

Atomic Design

Atoms

Molecules

Organisms

Rules of Use

Guideline

Naming schema

A naming schema provides consistency, clarity, and ease of reference. By following a set pattern or rules for naming, it becomes easier to identify, manage, and search for items.

In design systems, it's a foundational aspect that helps ensure clarity, efficiency, and successful collaboration across large and diverse teams. It brings method to the potential chaos and lays the groundwork for a design system's long-term success and adaptability.

Structure: [ category ] / [ component ] / [ style ] / [ variant ] / [ size ] / [ state ]
An example would be components/button/standard/primary/small/hover

[ category ] represents the broadest classification (components, organisms, etc.).
[ component ] type represents the specific component being referred to (button, checkbox, toggle, input, etc.).
[ style ] describes the general appearance or behaviour of the component (standard, iconOnly, textOnly, etc.).
[ variant ] specifies the purpose or use-case for the component (primary, secondary, tertiary, information, success, warning, etc.).
[ size ] denotes the component's dimensions or scale (small, medium, large, etc.).
[ state ] describes the current interaction or status of the component (default, hover, focus, active, disabled, etc.).

States

Variants